(项目回顾)会员管理系统

1、基于vue-cli 3.x创建项目

2、初始化配置 更改标题 图标

3、使用的是Element UI， 进入官网安装Element UI 并引入到文件中 ；在VS中安装插件 Element UI Snippets，这样在使用element ui时会有语法提示

4、自定义封装Axios异步对象

1、在src下创建utils文件夹，这之下创建request.js文件，里面就放封装的axios对象

//正常引入axios后 (import axios from axios) 就可以直接
axios.get('文件').then(response =>{
	console.log('此处是回调函数')
})

//但是现在是要封装一个axios对象
const request = axios.create({
	baseUrl: '/', //请求路径默认为'/'
	//访问网页时效果：http://localhost:8080/请求路径/文件 
	timeout: 5000 //请求超时 5000ms
})

//request.get('文件').then(response =>{
//	console.log('在别的文件中导入request后就可以这么调用axios对象')
//})

//给request整一个默认的拦截器
request.interceptors.request.use(function(config){
	//do something before request sent
	return config
},function(error){
	//do something with request error
	return error
})

request.interceptors.response.use(function(response){
	//do something with response data
	return response
},function(error){
	//do something with response error
	return error
})

导出axios对象request之后可以进行封装

//test.js
import request from './utils'
//方式一
request({
	method: 'get'
	url: '/db.json'
}).then(response =>{
	console.log('通过方式一获得的数据')
})

//方式二
export default {
	getList() {
		const req = request({
			method: 'get'
			url: '/db.json'
		})
		return req
	}
}

//别的文件中调用
import testApi from .....

create(){
	this.fetch()
},
methods: {
	fetch() {
		testApi.getList().then(response =>{
			console.log('通过方式二获得的数据')
		})
	}
}

五、因为使用的是mockjs前后端分离开发，调用虚拟数据会产生跨域问题，所以先解决跨域

跨域问题：我们需要从别的网站上请求数据时，因为域名、端口不同，会找不到文件，所以可以使用代理服务器，访问网站时，先访问代理服务器，然后转发至网站。网站也是通过代理转发给我们数据。
解决方法：开发环境中，在vue.con huoquxinxishifig.js文件中使用devServer.proxy选项进行代理配置。

vue中分生产环境和开发环境。当我们需要配置跨域的选项前，需要确定访问的网站域名、文件前缀。
1、vue-cli中可通过配置.env.development和.env.production文件，分别配置生产开发环境不同的数据，举例：在生产环境中，配置我们需要跨域访问的网站url和访问路径前缀。

# 只有以VUE_APP_开头的变量会被webpack静态嵌入到项目中进行使用，process.env.VUE_APP_xxxxx

# 目标服务接口地址，这个地址是按照你自己环境来的，添加或者更改配置后，需要重启服务
VUE_APP_SERVICE_URL = 'http://mock：8080/.........例子'

#开发环境的前缀
VUE_APP_BASE_API = '/dev-api'

2、上面的配置好后，就可以在vue.config.js中配置代理选项了

module.exports={
    devServer:{
        port: 8888,  //端口号，被占用时自动加1
        host:"localhost",
        https: false,//协议
        open: true, //启动服务时自动打开浏览器访问
        proxy:{   //开发代理配置:解决跨域问题
            [process.env.VUE_APP_BASE_API]:{
                target: process.env.VUE_APP_SERVICE_URL, //目标服务器地址
                changeOrigin: true,  //开启代理服务器
                pathRewrite:{
                    //  /dev-api/db.json  最终会发送 
                    //http://localhost8001/db.json
                    //将请求地址的前缀 '/dev-api' 变成空
                    [ '^' + process.env.VUE_APP_BASE_API]:'',
                }
            }
        }
    },

    lintOnSave: false , //关闭检查格式
    productionSourceMap: false //打包时不会生成 .map文件，加快打包速度
}

请求的文件前缀是和我们封装的axios对象的请求路径一致

六、开始项目，先写router表，动态载入模块-登录页面

1、表单Element UI进行设计，再改动一点css样式
2、输入用户名密码后，点击登录，onclick事件中写dispatch调用vuex中的方法，vuex中的方法调用封装好的axios对象请求mockjs的模拟数据，然后调用另一个js文件，将获取到的用户信息localstorage.setItem()暂存在网页缓存中。同时在vuex中调用方法获取网页中的用户信息，赋值给state中的对应属性，这样做是为了防止刷新用户信息变回初始值。

七、写主页(上左下布局)—上部

上部的内容有：图标，程序名称，修改密码，退出登录，用户名称显示；
1、退出登录：点击退出登录之后，dispatch调用Vuex中的方法，action里调用axios对象请求数据，请求成功后路由退回登陆页面，清空网页之前保存的localstorage里的值。
2、修改密码：点击修改密码后，将data中的显示属性赋值为true，将修改密码的表单显示出来，同时使用nextTick将表单内容重置resetFields()。 在修改密码的表单中，在rules中设置“原密码，新密码，确认密码”相关逻辑（具体查看element ui官网中的相关知识）。点击提交，直接调用封装的axios对象，发送请求，返回值为true则调用退出登录方法。

八、左部

直接使用elementUI设计导航栏，对右部实现路由切换

九、右部–主体

设置成路由的渲染出口<router-view></router-view>
每个路由分别设置相应内容…

10、设置loading

当发送axios请求时，请求有延时，我们可以给axios对象设置拦截器。当发送请求时，请求拦截器中：打开loading。收到响应时，响应拦截器：关闭loading。
这里的loading也是使用的element UI中的
代码如下：

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

const loading = {
    loadingInstance: null,  //loading 实例
    //打开加载
    open() {
        if (this.loadingInstance === null) {
            this.loadingInstance = Loading.service({
                target: '.main',
                text: '拼命加载中...',
                background: 'rgba(0,0,0,0.5)'
            })
        }
    },
    //关闭加载
    close() {
        if (this.loadingInstance !== null) {
            this.loadingInstance.close()
        }
        this.loadingInstance = null
    }
}

//创建一个新的axios对象
const request = axios.create({
    // baseURL='/dev-api', // 前缀
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 5000,
})
// request.get('/db.json').then(response =>{
//     console.log(response.data)
// })
//设置拦截器 //请求拦截器
request.interceptors.request.use(config => {
    //请求拦截
    //打开加载
    loading.open()
    return config
}, error => {
    //关闭加载
    loading.close()
    return Promise.reject(error);
})
//响应拦截器
request.interceptors.response.use(response => {
    //关闭加载
    loading.close()
    const resp = response.data

    Message({
        message:resp.message || '系统异常',
        type:'warning',
        duration:5*1000
    })
    // response.data
    return response
}, error => {
    //关闭加载
    loading.close()

    Message({
        message:error.message,
        type:'error',
        duration:5*1000
    })
    return Promise.reject(error);
})

export default request //导出自定义的 axios 对象