MockServer的使用

server-mock是什么？

是一款nodejs的应用，用于搭建web服务器，模拟后端，方便前端去mock数据，是基于express（express是基于node.js平台的web开发框架）
tips：可以将node.js理解为一个操作系统，我们开发的node.js应用均是基于它之上的；npm是node.js提供给我们的一个包管理器，可以通过它下载应用

server-mock安装

先得安装node.js和npm
npm install -g server-mock：安装server-mock

使用场景

1. 搭建web服务器

步骤（使用gitbash或者cmd命令行操作）：

cd到文件所在的文件夹下
执行mock start 即可将文件夹作为根目录启动一个服务器
在浏览器输入：localhost:8080/xxx.html;

tips：

localhost代表的是本机，本机的ip是：127.0.0.1
因为web server默认的指定文件是index.html，所以当是index.html时，不需要在后面写index.html，如果不是，则必须写明所对应的html文件
8080端口是给WWW代理服务器使用的，，主要用于网页浏览；而80端口是给http协议传输数据使用的，在我们输入一个网址时，其实浏览器已经帮我们添加了协议并设定了端口号（80），这是默认的http传输的端口号，所以一般都不写

2. 为ajax请求mock数据（经常使用）

步骤：

cd到文件所在的文件夹下
在当前文件夹下创建router.js，该文件是接收并处理后端请求的文件（可以认为是网站的后端）
mock init 创建使用mock创建服务器的范例

tips：

可以通过mock init获得使用mock创建服务器的范例
写好了html后，要将其拆分为模板，可由前端或后端来完成

注意：一般前端写的只是“模板”，只有将后端的数据获取过来，并填充到模板，才是页面显示的内容

使用MockServer搭建一个web服务器，通过form表单提交数据案例

步骤：

在文件所在文件夹下建立router.js和user.ejs
编写router.js服务器代码
编写user.ejs代码（ejs是一种模板语言，里面其实就是html，只不过提供了一些语法能够插入从后端获取到的数据）
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对象获取数据
如果使用的是post请求，则需要改为app.post，并且用body对象获取数据
res.render语句表示将friends数据放到user.ejs模板中，然后将user.ejs发送给浏览器进行显示
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服务器并与页面交互</title>
</head>
<body>
    <form action="/user" method="get" accept-charset="utf-8">
        <div>
            <input type="text" name="username">
            <input type="submit" name="submit" value="查询数据">
        </div>
    </form>
    <ul class="friends-list">
    </ul>
</body>
</html>