Vue + Element UI 前端篇(九):接口格式定义

这篇具有很好参考价值的文章主要介绍了Vue + Element UI 前端篇(九):接口格式定义。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

接口请求格式定义

前台显示需要后台数据,我们这里先把前后端交互接口定义好,没有后台的时候,也方便用mock模拟。

接口定义遵循几个规范:

1. 接口按功能模块划分。

系统登录:登录相关接口

用户管理:用户管理相关接口

机构管理:机构管理相关接口

角色管理 : 角色管理相关接口

菜单管理 : 菜单管理相关接口

字典管理 : 字典管理相关接口

日志管理 : 日志管理相关接口

2. 通用增删改查接口采用统一命名规范。

save : 保存操作

update: 更新操作

delete: 删除操作

findAll: 查询全部

findPage : 分页查询

findTree : 返回对象树

findByXX:根据XX查询

2. 统一请求响应结果。

格式如下:

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

{
  "code": 200, // 状态吗,200:请求成功,其他:请求出错
  "msg": null, // 错误消息,成功返回 null, 否则返回出错信息
  "data": {   // 返回请求数据,JSON 数据格式
    ...
  }
}

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

系统登录

登录接口

请求URL: /sys/login

请求类型: post

请求参数:

{
  "captcha": "3323",
  "password": "admin",
  "username": "admin"
}

请求结果:

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

{
  "code": 200,
  "msg": null,
  "data": {
    "id": null,
    "userId": 1,
    "token": "77ae89be36504adfb5c09ef71409ea0e",
    "expireTime": "2018-09-01T16:24:50.473+0000",
    "createBy": null,
    "createTime": null,
    "lastUpdateBy": null,
    "lastUpdateTime": "2018-09-01T04:24:50.473+0000"
  }
}

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

用户管理

保存

请求URL: /user/save

请求类型: post

请求参数:

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

{
  "createBy": 0,
  "createTime": "2018-09-01T05:40:23.342Z",
  "delFlag": 0,
  "deptId": 110,
  "deptName": "",
  "email": "test@qq.com",
  "lastUpdateBy": 0,
  "lastUpdateTime": "2018-09-01T05:40:23.342Z",
  "mobile": "18999878998",
  "password": "123456",
  "salt": "1312321321",
  "status": 0,
  "userId": 110,
  "username": "test"
}

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

请求结果:

{
  "code": 200,
  "msg": null,
  "data": 1
}
修改

请求URL: /user/update

请求类型: post

请求参数:

{
  "mobile": "test2@qq.com",
  "userId": 110,
  "username": "test"
}

请求结果:

{
  "code": 200,
  "msg": null,
  "data": 1
}
删除

请求URL: /user/delete

请求类型: post

请求参数:

{
  "userId": 110
}

请求结果:

{
  "code": 200,
  "msg": null,
  "data": 1
}
分页查询

请求URL: /user/findPage

请求类型: post

请求参数:

{
  "pageNum": 1,
  "pageSize": 5
}

请求结果:

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

{
  "code": 200,
  "msg": null,
  "data": {
    "pageNum": 1,
    "pageSize": 5,
    "totalSize": 5,
    "totalPages": 1,
    "content": [
      {
        "userId": 1,
        "username": "admin",
        "password": "9ec9750e709431dad22365cabc5c625482e574c74adaebba7dd02f1129e4ce1d",
        "salt": "YzcmCZNvbXocrsz9dm8e",
        "email": "admin@qq.com",
        "mobile": "13612345678",
        "status": 1,
        "deptId": null,
        "deptName": null,
        "createBy": null,
        "createTime": "2018-08-14T03:11:11.000+0000",
        "lastUpdateBy": null,
        "lastUpdateTime": null,
        "delFlag": 0
      },
      {
        "userId": 2,
        "username": "Louis",
        "password": "9ec9750e709431dad22365cabc5c625482e574c74adaebba7dd02f1129e4ce1d",
        "salt": "YzcmCZNvbXocrsz9dm8e",
        "email": "louis@qq.com",
        "mobile": "18200932238",
        "status": 1,
        "deptId": null,
        "deptName": null,
        "createBy": null,
        "createTime": "2018-08-14T03:11:11.000+0000",
        "lastUpdateBy": null,
        "lastUpdateTime": null,
        "delFlag": 0
      },
      {
        "userId": 3,
        "username": "Kobe",
        "password": "9ec9750e709431dad22365cabc5c625482e574c74adaebba7dd02f1129e4ce1d",
        "salt": "YzcmCZNvbXocrsz9dm8e",
        "email": "kobe@qq.com",
        "mobile": "18200932238",
        "status": 1,
        "deptId": null,
        "deptName": null,
        "createBy": null,
        "createTime": "2018-08-14T03:11:11.000+0000",
        "lastUpdateBy": null,
        "lastUpdateTime": null,
        "delFlag": 0
      },
      {
        "userId": 4,
        "username": "Iverson",
        "password": "9ec9750e709431dad22365cabc5c625482e574c74adaebba7dd02f1129e4ce1d",
        "salt": "YzcmCZNvbXocrsz9dm8e",
        "email": "iverson@qq.com",
        "mobile": "18200932238",
        "status": 1,
        "deptId": null,
        "deptName": null,
        "createBy": null,
        "createTime": "2018-08-14T03:11:11.000+0000",
        "lastUpdateBy": null,
        "lastUpdateTime": null,
        "delFlag": 0
      },
      {
        "userId": 110,
        "username": "test",
        "password": "123456",
        "salt": "1312321321",
        "email": "test@qq.com",
        "mobile": "test2@qq.com",
        "status": 0,
        "deptId": 110,
        "deptName": null,
        "createBy": 0,
        "createTime": "2018-09-01T05:40:23.000+0000",
        "lastUpdateBy": 0,
        "lastUpdateTime": "2018-09-01T05:40:23.000+0000",
        "delFlag": 0
      }
    ]
  }
}

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

根据用户查询

请求URL: /user/findByUserName

请求类型: get

请求参数:

{
  "userName": "admin"
}

请求结果:

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

{
  "code": 200,
  "msg": null,
  "data": {
    "userId": 1,
    "username": "admin",
    "password": "9ec9750e709431dad22365cabc5c625482e574c74adaebba7dd02f1129e4ce1d",
    "salt": "YzcmCZNvbXocrsz9dm8e",
    "email": "admin@qq.com",
    "mobile": "13612345678",
    "status": 1,
    "deptId": null,
    "deptName": null,
    "createBy": null,
    "createTime": "2018-08-14T03:11:11.000+0000",
    "lastUpdateBy": null,
    "lastUpdateTime": null,
    "delFlag": 0
  }
}

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

更新密码

请求URL: /user/updatePassword

请求类型: get

请求参数:

{
  "password ": "password ",
  "newPassword ": "newPassword "
}

请求结果:

{
  "code": 200,
  "msg": null,
  "data": 1
}

机构管理

保存

请求URL: /dept/save

请求类型: post

请求参数:

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

{
  "children": [
    null
  ],
  "createBy": 0,
  "createTime": "2018-09-01T05:34:44.618Z",
  "delFlag": 0,
  "deptId": 110,
  "lastUpdateBy": 0,
  "lastUpdateTime": "2018-09-01T05:34:44.618Z",
  "name": "110",
  "orderNum": 0,
  "parentId": 0
}

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

请求结果:

{
  "code": 200,
  "msg": null,
  "data": 1
}
修改

请求URL: /dept/update

请求类型: post

请求参数:

{
  "deptId": 110,
  "name": "upate"
}

请求结果:

{
  "code": 200,
  "msg": null,
  "data": 1
}
删除

请求URL: /dept/delete

请求类型: post

请求参数:

{
  "deptId": 110
}

请求结果:

{
  "code": 200,
  "msg": null,
  "data": 1
}
查询机构树

请求URL: /dept/findTree

请求类型: get

请求参数:

{
}

请求结果:

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

{
  "code": 200,
  "msg": null,
  "data": [
    {
      "deptId": 1,
      "parentId": 0,
      "name": "轻尘集团",
      "orderNum": 0,
      "createBy": null,
      "createTime": null,
      "lastUpdateBy": null,
      "lastUpdateTime": null,
      "delFlag": 0,
      "children": [
        {
          "deptId": 2,
          "parentId": 1,
          "name": "北京分公司",
          "orderNum": 1,
          "createBy": null,
          "createTime": null,
          "lastUpdateBy": null,
          "lastUpdateTime": null,
          "delFlag": 0,
          "children": []
        },
        {
          "deptId": 3,
          "parentId": 1,
          "name": "上海分公司",
          "orderNum": 2,
          "createBy": null,
          "createTime": null,
          "lastUpdateBy": null,
          "lastUpdateTime": null,
          "delFlag": 0,
          "children": [
            {
              "deptId": 4,
              "parentId": 3,
              "name": "技术部",
              "orderNum": 0,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            },
            {
              "deptId": 6,
              "parentId": 3,
              "name": "宣传部",
              "orderNum": 1,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            },
            {
              "deptId": 7,
              "parentId": 3,
              "name": "销售部",
              "orderNum": 2,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            },
            {
              "deptId": 8,
              "parentId": 3,
              "name": "市场部",
              "orderNum": 3,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            }
          ]
        }
      ]
    },
    {
      "deptId": 9,
      "parentId": 0,
      "name": "牧尘集团",
      "orderNum": 1,
      "createBy": null,
      "createTime": null,
      "lastUpdateBy": null,
      "lastUpdateTime": null,
      "delFlag": 0,
      "children": [
        {
          "deptId": 10,
          "parentId": 9,
          "name": "北京分公司",
          "orderNum": 1,
          "createBy": null,
          "createTime": null,
          "lastUpdateBy": null,
          "lastUpdateTime": null,
          "delFlag": 0,
          "children": [
            {
              "deptId": 12,
              "parentId": 10,
              "name": "技术部",
              "orderNum": 1,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            },
            {
              "deptId": 13,
              "parentId": 10,
              "name": "宣传部",
              "orderNum": 2,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            }
          ]
        },
        {
          "deptId": 11,
          "parentId": 9,
          "name": "上海分公司",
          "orderNum": 2,
          "createBy": null,
          "createTime": null,
          "lastUpdateBy": null,
          "lastUpdateTime": null,
          "delFlag": 0,
          "children": [
            {
              "deptId": 14,
              "parentId": 11,
              "name": "销售部",
              "orderNum": 1,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            },
            {
              "deptId": 15,
              "parentId": 11,
              "name": "市场部",
              "orderNum": 2,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            }
          ]
        }
      ]
    }
  ]
}

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

角色管理

保存

请求URL: /role/save

请求类型: post

请求参数:

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

{
  "createBy": 0,
  "createTime": "2018-09-01T05:54:31.748Z",
  "delFlag": 0,
  "lastUpdateBy": 0,
  "lastUpdateTime": "2018-09-01T05:54:31.748Z",
  "remark": "string",
  "roleId": 110,
  "roleName": "110"
}

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

请求结果:

{
  "code": 200,
  "msg": null,
  "data": 1
}
修改

请求URL: /role/update

请求类型: post

请求参数:

{
  "remark": "1101111",
  "roleId": 110,
  "roleName": "1101"
}

请求结果:

{
  "code": 200,
  "msg": null,
  "data": 1
}
删除

请求URL: /role/delete

请求类型: post

请求参数:

{
  "roleId": 110
}

请求结果:

{
  "code": 200,
  "msg": null,
  "data": 1
}
分页查询

请求URL: /role/findPage

请求类型: post

请求参数:

{
  "pageNum": 1,
  "pageSize": 5
}

请求结果:

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

{
  "code": 200,
  "msg": null,
  "data": {
    "pageNum": 1,
    "pageSize": 5,
    "totalSize": 4,
    "totalPages": 1,
    "content": [
      {
        "roleId": 1,
        "roleName": "admin",
        "remark": "超级管理员",
        "createBy": null,
        "createTime": "2018-08-14T03:11:11.000+0000",
        "lastUpdateBy": null,
        "lastUpdateTime": null,
        "delFlag": 0
      },
      {
        "roleId": 2,
        "roleName": "dev",
        "remark": "开发人员",
        "createBy": null,
        "createTime": "2018-08-14T03:11:11.000+0000",
        "lastUpdateBy": null,
        "lastUpdateTime": null,
        "delFlag": 0
      },
      {
        "roleId": 3,
        "roleName": "test",
        "remark": "测试人员",
        "createBy": null,
        "createTime": "2018-08-14T03:11:11.000+0000",
        "lastUpdateBy": null,
        "lastUpdateTime": null,
        "delFlag": 0
      },
      {
        "roleId": 110,
        "roleName": "1101",
        "remark": "1101111",
        "createBy": 0,
        "createTime": "2018-09-01T05:54:32.000+0000",
        "lastUpdateBy": 0,
        "lastUpdateTime": "2018-09-01T05:54:32.000+0000",
        "delFlag": 0
      }
    ]
  }
}

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

查询全部

请求URL: /role/findAll

请求类型: get

请求参数:

{
 
}

请求结果:

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

{
  "code": 200,
  "msg": null,
  "data": [
    {
      "roleId": 1,
      "roleName": "admin",
      "remark": "超级管理员",
      "createBy": null,
      "createTime": "2018-08-14T03:11:11.000+0000",
      "lastUpdateBy": null,
      "lastUpdateTime": null,
      "delFlag": 0
    },
    {
      "roleId": 2,
      "roleName": "dev",
      "remark": "开发人员",
      "createBy": null,
      "createTime": "2018-08-14T03:11:11.000+0000",
      "lastUpdateBy": null,
      "lastUpdateTime": null,
      "delFlag": 0
    },
    {
      "roleId": 3,
      "roleName": "test",
      "remark": "测试人员",
      "createBy": null,
      "createTime": "2018-08-14T03:11:11.000+0000",
      "lastUpdateBy": null,
      "lastUpdateTime": null,
      "delFlag": 0
    },
    {
      "roleId": 110,
      "roleName": "1101",
      "remark": "1101111",
      "createBy": 0,
      "createTime": "2018-09-01T05:54:32.000+0000",
      "lastUpdateBy": 0,
      "lastUpdateTime": "2018-09-01T05:54:32.000+0000",
      "delFlag": 0
    }
  ]
}

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

菜单管理

保存

请求URL: /menu/save

请求类型: post

请求参数:

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

{
  "createBy": 0,
  "createTime": "2018-09-01T06:01:47.825Z",
  "delFlag": 0,
  "icon": "string",
  "lastUpdateBy": 0,
  "lastUpdateTime": "2018-09-01T06:01:47.825Z",
  "menuId": 110,
  "name": "110",
  "orderNum": 0,
  "parentId": 0,
  "perms": "sys:menu:list",
  "type": 0,
  "url": "/sys/menu"
}

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

请求结果:

{
  "code": 200,
  "msg": null,
  "data": 1
}
修改

请求URL: /menu/update

请求类型: post

请求参数:

{
  "menuId": 110,
  "name": "1101"
}

请求结果:

{
  "code": 200,
  "msg": null,
  "data": 1
}
删除

请求URL: /menu/delete

请求类型: post

请求参数:

{
  "menuId": 110
}

请求结果:

{
  "code": 200,
  "msg": null,
  "data": 1
}
查询菜单树

请求URL: /menu/findTree

请求类型: get

请求参数:

{
}

请求结果:

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

{
  "code": 200,
  "msg": null,
  "data": [
    {
      "menuId": 1,
      "parentId": 0,
      "name": "系统管理",
      "url": null,
      "perms": null,
      "type": 0,
      "icon": "fa el-icon-setting",
      "orderNum": 0,
      "createBy": null,
      "createTime": null,
      "lastUpdateBy": null,
      "lastUpdateTime": null,
      "delFlag": 0,
      "children": [
        {
          "menuId": 2,
          "parentId": 1,
          "name": "用户管理",
          "url": "/sys/user",
          "perms": null,
          "type": 1,
          "icon": "el-icon-service",
          "orderNum": 1,
          "createBy": null,
          "createTime": null,
          "lastUpdateBy": null,
          "lastUpdateTime": null,
          "delFlag": 0,
          "children": [
            {
              "menuId": 9,
              "parentId": 2,
              "name": "查看",
              "url": null,
              "perms": "sys:user:view",
              "type": 2,
              "icon": null,
              "orderNum": 0,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            },
            {
              "menuId": 10,
              "parentId": 2,
              "name": "新增",
              "url": null,
              "perms": "sys:user:save",
              "type": 2,
              "icon": null,
              "orderNum": 0,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            },
            {
              "menuId": 11,
              "parentId": 2,
              "name": "修改",
              "url": null,
              "perms": "sys:user:update",
              "type": 2,
              "icon": null,
              "orderNum": 0,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            },
            {
              "menuId": 12,
              "parentId": 2,
              "name": "删除",
              "url": null,
              "perms": "sys:user:delete",
              "type": 2,
              "icon": null,
              "orderNum": 0,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            }
          ]
        },
        {
          "menuId": 3,
          "parentId": 1,
          "name": "机构管理",
          "url": "/sys/dept",
          "perms": null,
          "type": 1,
          "icon": "el-icon-news",
          "orderNum": 2,
          "createBy": null,
          "createTime": null,
          "lastUpdateBy": null,
          "lastUpdateTime": null,
          "delFlag": 0,
          "children": [
            {
              "menuId": 13,
              "parentId": 3,
              "name": "查看",
              "url": null,
              "perms": "sys:dept:view",
              "type": 2,
              "icon": null,
              "orderNum": 0,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            },
            {
              "menuId": 14,
              "parentId": 3,
              "name": "新增",
              "url": null,
              "perms": "sys:dept:save",
              "type": 2,
              "icon": null,
              "orderNum": 0,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            },
            {
              "menuId": 15,
              "parentId": 3,
              "name": "修改",
              "url": null,
              "perms": "sys:dept:update",
              "type": 2,
              "icon": null,
              "orderNum": 0,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            },
            {
              "menuId": 16,
              "parentId": 3,
              "name": "删除",
              "url": null,
              "perms": "sys:dept:delete",
              "type": 2,
              "icon": null,
              "orderNum": 0,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            }
          ]
        },
        {
          "menuId": 4,
          "parentId": 1,
          "name": "角色管理",
          "url": "/sys/role",
          "perms": null,
          "type": 1,
          "icon": "el-icon-view",
          "orderNum": 4,
          "createBy": null,
          "createTime": null,
          "lastUpdateBy": null,
          "lastUpdateTime": null,
          "delFlag": 0,
          "children": [
            {
              "menuId": 17,
              "parentId": 4,
              "name": "查看",
              "url": null,
              "perms": "sys:role:view",
              "type": 2,
              "icon": null,
              "orderNum": 0,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            },
            {
              "menuId": 18,
              "parentId": 4,
              "name": "新增",
              "url": null,
              "perms": "sys:role:save",
              "type": 2,
              "icon": null,
              "orderNum": 0,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            },
            {
              "menuId": 19,
              "parentId": 4,
              "name": "修改",
              "url": null,
              "perms": "sys:role:update",
              "type": 2,
              "icon": null,
              "orderNum": 0,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            },
            {
              "menuId": 20,
              "parentId": 4,
              "name": "删除",
              "url": null,
              "perms": "sys:role:delete",
              "type": 2,
              "icon": null,
              "orderNum": 0,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            }
          ]
        },
        {
          "menuId": 5,
          "parentId": 1,
          "name": "菜单管理",
          "url": "/sys/menu",
          "perms": null,
          "type": 1,
          "icon": "el-icon-menu",
          "orderNum": 5,
          "createBy": null,
          "createTime": null,
          "lastUpdateBy": null,
          "lastUpdateTime": null,
          "delFlag": 0,
          "children": [
            {
              "menuId": 21,
              "parentId": 5,
              "name": "查看",
              "url": null,
              "perms": "sys:menu:view",
              "type": 2,
              "icon": null,
              "orderNum": 0,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            },
            {
              "menuId": 22,
              "parentId": 5,
              "name": "新增",
              "url": null,
              "perms": "sys:menu:save",
              "type": 2,
              "icon": null,
              "orderNum": 0,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            },
            {
              "menuId": 23,
              "parentId": 5,
              "name": "修改",
              "url": null,
              "perms": "sys:menu:update",
              "type": 2,
              "icon": null,
              "orderNum": 0,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            },
            {
              "menuId": 24,
              "parentId": 5,
              "name": "删除",
              "url": null,
              "perms": "sys:menu:delete",
              "type": 2,
              "icon": null,
              "orderNum": 0,
              "createBy": null,
              "createTime": null,
              "lastUpdateBy": null,
              "lastUpdateTime": null,
              "delFlag": 0,
              "children": []
            }
          ]
        },
        {
          "menuId": 6,
          "parentId": 1,
          "name": "SQL监控",
          "url": "/druid/sql",
          "perms": null,
          "type": 1,
          "icon": "el-icon-info",
          "orderNum": 6,
          "createBy": null,
          "createTime": null,
          "lastUpdateBy": null,
          "lastUpdateTime": null,
          "delFlag": 0,
          "children": []
        },
        {
          "menuId": 8,
          "parentId": 1,
          "name": "系统日志",
          "url": "/sys/log",
          "perms": "sys:log:list",
          "type": 1,
          "icon": "el-icon-info",
          "orderNum": 7,
          "createBy": null,
          "createTime": null,
          "lastUpdateBy": null,
          "lastUpdateTime": null,
          "delFlag": 0,
          "children": []
        }
      ]
    },
    {
      "menuId": 25,
      "parentId": 0,
      "name": "内容管理",
      "url": null,
      "perms": null,
      "type": 0,
      "icon": "el-icon-document",
      "orderNum": 0,
      "createBy": null,
      "createTime": null,
      "lastUpdateBy": null,
      "lastUpdateTime": null,
      "delFlag": 0,
      "children": [
        {
          "menuId": 26,
          "parentId": 25,
          "name": "栏目管理",
          "url": "/content/category",
          "perms": null,
          "type": 1,
          "icon": "el-icon-tickets",
          "orderNum": 1,
          "createBy": null,
          "createTime": null,
          "lastUpdateBy": null,
          "lastUpdateTime": null,
          "delFlag": 0,
          "children": []
        },
        {
          "menuId": 27,
          "parentId": 25,
          "name": "文章管理",
          "url": "/content/artical",
          "perms": null,
          "type": 1,
          "icon": "el-icon-tickets",
          "orderNum": 2,
          "createBy": null,
          "createTime": null,
          "lastUpdateBy": null,
          "lastUpdateTime": null,
          "delFlag": 0,
          "children": []
        }
      ]
    },
    {
      "menuId": 28,
      "parentId": 0,
      "name": "使用案例",
      "url": null,
      "perms": null,
      "type": 0,
      "icon": "el-icon-picture-outline",
      "orderNum": 0,
      "createBy": null,
      "createTime": null,
      "lastUpdateBy": null,
      "lastUpdateTime": null,
      "delFlag": 0,
      "children": [
        {
          "menuId": 29,
          "parentId": 28,
          "name": "国际化",
          "url": "/demo/i18n",
          "perms": null,
          "type": 1,
          "icon": "el-icon-edit",
          "orderNum": 1,
          "createBy": null,
          "createTime": null,
          "lastUpdateBy": null,
          "lastUpdateTime": null,
          "delFlag": 0,
          "children": []
        },
        {
          "menuId": 30,
          "parentId": 28,
          "name": "换皮肤",
          "url": "/demo/theme",
          "perms": null,
          "type": 1,
          "icon": "el-icon-picture",
          "orderNum": 2,
          "createBy": null,
          "createTime": null,
          "lastUpdateBy": null,
          "lastUpdateTime": null,
          "delFlag": 0,
          "children": []
        }
      ]
    }
  ]
}

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

字典管理

保存

请求URL: /dict/save

请求类型: post

请求参数:

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

{
  "createBy": 0,
  "createTime": "2018-09-01T06:05:44.794Z",
  "delFlag": 0,
  "description": "aaaa",
  "id": 110,
  "label": "aa",
  "lastUpdateBy": 0,
  "lastUpdateTime": "2018-09-01T06:05:44.794Z",
  "remarks": "aaaaaa",
  "sort": 0,
  "type": "a",
  "value": "aaaaa"
}

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

请求结果:

{
  "code": 200,
  "msg": null,
  "data": 1
}
修改

请求URL: /dict/update

请求类型: post

请求参数:

{
  "description": "bbbb",
  "id": 110,
  "label": "bbbb"
}

请求结果:

{
  "code": 200,
  "msg": null,
  "data": 1
}
删除

请求URL: /dict/delete

请求类型: post

请求参数:

{
  "id": 110
}

请求结果:

{
  "code": 200,
  "msg": null,
  "data": 1
}
分页查询

请求URL: /dict/findPage

请求类型: get

请求参数:

{
  "pageNum": 1,
  "pageSize": 5
}

请求结果:

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

{
  "code": 200,
  "msg": null,
  "data": {
    "pageNum": 1,
    "pageSize": 5,
    "totalSize": 2,
    "totalPages": 1,
    "content": [
      {
        "id": 1,
        "value": "male",
        "label": "男",
        "type": "sex",
        "description": "男性",
        "sort": 0,
        "createBy": null,
        "createTime": null,
        "lastUpdateBy": null,
        "lastUpdateTime": null,
        "remarks": null,
        "delFlag": 0
      },
      {
        "id": 2,
        "value": "female",
        "label": "女",
        "type": "sex",
        "description": "女性",
        "sort": 1,
        "createBy": null,
        "createTime": null,
        "lastUpdateBy": null,
        "lastUpdateTime": null,
        "remarks": null,
        "delFlag": 0
      }
    ]
  }
}

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

日志管理

分页查询

请求URL: /log/findPage

请求类型: get

请求参数:

{
  "pageNum": 1,
  "pageSize": 5
}

请求结果:

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

{
  "code": 200,
  "msg": null,
  "data": {
    "pageNum": 1,
    "pageSize": 5,
    "totalSize": 2,
    "totalPages": 1,
    "content": [
      {
        "id": 1,
        "value": "male",
        "label": "男",
        "type": "sex",
        "description": "男性",
        "sort": 0,
        "createBy": null,
        "createTime": null,
        "lastUpdateBy": null,
        "lastUpdateTime": null,
        "remarks": null,
        "delFlag": 0
      },
      {
        "id": 2,
        "value": "female",
        "label": "女",
        "type": "sex",
        "description": "女性",
        "sort": 1,
        "createBy": null,
        "createTime": null,
        "lastUpdateBy": null,
        "lastUpdateTime": null,
        "remarks": null,
        "delFlag": 0
      }
    ]
  }
}

Vue + Element UI 前端篇(九):接口格式定义,vue.js,前端,ui

好了,后续前台页面需要调用相关接口的时候,就可以用上面的格式进行 mock 模拟了。文章来源地址https://www.toymoban.com/news/detail-700947.html

到了这里,关于Vue + Element UI 前端篇(九):接口格式定义的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vue】聊一聊Element UI的自定义主题颜色

    Element UI组件库相信大家一定都接触过。但是自定义主题颜色的需求有接触过的应该不多,至少我到今天是没有遇到类似的需求。之所以讲这个需求,是因为在我个人开发的开源项目中有做到这个需求,所以在这里和大家聊一聊我的实现。 在此之前我们需要先了解一下 CSS变量

    2024年02月11日
    浏览(36)
  • Vue + Element UI 前端篇(七):功能组件封装

    为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度。 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航、头部和主内容三个组件。 Home.vue HeadBar.vue MenuBar.vue Main.vue 国际化语言切换也被封装成为了组

    2024年02月09日
    浏览(28)
  • Vue + Element UI 前端篇(十):动态加载菜单

    之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的。 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单。 接口模块化 我们向来讲究模块化,之前接口都集中在,interface.js,我们现在把

    2024年02月09日
    浏览(26)
  • Vue + Element UI 前端篇(八):管理应用状态

    1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题。收缩展开按钮触发收缩状态的修改,导航菜单需要根据收缩状态来设置导航栏的宽度。这样就

    2024年02月09日
    浏览(36)
  • Vue + Element UI 前端篇(六):更换皮肤主题

    命令行主题工具 1.安装主题工具 首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动。 2.安装chalk主题 安装白垩主题,可以从 npm 安装或者从 GitHub 拉取最新代码,这里从 npm 安装。 3.初始化变量

    2024年02月09日
    浏览(33)
  • Vue + Element UI 前端篇(十二):用户管理模块

    添加接口 在 http/moduls/user.js 中添加用户管理相关接口。 模拟数据 在 mock/moduls/user.js 中添加用户管理相关mock接口。 提取根路径 为了可以统一控制mock的开启与关闭,把mock的根路径提取出来。  而具体的Mock接口,把根路径移除,因为在生成Mock的时候会自动把根路径加上去。

    2024年02月09日
    浏览(28)
  • Vue + Element UI 前端篇(一):搭建开发环境

    开发之前,请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架 vue-router, vue.js 配套路由 vuex,vue.js 应用状态管理库 Element,饿了么提供的UI框架 Node JS(npm) Visual Studio Code(前端IDE) 下载地址: 官网下载地址 Visual Studio Code 是一款非常优秀的开源编辑器,非常适合作为前端I

    2024年02月09日
    浏览(44)
  • Vue + Element UI 前端篇(十三):页面权限控制

    既然是后台权限管理系统,当然少不了权限控制啦,至于权限控制,前端方面当然就是对页面资源的访问和操作控制啦。 前端资源权限主要又分为两个部分,即导航菜单的查看权限和页面增删改操作按钮的操作权限。 我们的设计把页面导航菜单和页面操作按钮统一存储在菜

    2024年01月25日
    浏览(36)
  • Vue + Element UI 前端篇(十五):嵌套外部网页

    在有些时候,我们需要在我们的内容栏主区域显示外部网页。如查看服务端提供的SQL监控页面,接口文档页面等。 这个时候就要求我们的导航菜单能够解析嵌套网页的URL,并根据URL路由到相应的嵌套组件。接下来我们就讲解具体实现方案。 实现原理 1. 给菜单URL添加嵌套网页

    2024年02月08日
    浏览(28)
  • Vue + Element UI 前端篇(五):国际化实现

    1.安装依赖 执行以下命令,安装 i18n 依赖。 2.添加配置 2.1 在 src 下新建 i18n 目录,并创建一个 index.js。 index.js 2.2 在 assets 目录下面创建连个多语言文件。 zh.json en.json 2.3 在 main.js 中引入 i18n 并注入到 vue 对象中。 3.字符引用 在原本使用字符串的地方,引入国际化字符串。 把

    2024年02月09日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包