一个博客网站mock接口示例

登录页

登录接口

• 请求URL： /auth/login

• 请求方式： POST

• 描述： 登录接口

• mock.js 配置：

  {
    "code": 20000,
    "message": "成功",
    "data": {
      "access_token": "@word(30)",
      "token_type": "bearer",
      "refresh_token": "fbdgsbscpakavfpjurbeqegmrrhghv",
      "expires_in": "@natural", // access_token 有效时长
      "scope": "all", // 权限范围
      "userInfo": {
        "uid": "1",
        "username": "@name",
        "mobile": /1\d{10}/,
        "email": "@email",
        "nickName": "@cname",
        "imageUrl": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"
      },
      "jti": "@word(20)" // access_token 唯一标签
    }
  }
  

注册页

查询用户名是否已被注册

• 请求URL：/system/api/user/username/{username}

• 请求方式： GET

• 描述：查询用户名是否已被注册

• mock.js 配置：

  {
    "code": 20000,
    "message": "查询成功",
    "data": false // true 已被注册，false 未被注册
  }
  

注册用户接口

• 请求URL： /system/api/user/register

• 请求方式： POST

• 描述：注册接口

• mock.js 配置：

  {
    "code": 20000,
    "message": "注册成功"
  }
  

已存在用户名测试

输入用户名为“test”，提交注册，会提示 用户名已被注册，请重新输入用户名

• 请求URL：/system/api/user/username/test

• 请求方式： GET

• 描述：查询用户名是否已被注册

• mock.js 配置：

  {
    "code": 20000,
    "message": "查询成功",
    "data": false // true 已被注册，false 未被注册
  }
  

注销页

注销

• 请求URL：/auth/logout

• 请求方式： GET

• 描述：退出系统

• mock.js 配置：

  {
    "code": 20000,
    "message": "退出成功"
  }
  

token刷新

• 请求URL：/auth/user/refreshToken

• 请求方式： GET

• 描述：刷新令牌接口

• mock.js 配置：刷新令牌获取的身份信息和 登录时获取的是一样的。

  {
    "code": 20000,
    "message": "成功",
    "data": {
      "access_token": "@word(30)",
      "token_type": "bearer",
      "refresh_token": "fbdgsbscpakavfpjurbeqegmrrhghv",
      "expires_in": "@natural", // access_token 有效时长
      "scope": "all", // 权限范围
      "userInfo": {
        "uid": "@natural",
        "username": "@name",
        "mobile": /1\d{10}/,
        "email": "@email",
        "nickName": "@cname",
        "imageUrl": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"
      },
      "jti": "@word(20)" // access_token 唯一标签
    }
  }
  

博客首页

查询技术频道(类别)列表接口

• 请求URL：/article/api/category/list

• 请求方式： GET

• 描述：查询技术频道(类别)列表接口

• mock.js 配置：随机产生8条分类数据

  {
    "code": 20000,
    "message": "查询成功",
    "data|8": [{ // 产生8条数据
      "id|+1": 10, //初始值10开始，每条+1, 
      "name": "@cname", // 随机一个名字
    }]
  }
  

获取指定位置的广告信息接口

• 请求URL：/article/api/advert/show/{position}

• 请求方式： GET

• 描述：获取指定位置的广告信息

• mock.js 配置：随机产生3条数据

{
  "code": 20000,
  "message": "查询成功",
  "data|3": [{ // 产生8条数据
    "id|+1": 10, //初始值10开始，每条+1, 
    "title": "@ctitle", // 随机一个标题
    "imageUrl": "https://img.alicdn.com/imgextra/i1/3603079088/O1CN01jYfKNE2H0Lz1YJoFC_!!3603079088.jpg",
    "advertUrl": "http://www.mengxuegu.com",
    "advertTarget": "_blank",
  }]
}

获取文章列表接口

• 请求URL： article/api/article/list

• 请求方式： POST

• 描述：获取文章列表接口

• mock.js 配置：分页查询，每次查询20条

  {
    "code": 20000,
    "message": "查询成功",
    "data": {
      "total": "@integer(100, 200)", // 总记录数
      "records|20": [{ //生成20条数据
        "id|+1": 10, //初始值10开始，每条+1
        "userId|+1": 1, // 发布者id
        "nickName": "@cname", // 发布者昵称
        "title": "@csentence", // 标题
        "summary": "@csentence(50, 100)",
        "imageUrl|1": [null, "https://img.alicdn.com/bao/uploaded/i2/3603079088/O1CN01rGCkfb2H0M1O7Lj45_!!0-item_pic.jpg"],
        "viewCount": "@integer(0, 100000)", // 浏览次数
        "thumhup": "@integer(0, 100000)", // 点赞数
        "updateDate": "@datetime"
      }]
    }
  }
  

文章详情页

文章内容显示

• 请求URL： /article/api/article/{id}
• 请求方式： GET
• 描述：查询文章详情数据接口
• mock.js 配置：包含文章所属标签集合 labelList

{
  "code": 20000,
  "message": "成功",
  "data": {
    "id": "10",
    "userId": "1",
    "nickName": "@cname",
    "title": "@csentence", // 标题
    "summary": "@csentence(50, 100)",
    "viewCount": "@integer(0,100)",
    "thumhup": "@integer(0,10)",
    "createDate": "@datetime",
    "updateDate": "@datetime", // 详情显示的时间
    "ispublic|1": [0, 1], // 0: 不公开 1：公开
    "labelIds|1-5": ['@integer(10, 24)'], //随机产生1到5个元素的数字数组，数字取值10到24间
    "labelList|3": [{ // 所属标签集合
      "id|+1": 10,
      "name": "@word" // 标签名
    }],
    "imageUrl|1": [null, "https://img.alicdn.com/bao/uploaded/i2/3603079088/O1CN01rGCkfb2H0M1O7Lj45_!!0-item_pic.jpg"],
    "mdContent": '# vue-element-admin 概述\n\n[vue-element-admin](https://panjiachen.github.io/vue-element-admin) 是一个后台前端解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element-ui](https://github.com/ElemeFE/element)实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。\n\n[vue-element-admin](https://panjiachen.github.io/vue-element-admin) 定位是后台集成方案，不太适合当基础模板来进行二次开发，因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。\n\n官方还提供了一套基础模板 [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template) ，我们基于它进行二次开发，想要什么功能或者组件就去 `vue-element-admin` 那里复制过来。\n\n\n\n## 参考：\n\n- 官方文档 ：https://panjiachen.gitee.io/vue-element-admin-site/zh/\n\n- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) 脚手架: \n\n  在线预览：https://panjiachen.gitee.io/vue-element-admin\n\n  `gitee`  ：https://gitee.com/mirrors/vue-element-admin\n\n  `github` ：https://github.com/PanJiaChen/vue-element-admin\n\n- [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template) 脚手架: \n\n  在线预览：https://panjiachen.gitee.io/vue-admin-template\n\n  `github` 源码：https://github.com/PanJiaChen/vue-admin-template\n\n',
    "htmlContent": '<h1><a id=\"vueelementadmin__0\"></a>vue-element-admin 概述</h1>\n<p><a href=\"https://panjiachen.github.io/vue-element-admin\" target=\"_blank\">vue-element-admin</a> 是一个后台前端解决方案，它基于 <a href=\"https://github.com/vuejs/vue\" target=\"_blank\">vue</a> 和 <a href=\"https://github.com/ElemeFE/element\" target=\"_blank\">element-ui</a>实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。</p>\n<p><a href=\"https://panjiachen.github.io/vue-element-admin\" target=\"_blank\">vue-element-admin</a> 定位是后台集成方案，不太适合当基础模板来进行二次开发，因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。</p>\n<p>官方还提供了一套基础模板 <a href=\"https://github.com/PanJiaChen/vue-admin-template\" target=\"_blank\">vue-admin-template</a> ，我们基于它进行二次开发，想要什么功能或者组件就去 <code>vue-element-admin</code> 那里复制过来。</p>\n<h2>参考：</h2>\n<ul>\n<li>\n<p>官方文档 ：https://panjiachen.gitee.io/vue-element-admin-site/zh/</p>\n</li>\n<li>\n<p><a href=\"https://github.com/PanJiaChen/vue-element-admin\" target=\"_blank\">vue-element-admin</a> 脚手架:</p>\n<p>在线预览：https://panjiachen.gitee.io/vue-element-admin</p>\n<p><code>gitee</code>  ：https://gitee.com/mirrors/vue-element-admin</p>\n<p><code>github</code> ：https://github.com/PanJiaChen/vue-element-admin</p>\n</li>\n<li>\n<p><a href=\"https://github.com/PanJiaChen/vue-admin-template\" target=\"_blank\">vue-admin-template</a> 脚手架:</p>\n<p>在线预览：https://panjiachen.gitee.io/vue-admin-template</p>\n<p><code>github</code> 源码：https://github.com/PanJiaChen/vue-admin-template</p>\n</li>\n</ul>\n<p>参考官网配置：<br /><a href="https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-%E6%96%87%E4%BB%B6%E5%A4%B9" target="_blank">https://cli.vuejs.org/zh/guid…</a></p><p>需要设置<code>BASE_URL</code></p><pre><div class="hljs"><code class="lang-js">data () {  <span class="hljs-keyword">return</span> {    <span class="hljs-attr">publicPath</span>: process.env.BASE_URL  }}</code></div></pre><p>然后</p><pre><div class="hljs"><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"`${publicPath}my-image.png`"</span>&gt;</span></code></div></pre><p><mark>特别强调</mark></p>'
  }
}

更新浏览量+1数据接口

• 请求URL： /article/api/article/viewCount/{id}

• 请求方式： PUT

• 描述：更新文章浏览数量接口

• mock.js 配置

  {
    "code": 20000,
    "message": "成功"
  }
  

文章点赞接口

• 请求URL： /article/article/thumb/{articleId}/{count}

• 请求方式： PUT

• 描述：更新点赞数量接口，登录后才可以点赞

• mock.js 配置

  {
    "code": 20000,
    "message": "成功"
  }
  

通过文章ID查询所有评论数据接口

• 请求URL：/article/api/comment/list/{articleId}

• 请求方式： GET

• 描述：通过文章ID查询评论接口

• mock.js 配置：包含子评论集合 children

  {
    "code": 20000,
    "message": "成功",
    "data": [{
        "id": "1",
        "parentId": "-1",
        "userId": "1",
        "nickName": "@cname",
        "userImage": "",
        "articleId": "10",
        "content": "很好",
        "createDate": "2024-03-10T04:54:23.000+0000",
        "children": []
      },
      {
        "id": "2",
        "parentId": "-1",
        "userId": "2",
        "nickName": "@cname",
        "userImage": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "articleId": "10",
        "content": "@csentence",
        "createDate": "@datetime",
        "children": [{
            "id": "3",
            "parentId": "2",
            "userId": "3",
            "nickName": "@cname",
            "userImage": null,
            "articleId": "10",
            "content": "@csentence",
            "createDate": "@datetime",
            "children": [{
              "id": "5",
              "parentId": "3",
              "userId": "4",
              "nickName": "@cname",
              "userImage": null,
              "articleId": "10",
              "content": "@csentence",
              "createDate": "@datetime",
              "children": []
            }]
          },
          {
            "id": "4",
            "parentId": "2",
            "userId": "4",
            "nickName": "@cname",
            "userImage": null,
            "articleId": "10",
            "content": "@csentence",
            "createDate": "@datetime",
            "children": []
          }
        ]
      }
    ]
  }
  

提交评论信息

不能回复自己的，只能回复别人的。只能删除自己的（当前登录用户）。

• 请求URL：/article/comment

• 请求方式： POST

• 描述：新增文章评论接口

• mock.js 配置：

  {
    "code": 20000,
    'message': "新增成功"
  }
  

删除评论信息

不能回复自己的，只能回复别人的。只能删除自己的（当前登录用户）。

• 请求URL： /article/comment/{id}

• 请求方式：DELETE

• 描述：删除文章评论接口

• mock.js 配置：

  {
    "code": 20000,
    'message': "删除成功"
  }
  

新增与修改文章页

获取分类和标签

• 请求URL： /article/api/category/label/list

• 请求方式： GET

• 描述：获取所有正常状态的分类和标签

• mock.js 配置：

  {
    "code": 20000,
    "message": "查询成功",
    "data|5": [{ // 5个分类
      "id|+1": 1, // 分类id, 初始值1开始，每条+1
      "name": "@cname", // 分类名称
      "labelList|3": [{ // 分类下的有3个标签
        "id|+1": 10, // 标签id
        "name": '@word' //标签名
      }]
    }]
  }
  

上传图片接口

上传成功和关闭窗口后，将前面上传图片的删除

• 请求URL： /article/file/upload

• 请求方式： POST

• 描述：上传图片接口

• mock.js 配置： data直接封装上传后的图片ur

  {
    "code": 20000,
    "message": "上传成功",
    "data": "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg"
  }
  

删除图片接口

• 请求URL：/article/file/delete

• 请求方式： DELETE

• 描述：删除图片接口

• mock.js 配置：

  {
    "code": 20000,
    'message': "删除成功"
  }
  

提交表单新增文章

• 请求URL：/article/article

• 请求方式：POST

• 描述：新增文章

• mock.js 配置：

  {
    "code": 20000,
    "message": "新增成功",
    "data":"10" // 新增的文章id
  }
  

提交修改文章数据

• 请求URL：/article/article

• 请求方式： PUT

• 描述：文章数据更新

• mock.js 配置：

  {
    "code": 20000,
    "message": "修改成功",
    "data":"10" // 修改的文章id
  }
  

问答列表展示页

查询热门回答接口

• 请求URL： /question/api/question/hot

• 请求方式：POST

• 描述：查询热门回答接口

• mock.js 配置：按回复数量降序

  {
    "code": 20000,
    "message": "查询成功",
    "data": {
      "total": "@integer(100, 200)", // 总记录数
      "records|20": [{
        "id|+1": 10, //初始值10开始，每条+1
        "userId": "@integer(10, 30)",
        "nickName": "@cname",
        "userImage": "@image",
        "title": "@csentence", // 标题
        "viewCount": "@integer(5, 300)", // 浏览数
        "thumhup": "@integer(2, 20)", // 点赞数
        "reply": "@integer(1, 10)", // 回复数
        "status|1": [1, 2], //  1：未解决，2：已解决
        "createDate": "@datetime",
        "updateDate": "@datetime"
      }]
    }
  }
  

查询最新回答接口

• 请求URL： /question/api/question/new

• 请求方式：POST

• 描述：查询最新回答接口

• mock.js 配置：按创建时间降序

  {
    "code": 20000,
    "message": "查询成功",
    "data": {
      "total": "@integer(100, 200)", // 总记录数
      "records|20": [{
        "id|+1": 10, //初始值10开始，每条+1
        "userId": "@integer(10, 30)",
        "nickName": "@cname",
        "userImage": "@image",
        "title": "@csentence", // 标题
        "viewCount": "@integer(5, 300)", // 浏览数
        "thumhup": "@integer(2, 20)", // 点赞数
        "reply": "@integer(1, 10)", // 回复数
        "status|1": [1, 2], //  1：未解决，2：已解决
        "createDate": "@datetime",
        "updateDate": "@datetime"
      }]
    }
  }
  

查询等待回答接口

• 请求URL： /question/api/question/wait

• 请求方式：POST

• 描述：查询等待回答接口

• mock.js 配置：回复数 “reply”: 0 为等待问答数据

  {
    "code": 20000,
    "message": "查询成功",
    "data": {
      "total": "@integer(100, 200)", // 总记录数
      "records|20": [{
        "id|+1": 10, //初始值10开始，每条+1
        "userId": "@integer(10, 30)",
        "nickName": "@cname",
        "userImage": "@image",
        "title": "@csentence", // 标题
        "viewCount": "@integer(5, 300)", // 浏览数
        "thumhup": "@integer(2, 20)", // 点赞数
        "reply": 0, // 回复数
        "status": 1, //  1：未解决，2：已解决
        "createDate": "@datetime",
        "updateDate": "@datetime"
      }]
    }
  }
  

新增与修改问题

新增问题接口

• 请求URL： /question/question
• 请求方式： post
• 描述：新增问题接口
• mock.js 配置：

{
  "code": 20000,
  "message": "新增成功",
  "data": "10" // 新增的问题id
}

更新问题接口

更新会先查询问题详情，查询详情接口在上面已经定义好了。

• 请求URL： /question/question
• 请求方式： put
• 描述：更新问题接口
• mock.js 配置：

{
	"code": 20000,
	"message": "修改成功",
	"data": "11" // 修改的问题id
}

问答详情页面

问题详情数据接口

• 请求URL： /question/api/question/{id}

• 请求方式：GET

• 描述：查询问题详情数据接口

• mock.js 配置：包含问题所属标签ids集合 labelIds ，所属标签集合 labelList

  {
    "code": 20000,
    "message": "成功",
    "data": {
      "id": "10",
      "userId": "1",
      "nickName": "@cname",
      "userImage": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
      "title": "@csentence", // 标题
      "viewCount": "@integer(0,100)",
      "thumhup": "@integer(0,10)",
      "reply": "@integer(0,3)",
      "status|1": [1, 2], //1：未解决，2：已解决
      "createDate": "@datetime",
      "updateDate": "@datetime", // 详情显示的时间
      "labelIds|1-5": ['@integer(10, 24)'], //随机产生1到5个元素的数字数组，数字取值10到24间
      "labelList|3": [{ // 所属标签集合
        "id|+1": 10,
        "name": "@word" // 标签名
      }],
      "mdContent": '参考官网配置：[https://cli.vuejs.org/zh/guid...](https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-文件夹)需要设置`BASE_URL````jsdata () {  return {    publicPath: process.env.BASE_URL  }}```然后```html<img :src="`${publicPath}my-image.png`">```',
  
      "htmlContent": '<p>参考官网配置：<br /><a href="https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-%E6%96%87%E4%BB%B6%E5%A4%B9" target="_blank">https://cli.vuejs.org/zh/guid…</a></p><p>需要设置<code>BASE_URL</code></p><pre><div class="hljs"><code class="lang-js">data () {  <span class="hljs-keyword">return</span> {    <span class="hljs-attr">publicPath</span>: process.env.BASE_URL  }}</code></div></pre><p>然后</p><pre><div class="hljs"><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"`${publicPath}my-image.png`"</span>&gt;</span></code></div></pre>'
    }
  }
  

更新浏览量+1数据接口

• 请求URL： /question/api/question/viewCount/{id}

• 请求方式： PUT

• 描述：更新问题浏览数量接口

• mock.js配置：

  {
    "code": 20000,
    "message": "成功"
  }
  

根据标签ID查询回答列表

• 请求URL： /question/api/replay/list/{questionId}
• 请求方式： get
• 描述：通过问题ID查询所有回答接口
• mock.js 配置：包含子评论集合 children

{
  "code": 20000,
  "message": "成功",
  "data": [{
      "id": "1",
      "parentId": "-1",
      "userId": "1",
      "nickName": "@cname",
      "userImage": "@image",
      "questionId": "10",
      "mdContent": '改成相对路径试试```shpublicPath:"./"```',
      "htmlContent": '<p>改成相对路径试试</p><pre><div class="hljs"><code class="lang-sh">publicPath:<span class="hljs-string">"./"</span></code></div></pre>',
      "createDate": "@datetime",
      "children": []
    },
    {
      "id": "2",
      "parentId": "-1",
      "userId": "2",
      "nickName": "@cname",
      "userImage": "@image",
      "questionId": "10",
      "mdContent": "==特别强调==",
      "htmlContent": "<p><mark>特别强调</mark></p>",
      "createDate": "@datetime",
      "children": [{
        "id": "3",
        "parentId": "2",
        "userId": "3",
        "nickName": "@cname",
        "userImage": "@image",
        "questionId": "10",
        "mdContent": "@csentence",
        "htmlContent": "@csentence",
        "createDate": "@datetime",
        "children": [{
          "id": "4",
          "parentId": "3",
          "userId": "5",
          "nickName": "@cname",
          "userImage": "@image",
          "questionId": "10",
          "mdContent": "@csentence",
          "htmlContent": "@csentence",
          "createDate": "@datetime",
          "children": []
        }]
      }]
    },
    {
      "id": "5",
      "parentId": "-1",
      "userId": "6",
      "nickName": "@cname",
      "userImage": "@image",
      "questionId": "10",
      "mdContent": "需要设置`BASE_URL`",
      "htmlContent": "<p>需要设置<code>BASE_URL</code></p>",
      "createDate": "@datetime",
      "children": []
    }
  ]
}

更新问题点赞数量接口

• 请求URL： /question/question/thumb/{questionId}/{count}

• 请求方式： put

• 描述：更新问题点赞数量接口

• mock.js 配置：

  {
    "code": 20000,
    'message': "成功"
  }
  

新增回答数据接口

• 请求URL： /question/replay

• 请求方式： post

• 描述：新增回答数据接口

• mock.js 配置：

  {
    "code": 20000,
    "message": "新增成功"
  }
  

删除回答数据接口

• 请求URL： /question/replay/{id}

• 请求方式： delete

• 描述：删除回答数据接口

• mock.js 配置：

  {
    "code": 20000,
    "message": "删除成功"
  }
  

个人主页

查询个人用户信息

• 请求URL： /system/user/{id}

• 请求方式：GET

• 描述：通过用户 ID 查询个人信息

• mock.js 配置：

  {
    "code": 20000,
    "message": "查询成功",
    "data": {
      "id": 1,
      "username": "@name",
      "password": "xxxxxxx",
      "nickName": "@cname",
      "imageUrl": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
      "mobile": /1\d{10}/,
      "email": "@email()",
      "createDate": "@date",
      "updateDate": "@date",
    }
  }
  

提交修改个人用户信息

• 请求URL： /system/user

• 请求方式： put

• 描述：提交修改用户信息

• mock.js 配置：

  {
    "code": 20000,
    "message": "修改成功"
  }
  

查询个人公开和私密文章

查询个人公开和私密文章后台接口是同一个，在调用这个接口时会传递一个 isPublic 参数(1 不公开，0公开)。

• 请求URL： /article/article/user
• 请求方式： post
• 描述：查询个人公开和私密文章
• mock.js 配置：

{
  "code": 20000,
  "message": "查询成功",
  "data": {
    "total": "@integer(100, 200)", // 总记录数
    "records|20": [{ //生成20条数据
      "id|+1": 10, //初始值10开始，每条+1
      "userId": "@integer(10, 30)",
      "nickName": "@cname",
      "userImage": "@image",
      "title": "@ctitle", // 标题
      "viewCount": "@integer(0, 100000)", // 浏览次数
      "thumhup": "@integer(0, 100000)", // 点赞数
      "ispublic|1": [0,1], // 0: 不公开 1：公开
      "status|1": [1, 2], //  1:未审核，2:已审核
      "updateDate": "@date",
    }]
  }
}

查询我的提问

• 请求URL： /question/question/user

• 请求方式： post

• 描述：查询我的提问

• mock.js 配置：

  {
    "code": 20000,
    "message": "查询成功",
    "data": {
      "total": "@integer(100, 200)", // 总记录数
      "records|20": [{
        "id|+1": 10, //初始值10开始，每条+1
        "userId": "@integer(10, 30)",
        "nickName": "@cname",
        "userImage": "@image",
        "title": "@csentence", // 标题
        "viewCount": "@integer(5, 300)", // 浏览数
        "thumhup": "@integer(2, 20)", // 点赞数
        "reply": "@integer(1, 10)", // 回复数
        "status|1": [1, 2], //  1：未解决，2：已解决
        "createDate": "@datetime",
        "updateDate": "@datetime"
      }]
    }
  }
  

添加校验原密码接口

• 请求URL： /system/user/check/password

• 请求方式： post

• 描述： 校验原密码

• mock.js 配置：

  {
    "code": 20000,
    "message": "校验成功"
  }
  

提交修改新密码接口

• 请求URL： /system/user/password

• 请求方式：PUT

• 描述： 提交修改新密码

• mock.js 配置：

  {
    "code": 20000,
    "message": "修改成功"
  }
  

前端调用接口的函数

article.js

export default({$axios}, inject) => {

  // 查询技术频道列表接口
  inject('getCategoryList', () => $axios.$get('/article/api/category/list'))


  // 获取指定位置的广告信息
  inject('getAdvertList', position => $axios.$get(`/article/api/advert/show/${position}`))

  // 文章列表分页接口
  inject('getArticleList', query => $axios.$post('/article/api/article/list', query) )

  // 查询文章详情
  inject('getArticleById', id => $axios.$get(`/article/api/article/${id}`))

  // 更新文章浏览数
  inject('updateArticleViewCount', id => $axios.$put(`/article/api/article/viewCount/${id}`))

  // 更新文章浏览数
  inject('updateArticleThumb', (articleId, count) => $axios.$put(`/article/article/thumb/${articleId}/${count}`))

  // 通过文章id查询评论列表
  inject('getCommentListByArticleId', articleId => $axios.$get(`/article/api/comment/list/${articleId}`))

  // 新增评论
  inject('addComment', data => $axios.$post(`/article/comment`, data))

  // 删除评论
  inject('deleteCommentById', id => $axios.$delete(`/article/comment/${id}`))

  // 获取所有正常状态的分类及标签
  inject('getCategoryAndLabel', () => $axios.$get(`/article/api/category/label/list`))

  // 新增文章
  inject('addArticle', data => $axios.$post(`/article/article`, data))


  // 修改文章
  inject('updateArticle', data => $axios.$put(`/article/article`, data))

}

common.js

export default ({$axios}, inject) => {
  // 上传图片
  inject('uploadImg', data => $axios.$post('/article/file/upload', data))

  // 删除图片 /article/file/delete?fileUrl=xxx
  inject('deleteImg', fileUrl => $axios.$delete('/article/file/delete', {params: {fileUrl}}))
}

question.js

export default ({$axios}, inject) => {
  // 热门回答
  inject('getHotList', page => $axios.$post('/question/api/question/hot', page))

  // 最新回答
  inject('getNewList', page => $axios.$post('/question/api/question/new', page))

  // 等待回答
  inject('getWaitList', page => $axios.$post('/question/api/question/wait', page))

  // 查询问题详情
  inject('getQuestionById', id => $axios.$get(`/question/api/question/${id}`))

  // 更新浏览数
  inject('updateQuestionViewCount', id => $axios.$put(`/question/api/question/viewCount/${id}`))

  // 通过问题id查询回复数据接口
  inject('getReplayByQuestionById', questionId => $axios.$get(`/question/api/replay/list/${questionId}`))

  // 更新点赞数
  inject('updateQuestionThumb', (questionId, count) => $axios.$put(`/question/question/thumb/${questionId}/${count}`))

  // 新增问题回答内容
  inject('addReplay', data => $axios.$post(`/question/replay`, data))

  // 删除回答内容, id 是回答内容的id
  inject('deleteReplayById', id => $axios.$delete(`/question/replay/${id}`))

  // 新增问题
  inject('addQuestion', data => $axios.$post(`/question/question`, data))

  // 修改问题
  inject('updateQuestion', data => $axios.$put(`/question/question`, data))

  // 通过标签id查询问题列表
  inject('getQuestionByLableId', (page, labelId) => $axios.$post(`/question/api/question/list/${labelId}`, page))

}

test.js

export default({$axios}, inject) => {
  // 测试注入
  inject('testInject', ()=>{
    console.log("注入成功")
    return new Promise((resolve, reject) => {
      resolve("注入成功");
    })
  })

  // 测试接口
  inject('getTestApi', () => $axios.$get('/test'))

}

user.js

export default ({$axios}, inject) => {

  // 查询个人用户信息
  inject('getUserInfo', id => $axios.$get(`/system/user/${id}`))

  // 提交修改个人用户信息
  inject('updateUserInfo', data => $axios.$put(`/system/user`, data))

  // 查询个人公开或私密文章 isPublic
  inject('findUserArticle', query => $axios.$post(`/article/article/user`, query))

  // 查询我的提问
  inject('findUserQuestion', query => $axios.$post(`/question/question/user`, query))

  // 校验原密码是否正确
  inject('checkOldPassword', data => $axios.$post('/system/user/check/password', data))
  
  // 提交修改密码
  inject('updatePassword', data => $axios.$put('/system/user/password', data))
}