vue2.0 + element UI

vue2.0 + element UI 项目笔记—–后台管理系统

使用vue2.0做了好多项目，由于这段时间太太忙，都无暇整理笔记，呜呜~~~：

• 项目结构
• api封装
• vue-router
• vuex
• 父子组件通讯

---

项目结构

api封装

通过axios与后台交互，封装常用api

• 路径
  

• index

/**
 * Created by Christal on 2018/5/14.
 */
import Env from './env'
import axios from 'axios'
axios.defaults.withCredentials = false

// 配置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

// 添加一个请求拦截器
axios.interceptors.request.use(function (config) {
  // console.dir('this is config: ' + config)
  return config
}, function (error) {
  // Do something with request error
  return Promise.reject(error)
})

// 添加一个返回拦截器
axios.interceptors.response.use(response => {
  // 对返回的数据进行一些处理
  return response
}, error => {
  // 对返回的错误进行一些处理
  console.log(error)
  return Promise.reject(error)
})

// 基地址
let base = Env.baseURL

// 通用方法
export const POST = (url, params) => {
  return axios.post(`${base}${url}`, params).then(res => res.data)
}

export const GET = (url, params) => {
  return axios.get(`${base}${url}`, {
    params: params
  }).then(res => res.data)
}

export const PUT = (url, params) => {
  return axios.put(`${base}${url}`, params).then(res => res.data)
}

export const DELETE = (url, params) => {
  return axios.delete(`${base}${url}`, {
    params: params
  }).then(res => res.data)
}

export const PATCH = (url, params) => {
  return axios.patch(`${base}${url}`, params).then(res => res.data)
}

vue-router

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import Dashboard from '@/pages/dashboard/Dashboard'
import Students from '@/pages/students/Students'
import Scorebook from '@/pages/scorebook/Scorebook'
import Search from '@/pages/search/Search'
import Termmanage from '@/pages/termmanage/Termmanage'
import Professionmanage from '@/pages/professionmanage/Professionmanage'
import Classmanage from '@/pages/classmanage/Classmanage'
import Subjectmanage from '@/pages/subjectmanage/Subjectmanage'
import Admin from '@/pages/admin/Admin'
import ScoreBookDetail from '@/pages/scorebookdetail/ScoreBookDetail'
import ScoreBookUsual from '@/pages/scorebookusual/ScoreBookUsual'
import Anaysize from '@/pages/anaysize/Anaysize'

Vue.use(Router)

// 懒加载方式，当路由被访问的时候才加载对应组件
const Login = resolve => require(['@/pages/Login'], resolve)

const router = new Router({
  // mode: 'history',
  routes: [{
    path: '/',
    name: 'login',
    component: Login
  }, {
    path: '/home',
    component: Home,
    name: 'Home',
    redirect: '/dashboard',
    leaf: true, // 只有一个节点
    menuShow: false,
    children: [
      {
        path: '/dashboard',
        name: 'Dashboard',
        component: Dashboard,
        menuShow: false
      }
    ]
  }, {
    path: '/home',
    component: Home,
    name: '记分册管理',
    menuShow: true,
    role: '2',
    leaf: true, // 只有一个节点
    iconCls: 'iconfont icon-shouce', // 图标样式class
    children: [{
      path: '/scorebook',
      component: Scorebook,
      name: '记分册管理',
      menuShow: true,
      role: '2'
    }]
  }, {
    path: '/home',
    component: Home,
    name: 'scorebookdetail',
    menuShow: false,
    leaf: true, // 只有一个节点
    children: [{
      path: '/scorebookdetail/:bid/:arch',
      component: ScoreBookDetail,
      name: 'scorebookdetail',
      menuShow: false
    }]
  }, {
    path: '/home',
    component: Home,
    name: 'scorebookusual',
    menuShow: false,
    leaf: true, // 只有一个节点
    children: [{
      path: '/scorebookusual/:bid/:arch',
      component: ScoreBookUsual,
      name: 'scorebookusual',
      menuShow: false
    }]
  }, {
    path: '/home',
    component: Home,
    name: '成绩查询',
    menuShow: true,
    role: '2',
    leaf: true, // 只有一个节点
    iconCls: 'iconfont icon-chengjizhongxin', // 图标样式class
    children: [{
      path: '/search',
      component: Search,
      name: '成绩查询',
      menuShow: true,
      role: '2'
    }]
  }, {
    path: '/home',
    component: Home,
    name: '数据统计',
    menuShow: false,
    role: '2',
    leaf: true, // 只有一个节点
    iconCls: 'iconfont icon-shujutongji', // 图标样式class
    children: [{
      path: '/anaysize',
      component: Anaysize,
      name: '数据统计',
      menuShow: false,
      role: '2'
    }]
  }, {
    path: '/home',
    component: Home,
    name: '系统管理',
    menuShow: true,
    role: '2',
    iconCls: 'iconfont icon-xitongguanli',
    children: [{
      path: '/professionmanage',
      component: Professionmanage,
      name: '专业管理',
      menuShow: true,
      role: '1'
    }, {
      path: '/subjectmanage',
      component: Subjectmanage,
      name: '科目管理',
      menuShow: true,
      role: '1'
    }, {
      path: '/termmanage',
      component: Termmanage,
      name: '学期管理',
      menuShow: true,
      role: '1'
    },
    {
      path: '/classmanage',
      component: Classmanage,
      name: '班级管理',
      menuShow: true,
      role: '1'
    }, {
      path: '/admin',
      component: Admin,
      name: '用户管理',
      menuShow: true,
      role: '1'
    }, {
      path: '/students',
      component: Students,
      name: '学生管理',
      menuShow: true,
      role: '2'
    }]

  }]
})

router.beforeEach((to, from, next) => {
  if (to.path === '/') {
    window.localStorage.removeItem('access-user')
    next()
  } else {
    let user = JSON.parse(window.localStorage.getItem('access-user'))
    if (!user) {
      next({
        path: '/'
      })
    } else {
      next()
    }
  }
})

export default router

vuex

• 项目路径
  
• index.js

/**
 * Created by Christal on 2018/5/14.
 */

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  actions,
  mutations
})

• state.js

/**
 * Created by Christal on 2018/5/14.
 */

let defaulttoken = ''
let defaultrole = ''
try {
  if (localStorage.token) {
    defaulttoken = localStorage.token
  }
} catch (e) {}

try {
  if (localStorage.role) {
    defaultrole = localStorage.role
  }
} catch (e) {}

export default {
  token: defaulttoken,
  role: defaultrole
}

• actions.js
  /**
• Created by Christal on 2018/5/14.
  */

export default {
changeToken (ctx, token) {
ctx.commit(‘changeToken’, token)
},
changeRole (ctx, role) {
ctx.commit(‘changeRole’, role)
}
}

• mutations.js

/**
 * Created by Christal on 2018/5/14.
 */
export default {
  changeToken (state, token) {
    state.token = token
    try {
      localStorage.token = token
    } catch (e) {}
  },
  changeRole (state, role) {
    state.role = role
    try {
      localStorage.role = role
    } catch (e) {}
  }
}

父子组件通讯

• 结构
  
• 代码
  父传子通过绑定属性

:info="info"

子传父通过对外触发事件

this.$emit('refresh', info)