7. 和服务端进行交互

下方示例代码第 10 行:后边的这个参数值是打包后使用的接口地址，值为'vab-mock-server'时代表打包后的代码仍然使用 mock 模拟接口，为''时你需要前端后端代码部署到一起，如果不部署到一起需要配置接口地址，如：http://192.168.1.59:8080/api

/**
 * @copyright chuzhixin 1204505056@qq.com
 * @description 全局变量配置
 */
module.exports = {
  // 默认的接口地址 如果是开发环境和生产环境走vab-mock-server，当然你也可以选择自己配置成需要的接口地址
  baseURL:
    process.env.NODE_ENV !== "production"
      ? "vab-mock-server"
      : "vab-mock-server",
};

项目开发必要接口

• 登录接口 /login

  application/x-www-form-urlencoded;charset=UTF-8 请求参数

username=admin&password=123456;

          application/json;charset=UTF-8 请求参数

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

返回格式

{
  "code": 200,
  "msg": "success",
  "data": {
    "accessToken": "admin-accessToken"
  }
}

• 用户信息接口 /userInfo

返回格式

{
  "code": 200,
  "msg": "success",
  "data": {
    "permissions": ["admin"],
    "username": "admin",
    "avatar": ""
  }
}

• 退出接口 /logout

返回格式

{
  "code": 200,
  "msg": "success"
}

前端请求示例

// post请求示例
import request from "@/utils/request";

export function getList(data) {
  return request({
    url: "/table/list",
    method: "post",
    data,
  });
}

// get请求示例
import request from "@/utils/request";

export function getList(params) {
  return request({
    url: "/table/list",
    method: "get",
    params,
  });
}

前端请求约定

请求中会在 headers 中自动传入 accessToken，用于后端接收，accessToken 的字段名可以在 setting.js 中配置

/*表格中请求参数约定*/
{
  "pageNo": 1, //页数
  "pageSize": 10 //每页条数
}

后端返回 JSON 数据的约定

{
  "code": 200,//成功的状态码
  "msg": "success",//提示信息
  "totalCount": 238,//总条数（表格中用到，其它接口可以不返回）
  "data": [{}，{}，{}]//返回数据
}

Easy-Mock 的使用

easy-mock

(opens new window) 它是一个纯前端可视化，并且能快速生成模拟数据的持久化服务。非常的简单易用还能结合 swagger，天然支持跨域 ，不管团队还是个人项目都值得一试。

项目内置 mock 的使用

在本地会启动一个 node 版本的mock-server来模拟数据，测试环境还是继续使用mockjs来进行模拟，支持在多环境中使用，相比较花裤衩开源项目的优势， 无需在 mock/index.js 中配置导出接口，框架已自动为您导出接口，您直接通过 api 调用即可,甚至 mock 和 api 也可以完全为您生成

cnpm run template
#上下键选择 mock&api输入名字即可

mock 模拟数据占位符

{
  // 随机生成一个大区。
  region:"@region",
  // 随机生成一个（中国）省（或直辖市、自治区、特别行政区）。
  province:"@province",
  // 随机生成一个（中国）市。
  city:"@city",
  // 随机生成一个（中国）县。
  county：:"@county",
  // 随机生成一个邮政编码（六位数字）。
  zip:"@zip",
  // 返回一个随机的布尔值。
  boolean:"@boolean",
  // 返回一个随机的自然数（大于等于 0 的整数）。
  natural:"@natural",
  // 返回一个随机的整数。
  integer:"@integer",
  // 返回一个随机的浮点数。
  float:"@float",
  // 返回一个随机字符。
  character:"@character",
  // 返回一个随机字符串。
  string:"@string",
  // 返回一个整型数组。
  range:"@range",
  // 随机生成一个有吸引力的颜色，格式为 '#RRGGBB'。
  color:"@color",
  // #DAC0DE
  hex:"@hex",
  // rgb(128,255,255)
  rgb:"@rgb",
  // rgba(128,255,255,0.3)
  rgba:"@rgba",
  // hsl(300,80%,90%)
  hsl:"@hsl",
  // 随机生成一个有吸引力的颜色。
  _goldenRatioColor:"@_goldenRatioColor",
  // 日期占位符集合。
  _patternLetters:"@_patternLetters",
  // 日期占位符正则。
  _rformat:"@_rformat",
  // 格式化日期。
  _formatDate:"@_formatDate",
  // 生成一个随机的 Date 对象。
  _randomDate:"@_randomDate",
  // 返回一个随机的日期字符串。
  date:"@date",
  // 返回一个随机的时间字符串。
  time:"@time",
  // 返回一个随机的日期和时间字符串。
  datetime:"@datetime",
  // 返回当前的日期和时间字符串。
  now:"@now",
  // 常见的广告宽高
  _adSize:"@_adSize",
  // 常见的屏幕宽高
  _screenSize:"@_screenSize",
  // 常见的视频宽高
  _videoSize:"@_videoSize",
  //生成一个随机的图片地址。
  image:"@image",
  //大牌公司的颜色集合
  _brandColors:"@_brandColors",
  //  生成一段随机的 Base64 图片编码。
  dataImage:"@dataImage",
  //随机生成一个 GUID。
  guid:"@guid",
  // 随机生成一个 18 位身份证。
  id:"@id",
  // 生成一个全局的自增整数。
  increment:"@increment",
  // 随机生成一个常见的英文名。
  first:"@first"
  // 随机生成一个常见的英文姓。
  last:"@last",
  // 随机生成一个常见的英文姓名。
  name:"@name",
  // 随机生成一个常见的中文姓。
  cfirst:"@cfirst",
  // 随机生成一个常见的中文名。
  clast:"@clast",
  // 随机生成一个常见的中文姓名。
  cname:"@cname",
  // 随机生成一段文本。
  paragraph:"@paragraph",
  // 随机生成一个句子，第一个单词的首字母大写。
  sentence:"@sentence",
  // 随机生成一个中文句子。
  csentence:"@csentence",
  // 随机生成一个单词。
  word:"@word",
  // 随机生成一个或多个汉字。
  cword:"@cword",
  // 随机生成一句标题，其中每个单词的首字母大写。
  title:"@title",
  // 随机生成一句中文标题。
  ctitle:"@ctitle",
  //  随机生成一个 URL。
  url:"@url",
  // 随机生成一个 URL 协议。
  protocol:"@protocol",
  // 随机生成一个域名。
  domain:"@domain",
   //  随机生成一个顶级域名。
  tld:"@tld",
  // 随机生成一个邮件地址。
  email:"@email",
  // 随机生成一个 IP 地址。
  ip:"@ip",
}