7.[Routing] 처리하기.

라우팅이란 ? 화면과 데이터를 요청에 맞게 넘겨주는 컨트롤러 역할을 함.

 

1. 라우팅 처리를 함에 있어서, 방법은 여러가지이다.

 

  1)  app.js에서 라우팅을 처리해주는 방법.

  2) router 폴더 생성 후 url별로 파일을 만들고 처리해주는 방법(root 라우터는 app.js)

  3) 2번 사항 + root 라우터까지 router  폴더에 작성하는 방법. ( 가독성이 젤 좋음) 

 

     * 개인혼자 플젝 진행할 때, 라우팅 처리 변경하면 기존에 데이터 넘어오는 부분의 주소값도 변경해주어야함.(html파일)

     

     * 라우터 처리에서 이해하기 어려웠던 점

       1) 주소값이 너무 많아서 헷갈리기 마련..

          =>  부모-자식 관계라고 보면 이해하기 쉽다.

         ex) 

         localhost:4000/email/form

         localhost:4000/main

        * 최종 부모 route에서 localhost:4000/ => route 폴더안에 index.js에서 관리. 

        * localhost:4000/email/form  => route 폴더 안에 index.js 아래 있는 email.js에서 관리. 

   

 

2. app.js에서 라우팅을 처리해주는 방법.

var express = require('express');
var app = express();
var bodyParser = require('body-parser'); //post방식으로 데이터 받기위해 사용
var mysql = require('mysql');
var main = require('./router/main');  //만들어진 모듈 호출


var connection = mysql.createConnection({
    host : 'localhost',
    port : 3306,
    user : 'root',
    password : '1q2w3e4r',
    database :'jsman'
});

connection.connect();

app.listen(4000, ()=> {
    console.log("server connect! port : 4000");
});

app.use(express.static('public')); //그림파일 보여주겠다.
app.use(bodyParser.json()); //데이터가 제이슨으로 오면 받아야하고.
app.use(bodyParser.urlencoded({extended:true})); // 클라,서버간 데이터 주고 받을때 인코딩해서 보냄.(아스키형태)
app.set('view engine', 'ejs'); // ejs모듈은 설치만하고 set함수를 통해서 지정만 해주면 익스프레스에서 알아서 찾아쓴다.

app.use('/main', main); // /main으로 주소값이 호출되면 main 모듈을 실행해라.


app.get('/', (req, res)=>{
    // res.send("메인화면");
    res.sendFile(__dirname + "/public/main.html");
});


//form post방식 요청오면 여기서 받아서.
app.post('/email_post', (req, res)=>{
    console.log(req.body.email); //email => html body의 input name값.
    //위의 로그값은 터미널에서 확인할 수있음. 
    // res.send("post response"); //ejs 설치하면render이용해서 값 치환
    res.render('email.ejs',{'email': req.body.email}); 
});

//ajax받아오기
app.post('/ajax_send_email',(req, res)=>{
    console.log("성공",req.body.email);
    var email = req.body.email;
    var responseData = {};  
    //요청받는거 성공했으면 응답해줘야지.
      // 여기에는 요청값 타당한지 검사 하는 부분인데 DB에 쿼리 날려서 정보확인..
        //조회쿼리
       console.log("1");
        var query = connection.query('select name from user where email="' + email+ '"', function (err, rows){
            if(err)  throw err;  
            console.log("2");
            if(rows[0]){                
                responseData.result = "ok";
                responseData.name= rows[0].name;
            }else{                
                responseData.result ="none";
                responseData.name = "";
            }
            console.log("3");
            res.json(responseData);

        });
});

 3. router 폴더 생성 후 url별로 파일을 만들고 처리해주는 방법(root 라우터는 app.js)

   1) app.js 파일

var bodyParser = require('body-parser'); //post방식으로 데이터 받기위해 사용
var mysql = require('mysql');
var main = require('./router/main');  //만들어진 모듈 호출

var email = require('./router/email');

var connection = mysql.createConnection({
    host : 'localhost',
    port : 3306,
    user : 'root',
    password : '1q2w3e4r',
    database :'jsman'
});
connection.connect();
app.listen(4000, ()=> {
    console.log("server connect! port : 4000");
});
app.use(express.static('public')); //그림파일 보여주겠다.
app.use(bodyParser.json()); //데이터가 제이슨으로 오면 받아야하고.
app.use(bodyParser.urlencoded({extended:true})); // 클라,서버간 데이터 주고 받을때 인코딩해서 보냄.(아스키형태)
app.use(bodyParser.urlencoded({extended:true})); // 클라,서버간 데이터 
app.set('view engine', 'ejs'); // ejs모듈은 설치만하고 set함수를 통해서 지정만 해주면 익스프레스에서 알아서 찾아쓴다.

app.use('/main', main); // /main으로 주소값이 호출되면 main 모듈을 실행해라.
app.use('/email', email);

//root 라우터
app.get('/', (req, res)=>{
    // res.send("메인화면");
    res.sendFile(__dirname + "/public/main.html");
});

  2) router폴더 생성 후 라우터 파일.

    (1) email.js    

var express = require('express');
var app = express();
var router = express.Router();   //라우터 메소드 이용.
var path = require('path');  //상대경로 편하기 작성하기 위해서 쓰는 모듈
var mysql = require('mysql');

var connection = mysql.createConnection({
    host : 'localhost',
    port : 3306,
    user : 'root',
    password : '1q2w3e4r',
    database :'jsman'
});

connection.connect();

router.post('/form', (req, res)=>{
    console.log(req.body.email); 
    res.render('email.ejs',{'email': req.body.email}); 
});

//ajax받아오기
router.post('/ajax',(req, res)=>{
    console.log("성공",req.body.email);
    var email = req.body.email;
    var responseData = {};  

       console.log("1");
        var query = connection.query('select name from user where email="' + email+ '"', function (err, rows){
            if(err)  throw err;  
            console.log("2");
            if(rows[0]){                
                responseData.result = "ok";
                responseData.name= rows[0].name;
            }else{                
                responseData.result ="none";
                responseData.name = "";
            }
            console.log("3");
            res.json(responseData);

        });
});

module.exports = router;  //모듈 만든거임. 

    (2) main.js

//기존 app.js에서 작성된 라우터를 모듈로 뻄..
var express = require('express');
var app = express();
var router = express.Router();   //라우터 메소드 이용.
var path = require('path');  //상대경로 편하기 작성하기 위해서 쓰는 모듈

router.get('/', (req, res)=>{  //app.js의 app.use("/main", main);과 주소값이 겹치므로. 여기값을 수정.  router.get~ 으로 시작. 앞에 app아님!!
    //res.send("메인화면");
    console.log("잘나와")
    res.sendFile(path.join(__dirname,"../public/main.html"));  //join을 이용하여 사용,  res.sendFile(__dirname + "../public/main.html"); 
});

module.exports = router;  //모듈 만든거임.

4. 2번 사항 + root 라우터까지 router  폴더에 작성하는 방법. ( 가독성이 젤 좋음) 

   1) app.js

var express = require('express');
var app = express();
var bodyParser = require('body-parser'); //post방식으로 데이터 받기위해 사용
var mysql = require('mysql');
var router = require('./router/index');    // 메인 라우트까지 폴더로 이동햇으므로, 이 부분 수정!

var connection = mysql.createConnection({
    host : 'localhost',
    port : 3306,
    user : 'root',
    password : '1q2w3e4r',
    database :'jsman'
});

connection.connect();

app.listen(4000, ()=> {
    console.log("server connect! port : 4000");
});

app.use(express.static('public')); //그림파일 보여주겠다.
app.use(bodyParser.json()); //데이터가 제이슨으로 오면 받아야하고.
app.use(bodyParser.urlencoded({extended:true})); // 클라,서버간 데이터 주고 받을때 인코딩해서 보냄.(아스키형태)
app.set('view engine', 'ejs'); // ejs모듈은 설치만하고 set함수를 통해서 지정만 해주면 익스프레스에서 알아서 찾아쓴다.

app.use(router); //이 부분추가해야 사용..

2) index.js

//라우터 처리 통합으로 할 곳! 미들웨어 활용

var express = require('express');
var app = express();
var router = express.Router();   //라우터 메소드 이용. 루트 기능이므로 해주어야함.
var path = require('path');  //상대경로 편하기 작성하기 위해서 쓰는 모듈
var main = require('./main');  //만들어진 모듈 호출
var email = require('./email');

router.get('/', (req, res)=>{
    res.sendFile(path.join(__dirname, "../public/main.html"));
});

//여기서 미들웨어개념으로 할 수 있게.
router.use('/main', main); // /main으로 주소값이 호출되면 main 모듈을 실행해라.
router.use('/email', email);

module.exports = router;

3) main.js, eamil.js 변동없음.

 

* 라우팅 처리는 웹사이트 주소 (ex> localhost:8080/use/email /id/...) 에 맞게 폴더화 시켜서 관리할 수도 있다!