案例

一、對每一個POST請求都設置CSRF防護

實際上，不僅僅轉賬需要CSRF防護，每一個post請求都需要做csrf的防護措施。

webA項目中的app.js：

const router = express.Router();router.all("/register",(res,req)=>{.... })function csrfProtect(req, res, next){let method = req.methodif(method=="GET"){let csrf_token = getRandomString(48);res.cookie('csrf_token', csrf_token);next() //執行跳轉到下一個函數執行，即app.use(beforeReq,router)中的下一個}else if(method=="POST"){// 判斷響應頭中的x-csrftoken值，和cookies中的csrf_token進行對比console.log(req.headers["x-csrftoken"]);console.log(req.cookies["csrf_token"]);if((req.headers["x-csrftoken"] === req.cookies["csrf_token"])){console.log("csrf驗證通過！");next()}else{res.send("csrf驗證不通過!！");return}} }app.use(csrfProtect,router)

項目

一、項目從初始化

1、新建項目文件夾News

2、初始化項目 yarn init -y 或者 npm init -y

3、安裝express，yarn add express 或者 npm install express

4、其次在 News 目錄中，創建一個名為 app.js 的文件

const express = require("express"); const app = express();app.get("/",(req, res)=>{res.send("hello News"); })app.listen(3000, ()=>{console.log('Example app listening on port 3000!'); })

瀏覽器中訪問http://localhost:3000/ ， 看到hello News，則項目初始化成功；

二、靜態資源和模板引擎的設置

2.1、設置靜態資源

app.js中添加下面代碼設置靜態資源的訪問路徑：

app.use(express.static("public"));

2.2、設置模板引擎

項目采用的是art-templates模板引擎，使用之前需要安裝 art-template 和 express-art-template

yarn add art-template 或者 npm install art-template yarn add express-art-template 或者 npm install express-art-template

我們模板引擎的目錄為 /views

const path = require('path');// 1、修改模板引擎為html，導入express-art-template app.engine('html', require('express-art-template')); // 2、設置運行的模式為開發模式 app.set('view options', {debug: process.env.NODE_ENV !== 'development' }); // 3、設置模板存放目錄為views文件夾 app.set('views', path.join(__dirname, 'views')); // 4、設置引擎后綴為html app.set('view engine', 'html');app.get("/",(req, res)=>{res.render("news/index"); })

注意：
靜態資源文件中的路徑需要使用絕對路徑，例如：/news/css/base.css

（VScode 快捷鍵提示Ctrl+shift+L： 選中某字符串后，批量選擇本頁面中出現的所有該字符串，之后就可以批量修改了）

三、項目中設置post請求方式的處理

獲取post請求體參數的時候使用body-parser模塊；

添加以下設置代碼：

// 1、引入body-parser const bodyParser = require('body-parser');// 2、bodyParser功能添加到項目app中 app.use(bodyParser.urlencoded({ extended: false }));// parse application/x-www-form-urlencoded 針對普通頁面提交功能 app.use(bodyParser.json()); // parse application/json 針對異步提交ajax

之后在路有接口中就可以通過req.body獲取請求體參數了。

四、添加cookie和session的配置

先安裝cookie-parser和cookie-session ：

yarn add cookie-parser 或者 npm install cookie-parser --save yarn add cookie-session 或者 npm install cookie-session --save

app.js中添加設置：

const cookieParser = require('cookie-parser'); const cookieSession = require('cookie-session');// cookie的注冊 app.use(cookieParser()); // session的注冊 app.use(cookieSession({name:"my_session",keys:["%$#^&^%&TSFR#$TRGDRG$%GFDG%^$#%#^GFDGRDHG$#@^Y%"],maxAge:1000*60*60*24*2 //過期時間設置為2天 }));

后面就可以通過
req.session[屬性名] = 值來設置session, req.cookies["屬性名"]取值
res.cookie("屬性名","值")來設置cookie， req.session["屬性名"]取值

app.js完整代碼：

const express = require('express'); const path = require('path') const cookieParser = require('cookie-parser') const cookieSession = require('cookie-session')// bodyParser用來處理post請求 const bodyParser = require('body-parser')const app = express()// 獲取post請求參數的配置 // parser application/x-www-form-urlencoded app.use(bodyParser.urlencoded({ extended: false })) // parser application/json 針對異步提交ajax app.use(bodyParser.json())// 注冊cookie 和 session app.use(cookieParser()) app.use(cookieSession({name: 'my_session',keys: ["sadafdkjaoisdj(*)@#!@klajkl@#%$#deafda"],maxAge: 1000*60*60*24*2 //設置過期時間，兩天后過期 }))// 關于靜態資源的文件夾的指定 app.use(express.static("public"))// 關于模板的配置 // 1. 修改模板引擎為html,導入express-art-template app.engine('html', require('express-art-template')) // 2. 設置運行的模式為開發模式 app.set('view options', {debug: process.env.NODE_ENV !== 'development' }); // 3. 設置模板存放目錄為views文件夾 app.set('views', path.join(__dirname, 'views')) // 4. 設置引擎后綴為html app.set('view engine', 'html')app.get('/', (req, res)=> {// 測試設置cookie和sessionres.cookie("name","nodejs")req.session["age"] = 21res.render('news/index.html') })app.get('/get_cookie', (req, res)=> {// 測試獲取cookieres.send('cookie中 name的值為：' + req.cookies["name"]) })app.get('/get_session', (req, res)=> {// 測試獲取sessionres.send('session中 my_session中age的值為：' + req.session["age"]) })app.listen(3001, (err)=> {if(err) {console.log(err)return;}console.log('服務器已經啟動，端口為：3001') })

五、抽取app.js中的配置信息

目前，app.js已經越寫越多了， 我們要把這個文件中的配置信息全部抽取出來作為一個獨立的配置文件

項目目錄下新建配置文件config.js

const express = require("express"); const path = require("path"); const bodyParser = require('body-parser'); const cookieParser = require('cookie-parser'); const cookieSession = require('cookie-session');var appConfig = app => {// 靜態資源找尋的文件夾app.use(express.static("public")); // 模板引擎app.engine('html', require('express-art-template'));app.set('view options', {debug: process.env.NODE_ENV !== 'development'});app.set('views', path.join(__dirname, 'views'));app.set('view engine', 'html');// 設置獲取請求體app.use(bodyParser.urlencoded({ extended: false }));app.use(bodyParser.json()); // cookie的注冊app.use(cookieParser()); // session的注冊app.use(cookieSession({name:"my_session",keys:["%$#^&^%&TSFR#$TRGDRG$%GFDG%^$#%#^GFDGRDHG$#@^Y%"],maxAge:1000*60*60*24*2 //過期時間設置為2天})); }module.exports = appConfig; const express = require('express'); const path = require('path') const cookieParser = require('cookie-parser') const cookieSession = require('cookie-session') // bodyParser用來處理post請求 const bodyParser = require('body-parser');let appConfig = (app) => {// 獲取post請求參數的配置// parser application/x-www-form-urlencodedapp.use(bodyParser.urlencoded({ extended: false }))// parser application/json 針對異步提交ajaxapp.use(bodyParser.json())// 注冊cookie 和 sessionapp.use(cookieParser())app.use(cookieSession({name: 'my_session',keys: ["sadafdkjaoisdj(*)@#!@klajkl@#%$#deafda"],maxAge: 1000 * 60 * 60 * 24 * 2 //設置過期時間，兩天后過期}))// 關于靜態資源的文件夾的指定app.use(express.static("public"))// 關于模板的配置// 1. 修改模板引擎為html,導入express-art-templateapp.engine('html', require('express-art-template'))// 2. 設置運行的模式為開發模式app.set('view options', {debug: process.env.NODE_ENV !== 'development'});// 3. 設置模板存放目錄為views文件夾app.set('views', path.join(__dirname, 'views'))// 4. 設置引擎后綴為htmlapp.set('view engine', 'html') }module.exports = appConfig

app.js中：

// 引入配置文件 const config = require("./config");// 創建應用程序對象 const app = express();// 執行配置信息 config(app); const express = require('express'); const AppConfig = require("./config.js")const app = express() // new AppConfig(app) AppConfig(app)app.get('/', (req, res)=> {// 測試設置cookie和sessionres.cookie("name","nodejs")req.session["age"] = 21res.render('news/index.html') })app.get('/get_cookie', (req, res)=> {// 測試獲取cookieres.send('cookie中 name的值為：' + req.cookies["name"]) })app.get('/get_session', (req, res)=> {// 測試獲取sessionres.send('session中 my_session中age的值為：' + req.session["age"]) })app.listen(3001, (err)=> {if(err) {console.log(err)return;}console.log('服務器已經啟動，端口為：3001') })

站在更高的角度，用面向對象的方式去寫：

class AppConfig{constructor(app){this.app = appthis.app.use(express.static("public"));this.app.engine('html', require('express-art-template'));this.app.set('view options', {debug: process.env.NODE_ENV !== 'development'});this.app.set('views', path.join(__dirname, 'views'));this.app.set('view engine', 'html');this.app.use(bodyParser.urlencoded({ extended: false }));this.app.use(bodyParser.json()); this.app.use(cookieParser());this.app.use(cookieSession({name:"my_session",keys: ["FGFDG#$%%YDFGSDHDRY$@#%$&^%*^%%%$^RFDGFJGRSA"],maxAge: 1000 * 60 *60 *24 * 2})); } }//調用的時候： let config = new Config(app) const express = require('express'); const path = require('path') const cookieParser = require('cookie-parser') const cookieSession = require('cookie-session') // bodyParser用來處理post請求 const bodyParser = require('body-parser');class AppConfig {// 看成創建對象的時候執行的代碼constructor(app) {this.app = app// 獲取post請求參數的配置// parser application/x-www-form-urlencodedthis.app.use(bodyParser.urlencoded({ extended: false }))// parser application/json 針對異步提交ajaxthis.app.use(bodyParser.json())// 注冊cookie 和 sessionthis.app.use(cookieParser())this.app.use(cookieSession({name: 'my_session',keys: ["sadafdkjaoisdj(*)@#!@klajkl@#%$#deafda"],maxAge: 1000 * 60 * 60 * 24 * 2 //設置過期時間，兩天后過期}))// 關于靜態資源的文件夾的指定this.app.use(express.static("public"))// 關于模板的配置// 1. 修改模板引擎為html,導入express-art-templatethis.app.engine('html', require('express-art-template'))// 2. 設置運行的模式為開發模式this.app.set('view options', {debug: process.env.NODE_ENV !== 'development'});// 3. 設置模板存放目錄為views文件夾this.app.set('views', path.join(__dirname, 'views'))// 4. 設置引擎后綴為htmlthis.app.set('view engine', 'html')} } module.exports = AppConfig

六、抽取app.js中的路由接口函數

項目文件夾下新建routes文件夾，新建index.js:

const express = require('express'); const router = express.Router();router.get('/', (req, res) => {//返回這個頁面res.render('news/index'); }); module.exports = router

config.js中添加路由的設置

const indexRouters = require('./routes/index'); var appConfig = app => {...// 路由的設置app.use(indexRouters); //首頁相關路由接口 }

app.js:

const express = require('express'); const AppConfig = require("./config.js")const app = express() let appConfig = new AppConfig(app) // 以對象的方式進行調用app.listen(appConfig.listenPort, (err)=> {if(err) {console.log(err)return;}console.log(`服務器已經啟動，端口為：${appConfig.listenPort}`) })

七、項目數據表分析(見分析圖)

八、添加數據庫配置

8.1、先創建數據庫，并導入數據

把數據庫導入數據有兩種方式：

方式一：使用帶界面的Navicat

稍等5到10分鐘，等待數據導入成功

方式二：也可以直接在cmd窗口中通過連接數據庫創建數據庫后導入數據

先創建數據庫

mysql -uroot -pcreate database news charset=utf8;use news;source G:\news.sql;

（注意：該目錄不能出現中文！！！）

同樣稍等5到10分鐘，等待數據導入成功

8.2、項目中測試數據庫

先安裝mysql：

yarn add mysql 或者npm install mysql

把今天資料中提供的db文件夾放置到項目目錄下，

測試數據庫的使用，查詢新聞分類表并相應回頁面:

const handleDb = require("../../db/handleDb");router.get("/",(req, res)=>{(async function index(){let result = await handleDb(res,"info_category", "find", "info_category數據庫查詢出錯");res.send(result);})(); })

九、初步獲取圖片驗證碼

先安裝驗證碼獲取的模塊 ，在項目目錄下：

yarn add svg-captcha

使用說明：

let captchaObj = new Captcha(); // 創建對象 let captcha = captchaObj.getCode(); // 調用獲取驗證碼的方法captcha.text //就是驗證碼文本 captcha.data //就是驗證碼圖片內容 //注意：返回給瀏覽器的時候，需要設置響應頭 res.setHeader('Content-Type', 'image/svg+xml');

具體實現

項目目錄下，新建utils文件夾，復制captcha文件夾到utils下。

routes下新建驗證模塊 passport.js：

const express = require('express'); const Captcha = require('../utils/captcha'); // 引入captcha工具const router = express.Router();router.get('/password/image_code', (req, res) => {let captchaObj = new Captcha(); // 創建對象let captcha = captchaObj.getCode(); // 調用獲取驗證碼的方法console.log("獲取驗證碼的接口");console.log(captcha.text); // 驗證碼文本//配合img標簽的src屬性請求來展示驗證碼圖片的時候，需要設置響應頭res.setHeader('Content-Type', 'image/svg+xml'); res.send(captcha.data); // 響應驗證碼圖片到瀏覽器 });module.exports = router

config.js中注冊，把passwordRouters注冊到app上

const passwordRouters = require('./routes/password');var appConfig = app => {...// 路由的設置app.use(indexRouters); //首頁相關路由接口app.use(passwordRouters); //驗證相關路由接口(登錄、注冊、獲取驗證碼等) }

在瀏覽器中請求：http://localhost:3000/password/image_code

十、注冊流程分析（見注冊流程分析圖）

十一、完整驗證碼獲取流程

/*1、生成驗證碼2、將驗證碼文本存入session （后面點擊注冊按鈕的時候，注冊接口中需要重新獲取這個驗證碼文本和用戶輸入的驗證碼進行對比）3、發送驗證碼數據 */// 1、生成驗證碼 let captchaObj = new Captcha(); // 創建對象 let captcha = captchaObj.getCode(); // 調用獲取驗證碼的方法 // 2、將驗證碼文本存入session req.session["IMG_CODE"] = captcha.text; console.log(req.session) // 3、發送驗證碼數據 res.setHeader('Content-Type', 'image/svg+xml'); //設置響應頭 res.send(captcha.data); // 響應驗證碼圖片到瀏覽器

十二、解決點擊獲取驗證碼圖片問題

/public/news/js/main.js中，加上一個隨機數：

// 1.設置圖片url地址 image_url = '/passport/image_code/'+Math.random()

passport.js接口中：

router.get("/passport/image_code/:float", ...

的方法
// 2、將驗證碼文本存入session
req.session[“IMG_CODE”] = captcha.text;
console.log(req.session)
// 3、發送驗證碼數據
res.setHeader(‘Content-Type’, ‘image/svg+xml’); //設置響應頭
res.send(captcha.data); // 響應驗證碼圖片到瀏覽器

## 十二、解決點擊獲取驗證碼圖片問題/public/news/js/main.js中，加上一個隨機數：```js // 1.設置圖片url地址 image_url = '/passport/image_code/'+Math.random()

passport.js接口中：

router.get("/passport/image_code/:float", ...

總結

以上是生活随笔為你收集整理的express项目搭建 初始化详细步骤的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。