运行效果

运行步骤

安装所需依赖npm install
运行app.js后即可访问http://localhost:3000/

知识点

执行npm init 初始化包
安装所需依赖>npm i body-parser ejs express moment morgan --save
格式化时间moment(new Date()).format('YYYY-MM-DD HH:mm:ss')

ejs 模板引擎的运用

// 注册模板引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

设置用户表单提交数据的接收中间件

// 设置用户表单提交数据的接收中间件,所有提交的信息都会保存在req.body
app.use(bodyParser.urlencoded({extended:false}));

界面重定向

// 回到主界面 重定向
res.redirect('/');

设置全局变量，运用于服务器整个生命周期。
```
let entries = [];
app.locals.entries = entries;
```

代码

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,next)=>{// 判断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'),});// 回到主界面 重定向res.redirect('/');
});
// 渲染404界面
app.use((req,res)=>{res.status(404).render('404');
});
app.listen(3000,()=>{console.log('服务器已经启动');
});

header.ejs

<!doctype html>
<html lang="zh-cn">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><title>留言板</title>
</head>
<body>

footer.ejs

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

index.ejs

<%- include('header'); -%><h2 class="text-center mt-5 mb-2">留言板</h2>
<div class="text-center"><a href="/new" class="btn btn-sm btn-danger">留言</a>
</div>
<div class="container mt-2 mb-2"><div class="row"><% if(entries.length){%><%entries.forEach(function (entry) {%><div class="card mb-2" style="width: 100%;"><div class="card-body"><h5 class="card-title"><%=entry.title%></h5><h6 class="card-subtitle mb-2 text-muted"><%=entry.published%></h6><p class="card-text"><%=entry.content%></p></div></div><%})%><%} else{%><span class="p-2">暂无留言!</span><a class="p-2"href="/new">去添加一条留言</a><%}%></div>
</div>
<%- include('footer'); -%>

404.ejs

<%- include('header'); -%>
<div class="container text-center mt-5 mp-5 text-danger"><h2>提示：404！您访问的页面不存在</h2>
</div>
<%- include('footer'); -%>

new.ejs

<%- include('header'); -%><div class="container"><h3 class="text-center mt-4 mb-3">请写下留言:</h3><form method="post" role="form"><div class="form-group"><label for="title">留言的标题：</label><input type="text" class="form-control" id="title" name="title" placeholder="请输入标题" required></div><div class="form-group"><label for="title">留言的内容：</label><textarea rows="5" style="resize: none" class="form-control" id="content" name="content" placeholder="请输入内容" required></textarea></div><div class="form-group"><input type="submit" value="提交留言" class="btn btn-danger float-right"></div></form>
</div><%- include('footer'); -%>

实战Node：Node实现留言板相关推荐

朴素贝叶斯实战（Python屏蔽留言板的侮辱性言论）
项目概述构建一个快速过滤器来屏蔽留言板上的侮辱性言论.如果某条留言使用了负面或者侮辱性的语言,那么就将该留言标识为内容不当.对此问题建立两个类别: 侮辱类和非侮辱类,使用 1 和 0 分别表示. 准 ...
Vue实战篇二十九：模拟一个简易留言板
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
android中留言板功能,js 实现简易留言板功能
无标题文档 li{list-style:none;} li{position:relative;width:500px;} a{position:absolute;right:10px;} var c ...
PHP初级练习实战之公司留言板（原生）
PHP初级练习实战之留言板初学者做的东西,有的地方写的不好,哈哈哈! 一.知识重点 1.三目运算 $page= empty($_GET['p']) ? 1: $_GET['p']; 2.数据库的操作 ...
机器学习实战4.2 朴素贝叶斯案例：屏蔽社区留言板的侮辱性言论
机器学习实战4.2 朴素贝叶斯案例:屏蔽社区留言板的侮辱性言论参考地址:https://cuijiahua.com/blog/2017/11/ml_4_bayes_1.html 一.引子很久没更新 ...
React实战：留言板
留言板一.展示留言板功能:"增加留言","删除留言","修改留言" 二.组件设计 CommentBox是顶层组件,里面包含 Commen ...
Thinkphp5实战之留言板
本节主要通过Thinkphp5来实现简易留言板的基本功能.麻雀虽小,五脏俱全.从以下几个方面来进一步认识Thinkphp5,包括:目录布局.MCV的运用.对数据的增删改查.留言板功能逻辑等.打牢基础, ...
python+Mysql+flask架构的在线留言板实战
在线留言板实战项目说明文档用python操作mysql完成一个在线留言板系统 1.设计留言板表 2.通过python语言实现 1 项目基本功能留言板系统主要功能:(要求使用类实现) 1.显示留言板 ...
php实战：html+php+mysql实现留言板功能
功能描述: 1)实测链接的是远程数据库 2)打开留言板加载留言 3)新添加的留言显示在下方 css代码,用于设置弹框和新添加的留言样式等 <style type="text/css&q ...
phpstudy简单项目实战——留言板之第一弹
跟着PHP中文网学做留言板-- 一.数据库的创建 1.首先打开你电脑中已经下载完成的phpstudy(没有下载的可自行去下载) 2.点击MySQL管理器->phpMyAdmin->执行(用 ...

实战Node：Node实现留言板

运行效果

运行步骤

知识点

代码

app.js

header.ejs

footer.ejs

index.ejs

404.ejs

new.ejs

实战Node：Node实现留言板相关推荐

最新文章

热门文章