使用express搭建服務(wù)器
1、express模塊的安裝
npm install express
2、新建服務(wù)器文件.js
3、引入express模塊
const express = require('express');
4、創(chuàng)建express服務(wù)器
const app = express();
5、開啟服務(wù)器，設(shè)置端口號，（每個(gè)計(jì)算機(jī)，端口號不能重復(fù)使用）
app.listen(3006, () => console.log('express服務(wù)器開始工作了'));
app.請求方式（‘監(jiān)聽請求的url地址’，回調(diào)函數(shù)）
當(dāng)前端口制定請求方式請求url，地址就會(huì)觸發(fā)后面的回掉函數(shù)
6、后臺—GET接口
返回?cái)?shù)據(jù)用res.send
后端代碼
前端測試代碼
7、后臺 - 獲取 - GET參數(shù)
后臺代碼：
前臺測試代碼
8、后臺 - 獲取 - url參數(shù)
req可以獲取前端發(fā)過來的參數(shù)
GET方式：
url?后面?zhèn)鲄⑹褂胷eq.query就可以直接獲取
如果是路徑傳參，使用res.params
請求體傳參，(post傳輸參數(shù)的時(shí)候)使用req.body
如果有請求文件，后端引入插件multer，然后使用req.file拿到文件信息
路徑傳參，后端代碼
前端代碼：
后端一定要通過：設(shè)置好冒號：
只要用冒號：就代表這個(gè)地方返回：后的值作為key并把前臺傳過來的數(shù)據(jù)作為value顯示出來
后端獲取前端請求體的數(shù)據(jù)并展示：req.body
9、后臺 - POST接口
后端代碼：
前端代碼：
10、后臺 - 獲取 - POST請求體 - 查詢字符串
后端代碼：
前端代碼：
11、后臺 - 獲取 - POST請求體 - JSON字符串
后端代碼：
前端代碼：
********************************************************************個(gè)人理解開始*********************************************************
app.use(express.urlencoded({extended:?false}));
可以幫我們接收并解析 content-type:?application/x-www-form-urlencoded類型的請求體 中的內(nèi)容
并掛載到req.body身上
前端代碼
使用req.body直接獲取發(fā)送的內(nèi)容
req.body包含了提交數(shù)據(jù)的鍵值對在請求的body中，默認(rèn)值是undefined
如果前端post請求體是JSON字符串，需要我們調(diào)用別的方法來轉(zhuǎn)化一下
前臺代碼（注意請求類型是application/json）
在后端的接口上方添加即可，如果要引入多個(gè)只要繼續(xù)寫req.use即可
添加app.use(express.json());
即可幫我們解析 content-type:?application/json 類型的內(nèi)容
解析之后掛載到req.body身上
***********************************************************個(gè)人理解結(jié)束***********************************************************************
12、后臺 - 獲取 - POST請求體 - FormData
如果前端發(fā)送的請求體中包含請求文件（就需要?jiǎng)e的插件的幫忙了）
multer
****************************解釋（開始）******************************************************8
POST請求頭: FormData對象 -- 對應(yīng)的Content-Type: multipart/form-data; --XXADFsdfssf
--XXADFsdfssf代表的是分割符，類似上圖，用boundary定義（也可以不用寫，直接寫--），--后邊的內(nèi)容自己定義即可
注意，定義完分割符之后不要寫分號，并且空一行（規(guī)定）
開的的時(shí)候，--要在最前邊，結(jié)束的時(shí)候--要在最后邊
下邊的圖片要注意規(guī)定內(nèi)容類型的格式為圖片
Content-Type ：
格式：
（開始）--分割符
內(nèi)容的格式
（空行）
內(nèi)容的值
分割符--（結(jié)束）
只有最后一個(gè)的--在后邊，不是最后--都在前邊
Content （內(nèi)容的描述）：數(shù)據(jù)類型，是form-data的數(shù)據(jù)類型，name是我們傳輸?shù)膮?shù)名（key）
*****************************************解釋（結(jié)束）***************************************************************
這時(shí)候我們需要第三方插件才能獲取到傳輸?shù)膬?nèi)容 multer
下載 multer ： ? npm multer
但是如果前端發(fā)送的請求體中包含請求文件（就需要?jiǎng)e的插件的幫忙）
加載multer const multer = require('multer')
配置上傳目錄 const upload = multer({ dest: 'uploads/' })
app.post('/test', upload.single('cover_img'), (req, res) => {})
接口內(nèi)部，可以使用req.body接收文本值，使用req.file接收文件信息
同時(shí)，文件已經(jīng)上傳到了服務(wù)器
后端代碼：
前端代碼：
*
***************************個(gè)人理解①****************
express.static是把前端要請求的資源所在的文件夾直接暴漏出來（只要前端輸入正確的url加端口號，再加上要訪問的頁面）
例如：http：//localhost:3001/index
如果有index就會(huì)去直接訪問這個(gè)html
**********************個(gè)人理解②********************************
首先，先引入multer模塊
const?multer?=?require("multer");
然后實(shí)例化一個(gè)接收FormData的工具對象
const?upload?=?multer( ） ? ? ? ? ? （就像const app=express（）一樣）
在實(shí)例化的時(shí)候再傳入一個(gè)配置對象
dest：絕對路徑 ? ? ? ?? （dest固定屬性）讓multer解析前端上傳的文件對象，制定要保存到當(dāng)前工程文件夾那個(gè)目錄下（注意手動(dòng)建文件夾）
然后upload對象集成到app對象上，才能讓把服務(wù)器解析FormData內(nèi)容的數(shù)據(jù)
single-?單文件(指定文件傳參的名字叫cover_img)
名字隨便起，但是前臺傳文件的時(shí)候一定要對上
?{
????????fieldname:?'cover_img', ? //字段名（后臺規(guī)定的名字）
????????originalname:?'1.png',?//?前端傳參規(guī)定的文件原來的名字
????????encoding:?'7bit',?//?字節(jié)流
????????mimetype:?'image/png',?//?mime媒體(擴(kuò)展名類型)?-?image/png圖
????????destination:?'C:\\Users\\lidongxu\\Desktop\\121期_大神之路\\4_服務(wù)器端編程學(xué)習(xí)\\Day03_express入門\\2_后端代碼/uploads/', ? ? ? ?? //?后端保存文件的位置
????????filename:?'52ea6cf741fc27cf1c0d4fc5e006043e', ? ? ? //?后端隨機(jī)產(chǎn)生的文件名
????????path:?'C:\\Users\\lidongxu\\Desktop\\121期_大神之路\\4_服務(wù)器端編程學(xué)習(xí)\\Day03_express入門\\2_后端代碼\\uploads\\52ea6cf741fc27cf1c0d4fc5e006043e', ? //這個(gè)文件保存的完整路徑
????????size:?172746?//?圖片的大小
????????}
重要
整體步驟：
①npm下載multer模塊到當(dāng)前工程中
②引用模塊拿到multer方法
③用multer（）傳入一個(gè)配置對象，然后設(shè)置dest來指定讓multer解析文件保存到那個(gè)文件夾下（文件夾自己手動(dòng)創(chuàng)建）
④把第③步創(chuàng)建的upload集成到接口身上
并且再upload.single()中規(guī)定上傳圖片的name（key）所對應(yīng)的值（value）
⑤ req.body?拿到請求體里的數(shù)據(jù)參數(shù)
⑥r(nóng)eq.file?-?拿到請求體?發(fā)來的?文件對象相關(guān)的信息?(被multer處理后的)
multer把拿到的屬性和文件最后會(huì)綁定到req.body和req.file上
最終效果：拿到一個(gè)隨機(jī)代碼名字的文化，自己加一個(gè)后綴.png即可看到
13、multer高級用法_改上傳文件的名字
一、產(chǎn)出不重復(fù)字符串
第三方模塊包uuid：產(chǎn)出一個(gè)不重復(fù)的唯一的字符串
隨機(jī)數(shù)+當(dāng)前的時(shí)間毫秒?如果瞬間訪問量過大還是可能會(huì)產(chǎn)生一樣的字符所以使用uuid來生成
下載 npm install uuid
引入
const?uuidv4?=?require("uuid").v4;
v4是版本
二、創(chuàng)建一個(gè)multer磁盤控制對象
const?storageO?=?multer.diskStorage(）
這個(gè)方法就是用來控制multer在本地磁盤存儲的方式
里邊的配置對象dest，但是這里不能寫簡寫，必須寫全
const?storageO?=?multer.diskStorage({
????destination:?__dirname?+?"/uploads/",
寫我們保存的路徑（據(jù)絕對路徑）
這次我們需要自己定義文件的名字，所以filename采用自定義的方式
req是請求對象
file是文件對象（看下圖）
cb是回調(diào)函數(shù)
????filename:?(req,?file,?cb)?=>?{?
????????//?file就是multer接受到的文件,?生成的信息對象
????????//?cb一定要調(diào)用,?否則代碼就不會(huì)繼續(xù)向下執(zhí)行接口28行代碼
????????//?我們來告訴multer文件名是什么
????????let?extName?=?path.extname(file.originalname);
????????//?用uuid來作為文件名字拼接擴(kuò)展名
????????let?uuidName?=?uuidv4();
????????//?cb來返回?-?拼接后的文件名
????????cb(null,?uuidName?+?extName);
????}
})
注意：cb必須調(diào)用，否則調(diào)用
file中的東西
思路：
①得到一個(gè)隨機(jī)不重復(fù)的字符串
②創(chuàng)建一個(gè)multer磁盤控制對象
放文件存儲的路徑
以及對multer解析的file的內(nèi)容進(jìn)行修改
注意，必須調(diào)用cb，不然不會(huì)生效
uuid模塊生成隨機(jī)字符串名字
拼接
path模塊的extname取出前臺傳過來的文件的后綴格式
最后用cb返回（不適用return）
cb（第一個(gè)參數(shù)是錯(cuò)誤對象error（沒有錯(cuò)誤直接寫null），然后就是拼接完成后的名字）
③把最后的文件地址發(fā)給前臺
當(dāng)然直接返回前端也獲取不到，
所以需要后臺把這個(gè)uploads下的一切返回給前端瀏覽器讓瀏覽器查看
14、靜態(tài)資源配置
15、前綴虛擬路徑
16、express路由
每個(gè)請求對應(yīng)一個(gè)響應(yīng)
