后台管理系统案例

1、某个html元素 折叠展开时显示的效果不同 如何设置？

	<h3>{
  {isCollapse ? '后台' : '通用后台管理系统'}}</h3>

2、抽取公共组件

对于Echarts的不同类型的图标，部分配置是类似的，挨个写会造成代码的冗余
因此，可以将其抽取为一个公共组件，Echarts.vue

3、url的编码与解码

（1）encodeURIComponent() 函数

可把字符串作为 URI 组件进行编码。
该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。
其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

语法：

		encodeURIComponent(uri)

uri	必需。一个字符串，含有 URI 组件或其他要编码的文本。

示例：

var uri="https://www.runoob.com/my test.php?name=ståle&car=saab";
document.write(encodeURIComponent(uri));

输出

（2）decodeURIComponent() 函数

可对 encodeURIComponent() 函数编码的 URI 进行解码。

语法：

	decodeURIComponent(uri)

4、登录功能

使用tooken，并用cookie对它进行缓存
（1）安装 cookie: npm i js-cookie
（2）在store中新建user.js

import Cookie from 'js-cookie'
export default{
   
    state:{
   
        token:''
    },
    mutations:{
   
        setToken(state,val){
   
            state.token = val
            Cookie.set('token',val)
        },
        // 清除
        clearToken(state){
   
            state.token = ''
            Cookie.remove('token')
        },
        // 获取
        getToken(state){
   
            state.token =  Cookie.get('tooken') || state.token
        }
    }
}

（3）路由守卫（main.js）

	router.beforeEach((to,from,next) => {
   
	  store.commit('getToken')
	  const token = store.state.user.token
	  if(!token && to.name !== 'login'){
   
	    next({
   name:'login'})
	  }else{
   
	    next()
	  }
	})

5、axios二次封装

（1）安装axios — npm i axios
（2）main.js 中引入

	import axios from 'axios'
	
	Vue.prototype.$http = axios

（3）在src下新建 config/index.js

export default{
   
    baseUrl:{
   
        dev:'/api/',  //开发环境
        pro:''        //生产环境
    }
}

（4）在src下新建 api/axios.js

import axios from "axios"
import config from '../config'

const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

class HttpRequest{
   
    constructor(baseUrl){
   
        this.baseUrl = baseUrl
    }
    // 定义axios相关配置
    getInsideConfig(){
   
        const config = {
   
            baseUrl:this.baseUrl,
            header:{
   }
        }
        return config
    }

    interceptors(instance){
   
        // Add a request interceptor
        instance.interceptors.request.use(function (config) {
   
            // Do something before request is sent
            return config;
        }, function (error) {
   
            // Do something with request error
            return Promise.reject(error);
        });

        // Add a response interceptor
        instance.interceptors.response.use(function (response) {
   
            // Do something with response data
            return response;
        }, function (error) {
   
            // Do something with response error
            return Promise.reject(error);
        });
    }
    request(options){
   
        const instance = axios.create()
        options = {
   ...this.getInsideConfig(),...options}
        this.interceptors(instance)
        return instance(options)
    }
}

export default new HttpRequest(baseUrl)

（5）在 api 下新建 data.js （后续所有的接口请求都写在这）

import axios from './axios'

export const getMenu = (param) => {
   
    return axios.request({
   
        url:'/permission/getMenu',
        method:'post',
        data:param
    })
}
export const getData = () => {
   
    return axios.request({
   
        url:'/home/getData',
    })
}

export const getUser = (params) => {
   
    return axios.request({
   
        url:'/user/getUser',
        method:'get',
        params
    })
}

如果要在组件中使用，则引入这个文件

import {
   getMenu} from '../../api/data'
...
mounted(){
   
        getMenu().then(res => {
   
            console.log(res);
        })
    }

6、使用mock模拟数据

（1）安装： npm i mockjs
（2）在 api 下 新建mock.js

import Mock from 'mockjs'
import homeApi from './mockServerData/home'
import userApi from './mockServerData/user'
import permissionApi from './mockServerData/permission'
// 拦截
// 1、接口
Mock.mock('/home/getData',homeApi.getStatisticalData)
// 2、正则
// Mock.mock(/user\/add/,'post',userApi.createUser)
Mock.mock('/user/add','post',userApi.createUser)
Mock.mock(/user\/edit/,'post',userApi.updateUser)

Mock.mock(/user\/getUser/,'get',userApi.getUserList)

Mock.mock(/user\/del/,'post',userApi.deleteUser)

Mock.mock(/permission\/getMenu/,'post',permissionApi.getMenu)

（3）在api下新建 mockServerData/home.js

// mock数据模拟
import Mock from 'mockjs'

// 图表数据
let List = []
export default {
   
  getStatisticalData: () => {
   
    //Mock.Random.float 产生随机数100到8000之间 保留小数 最小0位 最大0位
    for (let i = 0; i < 7; i++) {
   
      List.push(
        Mock.mock({
   
          苹果: Mock.Random.float(100, 8000, 0, 0),
          vivo: Mock.Random.float(100, 8000, 0, 0),
          oppo: Mock.Random.float(100, 8000, 0, 0),
          魅族: Mock.Random.float(100, 8000, 0, 0),
          三星: Mock.Random.float(100, 8000, 0, 0),
          小米: Mock.Random.float(100, 8000, 0, 0)
        })
      )
    }
    return {
   
      code: 20000,
      data: {
   
        // 饼图
        videoData: [
          {
   
            name: '小米',
            value: 2999
          },
          {
   
            name: '苹果',
            value: 5999
          },
          ......
        ],
        // 柱状图
        userData: [
          {