[Nodejs] get, post방식 간단정리 + ajax + DB

 

 

뷰엔진을 사용안했을 때

import express from "express";
const app = express();  // express
import bodyParser from "body-parser"; // var bodyParser = require('body-parser')

//서버구동
app.listen(3000, function() {
	console.log("express server start on port 3000");
});

//app.use 사용
//static 디렉토리 설정
//public이란 디렉토리에 html(뷰)만들었을 경우 자동으로 해당위치의 url로 접근하면 해당파일을 띄워줌(일일히 매매번 url 설정 귀찮을을때 유용)
app.use(express.static('public'))
app.use(bodyParser.json({extended: true})); //사용자가 웹사이트로 전달하는 정보들을 검사하는 미들웨어
app.use(bodyParser.urlencoded({extended: true})); //json이 아닌 post형식으로올때 파서

//get방식 (위에 static 디렉토리도 설정했으므로 이 밑 코드가없어도 해당 url로 접근하면 뷰를 띄워줄수는 있다.
//하지만 다른 로직 작성 불가
app.get('/', function(req, res){
	//get
    res.sendFile(__dirname + '/public/main.html') //해당 main.html띄워줌
});

//get방식
app.get('/main', function(req,res){
	res.sendFile(__dirname	+ '/public/main.html')
});

//post방식
app.post('/email_post', function(req, res){
	console.log(req.body.email) //bodyParser 모듈 사용한 예, post방식으로 보낸 body에서 email 값 추출가능 
	res.send("<h3>hello " +req.body.email + "</h1>") //화면에 출력
}

 

(권장)

EJS 뷰템플릿엔진 사용했을 때 ,또는  pug도 있음

1. 설치방법  npm install ejs --save    ////    npm install pug --save

둘다 설치만 다르지 사용방법은 비슷한 것 같으므로 처음 배웠던 pug를 이용하도록 하겠음.

 

2. app.set("view engine", "pug"); //pug는 뷰엔진이다. 

 

3. 뷰파일 생성할때 확장자 .ejs , .pug 붙이면됨

동적으로 바뀔것은 <% = email %> 이런식으로함 pug에서는 #{email} 

또한 pug는 밑과 같이 태그 생략가능

doctype html
html
    head
        link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU", crossorigin="anonymous")
        title  #{pageTitle} | #{siteName}
    body
        include ../partials/header
        main
            block content

 

 

뷰엔진을 사용해서 sendFile이 아닌 render()를 통해  데이터와 html을 결합한 상태로 클라이언트에 보여줄 때 사용할때 필요하다.

 

마지막으로 뷰엔진을 사용한 render는 다음과같다. (email 값을 전달해줘서 html과 전달해준 데이터를 결합해서 뷰를 띄워준다.

+)여기서 __dirname은 현재경로를 의미한다. 

 

email_post로 전송하는 form

 

 

 

---

ajax처리

ajax요청 처리 

 

---

 

 

데이터베이스 연결 (참고 => 프로젝트에 mysql이 설치된 상태이고 jsman데이터베이스에 email컬럼을 가진 user테이블을 만들어둔 상태다)

노드에 mysql을 사용할려면 npm install mysql --save

 

view

 

 

요청처리

다른 언어와비슷하다. 쿼리문을 작성후 rows로 해당컬럼을 갖고올 수 있다. 그리고 json형태로 응답을 보내준다.

 

 

 

출처 및 참고 : https://www.inflearn.com/course/node-js-%EC%9B%B9%EA%B0%9C%EB%B0%9C/lecture/6124

Node.js 웹개발로 알아보는 백엔드 자바스크립트의 이해 - 인프런