express+ejs搭建的留言

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="width: 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 }

 

posted @ 2019-07-07 15:02  疏影横斜水清浅  阅读(318)  评论(0)  编辑  收藏  举报