Node圖文教程之express重寫留言本案例

Freelander 發布于2019-05-22 19:23 / 2459人閱讀

摘要：安裝相應第三方依賴創建靜態資源文件夾我們在文件夾中創建一個名為文件夾，用來存放靜態文件，也就是公開的資源文件。

寫在前面

小伙伴們大家好，我是你們的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之留言板

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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