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