Node图文教程之express重写留言本案例

Freelander 发布于2019-05-22 19:23 / 2458人阅读

摘要：安装相应第三方依赖创建静态资源文件夹我们在文件夹中创建一个名为文件夹，用来存放静态文件，也就是公开的资源文件。

写在前面

小伙伴们大家好，我是你们的pubdreamcc，接着前面的学习，这篇博文出至于我的GitHub仓库：Node学习教程资料，如果你觉得对你有帮助，欢迎star，你们的点赞是我持续更新的动力，谢谢！

Node.js学习教程资料：GitHub

前言

我们在之前的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!

云服务器 GPU云服务器重写留言本 Node_Express node_express数据库 php之留言板

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/6856.html

Node图文教程（第四章：express）

摘要：中文官网快速入门安装项目中引入得到服务器实例绑定服务器接受请求事件，并且添加处理回调函数绑定服务端口，启动服务器运行项目利用框架可以减少我们的代码量，比起之前使用核心模块构建服务器代码排版更直观。Express框架是一款简洁而灵活的node.js web应用框架。前面我们自己手动创建服务器在Express中就是一个API的事情，这就使得我们更加注重业务的功能和开发效率上，不必纠结过多底层的事...

韩冰 2019-05-23 17:35 评论0 收藏0
出去就餐并且理解Express.js的基本知识

摘要：原文译者如果你曾经去过一个坐下来就餐的餐厅，那么你可以了解的基础知识。而且由于缺少路径，它将在每个请求上运行。这就是路由的来源。到目前为止，你已经雇佣了一位经理，在接受客户请求之前定义了要做的事情，并且确定如何处理特定的客户请求。 showImg(https://segmentfault.com/img/bVYnBo?w=4000&h=2666); 原文：Going out to e...

xuhong 2019-08-21 17:35 评论0 收藏0
前端每周清单第 41 期 : Node 与 Rust、OpenCV 的火花，网络安全二三事

摘要：的网站仍然使用有漏洞库上周发布了开源社区安全现状报告，发现随着开源社区的日渐活跃，开源代码中包含的安全漏洞以及影响的范围也在不断扩大。与应用安全是流行的服务端框架，本文即是介绍如何使用以及其他的框架来增强应用的安全性。 showImg(https://segmentfault.com/img/remote/1460000012181337?w=1240&h=826); 前端每周清单专注...

syoya 2019-08-21 17:48 评论0 收藏0
前端每周清单第 53 期：Go 与 WebAssembly, React Suspense 演练,

摘要：开发教程步步为营，掌握基础技能发布机器学习速成课程为了帮助更多的人了解与学习机器学习相关的知识技能，发布了人工智能学习网站。更多相关内容参考数据科学与机器学习实战手册。 showImg(https://segmentfault.com/img/remote/1460000013586587); 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热...

lbool 2019-08-22 15:10 评论0 收藏0