留言板功能

app.js

  1. // app.js
  2. const express = require('express');
  3. const moment = require('moment');
  4. const path = require('path');
  5. const morgan = require('morgan');
  6. const bodyParser = require('body-parser');
  8. const app = express();
  10. // 注册模版引擎
  11. app.set('views', path.join(__dirname, 'views'));
  12. app.set('view engine', 'ejs');
  14. // 设置post接收中间件，所有提交的数据都会保留在req.body
  15. // extended: false：表示使用系统模块querystring来处理，也是官方推荐的
  16. // extended: true：表示使用第三方模块qs来处理
  17. app.use(bodyParser.urlencoded({extended:false}));
  19. // 设置全局变量，服务器整个生命周期
  20. let entries = [];
  21. app.locals.entries = entries;
  23. app.get('/', (req, res) => {
  24.   res.render('index.ejs');
  25. });
  27. app.get('/new', (req, res) => {
  28.   res.render('new.ejs');
  29. });
  31. // 数据提交
  32. app.post('/new',(req,res)=>{
  33.   console.log(req.body);
  34.   if(!req.body.title || !req.body.content){
  35.     res.status(400).send('留言必须要有标题和内容');
  36.     return '';
  37.   }
  38.   // 保留用户的留言
  39.   entries.push({
  40.     title: req.body.title,
  41.     content: req.body.content,
  42.     published: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
  43.   });
  45.   console.log(entries);
  46.   // 回到主页面，重定向
  47.   res.redirect('/');
  48. });
  50. // 渲染404页面
  51. app.use((req, res) => {
  52.   res.status(404).render('404.ejs');
  53. });
  55. app.listen(3000, () => {
  56.   console.log('服务器启动！');
  57. });

view

index.ejs

  1. <%- include('header.ejs') %>
  3. <h2 class="text-center mt-5">GoBig-留言板</h2>
  4. <div class="text-center mt-3 mb-5">
  5.     <a href="/new" class="btn btn-sm btn-danger">我要留言</a>
  6. </div>
  8. <div class="container">
  10.     <div class="row mt-3">
  11.         <% if(entries.length){ %>
  12.             <% entries.forEach(function (entry) { %>
  13.                 <div class="card mt-2" style="width: 100%;">
  14.                     <div class="card-body">
  15.                         <h5 class="card-title"><%= entry.title %></h5>
  16.                         <h6 class="card-subtitle mb-2 text-muted"><%= entry.published %></h6>
  17.                         <p class="card-text"><%= entry.content %></p>
  18.                     </div>
  19.                 </div>
  20.             <% }) %>
  21.         <% } %>
  22.     </div>
  24. </div>
  27. <script>
  29. </script>
  31. <%- include('footer.ejs') %>

new.ejs

  1. // new.ejs
  2. <%- include('header.ejs') %>
  4. <div class="container">
  5.     <div class="row mt-5">
  6.         <div class="col">
  7.             <h3 class="text-center">请写下您的留言</h3>
  8.         </div>
  9.     </div>
  10.     <div class="row">
  11.         <div class="col">
  12.             <form method="post" role="form">
  13.                 <div class="form-group">
  14.                     <label for="title">留言标题</label>
  15.                     <input type="text" class="form-control " id="title" name="title" placeholder="请输入标题...">
  16.                 </div>
  17.                 <div class="form-group">
  18.                     <label for="title">留言内容</label>
  19.                     <textarea rows="5" class="form-control " id="content" name="content" placeholder="请输入留言内容..."></textarea>
  20.                 </div>
  21.                 <div class="form-group">
  22.                     <input type="submit" class="btn btn-info float-right" value="提交留言">
  23.                 </div>
  24.             </form>
  25.         </div>
  26.     </div>
  27. </div>
  29. <%- include('footer.ejs') %>

404.js

  1. <%- include('header.ejs') %>
  3. <div class="position-relative" style="height: 1000px;">
  4.     <div class="h-75 ">
  5.         <h2 class="text-center text-danger bg-primary m-auto" style="height:100px;line-height:100px;position: absolute;top: 0;bottom: 0;right: 0;left: 0">404这个页面找不到啦找不到啦</h2>
  6.     </div>
  7. </div>
  9. <%- include('footer.ejs') %>

header.js

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
  9.     <title>GoBig</title>
  10. </head>
  11. <body>

footer.js

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "ejs": "^3.1.3",
    "express": "^4.17.1",
    "body-parser": "^1.19.0",
    "moment": "^2.27.0",
    "morgan": "^1.10.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}