vue禁止输入地址栏直接访问页面_Vue实战——利用PostMan的MockServer代理数据

承接上文：Vue实战15——利用Element-Ui实现登录注册页面。本文介绍如何利用postman的mockserver功能，代理之前我们写在public文件夹里的数据，让我们的接口更真实规范。本项目git地址：

https://gitee.com/vuejslearn/news-list.git

---

添加MockServer代理

打开postman，我的版本是7.13版。在软件的左上角有“New”字样，点击下拉，出现Mock Server.点击它。

打开mock server

点开之后，出现了新建一个集合，或者选择一个集合。这里我们新建一个集合，下面的request随便写一个(比如，我写的请求写的是a,返回的body写的也是a)，这个是默认的，后面我们还可以随时随地添加。

然后点击右下角的next,写入Mock server名称，然后创建。完成后点击close，这时候在左侧，就出现我们刚刚创建的那个集合了。

定义Request接口

有了mock Server，我们开始创建请求接口了。我们点击左侧的集合，出现了刚才我们创建时写的默认request，点击它，在右边出现了请求。然后，我们选择它的运行环境为刚刚我们创建的。

然后点击send，发现返回了我们之前在创建时写的默认返回值。

假设，我们要添加newsList这个接口，并且把之前newsList对应的json数据返回，改怎么创建这个request呢？很简单，点击旁边的Example，点击Add

name写newsList，下面的请求路径也写newsList。查询方式GET，参数暂时没有，就不写。返回的内容，就把之前写的粘贴过来，选择JSON格式。这一切都完成后，点击右上角的“Save Example”。这样，我们就定义了一个Request。但是光定义，得访问啊！怎么访问呢？刚刚我们创建的时候发现有个{{url}}/newsList，这个url是多少呢？这么查：

点击小箭头，然后点击Mocks，就出现了Mock的配置信息了，点击复制，就出来了。

出来了url，我们打开浏览器，在地址栏上输入刚才的url，再加上最新写的newsList。就出来了我们写的返回内容了。当然这种方式很笨重，我们可以利用postman的request，完成请求。

添加newsList请求

点击三个小点，然后选择，添加一个请求。写入名称：newsList点击保存。然后列表里就出现了。

添加请求

点开它，然后在右边编辑它，写入请求地址，如果有参数，就写入参数，点击send，就可以看到之前定义好的数据了。其他涉及到的接口，都可以这么改造。道理相同，就不赘述了。

下篇文章，我们将优化新闻列表页，将新闻概要抽离成组件，为将来的搜索功能做基础。

---

原创不容易，鉴于本人水平有限，文中如有错误之处欢迎大家指正。以后我会持续发布vue实战系列的文章，喜欢的朋友欢迎关注。