1.什么是express？
2.有什么好處呢孟岛？
- 易上手：nodejs最初就是為了開發(fā)高性能web服務(wù)器而被設(shè)計(jì)出來的，然而相對(duì)底層的API會(huì)讓不少新手望而卻步外遇。express對(duì)web開發(fā)相關(guān)的模塊進(jìn)行了適度的封裝票灰，屏蔽了大量復(fù)雜繁瑣的技術(shù)細(xì)節(jié)簿训，讓開發(fā)者只需要專注于業(yè)務(wù)邏輯的開發(fā)咱娶，極大的降低了入門和學(xué)習(xí)的成本。
- 高性能：express僅在web應(yīng)用相關(guān)的nodejs模塊上進(jìn)行了適度的封裝和擴(kuò)展强品，較大程度避免了過度封裝導(dǎo)致的性能損耗膘侮。
- 擴(kuò)展性強(qiáng)：基于中間件的開發(fā)模式，使得express應(yīng)用的擴(kuò)展的榛、模塊拆分非常簡單琼了，既靈活，擴(kuò)展性又強(qiáng)夫晌。
3.express怎么用呢雕薪？
-
1. 安裝
npm install express --save
-
2 .項(xiàng)目目錄結(jié)構(gòu)
- 項(xiàng)目目錄清晰很重要，會(huì)使操作變得簡單很多晓淀。
- express應(yīng)用的核心概念主要包括：路由所袁、中間件、模板引擎
.
├──app.js# 應(yīng)用的主入口
├──bin# 啟動(dòng)腳本
├──node_modules# 依賴的模塊
├──package.json# node模塊的配置文件
├──public# 靜態(tài)資源凶掰，如css燥爷、js、img等存放的目錄
├──routes# 路由規(guī)則存放的目錄
└──views# 模板文件存放的目錄
-
3. 引入express模塊搭建服務(wù)器
const express = require("express"); //引入模塊
(創(chuàng)建服務(wù)器 相當(dāng)于 http.createServer)
const app = express();
當(dāng)服務(wù)器收到 get/post 請(qǐng)求時(shí) app.get() 相當(dāng)于一次次 判斷
( res.end() send的好處是 能夠自動(dòng)設(shè)置mime類型）
app.get('/',function (req,res) {
res.send();
});
app.get('/test',function (req,res) {
});
app.post('/test',function (req,res){
});
//相當(dāng)于http.listen 監(jiān)聽
app.listen(8080,function () {
console.log("http://localhost:8080");
});
很顯然這比基礎(chǔ)學(xué)習(xí)的node路由判斷懦窘，很多個(gè) if-else 簡單很多前翎，看起來也很明了。
其次不需要判斷資源的加載的類型畅涂，res.send() 能夠自動(dòng)設(shè)置mime類型
-
4. 資源開放
-
指定開放目錄
指定開放的目錄港华，即可訪問此目錄下的所有文件。
公開目錄的三種方式：
1.可以訪問此目錄下的文件資源 , 即 http://localhost:3030/static/home.html
app.use('/static/',express.static('./static')); ---> 用的多2.當(dāng)沒有第一個(gè)參數(shù)時(shí)午衰，訪問時(shí)也要?jiǎng)h除第一個(gè)參數(shù) , 即 http://localhost:3030/home.html
app.use(express.static('./static'));3.可以給目錄起別名 即 http://localhost:3030/public/home.html 即 static 的別名是 public
app.use('/public/',express.static('./static')); -
5. 數(shù)據(jù)交互
前端ajax發(fā)送的數(shù)據(jù)可以直接是個(gè)JSON對(duì)象立宜，或者直接發(fā)送個(gè)數(shù)字，字符串臊岸，都可以橙数，無需以字符串形式接收或者發(fā)送數(shù)據(jù)，但發(fā)送對(duì)象扇单，后臺(tái)接收的鍵值中 鍵的值是字符串商模。
eg: get請(qǐng)求發(fā)送的id ：后臺(tái)接收到的其實(shí)是：{' id ' : ' 1 '} 而不是數(shù)字 1
- 4.1 get 請(qǐng)求
app.get('/',function (req,res) {
console.log(req.query); //得到get請(qǐng)求發(fā)送的數(shù)據(jù) req.query
res.send("ok");
});
get 請(qǐng)求的參數(shù)可以直接由
req.query獲得奠旺，得到的是一個(gè)JSON對(duì)象蜘澜。
-
4.2 post 請(qǐng)求
post請(qǐng)求有點(diǎn)復(fù)雜，得引入 第三方包 body-parser
- 安裝
npm install body-parser - 配置
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
- 引入第三方包
const bodyParser = require('body-parser');
引入第三方包响疚，req也多了一個(gè)屬性鄙信，通過
req.body就可得到post請(qǐng)求發(fā)送的數(shù)據(jù),得到的也是一個(gè)JSON對(duì)象
app.post('/',function (req,res) {
console.log(req.body);
res.send("ok");
});
- 4.3 后臺(tái)響應(yīng)數(shù)據(jù)
后臺(tái)響應(yīng)數(shù)據(jù) 通過
res.send()即可，參數(shù)是JSON對(duì)象即可忿晕。
-
6. 重定向
res.redirect('/');
下面可以看一個(gè)簡單的小demo
后臺(tái) 代碼
let express = require("express");
const bodyParser = require('body-parser');
let app = express();
app.use('/public/',express.static('./public')); //公開資源目錄
app.use('/views/',express.static('./views')); //公開html文件目錄
let datas = [
{
"name":"小仙女",
"content":"你好哇装诡，我是第一次來到這里"
},{
"name":"我的新留言",
"content":"像夢一樣，像夢一樣自由"
}];
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
(post 方式)
app.post('/add',function (req,res) {
let rest = req.body; //得到前臺(tái)post傳過來的數(shù)據(jù)
datas.unshift(rest); //加入到datas JSON數(shù)組里
let data = {title:'post方式'};
res.send(data); //后臺(tái)返回?cái)?shù)據(jù)
res.redirect('/'); //重定向
});
(get 方式)
app.get('/add',function (req,res) {
let rest = req.query; //前臺(tái)get傳過來的數(shù)據(jù)
datas.unshift(rest); //加入到datas JSON數(shù)組里
let data = {title:'get方式'};
res.send(data) ;//后臺(tái)返回?cái)?shù)據(jù) json
res.redirect('/'); //重定向
});
app.listen(8080,function () {
console.log("http://localhost:8080");
});
前端 ajax
$.ajax({
type:'POST',
url:'/add',
dataType:'json',
data:{
name:"你好",
content:"hello,express!"
},
success:function (data) {
console.log(data); //后臺(tái)響應(yīng)的數(shù)據(jù)
window.location.href ="http://localhost:8080/"; //前端頁面重定向
}
})
express的基本使用就是這樣啦，下次會(huì)講深入的使用鸦采。會(huì)更加清晰的講解它的三個(gè)核心概念：路由宾巍、中間件、模板引擎
