My SQL 설치
MySQL 설치 후, DBeaver도 설치 해준 후 DB연결을 해줬다.
ikaes라는 db 안에 user라는 테이블을 만들어 준다.
create table user(
email varchar(30) ,
name varchar(30) ,
pw varchar(30) )
연동을 위해 MySQL 노드 모듈 설치
npm instal mysql --save여태 반복 해왔지만, 설치 후 이제 메인에 정의 해줘야 사용이 가능하다.
선언을 해준 후 접속 정보를 입력 해줘야 한다.
(spring 사용 할 때 properties 설정 해줬던 것 처럼)
https://expressjs.com/ko/guide/database-integration.html#mysql
공식 문서 db연결에 대한 내용이 있다.
app.js 안에 내용을 작성 해주자
var mysql = require('mysql')
var connection = mysql.createConnection({
host : 'localhost',
// port : 3306 생략 가능
user : '설정한 유저 이름',
password : '비밀번호'
});
connection.connect();
작성 했다면 db서버에 제대로 연결되어 node 서버가 구동 되는지 테스트 겸 서버를 켜보자
제대로 서버가 돌아간다.
이제 테스트 용 더미데이터를 테이블에 넣자
insert into user values('test@test.com', 'tintwo', '123123');
넣고 이전에 비동기 처리했던 부분의 코드를 고쳐주자
app.post('/ajax_send_email', function(req,res){
console.log('#### request.body : ', req.body)
var resData= {}
var email = req.body.email
var query = connection.query('select name from user where email= "' + email + '"', function(err, rows){
if(err) throw err;
if(rows[0]){
// resData.result = 'OK';
console.log(rows[0].name)
}else{
console.log('none: ', rows[0])
}
res.json(resData);
})
// res.json(resData) 여기서 보내주면 비동기로 동작 하기 때문에 콜백함수 안에서
// 데이터를 보내줘야 한다.
})이제 form.html의 스크립트 부분을 수정하자
<body>
<form action="/email_post" method="post">
email : <input type="email" name="email"> <br/>
<!-- count : <input type="number" name="count"> <br/> -->
<!-- name : <input type="text" name="name"><br/> 기존에 입력 받던 이름 사용X-->
submit <input type="submit" onclick="plus">
</form>
<button class="ajax">send </button>
<div>받은 email</div>
<div class="result"></div>
<div>저장된 이름</div>
<div class="name"></div>
<script>
document.querySelector('.ajax').addEventListener('click', function() {
// event등록
var inputdata = document.forms[0].elements[0].value;
// 입력한 email의 value (0번째 폼의, 0번째 요소의 값)
// var inputName = document.forms[0].elements[1].value;
// 사용 안함
var inputArr = {
email : inputdata,
// name : inputName 이제 입력 받은 값 말고 DB를 조회한 값을 사용 할 거라 필요X
};
sendAjax('/ajax_send_email', inputArr);
})
function sendAjax(url, data){
var data = {'email' : data.email, 'name' : data.name };
console.log('@@@@ snedAjax data: ', data)
// console.log('#### type of : ', typeof data)
data = JSON.stringify(data);
// console.log('#### JSON.stringify: ', data)
// console.log('#### type of : ', typeof data)
var xhr = new XMLHttpRequest();
// XMLHttpRequest객체 생성
xhr.open('POST', url);
// open의 첫 파라미터는 methods를 적는다. post인지 get 인지
xhr.setRequestHeader('Content-Type', 'application/json');
// server로 보낼 때 json 타입으로 보내겠다.
xhr.send(data);
xhr.addEventListener('load', function() {
// 응답이 제대로 load 될 때 호출 될 함수
var result = JSON.parse(xhr.responseText);
console.log('받은 데이터 = ', result);
if(result.result !== 'OK' ){ // 조회가 제대로 안되면 li태그 추가
var target = document.querySelector('body')
var li = document.createElement('li')
var liText = 'X your email is not found X'
li.append(liText)
target.append(li)
}else{ // 조회 성공 시 값을 보이도록
document.querySelector('.result').innerHTML = result.email
document.querySelector('.name').innerHTML = result.username
}
});
}
</script>
</body>
</html>이제 결과를 확인 해보자
not found가 뜨도록 잘 처리 됨 그럼 db에 등록된 더미를 넣어보자.
저장된 이름에 제대로 db 조회해서 가져온 이름이 뜬다.
오늘은 여기까지
study records of beginner developer