- url 和 資源的 映射 ( 一一對(duì)應(yīng) )關(guān)系
前端 發(fā)送一個(gè)請(qǐng)求 必須要有一個(gè)請(qǐng)求地址url
后端 根據(jù)這個(gè)前端請(qǐng)求的地址url, 響應(yīng)一些數(shù)據(jù)回去.
- express簡(jiǎn)單使用 (了解)
1) 新建一個(gè)項(xiàng)目文件夾 app
2) 進(jìn)入這個(gè)文件夾 初始化項(xiàng)目 生成 package.json
cd app
npm init -y
3) 局部安裝(在當(dāng)前項(xiàng)目文件夾里面安裝)express,并且保存到 依賴列表 里面
cnpm i express --savex
備注: 裝完以后 會(huì)生成一個(gè) node_modules 文件夾, express就在里面(npm 下載的第三方模塊都在里面)
4) 在當(dāng)前目錄新建一個(gè) app.js 文件 在這個(gè)文件里面來 寫 express 的代碼
a) 引入express模塊
const express = require('express');
b) 使用express() 方法 創(chuàng)建一個(gè) app 應(yīng)用
const app = express();
c) 使用 app 來 接收前端的請(qǐng)求 (get方式 post方式)
app.get('前端請(qǐng)求的url', (req, res) => {
// req : 請(qǐng)求對(duì)象 負(fù)責(zé)接收前端(瀏覽器 )發(fā)送過來的數(shù)據(jù)
// res: 響應(yīng)對(duì)象 負(fù)責(zé)響應(yīng)數(shù)據(jù)給前端(后端給前端發(fā)送數(shù)據(jù))
})
d) 監(jiān)聽端口
app.listen(端口號(hào), () => {
console.log('服務(wù)器啟動(dòng)成功...')
})
- express-generator腳手架的使用(快速生成一個(gè)項(xiàng)目的工程目錄)
1) 全局安裝 express-generator (安裝它的目的 是為了 運(yùn)行 express命令 )
cnpm i express-generator -g
備注: 可以運(yùn)行命令 express --version 檢測(cè)一下 是否能使用
2) 可以使用 express 命令 來快速從創(chuàng)建一個(gè)項(xiàng)目目錄
express 項(xiàng)目文件夾的名字 -e
示例: express demo -e
備注:
項(xiàng)目文件夾的名字: 會(huì)自動(dòng)生成一個(gè)項(xiàng)目文件夾
-e: 使用 ejs 模板
3) 進(jìn)入項(xiàng)目目錄, 運(yùn)行 cnpm i, 一次性安裝所有的依賴模塊
cd demo
cnpm i
4) 啟動(dòng)項(xiàng)目
a) 方式一: (不推薦)
npm run start (start有點(diǎn)特殊 可以縮寫 npm start)
備注: npm run 可以運(yùn)行 package.json 里面 script里面的內(nèi)容
b) 方式二 (*****推薦)
i) 打開 app.js 文件 , 在文件尾部(在暴露出去之前),可以自己監(jiān)聽端口
app.listen(端口號(hào), () => {
console.log('服務(wù)器啟動(dòng)成功...')
})
ii) 啟動(dòng)項(xiàng)目
node app
補(bǔ)充: 因?yàn)槊看味家獎(jiǎng)臃?wù)器代碼, 都需要重啟服務(wù)器,很煩
可以全局安裝一個(gè)模板 nodemon
1) 全局安裝 nodemon
cnpm i nodemon -g
2) 使用nodemon 替代 node 啟動(dòng)項(xiàng)目
原來: node app
現(xiàn)在: nodemon app
- 項(xiàng)目目錄詳解:
bin: 啟動(dòng)目錄 里面包含了一個(gè)啟動(dòng)文件 www 默認(rèn)監(jiān)聽端口是 3000 (不用)
node_modules: 所有安裝的依賴模塊 都在這個(gè)文件夾里面
public: 所有的前端靜態(tài)資源 html css image js
routes: 放的是 路由 文件 (默認(rèn)有兩個(gè))
路由主要定義 url 和 資源 的映射關(guān)系 ( 一一對(duì)應(yīng)關(guān)系 )
主要用來接收前端發(fā)送的請(qǐng)求 響應(yīng)數(shù)據(jù)給前端
views: 主要放置 ejs 后端模板文件
app.js: 入口文件(主文件) 總路由 (其他的路由 要由它來分配)
package.json: 包描述文件 最重要的是 依賴的模板列表 dependencies
依賴列表里面的所有模板 可以通過 cnpm i 一次性全部安裝
- 路由分配:
1) 在routes下面 新建一個(gè)子路由文件
vip.js
2) 在主路由文件 app.js里面 改動(dòng) 兩處
a) 在第8行左右 引入路由
var vipRouter = require('./routes/vip');
b) 在25行左右 分配路由 /vip 下面的請(qǐng)求 都交給vip路由處理
app.use('/vip', vipRouter);
3) 以上步驟完成, 就可以在vip.js 這個(gè)路由里面 接收前端發(fā)送的 /vip下面的請(qǐng)求
- res響應(yīng)對(duì)象(*****)
res主要負(fù)責(zé) 后端向前端 響應(yīng)(發(fā)送)數(shù)據(jù)(如果接收了請(qǐng)求 不響應(yīng),會(huì)一直掛起(轉(zhuǎn)圈圈))
主要方法:
1) res.send() (*****) // 萬能方法 可以響應(yīng)JSON 字符串 HTML script
2) res.json() // 主要給前端響應(yīng) JSON 數(shù)據(jù)
3) res.jsonp() // 主要給前端響應(yīng) JSON 數(shù)據(jù)(針對(duì)跨域請(qǐng)求)
4) 數(shù)據(jù)和模板在后端合并渲染 生成HTML 返回給前端
res.render('ejs模板文件', {JSON對(duì)象格式的數(shù)據(jù)})
5) res.download('要下載的文件的路徑', '標(biāo)題')
6) res.redirect("要跳轉(zhuǎn)到的新的網(wǎng)址url")
7) res.status(狀態(tài)碼404).render("ejs模板名字", {JSON對(duì)象格式的數(shù)據(jù)})
- req請(qǐng)求對(duì)象(*****)
req主要負(fù)責(zé) 接收前端發(fā)送過來的數(shù)據(jù)(參數(shù))
主要方法:
a) 接收 get 方式的請(qǐng)求的參數(shù)
req.query.參數(shù)的key值
b) 接收 post 方式的請(qǐng)求的參數(shù)
req.body.參數(shù)的key值
c) 補(bǔ)充:
req.ip 獲取瀏覽器的ip地址
