Vue2通用后台项目实战

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x //vue2
? Use history mode for router? (Requires proper server setup for index fallback in production) No //是否使用history在路由里
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: test

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

Vue.use(ElementUI);

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts//如果报错可以使用

state: {
      isCollapse: false,//控制左侧导航栏展开还是收缩,
},
mutations：{
     changeIC(state,value) {
          // console.log(value);
          state.isCollapse=!state.isCollapse
      },
}

tabsList: [
            {
                path: '/homePage',
                name: 'homePage',
                label: '首页',
                icon: 's-home',
                url: 'Home/Home'
            },
            
        ],
    
changeTabs(state, val) {
            if (val.name !== 'homePage') {
                const index = state.tabsList.findIndex(item => item.name === val.name)
                if (index === -1) {
                    state.tabsList.push(val)
                }
            }
        },

 methods:{
        changeMenu(item){
            if(this.$route.path!==item.path&&!(this.$router.path==='/homePage'&&item.path==='/')){
            this.$router.push({
            name:item.name
               })
            }
      },
      closeMenu(item,index){
        this.$store.commit("closeTabs",item)
        let length = this.items.length;
        // console.log(length);
        if(item.name!==this.$route.name){
            return
        }
        if(length===index){
            this.$router.push({
                name:this.items[index-1].name
            })
        }
        if(index<length){
            this.$router.push({
                name:this.items[index].name
            })
        }
}       
    },

mounted() {
    getData().then(({data})=>{
      const {userData}=data.data;
      this.userData=userData;
        console.log(userData);
    let myChart3 = this.$echarts.init(document.getElementById("myChart3"));
    const eachrts3Option = {
                legend: {
                    // 图例文字颜色
                    textStyle: {
                    color: "#333",
                    },
                },
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                  type: 'category',
                  data: userData.map(item => item.date),
                },
                yAxis: {
                  type: 'value'
                },
                series: [
                  {
                    data: userData.map(item=>item.new),
                    type: 'bar',
                  },
                  {
                    data: userData.map(item=>item.active),
                    type: 'bar',
                    color:'skyblue'
                  }
                ]
            }
            myChart3.setOption(eachrts3Option)
      })
      },

submit(){
        this.$refs.form.validate((valid) => {
                if (valid) {
                    getMenu(this.form).then(({ data }) => {
                        console.log(data)
                        if (data.code === 20000) {
                            // token信息存入cookie用于不同页面间的通信
                            Cookie.set('token', data.data.token)
                            // console.log("data的数据",data.username);
                            localStorage.setItem('username',data.username)
                            localStorage.setItem('power',data.power)
                            localStorage.setItem('menu',JSON.stringify(data.data.menu))
                            this.$store.commit('changeMenu',JSON.stringify(data.data.menu))
                            this.$store.commit('changeRouter',this.$router)
                            // 获取菜单的数据，存入store中
                            // this.$store.commit('setMenu', data.data.menu)
                            // this.$store.commit('addMenu', this.$router)
                            // 跳转到首页
                            console.log(this.$route);
                            this.$router.push('/homePage')
                        } else {
                            this.$message.error(data.data.message);
                        }
                    })
                }
            })
    }

//添加路由守卫
router.beforeEach((to,from,next) => {
  let token = Cookie.get('token')
  if (!token && to.name !== 'login') {
    next({name:'login'})
  } else if (token && to.name === 'login') {
    next({name:'homePage'})
  } else {
    next()
  }
})

menuData(){
        return JSON.parse(localStorage.getItem('menu'))||this.$store.state.tab.menu
      },

changeRouter(state, router) {
    if(!localStorage.getItem('menu')) return 
    const menu = JSON.parse(localStorage.getItem('menu'))
    state.menu = menu
    const MenuData = []
    menu.forEach(item => {
        if (item.children) {
            item.children=item.children.map(item => {
                item.component = () => import(`../views/${item.url}`)
                return item
            })
            console.log('item.children',item.children);
            MenuData.push(...item.children)
        } else {
            item.component = () => import(`../views/${item.url}`)
            MenuData.push(item)
        }
        // console.log('MenuData', MenuData);
        // localStorage.setItem('MenuData', JSON.stringify(MenuData))
        // console.log('router',router);
        MenuData.forEach(item => {
            router.addRoute('Home',item)
        })
    });
}