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

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

添加MockServer代理

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




java postman列表 postman list对象_Server

打开mock server



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




java postman列表 postman list对象_git_02


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


java postman列表 postman list对象_java postman列表_03


定义Request接口

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


java postman列表 postman list对象_java postman列表_04


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

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


java postman列表 postman list对象_数据_05


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


java postman列表 postman list对象_postman怎么传对象list_06


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


java postman列表 postman list对象_git_07


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

添加newsList请求

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


java postman列表 postman list对象_java postman列表_08

添加请求


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

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


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