728x90
server.js
더보기
const http = require('http');
const express = require('express');
const { error } = require('console');
const app = express();
//app.set('post', 3000);
// a += 10; --> a = a + 10;
// process.env.PORT != false && process.env.PORT : 3000;
app.set('port', process.env.PORT || 3000);
app.set("view engine", "ejs");
// 리소스 폴더 추가 (serve-static)
app.use(express.static('public'));
let dataObject = {
message: "Gildong shop",
carList: ['Sonata','Grandeur','Santafe']
}
let carList = [
{no:1, name: 'Sonata', price:2500, company:'HUNDAI', year:2020},
{no:2, name: 'Grandeur', price:3500, company:'HUNDAI', year:2022},
{no:3, name: 'K7', price:3500, company:'KIA', year:2021},
{no:4, name: 'S520', price:9500, company:'벤츠', year:2019}
]
// =================app.get================
// req: request, res: response
app.get('/', function(req, res) {
res.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'});
res.write('<html><body>');
res.write('<h1>길동이의 홈페이지</h1>');
res.write('<br><a href="/home">Home으로 이동</a>');
res.write('<br><a href="/carList2">carList2 이동</a>');
res.write('<br><a href="/helloparam?name=zenna">파라미터 체크</a>');
res.write('</body></html>');
res.end(); // close 하지 않으면 무한루프 됨.
});
app.get('/carList', (req, res) => {
res.send(dataObject);
});
app.get('/helloparam', (req,res)=>{
console.log(req.query.name);
res.render('helloparam',{name : req.query.name, carList});
})
// app.get('/carList2', (req, res) => {
// console.log("enterend")
// req.app.render('carList2', {carList}, (err,html)=>{
// // console.log(html);
// res.end(html);
// });
// });
app.get('/carList2', (req, res) => {
if(typeof req.query.typ ==='undefined'){
res.render('carList2', {nos:"",carList});
}else{
let que = req.query;
switch(que.typ){
case 'detail':
console.log("nos : "+que.no)
res.render('carList2', {nos:req.query.no,carList});
case 'edit':
res.render('carList2', {noe:req.query.no,carList});
}
}
res.end();
});
app.get('/home', function(req, res) {
res.render('home');
});
app.get('/caradd',(req,res)=>{
let qur = req.query;
let no=1;
if (typeof qur.no==='undefined'){
no = carList[carList.length-1].no +1;
}else{
no = 1;
}
carList.push({no:no, name:qur.name, price:qur.price*1, company:qur.company, year:qur.year*1})
res.render('carList2', {nos:"",carList});
})
app.get('/removethis',(req,res)=>{
for(let i = 0; i < carList.length; i++){
if (carList[i].no == req.query.no) {
carList.splice(i, 1);
i--;
}
}
res.render('carList2', {nos:"",carList});
})
const server = http.createServer(app);
server.listen(app.get('port'), ()=>{
console.log('Listening on port: ' + app.get('port'));
});carList2.ejs
더보기
<!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>
<h1><a href="/carList2">자동차, 신발보다 싸다!</a></h1>
<hr/>
<div class="newCar">
<p>새로운 자동차를 추가합니다</p>
<form action="/caradd" method="get">
<input type="text" value="각그랜저" name="name"/>
<input type="text" value="zennaMoters" name="company"/>
<input type="number" value="9000" name="price"/>
<input type="number" value="2022" name="year"/>
<input type="submit" value="추가하기"/>
</form>
<hr/>
</div>
<h1>자동차 목록</h1>
<table width="100%" border="1" style="text-align: center;">
<tr>
<th>NO</th>
<th>NAME</th>
<th>DELETE/EDIT</th>
</tr>
<% carList.forEach((car) =>{ %>
<tr>
<td>
<%=car.no %>
</td>
<td>
<a href="/carList2?typ=detail&no=<%=car.no%>">
<%=car.name %>
</a>
</td>
<td>
<a href="/removethis?no=<%=car.no%>"><button>삭제</button></a>
<a href="/removethis?no=<%=car.no%>"><button>수정</button></a>
</td>
</tr>
<% }); %>
</table>
<% if(nos!==""){
carList.forEach((item)=>{
if(item.no==nos){ %>
<div class="a02">
<p>==========상세페이지============</p>
<table width="100%" border="1" style="text-align: center;">
<tr>
<th>NO</th>
<th>NAME</th>
<th>PRICE</th>
<th>COMPANY</th>
<th>YEAR</th>
</tr>
<tr>
<td>
<%=item.no %>
</td>
<td>
<%=item.name %>
</td>
<td><%=item.price %></td>
<td><%=item.company %></td>
<td><%=item.year %></td>
</tr>
</table>
</div>
<% }
})
} %>
</body>
</html>처음 접속
자동차 이름을 클릭했을 시
데이터 삭제 버튼 클릭 시
추가하기
업데이트 기능은 아직 작성중입니다!
728x90
'Java > 비트교육센터 과제' 카테고리의 다른 글
| 09.06 과제 (박스 드래그) (0) | 2022.09.06 |
|---|---|
| [09/05] 과제 (javaScript) (0) | 2022.09.05 |
| [8/24] 장바구니 삭제/추가 (0) | 2022.08.24 |
| 8/23복습 (0) | 2022.08.24 |
| [과제1] DAO와 DTO로 jsp에 내용 출력 (0) | 2022.08.18 |
댓글