반응형
app.js에 추가
const ejs = require("ejs");
//html, css 같은것 보여줄때
app.set('view engine', ejs); //view engine은 ejs를 사용한다
app.set('views', './views');
app.use('/public', express.static(__dirname + '/public'));
const express = require('express');
const helmet = require("helmet");
const app = express();
const ejs = require("ejs");
//html, css 같은것 보여줄때
app.set('view engine', ejs); //view engine은 ejs를 사용한다
app.set('views', './views');
app.use('/public', express.static(__dirname + '/public'));
app.use(helmet());
//postman setting
app.use(express.json());
app.use(express.urlencoded());
const mainRouter = require('./router/mainRouter')
app.use('/', mainRouter)
//3000번 포트를 사용 할 것이다
app.listen(3000, function (req, res) {
console.log("port 3000 서버가 실행 되고 있음")
})---
npm install ejs
설치
mainRouter.js
router.get("/", function(req, res) {
//app.js에서 app.set('view', './views')을 사용하였기에,
//항상 views 폴더를 바라보고 있어서 index만 기입하여도 된다
res.render('index')
})
const express = require('express');
const router = express.Router();
router.get("/", function(req, res) {
//app.js에서 app.set('view', './views')을 사용하였기에,
//항상 views 폴더를 바라보고 있어서 index만 기입하여도 된다
res.render('index')
})
router.get("/about", function(req, res) {
res.send('About Page!')
})
router.post("/postapi", function(req, res) {
let body = req.body;
console.log(body)
res.send('post api')
})
module.exports = routerviews-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>
<h1>메인 페이지</h1>
</body>
</html>Error: Cannot find module '[objecgt Object]' 가 표시된다
그러면 index.html 을 index.ejs로 Rename을 한다
근데 소스에서
app.set('view engine', ejs) 를 하면 Cannot find module '[object Object]' 에러가 표시되는데
app.set('view engine', 'ejs') 로 하면 정상적으로 표시된다...
원인은 찾는중이다
npm install ejs --save 해봐도 안됨..
서버에 값을 html에 표시하게 하는 방법은
mainRouter.js에서
res.render('index', {title: "ejs 메인페이지"})
추가
const express = require('express');
const router = express.Router();
router.get("/", function(req, res) {
//app.js에서 app.set('view', './views')을 사용하였기에,
//항상 views 폴더를 바라보고 있어서 index만 기입하여도 된다
res.render('index', {title: "ejs 메인페이지"})
})
router.get("/about", function(req, res) {
res.send('About Page!')
})
router.post("/postapi", function(req, res) {
let body = req.body;
console.log(body)
res.send('post api')
})
module.exports = router
index.ejs
h1 태그 사이에 추가
<%= locals.title%>
<!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><%= locals.title%></h1>
</body>
</html>
css를 적용 하는 방법은
app.js에 해당 코드를 적용 하였었는데
public폴더를 생성하고 그 안에 main.css를 생성한다
app.use('/public', express.static(__dirname + '/public')); //public 폴더를 참조해라는 의미
main.css
index.ejs
head 태그 사이에
<link href="/public/main.css" rel="stylesheet"/>
추가
<!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>
<link href="/public/main.css" rel="stylesheet"/>
</head>
<body>
<h1><%= locals.title%></h1>
</body>
</html>
반응형
'Node.Js' 카테고리의 다른 글
| [Node.js] MySQl Sequelize 설정 (0) | 2023.01.14 |
|---|---|
| [Node.js] mac에서 MySQL 설치 (access denied for user 'root'@'localhost' using password: yes) (0) | 2023.01.14 |
| [Node.js] post 방식으로 값 확인 postman 설치 (0) | 2023.01.14 |
| [Node.js] query (0) | 2023.01.14 |
| [Node.js] 크롬 JSON Viewer 설치 (0) | 2023.01.14 |
