1、app.js
const express = require('express');
const bodyParser = require('body-parser');
const morgan = require('morgan');
const moment = require('moment');
const path = require('path');
let app = express();
// 注册模板引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// 设置全局变量, 服务器的整个生命周期
let entries = [];
app.locals.entries = entries;
// 设置用户表单提交数据的接收中间件, 所有提交的信息都会保留在req.body
app.use(bodyParser.urlencoded({extended: false}));
app.get('/', (req, res) => {
res.render('index');
});
app.get('/new', (req, res) => {
res.render('new');
});
// 数据提交
app.post('/new', (req, res) => {
// console.log(req.body);
if (!req.body.title || !req.body.content) {
res.status(400).send('留言必须要有标题和内容');
return;
}
// 保留用户的留言
entries.push({
title: req.body.title,
content: req.body.content,
published: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
});
console.log(entries);
// 回到主界面 重定向
res.redirect('/');
});
// 渲染404页面
app.use((req, res) => {
res.status(404).render('404');
});
app.listen(3001, () => {
console.log('服务器已经启动');
});
2、使用ejs搭建页面
2.1 header.js
1 <!doctype html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 7 <title>撩课-留言板</title> 8 </head> 9 <body>
2.2 footer.js
1 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 2 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 3 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 4 </body> 5 </html>
2.3 index.js
1 <% include header.ejs %> 2 3 <h2 class="text-center mt-5 mb-2">撩课-留言板</h2> 4 <div class="text-center"> 5 <a href="/new" class="btn btn-sm btn-danger">我要留言</a> 6 </div> 7 8 <div class="container mt-5 mb-5"> 9 <div class="row"> 10 <% if(entries.length){ %> 11 <% 12 entries.forEach(function (entry) { 13 %> 14 <div class="card mb-3" style=" 100%;"> 15 <div class="card-body"> 16 <h5 class="card-title"> 17 <%= entry.title %> 18 </h5> 19 <h6 class="card-subtitle mb-2 text-muted"> 20 <%= entry.published %> 21 </h6> 22 <p class="card-text"> 23 <%= entry.content %> 24 </p> 25 </div> 26 </div> 27 <% }) %> 28 <% } else { %> 29 暂无留言! <a href="/new">去添加一条留言!</a> 30 <% } %> 31 </div> 32 </div> 33 34 <% include footer.ejs %>
2.4 提交留言的页面
1 <% include header.ejs %> 2 3 <div class="container"> 4 <h3 class="text-center mt-5 mb-2">请写下您的留言</h3> 5 <form method="post" role="form"> 6 <div class="form-group"> 7 <label for="title">留言的标题:</label> 8 <input type="text" class="form-control" id="title" name="title" placeholder="请输入标题..." required> 9 </div> 10 <div class="form-group"> 11 <label for="title">留言的内容:</label> 12 <textarea rows="5" class="form-control" id="content" name="content" placeholder="请输入留言内容..." required> </textarea> 13 </div> 14 <div class="form-group"> 15 <input type="submit" value="提交留言" class="btn btn-danger float-right"> 16 </div> 17 </form> 18 </div> 19 20 <% include footer.ejs %>
2.5 404页面
<% include header.ejs %>
<div class="container text-center mt-5 pt-5 text-danger">
<h2>小撩提示: 404! 您访问的页面不存在!</h2>
</div>
<% include footer.ejs %>
3、项目的依赖
1 { 2 "name": "03-demo", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo "Error: no test specified" && exit 1" 8 }, 9 "author": "", 10 "license": "ISC", 11 "dependencies": { 12 "body-parser": "^1.19.0", 13 "ejs": "^2.6.2", 14 "express": "^4.17.1", 15 "moment": "^2.24.0", 16 "morgan": "^1.9.1" 17 } 18 }