Node.js基于Express框架的简单案例
框架是开发中必不可少的，利于快速开发项目的工具。在Node.js中也是一样，大量的框架，让我们站在巨人的肩膀上，并给我们带来了巨大的方便......
目录
1、创建项目“说明文档”
npm init -y
2、安装必要的工具
# Express框架
npm i -S express
# 模板引擎
npm i -S art-template
# 模板引擎与Express的关联包
npm i -S express-art-template
# post请求解析工具
npm i -S body-parser
3、编写app.js
//引入框架
var express = require('express');
//引入POST参数解析
var bodyParser = require('body-parser');
//新建服务器
var app = express();
//开放统一资源
app.use('/public/', express.static('./public/'));
//============================================
// Express框架，配置使用 art-template 模板引擎
// 第一个参数，表示，当渲染以 .art 结尾的文件的时候，使用 art-template 模板引擎
// express-art-template 是专门用来在 Express 中把 art-template 整合到 Express 中
// 虽然外面这里不需要记载 art-template 但是也必须安装
// 原因就在于 express-art-template 依赖了 art-template
app.engine('html', require('express-art-template'));
//============================================
//============================================
// 配置 body-parser 中间件（插件，专门用来解析表单 POST 请求体）
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
//============================================
//============================================
//处理请求
app.get('/', function (req, res) {
//使用Express自带的方法(其中对art-template进行了封装)
//第一个参数默认是从 views 文件下开始查找
// 如果想要修改默认的 views 目录，则可以
// 通过使用app.set('views', render函数的默认路径)
res.render('index.html', {
comments: comments
})
})
app.get('/post',function (req, res) {
res.render('post.html');
})
app.post('/post',function (req, res) {
var comment=req.body;
comments.dateTime=getNowTime();
comments.unshift(comment);
//Express中封装的重定向方法
res.redirect('/');
})
//模拟数据
var comments = [
{
name: '张三',
message: '今天天气不错！',
dateTime: '2018-08-06 08:20:56'
},
{
name: '张三2',
message: '今天天气不错！',
dateTime: '2018-08-06 08:20:56'
},
{
name: '张三3',
message: '今天天气不错！',
dateTime: '2018-08-06 08:20:56'
},
{
name: '张三4',
message: '今天天气不错！',
dateTime: '2018-08-06 08:20:56'
},
{
name: '张三5',
message: '今天天气不错！',
dateTime: '2018-08-06 08:20:56'
}
]
//绑定监听端口
app.listen(3000,function () {
console.log('running...')
})
//获取当前时间的方法
function getNowTime() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
return (year + '-' + month + '-' + day + ' '
+ (hour > 9 ? hour : '0' + hour) + ':'
+ (minute > 9 ? minute : '0' + minute)
+ ':' + (second > 9 ? second : '0' + second)).toString();
}
4、视图 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言本</title>
<!--
浏览器收到 HTML 响应内容之后，就要开始从上到下依次解析，
当在解析的过程中，如果发现：
link
script
img
iframe
video
audio
等带有 src 或者 href（link） 属性标签（具有外链的资源）的时候，浏览器会自动对这些资源发起新的请求。
-->
<!--
注意：在服务端中，文件中的路径就不要去写相对路径了。
因为这个时候所有的资源都是通过 url 标识来获取的
我的服务器开放了 /public/ 目录
所以这里的请求路径都写成：/public/xxx
/ 在这里就是 url 根路径的意思。
浏览器在真正发请求的时候会最终把 http://127.0.0.1:3000 拼上
不要再想文件路径了，把所有的路径都想象成 url 地址
-->
<link rel="stylesheet" href="/public/css/bootstrap.css">
</head>
<body>
<div class="header container">
<div class="page-header">
<h1>首页 <small>Node聊天室</small></h1>
<a class="btn btn-success" href="/post">发表留言</a>
</div>
</div>
<div class="comments container">
<ul class="list-group">
{{each comments}}
<li class="list-group-item">{{ $value.name }}说：{{ $value.message }} <span class="pull-right">{{ $value.dateTime }}</span></li>
{{/each}}
</ul>
</div>
</body>
</html>
5、post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/public/css/bootstrap.css">
</head>
<body>
<div class="header container">
<div class="page-header">
<h1><a href="/">首页</a> <small>发表评论</small></h1>
</div>
</div>
<div class="comments container">
<!--
以前表单是如何提交的？
表单中需要提交的表单控件元素必须具有 name 属性
表单提交分为：
1. 默认的提交行为
2. 表单异步提交
action 就是表单提交的地址，说白了就是请求的 url 地址
method 请求方法
get
post
-->
<form action="/post" method="post">
<div class="form-group">
<label for="input_name">你的大名</label>
<input type="text" class="form-control" required minlength="2" maxlength="10" id="input_name" name="name" placeholder="请写入你的姓名">
</div>
<div class="form-group">
<label for="textarea_message">留言内容</label>
<textarea class="form-control" name="message" id="textarea_message" cols="30" rows="10" required minlength="5" maxlength="20"></textarea>
</div>
<button type="submit" class="btn btn-default">发表</button>
</form>
</div>
</body>
</html>
