반응형
1. 오늘 한 최종js, html2개, env 외우기
2. 어제 한거 app.post 부분 외우기
3. 다시 새로운 파일 만들어서 따라 해보기-> 내일..
4. 숙제하기
1. 외우자
express-> nunjucks -> body-parser -> mysql -> dotenv
------------------------------------------------------안보고 쳐보기 1-----------------------------------------------------------
-> connection 부분 보고침
-> 문제 : env - database, password 부분만 안됨.
-> 문제 해결 ! .env 파일을 views 파일 안에 넣어놓아서 안됐다.
JS
require('dotenv').config();
const express=require('express');
const app=express();
const nunjucks = require('nunjucks');
const bodyParser = require('body-parser');
const mysql=require('mysql');
const port = process.env.SERVER_PORT ||3000
nunjucks.configure('views',{
express:app,
})
let connection = mysql.createConnection({
host:process.env.DB_HOST,
user:'root',
password:'5353',
database:process.env.DB_DATABASE,
})
connection.connect();
app.set('view engine', 'html');
app.use(bodyParser.urlencoded({extended:false}));
app.get('/', (req,res)=>{
res.render('index',{
name:'emily',
id:'gugugu',
pw:'1234',
});
})
app.get('/join', (req,res)=>{
res.render('index', {
name:req.query.user_name,
id:req.query.user_id,
pw:req.query.user_pw,
gender:req.query.user_gender,
})
});
app.post('/join', (req,res)=>{
let Name = req.body.user_name;
let Id = req.body.user_id;
let Pw = req.body.user_pw;
let Gender = req.body.user_gender;
let sql = `insert into list1 (name, id, pw, gender) values ('${Name}', '${Id}', '${Pw}', '${Gender}')`;
connection.query(sql, (error, results)=>{
if(error){
console.log(error);
}else{
console.log(results);
}
});
res.render('join',{
name:req.body.user_name,
id:req.body.user_id,
pw:req.body.user_pw,
gender:req.body.user_gender,
})
})
app.listen(port,()=>{
console.log(`server start port :${port}`);
})
html index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
I am INDEX <br />
Your name is {{name}} <br />
and your ID is {{id}} <br />
and your PW is {{pw}} <br />
<form method="post" action="/join">
NAME:<input type="text" name="user_name" > <br/>
ID: <input type="text" name="user_id"> <br/>
PW: <input type="text" name="user_pw"> <br/>
Gender: <input type="text" name="user_gender"><br/>
<input type="submit" value ="submit!">
</form>
</body>
</html>html join
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{{name}}님 환영합니다 <br/>
{{name}}님의 ID는 {{id}} 이며 <br/>
비밀번호는 {{pw}}입니다. <br/>
당신의 성별은 {{gender}}입니다.
</body>
</html>
---------------------------------------------------------2번째 ----------------------------------------------------------
js
require('dotenv').config();
const express=require('express');
const nunjucks = require('nunjucks');
const app = express();
const bodyParser = require('body-parser');
const mysql = require('mysql');
const port = process.env.SERVER_PORT ||3000;
nunjucks.configure('views', {
express:app,
})
app.use(bodyParser.urlencoded({extended:false}));
app.set('view engine', 'html');
let connection = mysql.createConnection({
host:'localhost',
user:'root',
password:'5353',
database:'emily',
})
// host:process.env.DB_HOST,
// user:process.env.DB_USER,
// password:process.env.DB_PASSWORD,
// database:process.env.DB_DATABASE,
connection.connect();
app.get('/',(req,res)=>{
res.render('index')
});
app.get('/join',(req,res)=>{
res.render('join', {
name:req.query.user_name,
id:req.query.user_id,
pw:req.query.user_pw,
gender:req.query.user_gender,
})
})
app.post('/join',(req,res)=>{
let name=req.body.user_name;
let id=req.body.user_id;
let pw=req.body.user_pw;
let gender=req.body.user_gender;
let sql = `insert into list1 (name,id,pw,gender) values ('${name}', '${id}','${pw}','${gender}')`
connection.query(sql,(error,results)=>{
if(error){
console.log(error);
}else{
console.log(results);
res.render('join',{
name:req.body.user_name,
id:req.body.user_id,
pw:req.body.user_pw,
gender:req.body.user_gender,
})
}
})
})
app.listen(port,()=>{
console.log(`server start port : ${port}`)
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Join us now! <br/>
<br/>
<br/>
<form method = "post" action="/join">
Name : <input type="text" name = "user_name"><br/>
ID : <input type="text" name="user_id"><br/>
PW : <input type="text" name="user_pw"><br/>
gender : <input type="text" name="user_gender"><br/>
<br/>
<input type="submit" value="SUBMIT NOW!"><br/>
</form>
</body>
</html>
join.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Welcome {{name}}! <br/><br/>
Thank you for joining us! <br/>
Your ID is {{id}}, PW is {{pw}} and <br/>
your gender is {{gender}}. <br/>
<br>
Press the button if you want to go back to the main page. <br/>
<a href="/">back</a>
</body>
</html>
문제 : env 가 또 안됨
env 오류
throw err; // Rethrow non-MySQL errors
In my case, every time I tried to get a key from the .env file using process.env.MY_KEY, it returned undefined.
I suffered from this problem for two hours just because I named the file something like keys.env which is not considered to be a .env file.
So here is the troubleshooting list:
- The filename should be .env (I believe .env.test is also acceptable).
- Make sure you are requiring it as early as possible in your application using this statement require('dotenv').config();
- The .env file should be in the root directory of your project.
- Follow the "file writing rules" like DB_HOST=localhost, no need to wrap values in double/single quotes.
-> 해결안됨
반응형
