spring boot+iview 前后端分离架构之接口文档的编写和所有mock数据的实现（十）

小咪咪 2022-01-28 01:36 195阅读 0赞

### spring boot 与 iview 前后端分离架构之接口文档的编写和所有mock数据的实现（十） ###

*  公众号
 *  写在前端开发之前
 *  接口文档
 *  API的编写
 *  mock数据

# 公众号 #

![在这里插入图片描述][20191218155125364.jpg]  
大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg11】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

# 写在前端开发之前 #

假定我们现在是作为一个前端开发工程师，这时候后端的开发人员还没有给我们提供一个服务给我们调用，那我们这时候该如何去编写我们的前端呢，大家很明显就想到了上一章的mock的实现，但是不可能由前端人员去编写接口，因此这时候就需要后端人员先给予我们前端开发人员一套完整的接口文档，接口文档的编写就是在第八章的时候我们所说的给予markdown来进行编写的接口文档，假定我们现在后端的开发人员已经写好了接口文档，那么我们就可以照着后端开发人员的接口文档我们来编写我们的mock数据.

# 接口文档 #

接口文档已经事先编写完成在bg-admin-doc的接口文档的目录底下，接口文档的编写大家自己去下载本章的github上下载下来自己查看即可。

# API的编写 #

打开我们的接口文档，同时打开我们的bg-admin-web工程，定位到我们的api目录底下，然后开始编写我们的的接口文档，接口的编写完全是按着接口文档来进行实现的。  
假定你现在要编写一个增加字典数据的接口，那么我们就打开我们的数据字典的接口文档如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]  
那么我们的api就像如下的方式进行编写：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]  
其他所有的接口文档都是按着这个套路来进行实现的。

# mock数据 #

假定现在大家都已经基于接口文档编写好了所有的接口了，那么我们接下来基于接口文档来开始编写我们的mock数据，理论上我们编写mock的时候是一个接口一个JSON文件命名的格式为【相关模块.接口名称.json】假定我们现在要编写增加字典的mock，那么我们直接在dict目录底下创建一个dict.addDitc.json文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]  
dict.addDitc.json文件的内容是根据接口文档来进行编写的，json信息如下：

{
      "code": 200,
      "msg": "增加字典数据成功",
      "obj": {
        "id": "bce4b89b789d4be99fe218d431e9a1b8",
        "dictType": "21321",
        "dictCode": "1312",
        "dictText": "123",
        "dictValue": "123"
      }
    }

我们配置好JSON以后打开我们的**mock目录**底下的mock.js文件，然后添加以下的代码

import dictAddDict from './json/dict/dict.addDict';
    Mock.mock('/dict/addDict', 'post', dictAddDict);

那么到此处我们就完成了数据的mock，剩下的所有的接口都是使用该套路来进行实现的。  
上一篇文章地址：[spring boot+iview 前后端分离架构之前端mock的实现（九）][spring boot_iview _mock]  
下一篇文章地址：[spring boot+iview 前后端分离架构之前端路由的实现（十一）][spring boot_iview]

[20191218155125364.jpg]: /images/20220128/de63a833a8ae41ef98365ef4c908b151.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20220128/f1c9d228dfcf4983ac29c5772ea9045f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20220128/ca0af13aacff46928ea670c11aab5adf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]: /images/20220128/3a821ab46e00420798d2852782c2f658.png
[spring boot_iview _mock]: https://blog.csdn.net/linzhefeng89/article/details/90412922
[spring boot_iview]: https://blog.csdn.net/linzhefeng89/article/details/90476866