VUE-PC端开发

Element-UI使用

1.下载

npm i element-ui -S

2.使用（在main.js中）

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

axios使用

1.下载

npm install axios

2.使用

1.创建axios副本（request.js）

/*
1:安装axios
2:导入axios
3:创建axios副本(配制一个基地址,基地址来源于环境变量)
4:定义请求拦截器
5:定义响应拦截器
6:暴露出去axios副本
*/
import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import router from '@/router'
const _axios = axios.create({
  baseURL: process.env.VUE_APP_BASE_API
})
// 声明数组,用于存取消axios请求函数
let allCancelFn = []
/*
 路由跳转时要取消上一个路由页面的所有请求
*/
// 封装取消所有请求方法，并且导出，在导航守卫中调用
export function cancelAll () {
  allCancelFn = allCancelFn.filter(item => {
    item.fn()
    return false
  })
}
// 定义请求拦截器
_axios.interceptors.request.use(
  config => {
    // 同一接口请求取消功能
    allCancelFn = allCancelFn.filter(item => {
      if (item.url === config.url && item.method === config.method) {
        item.fn()
        return false
      }
      return true
    })
    // 如果需要加token就加上
    if (config.needToken) {
      config.headers.Authorization = `Bearer ${store.state.user.token}`
    }
    // 保存每次接口请求的取消方法
    config.cancelToken = new axios.CancelToken(cancelFn => {
      allCancelFn.push({
        fn: cancelFn,
        url: config.url,
        method: config.method
      })
    })
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// 定义响应拦截器
_axios.interceptors.response.use(
  res => {
    if (res.data.success) {
      return res.data.data
    } else {
      console.log(res)
      // 提示&终止后续代码
      Message.error('响应错误', res.data.message)
      return Promise.reject(new Error(res.data.message))
    }
  },
  error => {
    // token超时被动处理
    if (error.response.data.code === 10002) {
      // 删除token，删除用户信息
      store.commit('user/loginOut')
      // 提示错误
      Message.error(error.response.data.message)
      // 跳转登录页面
      router.push('/login')
    }
    return Promise.reject(error)
  }
)
export default _axios

模块化定义pai

例：

// （es6写法）
export const companydepartmentAddApi = data =>
  request.post('/company/department', data, { needToken: true })

// 获取基本用户信息（post）
export function getUserInfoApi () {
  return request({
    url: '/sys/profile',
    method: 'post',
    needToken: true
  })
}

// 获取用户所有信息（get）
export function getUserAllInfoApi (id) {
  return request({
    url: `/sys/user/${id}`,
    method: 'get',
    needToken: true
  })
}


// delete
export const companyDepartmentApi = id =>
  request.delete(`/company/department/${id}`, { needToken: true })


// put
export function companyDepartmentEditApi (data) {
  return request({
    url: `/company/department/${data.id}`,
    method: 'put',
    data: data,
    needToken: true
  })
}

路由导航守卫

创建一个permission.js文件

import router from '@/router'
import store from '@/store'
// 导入取消所有请求方法
import { cancelAll } from './utils/request'
// 白名单
let whitePage = ['/404', '/login']
// 路由前置守卫
router.beforeEach(async (to, from, next) => {
  // console.log('当前路径', to.fullPath)
  console.log('isLogins', store.getters.isLogin)
  // 每次路由跳转都取消上一路由页面的所有接口请求
  cancelAll()
  // 没有token
  if (!store.state.user.token) {
    // 去白名单
    if (whitePage.includes(to.path.toLowerCase())) {
      next() // 给通过
    } else {
      // 不是白名单，打回登录
      next('/login?_reidrect=' + to.fullPath)
    }
  } else {
    if (to.path === '/login') {
      next('/')
    } else {
      if (store.getters.isLogin) {
        next()
      } else {
        await store.dispatch('user/getUserInfo')
        // 触发vuex路由管理模块的filterRouter方法
        await store.dispatch('routers/filterRouter')

        next(to.fullPath) // 让当前路由重新跑一片前置守卫
      }
    }
  }
})
// 路由后置守卫

开发环境与跨域代理

开发环境（.env.development 开发环境下的配置文件）

创建.env.development文件并写入

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/xxx'   // 设置基地址

生产环境（.env.production 生产环境下的配置文件）

创建.env.production文件并写入

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = '/xxx' //设置基地址

利用代理（跨域解决跨域）

在vue.config.js文件中

module.exports = {

  devServer: {

    port: port,

    open: true,

    overlay: {

      warnings: false,

      errors: true

    },

    // before: require('./mock/mock-server.js') // 开发环境使用mockjs

    // 代理服务器

    proxy: {
    
      '/apis': { //将www.test.com印射为/apis

        target: 'www.test.com', //被代理的服务器(接口域名)

        changeOrigin: true, //是否跨域

        pathRewrite: {
          // 上面设置代理后 /apis 相当于映射成 www.test.com/apis,需要把/apis去掉
          '^/apis': '',
        }

      }

    }

  },

}