1.1 前言

上一篇博文Vue入门实战教程之vue-element-admin初体验我们已经了解到vue-element-admin 是一个非常优秀的前端框架，整合了element-ui 和vue精华组件，无论是学习vue前端知识还是后端人员使用此框架进行二次开发，实用性和开发效率都是很不错的。

vue-element-admin框架默认使用mock api 模拟后端数据返回，然而在实际使用中，我们肯定不能使用MockAPI.

因此我们需要针对这个前端框架的设计思路，设计出我们的后端API.

1.2 分析框架

首先我们启动我们的前端框架项目，打开登陆页面:

接下来点击登陆按钮，打开浏览器F12 我们开始调试，抓包，可以看到点击登陆一共触发了三个接口调用。

1.1.1 第一个接口:根据账号密码登陆获取token

请求地址：http://localhost:9527/dev-api/vue-element-admin/user/login

请求方法：POST

请求参数:

{
  username: "admin",
  password: "111111"
}

响应结果：

{
  "code": 20000,
  "data": {
    "token": "admin-token"
  }
}

我们很容易可以通过F12 看到MockAPI 请求参数：

也可以很轻松找到Mock API 返回的JSON数据：

1.1.2 第二个接口:根据token获取登陆用户所拥有的角色列表等用户信息

请求地址：http://localhost:9527/dev-api/vue-element-admin/user/info?token=admin-token

请求方法：GET

请求Header头：X-Token: admin-token

响应结果：

{
  "code": 20000,
  "data": {
    "roles": [
      "admin"
    ],
    "introduction": "I am a super administrator",
    "avatar": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
    "name": "Super Admin"
  }
}

值得注意的是，当登陆成功返回token之后，我们第二个接口获取用户信息请求的时候除了header头中需要传X-Token=xxx 之外，请求body中也需要传token=xxxx。
这是因为X-Token用于鉴权，body中请求的token 是用来根据token查询用户信息,比如获取用户都拥有哪些角色
我们可以看到该接口返回了roles 一个数组结果，即一个用户可以拥有多个角色。
由于这个框架的菜单权限是由前端控制的，所以需要这一步，否则一般直接后端就处理了，不需要这一步。

1.1.3 第三个接口:根据token获取欢迎页统计数据

请求地址:http://localhost:9527/dev-api/vue-element-admin/transaction/list

请求方法: GET

响应结果:

{
  "code": 20000,
  "data": {
    "total": 20,
    "items": [
      {
        "order_no": "ba0Dc771-7d8d-9C2D-BFF1-dDCcc8313C00",
        "timestamp": 500671251367,
        "username": "Robert White",
        "price": 11004,
        "status": "pending"
      },
      {
        "order_no": "47EE276d-cCFc-f9e2-23cC-DC29DEfcb15A",
        "timestamp": 500671251367,
        "username": "William Thompson",
        "price": 14124,
        "status": "pending"
      },
      {
        "order_no": "D9F99Abc-2210-baaC-fAbb-814C6557AbB9",
        "timestamp": 500671251367,
        "username": "Deborah Thompson",
        "price": 11257,
        "status": "success"
      },
      {
        "order_no": "1465AdDA-494E-36ad-F476-BCEF30C61a42",
        "timestamp": 500671251367,
        "username": "Paul Perez",
        "price": 10734.2,
        "status": "pending"
      },
      {
        "order_no": "4235994b-1FDf-fbBe-B7b0-1f5E33f6cbCE",
        "timestamp": 500671251367,
        "username": "Ronald Miller",
        "price": 6085.5,
        "status": "success"
      },
      {
        "order_no": "1F95386A-3AB3-dC3f-b18b-5A23ceaAdeA6",
        "timestamp": 500671251367,
        "username": "Richard Gonzalez",
        "price": 12815,
        "status": "pending"
      },
      {
        "order_no": "99bD6E82-A143-5Cc5-6ac8-93Fffd6b1d15",
        "timestamp": 500671251367,
        "username": "Elizabeth Miller",
        "price": 4329.2,
        "status": "success"
      },
      {
        "order_no": "dA2e2589-8D5E-212c-A6cF-27caA1Abc90c",
        "timestamp": 500671251367,
        "username": "Karen Lewis",
        "price": 2891.26,
        "status": "pending"
      },
      {
        "order_no": "E6AFB4e5-FEBf-b5ce-25AC-D877ee16eD66",
        "timestamp": 500671251367,
        "username": "Jason Hernandez",
        "price": 10592,
        "status": "pending"
      },
      {
        "order_no": "9758ff7c-8fCB-cDCf-53de-b03EF97B4F94",
        "timestamp": 500671251367,
        "username": "Jessica Hernandez",
        "price": 6315,
        "status": "success"
      },
      {
        "order_no": "7C5DeacC-b7bB-bDEe-AC49-F3403adFbcff",
        "timestamp": 500671251367,
        "username": "Helen Williams",
        "price": 9529,
        "status": "pending"
      },
      {
        "order_no": "1E495158-73Ac-aa7c-ca48-5ADb2B72D6Ac",
        "timestamp": 500671251367,
        "username": "Shirley Johnson",
        "price": 4777.7,
        "status": "success"
      },
      {
        "order_no": "9FF323b3-573b-fCf7-2FCB-9E411CD872Bb",
        "timestamp": 500671251367,
        "username": "Jose White",
        "price": 2205.12,
        "status": "pending"
      },
      {
        "order_no": "127C174f-dBeE-4aFf-cAFa-e521bBbBEB6E",
        "timestamp": 500671251367,
        "username": "George Walker",
        "price": 14236,
        "status": "success"
      },
      {
        "order_no": "65cEb7E6-44AF-f8A3-9f68-f72eCf2EE638",
        "timestamp": 500671251367,
        "username": "Jessica Johnson",
        "price": 5934,
        "status": "pending"
      },
      {
        "order_no": "f941d2Cd-D0fD-d23F-c7ed-9b2d5515E1B5",
        "timestamp": 500671251367,
        "username": "Donna Hall",
        "price": 3450,
        "status": "pending"
      },
      {
        "order_no": "41CcCDbb-d5C1-B5ED-C40D-5D9DB4B8FF5C",
        "timestamp": 500671251367,
        "username": "David Rodriguez",
        "price": 5108.6,
        "status": "success"
      },
      {
        "order_no": "41D19cc5-F19D-C9B2-D1cD-ae16B7948c6E",
        "timestamp": 500671251367,
        "username": "Sharon Johnson",
        "price": 10341,
        "status": "pending"
      },
      {
        "order_no": "fC3f5adf-F7F2-69FF-AfdF-f7A1dF38BDD8",
        "timestamp": 500671251367,
        "username": "Shirley Garcia",
        "price": 3583,
        "status": "success"
      },
      {
        "order_no": "210Cb200-AD1d-fDFc-eE5f-b72038d4EE34",
        "timestamp": 500671251367,
        "username": "Elizabeth Smith",
        "price": 12315.9,
        "status": "pending"
      }
    ]
  }
}

到调用第三个接口的时候，我们基本上菜单的列表权限已经拿到了，因此只需要header中带token即可，实现数据的权限校验。

值得注意的是：
前端控制的仅仅只是菜单页面是否显示权限， 至于是否能获取到数据，为了安全，后端还是需要自己做一定判断的。

好了废话不多说，我开始设计我们的接口。

1.3 接口设计

时间问题,晚上继续更新讲解，先大致概览下吧，着急的可以先看源码。

1.3.1 设计用户管理模块

1.3.2 设计角色管理模块

1.4 源码下载

• 点击下载本文源码

下一篇：vue-element-admin 二次开发攻略指南