量化接口-VUEdemo02 VUE后台管理系统 axios接口测试+router动态路由

上篇文章：【VUE】demo01-VUE做后台管理系统页面实例-创建基本环境+页面布局

项目代码地址：macrozheng_mall学习:学习macrozheng的mall项目，进行学习记录与代码拆解-Gitecom

加入axios

我们先尝试加入接口调用的工具，通过登录接口来测试axios是否成功。

注意：mall的后端项目是使用的token来验证用户信息。也就是调用接口时，如果不是公开的接口需要提供token值的。

由于axios是一个工具，一般来说就像我们使用Ajax一样，调用一个方法就行，axios也给我们提供了封装接口得到方法，一般就需要一个创建实例的文件，然后就是封装接口的js文件。

首先创建在src下一个创建axios实例文件util/request.js

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 15000 // 请求超时时间
})

// request请求拦截器，每次请求接口前都会执行这个
service.interceptors.request.use(config => {
  //可以在这里设置请求头等内容
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

// respone相应拦截器
service.interceptors.response.use(
  response => {
  //这里是获取返回值，例如mall系统的后端返回内容是 code,data,message
  //所以我们拿到code，判断是否等于200，不是就走接口错误的处理方式
    const res = response.data
    if (res.code !== 200) { //处理错误的方式
      return Promise.reject('error')
    } else {//处理正确的方式
      return response.data
    }
  },
  error => {
    console.log('err' + error)// for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 3 * 1000
    })
    return Promise.reject(error)
  }
)

//输出对象
export default service

这里需要注意axios实例中的baseURL，我们可以在这里写死，也可以在项目的配置文件中设置，然后获取。

baseURL:process.env.BASE_API“process.env.BASE_API”获取的就是config/dev.env.js文件中的key=BASE_API的value数据.

所以我们打开config/dev.env.js文件，添加一个k:v。

// --------------------config/dev.env.js---------------------
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: ''development'',
  //记住这里必须加上 // 或者加上 http://，否则会被认为是没有IP端口协议的，会自动带上当前前端路径，
  //就像这样 ：http://localhost:8080/139.196.220.24:80/***/***
  BASE_API: ''http://admin-api.macrozheng.com'' //就是这里
})

axios实例准备完成！！接下来我们需要进行一下测试，保证axios添加成功。因为很多接口都有访问权限，也为了直观，我们从登录接口添加axios调用接口的封装js文件。

我们在src文件夹中创建一个文件api/logijs，之后的接口调用文件都在src/api文件夹中。

//------api/login.js--------------------------------
//引入我们写的 axios 
import request from '@/utils/request'

export function login(username, password) {
  return request({
    url: '/admin/login',
    method: 'post',
    //data是添加到请求体（body）中的， 用于post请求。
    data: {
      username,
      password
    }
  })
}

export function getInfo() {
  return request({
    url: '/admin/info',
    method: 'get',
  })
}

export function logout() {
  return request({
    url: '/admin/logout',
    method: 'post'
  })
}

export function fetchList(params) {
  return request({
    url: '/admin/list',
    method: 'get',
    //params是添加到url的请求字符串中的，用于get请求
    params: params
  })
}

之后我们调用login相关的接口时，直接引入这个logijs中暴露出去的方法就可以啦！

配置都完成啦，接下来进行测试，首先在view文件夹添加一个登陆页面login/index.vue

//------login/index.vue 有删减----------------

我们可以直接复制mall项目里面的，注意，有些东西我们之前没有添加,如果觉得不需要也可以去掉,反正以后也要用,添加部分如下:

SvgIcon组件和icons文件;复制src/components/SvgIcon所有文件到我们项目中同样位置，之后复制src/icons所有文件到我们的项目中同样的位置。util包中的validate文件;复制src/views/validatjs文件到我们项目中同样的位置。images文件复制src/assets/images文件到我们项目中同样的位置。

如果不添加，记得将index文件中对应的标签或者引入组件删除，不然会编译报错的。

添加成功后我们还不可以访问，因为我们还没有添加路由呢！

打开router/index.js文件，添加login页面路由：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '../views/layout/Layout'


export const constantRouterMap = [
  //这里添加的路由
  {path: '/login', component: () => import('@/views/login/index'), hidden: true},
  {
    path: '',
    component: Layout,
    redirect: '/home',
    children: [{
      path: 'home',
      name: 'home',
      component: () => import('@/components/HelloWorld'),
      meta: {title: '首页', icon: 'home'}
    }]

  }
]

export default new Router({
  // mode: 'history', //后端支持可开
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})

运行项目后，打开http://localhost:8080/#/login页面试一下，mall后端接口测试提供的账号密码是：adminmacro12

访问成功！说明我们的axios引入成功！

加入js-cookie

当我们能够写基本的页面，能够调用接口时，基本的使用就可以，我们可以直接通过现有的工具编写系统页面。

注意，我们之前有说后端项目是使用的token来验证用户信息，管理系统除了登录页面，其余的页面都是需要权限的。所以思考一下，如果仅用现有的工具是非常麻烦的，我们登录之后需要保存token值，每次调用接口时都需要在请求头中加入token值，那么在好多路由中使用时就需要不停的传递token参数，非常麻烦！！！！

所以我们就需要有一个总的工具帮我们保存这个token值，只要我们需要就从他中获取，就不需要路由跳转传递啦！

因为保存的数据很小，所以直接用cookie保存，js-cookie就是关于cookie存储的一个js的API。可以看看这篇文章vue项目中使用js-cookie细则。

我们登陆成功之后，就需要调用cookie保存，，我们直接在调用登录接口成功后，就调用cookie进行保存。

之后就需要在每次调用接口时，都加上token，我们也不可能每个接口都逐个添加，所以axios就提供了拦截器，我们在5中util/request.js文件中就添加了请求拦截器了，每次调用接口时都会拦截请求，然后我们在拦截中加上token值，这样就保证每个请求都携带token，当然没有token就不加了。

首先我们需要配置js-cookie工具，mall项目有提供这个工具文件，就在util文件夹中的autjs，这个就是专门保存登录token的，注意不是专门操作cookie的，而是专门操作保存登录的cookie的。我们拷贝过来，可以修改这个TokenKey为自己想要的。

//----auth.js-------------
import Cookies from 'js-cookie'

const TokenKey = 'loginToken'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

然后再login/index.vue文件中引入autjs文件，并在调用接口成功后使用setToken，添加到cookie中。

//
//...



//-----sidebar/sidebaeItme.vue------

这样，我们就可以获取并拿到动态路由啦，访问http://localhost:8080/#/login链接，登陆成功后，发现左侧并没有变化？？？？？？添加断点，发现确实在路由前置守卫中添加动态路由了，并没有显示在左侧导航栏。

说明权限是有获取到的，是前端有问题！！

首先我想到了：我们sidebar组件中的data数据是跟着项目运行而初始化的，也就是说，data已经赋值为静态路由了，并且我们也没有在这个页面中主动修改过data数据，就导致，这个组件的routes并没有改变！！！！！

but，在之后的测试中我又发现了一件事：

我们登陆之后，左侧导航并没有改变，sidebar组件中的data数据也没有改变，但是确实会跳转到，我们在网址上输入http://localhost:8080/#/pms/product就能够打开我们添加的路由页面！！！

也就是说路由是添加进去了，但是并没有传给sidebar组件！于是我网上搜索找到了这样一个描述：this.$router.options.routes可以拿到初始化时配置的路由规则。我们动态路由add后他是拿不到的，<(￣﹌￣)@m生气！不过还好找到原因了。

那么我们单纯的使用路由router来解决动态路由是不行的，所以我们需要一个缓存器，帮助我们保存动态的路由，然后在sidebarItem组件中拿到渲染到router-view中，就可以啦！mall里面就是用vuex这样写的，奈何我一开始没这样试，不过也了解了这个问题，以后就不会抓头发啦！

说到缓存器，mall里面用的vuex，我也按照这个使用，因为我们需要进行父子组件之间传递。不清楚缓存的可以看看这个，只是说个大概：vuex和缓存的区别

下一篇就开始加入vuex啦！！

文章为作者独立观点，不代表股票程序化软件自动交易接口观点

量化接口-VUEdemo02 VUE后台管理系统 axios接口测试+router动态路由

量化接口- 一份来自官方的量化参赛指南

量化接口-go语言基础四包接口

量化接口-DLUT2022 小学期每日进程

量化接口-YAPI 一个神奇的接口管理平台

mall-admin-web

量化接口- 一份来自官方的量化参赛指南

量化接口-go语言基础 四 包 接口

量化接口-DLUT2022 小学期每日进程

量化接口-YAPI 一个神奇的接口管理平台

量化接口-go语言基础四包接口