国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Freelander / 2461人閱讀

摘要:安裝相應(yīng)第三方依賴創(chuàng)建靜態(tài)資源文件夾我們?cè)谖募A中創(chuàng)建一個(gè)名為文件夾,用來存放靜態(tài)文件,也就是公開的資源文件。

寫在前面

小伙伴們大家好,我是你們的pubdreamcc,接著前面的學(xué)習(xí),這篇博文出至于我的GitHub倉(cāng)庫(kù):Node學(xué)習(xí)教程資料,如果你覺得對(duì)你有幫助,歡迎star,你們的點(diǎn)贊是我持續(xù)更新的動(dòng)力,謝謝!

Node.js學(xué)習(xí)教程資料:GitHub

前言

我們?cè)谥暗膎ode.js學(xué)習(xí)的基礎(chǔ)課程中已經(jīng)完成了一個(gè)簡(jiǎn)單的用戶發(fā)表評(píng)論社區(qū),今天我們利用web開發(fā)框架--express來重寫案例,進(jìn)一步加強(qiáng)對(duì)express框架的理解和使用。

demo主體

    創(chuàng)建項(xiàng)目文件夾,npm初始化項(xiàng)目

在本地任意目錄下創(chuàng)建名為:expressCommentList文件夾,cd文件夾中,運(yùn)行:npm init -y快速初始化,生成package.json文件。安裝相應(yīng)第三方依賴:

npm install express art-template express-art-template body-parser --save

    創(chuàng)建靜態(tài)資源文件夾

我們?cè)?b>expressCommentList文件夾中創(chuàng)建一個(gè)名為:public文件夾,用來存放靜態(tài)文件,也就是公開的資源文件。項(xiàng)目中用到的bootstrap樣式文件和頁(yè)面的腳本文件等都可以放到public文件夾中。

    創(chuàng)建頁(yè)面視圖文件夾

同樣地,在expressCommentList文件夾中創(chuàng)建名為:views文件夾,views文件夾用來存放頁(yè)面視圖相關(guān)的文件,這也為后面模板引擎默認(rèn)查找模板文件的位置一致,便于后續(xù)編碼。

    創(chuàng)建服務(wù)器文件

app.js為我們的服務(wù)器文件,在這里我們使用express來開啟一個(gè)web服務(wù)器。

demo主要代碼

app.js文件中核心代碼如下:

const express = require("express")
// 引入body-parser
const bodyParser = require("body-parser")
const app = express()
// 開放靜態(tài)資源
app.use("/public/", express.static("./public"))
// 配置express-art-template模板引擎
app.engine("html", require("express-art-template"))
// 配置body-parser
app.use(bodyParser.urlencoded({ extended: false }))
// 先造一些假數(shù)據(jù),供模板引擎渲染
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請(qǐng)求發(fā)送的數(shù)據(jù)
  const comment = req.body
  comment.time = "2019-5-21"
  comments.unshift(comment)
  // 重定向到首頁(yè)(‘/’)
  res.redirect("/")
})
app.listen(3000, () => {
  console.log("running...")
})

這里使用了express-art-template模板引擎渲染模板文件,并且通過express的中間件:body-parser來獲取表單POST提交后的數(shù)據(jù),最終通過把POST提交的數(shù)據(jù)合并到原始數(shù)據(jù)中即可顯示在首頁(yè)上。

對(duì)于express-art-templatebody-parser在express中的具體用法,不清楚的伙伴可以關(guān)注我的之前Node教程資料:express中art-template的使用express中獲取post請(qǐng)求數(shù)據(jù),這里就不再贅述。

demo演示效果圖

如果需要完整demo代碼,可以查看GitHub上倉(cāng)庫(kù)Node學(xué)習(xí)demo案例文件夾,當(dāng)然如果你有好的建議也可以issue我,或者留言評(píng)論,thank you!

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/6856.html

相關(guān)文章

  • Node圖文教程(第四章:express

    摘要:中文官網(wǎng)快速入門安裝項(xiàng)目中引入得到服務(wù)器實(shí)例綁定服務(wù)器接受請(qǐng)求事件,并且添加處理回調(diào)函數(shù)綁定服務(wù)端口,啟動(dòng)服務(wù)器運(yùn)行項(xiàng)目利用框架可以減少我們的代碼量,比起之前使用核心模塊構(gòu)建服務(wù)器代碼排版更直觀。Express框架是一款簡(jiǎn)潔而靈活的node.js web應(yīng)用框架。前面我們自己手動(dòng)創(chuàng)建服務(wù)器在Express中就是一個(gè)API的事情,這就使得我們更加注重業(yè)務(wù)的功能和開發(fā)效率上,不必糾結(jié)過多底層的事...

    韓冰 評(píng)論0 收藏0
  • 出去就餐并且理解Express.js的基本知識(shí)

    摘要:原文譯者如果你曾經(jīng)去過一個(gè)坐下來就餐的餐廳,那么你可以了解的基礎(chǔ)知識(shí)。而且由于缺少路徑,它將在每個(gè)請(qǐng)求上運(yùn)行。這就是路由的來源。到目前為止,你已經(jīng)雇傭了一位經(jīng)理,在接受客戶請(qǐng)求之前定義了要做的事情,并且確定如何處理特定的客戶請(qǐng)求。 showImg(https://segmentfault.com/img/bVYnBo?w=4000&h=2666); 原文:Going out to e...

    xuhong 評(píng)論0 收藏0
  • 前端每周清單第 41 期 : Node 與 Rust、OpenCV 的火花,網(wǎng)絡(luò)安全二三事

    摘要:的網(wǎng)站仍然使用有漏洞庫(kù)上周發(fā)布了開源社區(qū)安全現(xiàn)狀報(bào)告,發(fā)現(xiàn)隨著開源社區(qū)的日漸活躍,開源代碼中包含的安全漏洞以及影響的范圍也在不斷擴(kuò)大。與應(yīng)用安全是流行的服務(wù)端框架,本文即是介紹如何使用以及其他的框架來增強(qiáng)應(yīng)用的安全性。 showImg(https://segmentfault.com/img/remote/1460000012181337?w=1240&h=826); 前端每周清單專注...

    syoya 評(píng)論0 收藏0
  • 前端每周清單第 53 期:Go 與 WebAssembly, React Suspense 演練,

    摘要:開發(fā)教程步步為營(yíng),掌握基礎(chǔ)技能發(fā)布機(jī)器學(xué)習(xí)速成課程為了幫助更多的人了解與學(xué)習(xí)機(jī)器學(xué)習(xí)相關(guān)的知識(shí)技能,發(fā)布了人工智能學(xué)習(xí)網(wǎng)站。更多相關(guān)內(nèi)容參考數(shù)據(jù)科學(xué)與機(jī)器學(xué)習(xí)實(shí)戰(zhàn)手冊(cè)。 showImg(https://segmentfault.com/img/remote/1460000013586587); 前端每周清單專注前端領(lǐng)域內(nèi)容,以對(duì)外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點(diǎn);分為新聞熱...

    lbool 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<