November 20, 2021
Các bước cấu hình
1. Cài đặt các gói cần thiết#npm install --save ejs
#npm install --save bootstrap
#npm install --save jquery
#npm install --save popper
2. Tạo 1 thư mục views
- Folder: include : chưa cái file được xử dụng lại như : header, footer. nav
- 2 file: index.ejs, about.ejs
index.ejs
<!DOCTYPE html>
<html lang="en">
<% include ('./include/head') %>
<body>
<% include ('./include/nav') %>
<div class="container">
<div class="row">
<h1>Home</h1>
</div>
<hr>
<div class="row">
<p style="height:300px;">Content Here...</p>
</div>
</div>
<% include ('./include/scripts') %>
<% include ('./include/footer') %>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<% include ('./include/head') %>
<body>
<% include ('./include/nav') %>
<div class="container">
<div class="row">
<h1>About</h1>
</div>
<hr>
<div class="row">
<p style="height:300px;">Content Here...</p>
</div>
</div>
<% include ('./include/scripts') %>
<% include ('./include/footer') %>
</body>
</html>
Cầu hình app.js , do ở đây mình sử dụng chung để viết API nên sẽ cấu hình hơi khác.
const express = require('express')
const bodyParser = require('body-parser');
const path = require('path');
const app = express()
var port = process.env.HOST_PORT || 3300;
// Require static assets from public folder--------------------------- EJS
app.use(express.static(path.join(__dirname, 'public')));
// Set 'views' directory for any views
// being rendered res.render()
app.set('views', path.join(__dirname, 'views'));
// Set view engine as EJS
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'ejs');
//-------------------------------------------------------END EJS config
app.listen(port, () => {
console.log("This port: " + port + " is running");
});
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
var router = require('./routes')();
app.use('/', router);
//CORS Middleware
app.use(function (req, res, next) {
//Enabling CORS
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, contentType,Content-Type, Accept, Authorization");
next();
});
Tạo 1 file route.js
- Ở đây mình có require 2 file route, 1 cái của API , 1 cái của view. (API sẽ trình bày trong bày khác
const express = require('express');
function eRoutes() {
const router = express.Router();
var user = require('./routes/user.routes')(router);
var view = require('./routes/view.routes')(router);
return router;
}
module.exports = eRoutes;
Tạo 1 thư mục route, để chưa file route
Tạo 1 file view.route.js trong thư mục route
const express = require('express');
module.exports = function (router) {
router.get('/', (req, res) => {
console.log('Request for home recieved');
res.render('index');
});
router.get('/about', (req, res) => {
console.log('Request for about page recieved');
res.render('about');
});
router.get('/contact', (req, res) => {
console.log('Request for contact page recieved');
res.render('contact');
});
}
Xem kết quả nào:
Trang home
Trang About
