写在前面
小伙伴们大家好, 我是你们的 pubdreamcc, 接着前面的学习, 这篇博文出至于我的 GitHub 仓库: Node 学习教程资料, 如果你觉得对你有帮助, 欢迎 star, 你们的点赞是我持续更新的动力, 谢谢!
Node.JS 学习教程资料: GitHub https://github.com/pubdreamcc/Node.js
前言
我们在之前的 node.JS 学习的基础课程中已经完成了一个简单的用户发表评论社区, 今天我们利用 web 开发框架 --express 来重写案例, 进一步加强对 express 框架的理解和使用.
demo 主体
创建项目文件夹, NPM 初始化项目
在本地任意目录下创建名为: expressCommentList 文件夹, cd 文件夹中, 运行: NPM init -y 快速初始化, 生成 package.JSON 文件. 安装相应第三方依赖:
NPM install express art-template express-art-template body-parser --save
创建静态资源文件夹
我们在 expressCommentList 文件夹中创建一个名为: public 文件夹, 用来存放静态文件, 也就是公开的资源文件. 项目中用到的 Bootstrap 样式文件和页面的脚本文件等都可以放到 public 文件夹中.
创建页面视图文件夹
同样地, 在 expressCommentList 文件夹中创建名为: views 文件夹, views 文件夹用来存放页面视图相关的文件, 这也为后面模板引擎默认查找模板文件的位置一致, 便于后续编码.
创建服务器文件
App.JS 为我们的服务器文件, 在这里我们使用 express 来开启一个 Web 服务器.
demo 主要代码
App.JS 文件中核心代码如下:
- const express = require('express')
- // 引入 body-parser
- const bodyParser = require('body-parser')
- const App = express()
- // 开放静态资源
- App.use('/public/', express.static('./public'))
- // 配置 express-art-template 模板引擎
- App.engine('html', require('express-art-template'))
- // 配置 body-parser
- App.use(bodyParser.urlencoded({ extended: false }))
- // 先造一些假数据, 供模板引擎渲染
- let comments = [
- {
- name: 'jack',
- content: 'hello world',
- time: '2019-5-1'
- },
- {
- name: 'Tom',
- content: 'hello world',
- time: '2019-5-1'
- },
- {
- name: 'dream',
- content: 'hello world',
- time: '2019-5-1'
- },
- {
- name: 'james',
- content: 'hello world',
- time: '2019-5-1'
- },
- {
- name: 'jack',
- content: 'hello world',
- time: '2019-5-1'
- },
- {
- name: 'life',
- content: 'hello world',
- time: '2019-5-3'
- }
- ]
- App.get('/', (req, res) => {
- res.render('index.html', {
- comments: comments
- })
- })
- App.get('/post', (req, res) => {
- res.render('post.html')
- })
- App.post('/comment', (req, res) => {
- // 得到 post 请求发送的数据
- const comment = req.body
- comment.time = '2019-5-21'
- comments.unshift(comment)
- // 重定向到首页 ('/')
- res.redirect('/')
- })
- App.listen(3000, () => {
- console.log('running...')
- })
这里使用了 express-art-template 模板引擎渲染模板文件, 并且通过 express 的中间件: body-parser 来获取表单 POST 提交后的数据, 最终通过把 POST 提交的数据合并到原始数据中即可显示在首页上.
对于 express-art-template 和 body-parser 在 express 中的具体用法, 不清楚的伙伴可以关注我的之前 Node 教程资料: express 中 art-template 的使用和 express 中获取 post 请求数据, 这里就不再赘述.
demo 演示效果图
如果需要完整 demo 代码, 可以查看 GitHub 上仓库 Node 学习 demo 案例文件夹, 当然如果你有好的建议也可以 issue 我, 或者留言评论, thank you!
来源: https://www.cnblogs.com/dreamcc/p/10905719.html