zuzitsu / UR_Village

Go to a project
Toggle navigation Toggle navigation pinning
Suyeon Jung
4abe902e 1 parent adbdcfbe

Revise template engine from pug to ejs and Modify directory structure

Inline Side-by-side
Showing 20 changed files with 147 additions and 109 deletions
...@@ -7,20 +7,22 @@ var logger = require('morgan'); ...@@ -7,20 +7,22 @@ var logger = require('morgan');
7 var indexRouter = require('./routes/index'); 7 var indexRouter = require('./routes/index');
8 var usersRouter = require('./routes/users'); 8 var usersRouter = require('./routes/users');
9 var categoryRouter = require('./routes/category'); 9 var categoryRouter = require('./routes/category');
10 +var vendorRounter = require('./routes/vendors');
10 var app = express(); 11 var app = express();
11 var bodyParser = require('body-parser'); 12 var bodyParser = require('body-parser');
12 // view engine setup 13 // view engine setup
13 app.set('views', path.join(__dirname, 'views')); 14 app.set('views', path.join(__dirname, 'views'));
14 -app.set('view engine', 'pug'); 15 +app.set('view engine', 'ejs');
15 16
16 app.use(logger('dev')); 17 app.use(logger('dev'));
17 app.use(express.json()); 18 app.use(express.json());
18 app.use(express.urlencoded({ extended: false })); 19 app.use(express.urlencoded({ extended: false }));
19 app.use(cookieParser()); 20 app.use(cookieParser());
20 -app.use(express.static(path.join(__dirname, '/static'))); //정적파일 위치 21 +app.use(express.static(path.join(__dirname, '/public'))); //정적파일 위치
21 app.use('/', indexRouter); 22 app.use('/', indexRouter);
22 app.use('/users', usersRouter); 23 app.use('/users', usersRouter);
23 app.use('/category', categoryRouter); 24 app.use('/category', categoryRouter);
25 +app.use('/vendors/bootstrap', express.static(path.join(__dirname, "./node_modules/bootstrap/dist")));
24 app.use(bodyParser.urlencoded({ extended: false })); 26 app.use(bodyParser.urlencoded({ extended: false }));
25 27
26 // catch 404 and forward to error handler 28 // catch 404 and forward to error handler
......
...@@ -6,9 +6,11 @@ ...@@ -6,9 +6,11 @@
6 "start": "nodemon ./bin/www" 6 "start": "nodemon ./bin/www"
7 }, 7 },
8 "dependencies": { 8 "dependencies": {
9 + "bootstrap": "^4.5.3",
9 "cookie-parser": "~1.4.4", 10 "cookie-parser": "~1.4.4",
10 "debug": "~2.6.9", 11 "debug": "~2.6.9",
11 "dotenv": "^8.2.0", 12 "dotenv": "^8.2.0",
13 + "ejs": "^3.1.5",
12 "express": "~4.16.1", 14 "express": "~4.16.1",
13 "http-errors": "~1.6.3", 15 "http-errors": "~1.6.3",
14 "morgan": "~1.9.1", 16 "morgan": "~1.9.1",
......
1 +.row {
2 + padding-left: 15px;
3 + padding-right: 15px;
4 +}
5 +
6 +.card-body {
7 + text-align: center;
8 +}
...\ No newline at end of file ...\ No newline at end of file
1 body { 1 body {
2 - padding: 50px; 2 + padding: 100px;
3 - font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; 3 + font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
4 } 4 }
5 5
6 -a { 6 +body .gyeonggi {
7 - color: #00B7FF; 7 + display: inline-block;
8 + vertical-align: center;
9 + margin-left: auto;
10 + margin-right: auto;
8 } 11 }
9 -.title{ 12 +
10 - vertical-align: middle; 13 +.title {
11 - text-align: center; 14 + vertical-align: middle;
12 - font: "serif"; 15 + text-align: center;
13 - 16 + font: "serif";
14 } 17 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -9,7 +9,6 @@ let SIGUNDONG_CODE; ...@@ -9,7 +9,6 @@ let SIGUNDONG_CODE;
9 9
10 // 사용자가 index 페이지에서 주소를 입력하고 넘어오면 10 // 사용자가 index 페이지에서 주소를 입력하고 넘어오면
11 router.post('/', function(req, res) { 11 router.post('/', function(req, res) {
12 - console.log(req.body);
13 let userLocation = req.body.userLocation; 12 let userLocation = req.body.userLocation;
14 // let userSi = req.body.si 13 // let userSi = req.body.si
15 // let userDong = req.body.dong; 14 // let userDong = req.body.dong;
...@@ -37,7 +36,7 @@ router.post('/', function(req, res) { ...@@ -37,7 +36,7 @@ router.post('/', function(req, res) {
37 console.log(xyList); 36 console.log(xyList);
38 } 37 }
39 }) 38 })
40 - res.render('category', { 'userLocation': req.body.userLocation }); 39 + res.render('category', { userLocation: req.body.userLocation });
41 }); 40 });
42 41
43 router.get('/food', function(req, res) { 42 router.get('/food', function(req, res) {
......
1 +var express = require('express');
2 +var router = express.Router();
3 +var path = require('path');
4 +router.use('/bootstrap', express.static(path.join(__dirname, "../node_modules/bootstrap/dist")));
5 +
6 +module.exports = router;
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +
4 +<head>
5 + <meta charset="UTF-8">
6 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 + <link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap.min.css' />
8 + <link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap-grid.min.css' />
9 + <link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap-reboot.min.css' />
10 + <link rel='stylesheet' href='/css/category.css'>
11 +
12 + <title>📝 진단 검사</title>
13 +</head>
14 +
15 +<body>
16 +
17 +
18 + <div class="jumbotron jumbotron-fluid">
19 + <div class="container">
20 + <h3>
21 + 🔎 검색한 동네 :
22 + <%=userLocation%>
23 + </h3>
24 + </div>
25 + </div>
26 + <div class="row">
27 + <div class="card" style="width: 18rem;">
28 + <img src="/img/restaurant.jpg" class="card-img-top" alt="...">
29 + <div class="card-body">
30 + <h5 class="card-title">음식</h5>
31 + <p class="card-text">주변 음식점의 수</p>
32 + <a href="#" class="btn btn-primary">검사!</a>
33 + </div>
34 + </div>
35 + <div class="card" style="width: 18rem;">
36 + <img src="/img/school.jpg" class="card-img-top" alt="...">
37 + <div class="card-body">
38 + <h5 class="card-title">학군</h5>
39 + <p class="card-text">주변 학교, 학원 환경</p>
40 + <a href="#" class="btn btn-primary">검사!</a>
41 + </div>
42 + </div>
43 + <div class="card" style="width: 18rem;">
44 + <img src="/img/park.jpg" class="card-img-top" alt="...">
45 + <div class="card-body">
46 + <h5 class="card-title">공원</h5>
47 + <p class="card-text">주변 공원</p>
48 + <a href="#" class="btn btn-primary">검사!</a>
49 + </div>
50 + </div>
51 + <div class="card" style="width: 18rem;">
52 + <img src="/img/transport.jpg" class="card-img-top" alt="...">
53 + <div class="card-body">
54 + <h5 class="card-title">대중교통</h5>
55 + <p class="card-text">대중교통 편리도</p>
56 + <a href="#" class="btn btn-primary">검사!</a>
57 + </div>
58 + </div>
59 + <div class="card" style="width: 18rem;">
60 + <img src="/img/safe.jpg" class="card-img-top" alt="...">
61 + <div class="card-body">
62 + <h5 class="card-title">안전</h5>
63 + <p class="card-text">주변 경찰서, 범죄자 인근~</p>
64 + <a href="#" class="btn btn-primary">검사!</a>
65 + </div>
66 + </div>
67 + <div class="card" style="width: 18rem;">
68 + <img src="/img/cultural_life.jpg" class="card-img-top" alt="...">
69 + <div class="card-body">
70 + <h5 class="card-title">여가</h5>
71 + <p class="card-text">주변 문화시설</p>
72 + <a href="#" class="btn btn-primary">검사!</a>
73 + </div>
74 + </div>
75 + </div>
76 +
77 +</body>
78 +
79 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 -doctype html
2 -head
3 - title #{si} #{dong}
4 - <div class ="title">
5 - h1(style = "text-align : center") 당신의 동네 : #{userLocation}
6 - </div>
7 - link(rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css')
8 - style.
9 - p { margin:20px 0px; }
10 - .container
11 - .row
12 - .col-4
13 - .card
14 - .text-center
15 - .card-image
16 - img(src='/restaurant.jpg' style='width:auto; height:auto; max-width:350px; max-height: 200px;')
17 - .card-body
18 - h5.card-title 음식
19 - p.card-text(style = 'text-align: center;')
20 - | 주변 음식점의 수
21 - a.btn.btn-primary(href='/category/food') 검사!
22 - .col-4
23 - .card
24 - .text-center
25 - .card-image
26 - img(src='/school.jpg' style='width:auto; height:auto; max-width:350px; max-height: 200px;')
27 - .card-body
28 - h5.card-title 학군
29 - p.card-text
30 - | 주변 학교, 학원 환경
31 - a.btn.btn-primary(href='/category/school') 검사!
32 - .col-4
33 - .card
34 - .text-center
35 - .card-image
36 - img(src='/park.jpg' style='width:auto; height:auto; max-width:350px; max-height: 200px;')
37 - .card-body
38 - h5.card-title 공원
39 - p.card-text
40 - | 주변 공원
41 - a.btn.btn-primary(href='/category/park') 검사!
42 - .col-4
43 - .card
44 - .text-center
45 - .card-image
46 - img(src='/public_transport.jpg' style='width:auto; height:auto; max-width:350px; max-height: 200px;')
47 - .card-body
48 - h5.card-title 대중교통
49 - p.card-text
50 - | 대중교통 편리도
51 - a.btn.btn-primary(href='/category/transport') 검사!
52 - .col-4
53 - .card
54 - .text-center
55 - .card-image
56 - img(src='/safe.jpg' style='width:auto; height:auto; max-width:350px; max-height: 200px;')
57 - .card-body
58 - h5.card-title 안전
59 - p.card-text
60 - | 주변 경찰서, 범죄자 인근~~
61 - a.btn.btn-primary(href='/category/safe') 검사!
62 - .col-4
63 - .card
64 - .text-center
65 - .card-image
66 - img(src='/cultural_life.jpg' style='width:auto; height:auto; max-width:350px; max-height: 200px;')
67 - .card-body
68 - h5.card-title 여가
69 - p.card-text
70 - | 문화시설
71 - a.btn.btn-primary(href='/category/culture') 검사!
72 -
1 +<h1>
2 + <%= message %>
3 +</h1>
4 +<h2>
5 + <%= error.status %>
6 +</h2>
7 +<pre><%= error.stack %></pre>
...\ No newline at end of file ...\ No newline at end of file
1 -extends layout
2 -
3 -block content
4 - h1= message
5 - h2= error.status
6 - pre #{error.stack}
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +
4 +<head>
5 + <meta charset="UTF-8" />
6 + <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 + <!-- <link rel="stylesheet" href="/css/style.css"> -->
8 + <link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap.min.css' />
9 + <link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap-grid.min.css' />
10 + <link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap-reboot.min.css' />
11 + <title>🏡 How about the Village?</title>
12 +</head>
13 +
14 +<body>
15 + <img class="gyeonggi" src="/img/logo.png">
16 +
17 + <form action="/category" method="post" name="location">
18 + <!-- <input type="text" id="userLocation" name="userLocation" placeholder="당신의 동네 주소를 입력해주세요(시/구/동)">
19 + <input type="submit" id="search" value="검색"> -->
20 + <div class="form-group">
21 + <label for="exampleFormControlInput1">당신이 조사하고 싶은 동네의 주소를 입력하세요!</label>
22 + <input type="text" class="form-control" id="exampleFormControlInput1" name="userLocation" placeholder="당신의 동네 주소를 입력해주세요(시/구/동)">
23 + </div>
24 + <button type="submit" class="btn btn-primary">검색</button>
25 + </form>
26 +</body>
27 +
28 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 -doctype html
2 -html
3 - head
4 - title= title
5 - link(rel='stylesheet', href='stylesheets/style.css')
6 - body
7 - img.image(src='/logo.png')
8 - form(action='/category' method='post' name='location')
9 - input(type="text" id='userLocation' name='userLocation' placeholder="당신의 동네 주소를 입력해주세요(시/구/동)" style="width: 300px; height: 30px;")
10 - input(type="submit" value="검색")
11 -
1 -doctype html
2 -html
3 - head
4 - title= title
5 - link(rel='stylesheet', href='/stylesheets/style.css')
6 - body
7 - block content