회원가입을 위한 페이지를 만들어보자.
이번에는 폴더를 따로 지정 해줬다.
Router 폴더 안에 join이라는 폴더를 만들고, 그 안에 index.js를 만들자.
index.js
var express = require('express')
var app = express()
var router = express.Router()
var path = require('path')
var mysql = require('mysql')
// db에 접근하기 위함
var connection = mysql.createConnection({
host : 'localhost',
// port : 3306 생략 가능
user : 'root',
password : '****',
database : '****'
});
connection.connect();
router.get('/', function(req, res){
console.log('enter join')
res.render(path.join(__dirname, '../../public/join.html'))
});
module.exports = router;만들어준 후 public 하위에 join.html을 만들자.
join.html
<body>
<h1>MAKE YOUR ACCOUNT</h1>
<form action="/join" method="post">
<div>
email : <input type="email" name="email">
</div>
<div>
name : <input type="text" name="name">
</div>
<div>
password : <input type="password" name="password">
</div>
<div>
<input type="submit">
</div>
</form>
</body>후에 join이라는 router를 설정 했으니 localhost:3000/join으로 요청을 하면
저 페이지가 떠야 한다.
뭐가 문제일까 생각 해보다가 public 파일을 static 폴더로 지정해준 내용을 router처리 하며 지워버린게 아닐까 생각 했으나 남아 있었다.
생각해보니 ejs를 이용한게 아니라
index.js 안에 res.render(path.join(__dirname, '../../public/join.html'))
이 부분을 고쳐줘야 한다.
res.sendFile로 하니 잘 된다.
같은 url로 컨트롤러에 들어와도 method에 따라 다른 방식으로 처리 할 수 있다.
위의 html의 form을 보면 보내는 방식이 post고 join/index.js 부분에서 처리를 하는 부분은
현재 get만 작성되어 있다.
내용을 작성 하고 제출을 눌러보면
404에러가 뜬다.
그럼 post로 처리해주는 부분에서 제대로 데이터가 넘어오는지 확인 해보자.
router.post('/', function(res, req){
var body = req.body
var email = body.email; // form에서 지정한 name으로 들어온다.
var name = body.name;
var pw = body.password;
console.log(body) // 제대로 오는지 확인
})
console에 넘겨준 정보들이 잘 찍혀있다.
그럼 이제 insert 할 수 있도록 추가 해보자.
var query = connection.query('insert into user (email, name, pw) values("' + email + '", "' + name + '"," ' + pw + '")', function(err,rows){
if(err) { throw err;}
console.log('insert member');
})
})내용이 지저분하고 많이 길어졌는데 뭔가 방법이 있을꺼 같은데..
https://www.npmjs.com/package/mysql#escaping-query-values
참고하면 될 것 같다.
이제 내용을 넣고 제출을 눌러보면
방금 정보를 집어넣은 test@test 정보가 user table에 성공적으로 insert 되었다.
하지만
저 화면이 그대로 남아있다.
html 파일로 응답을 해주는 부분을 만들자.
var sql = {email : email, name : name, pw : pw}
var query = connection.query('insert into user set ?', sql, function(err, rows){
if(err) throw err;
else res.render('welcome.ejs', {'name': name})
})
})ejs로 응답하기로 했으니 views 폴더 안에 welcome.ejs 파일을 만들어주자.
welcome.ejs
<body>
<h1>Welcome <%= name %> </h1>
<h2>thanks for join</h2>
</body>간단하게 만들어준 뒤 테스트 해보자.
4
wery[]
asdghj;'
vbnm
왼쪽 windows 키
가 갑자기 너무 스프링 소리가 심한 것 같다 키보드 부터 만지고 해야지
