后台系统1

接上篇文章继续写

1.清空项目

2. 创建一个utils 文件夹 用于我们配置一些简单工具类

2.1在新建的utlis 下面新建一个 requset.js 文件 （书写一些关于网络请求的东西）如下所示

// 第一步导入我们 axiso
// 第二部导入 错误信息提示
// 第三步 创建一个axiso 请求
// 把axiso 方法导出
import axios from 'axios'

import { Message } from 'element-ui'

const service = axios.create({
  // 请求的同一根地址
  baseURL: 'http://localhost:8090/',
  // 请求超时时间
  timeout: 5000
})

// 第四步配置发起请求的配置项
service.interceptors.request.use(
  config => {

  }
)
// 第五步配置数据响应相关
service.interceptors.response.use(
  response => {
    // 获取数据
    const res = response.data
    // 判断请求是否出错了
    if (res.code !== 200) {
      Message({
        message: res.data.item || 'error',
        type: 'error',
        duration: 5 * 1000
      })
    } else {
      return res
    }
  },
  // 其他服务器错误
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

2.2. 准备vuex 相关 在store 文件下新建文件modules 和文件getters.js。modules 是存取值文件 getters.js 是取值文件 他们之间的联系是通过index.js 文件里写的配置项

2.3. 文件配置项

// 导入vue
import Vue from 'vue'
// 导入vuex
import Vuex from 'vuex'
// 导入getters 文件
import getters from '@/store/getters'
Vue.use(Vuex)
// 获取modules 文件夹下面的文件名
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store

上诉做完 准备阶段已经完成 接下来写 登录页面