若依管理系统学习（一）

前端部分：

以case.js为例

每个js文件都引入了request.js文件

找到该js文件

// request拦截器
service.interceptors.request.use(config => { //vue中axios请求拦截器（在请求之前进行一些配置）
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false//见①
  // 是否需要防止数据重复提交
  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  // get请求映射params参数
//params是添加到url的请求字符串中的，一般用于get请求。
//data是添加到请求体（body）中的， 一般用于post请求。
  if (config.method === 'get' && config.params) {
    let url = config.url + '?' + tansParams(config.params);
    url = url.slice(0, -1);//截除数组最后一位 原数组改变
    config.params = {};
    config.url = url;
  }
  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
    //JSON.stringify将js对象转字符串
    const requestObj = {
      url: config.url,
      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
      time: new Date().getTime()
    }
    const sessionObj = cache.session.getJSON('sessionObj')
    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
      cache.session.setJSON('sessionObj', requestObj)
    } else {
      const s_url = sessionObj.url;                  // 请求地址
      const s_data = sessionObj.data;                // 请求数据
      const s_time = sessionObj.time;                // 请求时间
      const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
        const message = '数据正在处理，请勿重复提交';
        console.warn(`[${s_url}]: ` + message)
        return Promise.reject(new Error(message))
      } else {
        cache.session.setJSON('sessionObj', requestObj)
      }
    }
  }
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

①：只有少数接口不需要携带token，比如/login，/register，而其他的大部分接口都是需要携带token的，所以作者只为这几个少数请求配置了header {isToken: false}，而其他的请求没有配置header

因此看代码

// 如果请求配置了header属性，则取出isToken值（都给的false），那这里是const isToken = false === false = true，进入下面的判断后，拦截器就不会添加token
// 如果请求没有配置header属性，这里等同于 const isToken = {}.isToken = undefined === false = false，进入下面的判断后，拦截器就会加上token
const isToken = (config.headers || {}).isToken === false
if (getToken() && !isToken) {
config.headers['Authorization'] = 'Bearer ' + getToken()
}

回到case.js

// 查询用例列表
export function listCase(query) {
  return request({
    url: '/robot/case/list',
    method: 'get',
    params: query
  })
}

// 查询用例详细
export function getCase(caseId) {
  return request({
    url: '/robot/case/' + caseId,
    method: 'get'
  })
}

看element-ui部分

<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      //①
    <el-form-item label="分组" prop="caseGroupId">
        <el-select v-model="queryParams.caseGroupId" placeholder="请选择分组" style="width: 240px">
          <el-option v-for="(item,index) in groupList" :label="item.groupName" :value="item.groupId" :key="index"/>
        </el-select>
      </el-form-item>
    //②
      <el-form-item label="用例名称" prop="caseName">
        <el-input
          v-model="queryParams.caseName"
          placeholder="请输入用例名称"
          clearable
          @keyup.enter.native="handleQuery"
        />    //@keyup.enter.native回车触发聚焦事件
      </el-form-item>
      <el-form-item label="版本名称" prop="vaseVersionName">
        <el-input
          v-model="queryParams.vaseVersionName"
          placeholder="请输入版本名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

①

②prop 属性是我们需要进行表单校验的时候使用的，简而言之，prop 属性让校验规则和数据匹配。

el-form-item中prop属性为caseGroupId，一般来说会在上一级添加：rules属性，并有对应的rule例子，将例子与queryParams.caseGroupId与之比较看是否对应。

export default {
  name: "Case"
}

export和export default是ES6中导出模块中变量的语法

在创建JavaScript模块时，export 语句用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。被导出的绑定值依然可以在本地进行修改。在使用import进行导入时，这些绑定值只能被导入模块所读取，但在export导出模块中对这些绑定值进行修改，所修改的值也会实时更新。

命名导出（export）和默认导出（export default）。能够在每一个模块中定义多个命名导出，但是只允许有一个默认导出。