因為在寫一個前后臺留言板的時候,使用了node框架express,并結(jié)合了express的art-template模板引擎,有些地方不懂,看了官方API和各種博客后.... emmm 還是沒懂,要么就是大神寫的看不太懂,要么就是沒有注釋只有代碼,看的太痛苦惹
在弄明白之后,打算自己寫一個,把自己沒弄明白的東西寫出來整理一下做個筆記,或許還有跟我一樣總是犯些沙雕錯誤的沙雕網(wǎng)友能看到呢...
目錄大概是這樣子的:
鋪頁面
用bs寫好首頁和留言頁后,大概長這樣:
當(dāng)然還咩有把數(shù)據(jù)渲染上去
首先先在npm里下好了需要的依賴
這里沒有圖惹,是express art-template bootstrap express-art-template body-parser這樣子
創(chuàng)建好服務(wù)器
加載了express和body-parser
const express=require("express");
const bodyParser=require("body-parser");
let app=express();
配置express-art-template模板
app.engine();
- 第一個參數(shù):表示當(dāng)渲染以html后綴名的文件時,使用art-template模板引擎渲染
- require("express-art-template") 相當(dāng)于加載了 express-art-template 加載后用它去渲染html格式的文件
- express-art-template整合了express和art-template
app.engine("html",require("express-art-template"));
配置body-parser
body-parser 是express的post請求中用來獲得請求體(請求參數(shù))的一種第三方包
因為post請求不會再通過url傳遞參數(shù)了,所以就使用body-parser來獲取了,配置之后會給請求中的req添加一個body屬性來獲取請求參數(shù)(獲取頁面提交表單的內(nèi)容)
app.use(bodyParser.urlencoded({ extended: false }));
// parse application/json
app.use(bodyParser.json());
靜態(tài)資源加載
app.use();
-
第一個參數(shù)的意思是:以node_modules開頭的網(wǎng)絡(luò)請求:
一個css文件 -
第二個參數(shù): 這種類型的資源,會在node_modules文件夾下尋找它的文件然后加載
查看node_modules ./表示當(dāng)前
app.use("/node_modules",express.static("./node_modules"));
寫一個json
用來寫留言的,json放入data 在home.html里渲染
let comments = [
{
name: '張三',
message: '今天天氣不錯唤殴！',
dateTime: '2015-10-16'
},
{
name: '張三2',
message: '今天天氣不錯滞谢！',
dateTime: '2015-10-16'
},
{
name: '張三3',
message: '今天天氣不錯！',
dateTime: '2015-10-16'
},
{
name: '張三4',
message: '今天天氣不錯！',
dateTime: '2015-10-16'
},
{
name: '張三5',
message: '今天天氣不錯宇整！',
dateTime: '2015-10-16'
}
];
let data={
list:comments
};
處理請求(get,post兩種方法)
app.get()
express的get方法 就是express里的路由
- 第一個參數(shù):是你要訪問的路徑
- 第二個參數(shù):函數(shù),你要訪問這個路徑后做的操作
res.render(); 渲染方法
res對象本身是沒有render方法的,當(dāng)配置了express-art-template才會給其添加此方法
-
第一個參數(shù):你要渲染的頁面(寫views目錄下的相對路徑) 這里的views可以通過set方法修改
查看views
記錄下掉的坑,views文件是可以改變路徑的,如果使用官方推薦的結(jié)構(gòu),可以默認(rèn)不寫
app.set("views","設(shè)置的render的默認(rèn)路徑")
- 第二個參數(shù):你要渲染上去的數(shù)據(jù)(一定要是json格式)
我犯的沙雕錯誤:傳入了一個數(shù)組...看了快半個小時才發(fā)現(xiàn),真的是要哭了,對不起我的頭發(fā)!
//加載主頁
app.get("/",(req,res)=>{
res.render("home.html",data);
});
//加載留言頁
app.get("/post",(req,res)=>{
res.render("post.html");
});
現(xiàn)在用數(shù)據(jù)已經(jīng)把home.html和post.html渲染好啦 大概長這樣:
這里可以用端口號訪問了,點擊發(fā)布留言進(jìn)入到post.html,輸入留言了
輸入留言后,點擊post.html中的submit提交的數(shù)據(jù),這里就得到提交的數(shù)據(jù)做處理,再跳轉(zhuǎn)回首頁顯示
app.post(); express里的post方法
res.redirect();express里封裝好的重定向方法,參數(shù)是重定向的路徑
req.body就獲得到了我在頁面提交數(shù)據(jù)傳遞過來的參數(shù),然后再添加一個鍵值對,把這條新提交的數(shù)據(jù)添加入存留言的那個json
app.post("/mes",(req,res)=>{
//post方法獲取到了請求參數(shù)
// console.log(req.body);
//req.body.dateTime 添加一個鍵值對
req.body.dateTime="2015-10-16";
comments.unshift(req.body);
//重定向 參數(shù)是重定向的路徑
res.redirect("/");
});
寫個端口號
app.listen();
app.listen(7000);
就寫完了~
大概長這樣了,沒有數(shù)據(jù)庫,沒有專門保存數(shù)據(jù)的文件,只是用來學(xué)習(xí)express和模板引擎的一個練習(xí),雖然很菜,但還是覺得自己棒棒的,嗯 干巴爹
