server-mock是什么权薯？
是一款nodejs的應(yīng)用李命，用于搭建web服務(wù)器片拍，模擬后端，方便前端去mock數(shù)據(jù)昔榴，是基于express（express是基于node.js平臺的web開發(fā)框架）
tips：可以將node.js理解為一個操作系統(tǒng)辛藻，我們開發(fā)的node.js應(yīng)用均是基于它之上的；npm是node.js提供給我們的一個包管理器互订，可以通過它下載應(yīng)用
server-mock安裝
- 先得安裝node.js和npm
-
npm install -g server-mock： 安裝server-mock
使用場景
1. 搭建web服務(wù)器
步驟（使用gitbash或者cmd命令行操作）：
- cd到文件所在的文件夾下
- 執(zhí)行
mock start即可將文件夾作為根目錄啟動一個服務(wù)器 - 在瀏覽器輸入：
localhost:8080/xxx.html;
tips：
- localhost代表的是本機吱肌，本機的ip是：
127.0.0.1 - 因為web server默認(rèn)的指定文件是index.html，所以當(dāng)是index.html時仰禽，不需要在后面寫index.html氮墨，如果不是，則必須寫明所對應(yīng)的html文件
- 8080端口是給WWW代理服務(wù)器使用的吐葵，规揪，主要用于網(wǎng)頁瀏覽；而80端口是給http協(xié)議傳輸數(shù)據(jù)使用的温峭，在我們輸入一個網(wǎng)址時猛铅，其實瀏覽器已經(jīng)幫我們添加了協(xié)議并設(shè)定了端口號（80），這是默認(rèn)的http傳輸?shù)亩丝谔柍狭砸话愣疾粚?/li>
2. 為ajax請求mock數(shù)據(jù)（經(jīng)常使用）
步驟：
- cd到文件所在的文件夾下
- 在當(dāng)前文件夾下創(chuàng)建
router.js奕坟，該文件是接收并處理后端請求的文件（可以認(rèn)為是網(wǎng)站的后端） -
mock init創(chuàng)建使用mock創(chuàng)建服務(wù)器的范例
tips：
- 可以通過
mock init獲得使用mock創(chuàng)建服務(wù)器的范例 - 寫好了html后，要將其拆分為模板清笨，可由前端或后端來完成
注意：一般前端寫的只是“模板”月杉，只有將后端的數(shù)據(jù)獲取過來，并填充到模板抠艾，才是頁面顯示的內(nèi)容
使用MockServer搭建一個web服務(wù)器苛萎，通過form表單提交數(shù)據(jù)案例
步驟：
- 在文件所在文件夾下建立router.js和user.ejs
- 編寫router.js服務(wù)器代碼
- 編寫user.ejs代碼（ejs是一種模板語言，里面其實就是html，只不過提供了一些語法能夠插入從后端獲取到的數(shù)據(jù)）
router.js代碼：
app.get('/user', function(req, res){
var username = req.query.username;
var friends;
if (username === 'shaunZh') {
friends = ['湛可愛', '楊貴妃'];
} else {
friends = ['nobody'];
}
console.log(friends);
res.render('user.ejs', {
friends: friends
});
});
**注意： **
- 我們使用的是get請求腌歉，所以是
app.get蛙酪， 并且用query對象獲取數(shù)據(jù) - 如果使用的是post請求，則需要改為
app.post翘盖，并且用body對象獲取數(shù)據(jù) -
res.render語句表示將friends數(shù)據(jù)放到user.ejs模板中桂塞，然后將user.ejs發(fā)送給瀏覽器進(jìn)行顯示
user.ejs代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<script src="index.js" defer></script>
<title>使用server-mock搭建web服務(wù)器并與頁面交互</title>
</head>
<body>
<form action="/user" method="get" accept-charset="utf-8">
<div>
<input type="text" name="username">
<input type="submit" name="submit" value="查詢數(shù)據(jù)">
</div>
</form>
<ul class="friends-list">
</ul>
</body>
</html>
