前言
這是該系列文章的第三篇，主要介紹npm和express框架的應用(下一篇使用express做一個完整的案例)
npm
小demo直接用幾個js文件可以搞定，但是項目級別的目錄還是需要有規範的，也基本上都需要安裝第三方包，npm就是這樣一個包管理器。
-
新建一個英文命名的文件夾，進入後，在終端運行npm init -y 進行項目初始化
-
全局安裝依賴 npm i -g 包名
-
安裝開發依賴 npm i -D 包名
-
安裝生產依賴 npm i -S 包名
-
卸載依賴包 npm uninstall 包名
-
npm update升級依賴包版本
-
npm list查看依賴的當前版本
-
npm search查找包含該字符串的依賴包
express
express 是一個前幾年比較流行的Node.js框架，現在逐步被koa2,egg取代，但還是有必要學習一下的。koa2基於express封裝，egg基於koa2封裝。官網：http://expressjs.com/
基本使用
上文用原生http模塊搭建的服務器，這次用express，它內置路由，比原生更強大.但有一點，默認不支持post請求，需要依賴第三方插件（body-parser,formidable…）
// 1. 引包
var express = require('express')
//獲取服務器對象
var app = express()
//設置路由，訪問首頁顯示 hello express
app.get('/',function(req,res){
res.send('hello express');
})
app.get('/about', function (req, res) {
// 在 Express 中可以直接 req.query 來獲取查詢字符串參數
res.send(req.query)
})
//設置監聽
app.listen(3000,function(){
console.log('run server___');
})
靜態資源開放
有些時候，服務器上的靜態資源我們允許直接訪問（如css,js,img）
var express = require('express');
var app = express();
//開放靜態資源 如原始路徑爲/public/1.jpg 現在可以/1.jpg 訪問 ，少了一層目錄
app.use(express.static('public'))
app.listen(3000, function() {
console.log('run server__')
})
404攔截處理
express 對於沒有設定的請求路徑，默認會返回 Cat not get xxx,如果你想要定製這個 404,需要通過中間件來配置.
// 寫在最後一個路由後邊
app.use(function (req, res) {
// 所有未處理的請求路徑都會跑到這裏
// do something
}
處理post請求
下面用兩個完整的示例，介紹express+中間件處理post請求的過程
- Node.js開發顯示界面一般放在views文件夾內，這是路由渲染時候的默認查找
- 未必是html，看模板引擎而定，ejs模板引擎用的就是xxx.ejs
step 1–安裝依賴
- npm i express
- npm i body-parser //處理post請求
- npm i formidable //處理post請求，也可以處理上傳 和 body-parser 二選一就好
- npm i art-template //模板引擎
- npm i express-art-template //與express結合的模板引擎
step 2 --配置body-parser和模板引擎
// 1. 引包
var express = require('express')
var bodyParser = require('body-parser')
//獲取服務器對象
var app = express()
//配置bodyParser
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
//整合模板引擎
app.engine('html', require('express-art-template'))
app.get('/', function (req, res) {
res.render('form.html');
})
//處理表單的post請求，req.body用來接收數據
app.post('/post', function (req, res) {
res.send(req.body);
})
//設置監聽
app.listen(3000,function(){
console.log('run server___');
})
step 3 --編寫form.html代碼
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<form action="/post" method="post">
<p>姓名<input type="text" name="name"></p>
<p>年齡<input type="text" name="age"></p>
<p><input type="submit"></p>
</form>
</body>
</html>
使用formidable替代body-parser
// 1. 引包
var express = require('express')
var formidable = require('formidable');
//獲取服務器對象
var app = express()
//整合模板引擎
app.engine('html', require('express-art-template'))
app.get('/', function (req, res) {
res.render('form.html');
})
app.post('/post', function (req, res) {
var form = new formidable.IncomingForm();
//可以自己打印看看回調函數裏邊三個參數是什麼
form.parse(req, function (err, fields, files) {
res.send(fields);
})
})
//設置監聽
app.listen(3000, function () {
console.log('run server___')
})