墨龙吟 2019-12-23
中后台系统类多为内部人员使用。采用Vue+elementUI开发。
技术选型的理由有以下几点:
一般的中后台管理系统实现的功能有以下几类:
模块化开发可以解决命名冲突、文件依赖的问题,方便多人协作开发,提升开发效率,方便后期维护。
// 用户登录拿到的perms为[‘GET /admin/goods/list‘, ...] let userInfo = { role: ‘operator‘, perms: [‘GET /admin/goods/list‘] } // 路由中的权限在meta中的perms中设置,该页面用到的的api let childRoute = { path: ‘list‘, component: () => import(‘@/views/goods/list‘), name: ‘goodsList‘, meta: { perms: [‘GET /admin/goods/list‘, ‘POST /admin/goods/delete‘], title: ‘商品列表‘, noCache: true } } // 在 vuex 中进行管理,算出其相应有权限的路由 const permission = { state: { routers: constantRouterMap, addRouters: [] }, mutations: { SET_ROUTERS: (state, routers) => { state.addRouters = routers state.routers = constantRouterMap.concat(routers) } }, actions: { GenerateRoutes({ commit }, data) { return new Promise(resolve => { const { perms } = data let accessedRouters if (perms.includes(‘*‘)) { accessedRouters = asyncRouterMap } else { accessedRouters = filterAsyncRouter(asyncRouterMap, perms) } commit(‘SET_ROUTERS‘, accessedRouters) resolve() }) } } } // 在router.beforeEach中判断在第一次拉取权限时使用addRoutes添加可访问路由表 router.beforeEach((to, from, next) => { if (getToken() && store.getters.perms.length === 0) { // 判断当前用户是否已拉取完user_info信息 store.dispatch(‘GetUserInfo‘).then(res => { // 拉取user_info const perms = res.data.data.perms // note: perms must be a array! such as: [‘GET /aaa‘,‘POST /bbb‘] store.dispatch(‘GenerateRoutes‘, { perms }).then(() => { // 根据perms权限生成可访问的路由表 router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表 next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record }) }) } })
<el-button v-permission="[‘POST /admin/goods/delete‘]" type="danger" @click="handleDelete">删除</el-button>
const permission = { inserted(el, binding, vnode) { const { value } = binding const perms = store.getters && store.getters.perms if (value && value instanceof Array && value.length > 0) { const permissions = value var hasPermission = false if (perms.indexOf(‘*‘) >= 0) { hasPermission = true } else { hasPermission = perms.some(perm => { return permissions.includes(perm) }) } if (!hasPermission) { el.parentNode && el.parentNode.removeChild(el) } } else { throw new Error(`need perms! Like v-permission="[‘GET /aaa‘,‘POST /bbb‘]"`) } } } const install = function(Vue) { Vue.directive(‘permission‘, permission) } if (window.Vue) { window[‘permission‘] = permission Vue.use(install) } permission.install = install export default permission
// 引入 ECharts 主模块 var echarts = require(‘echarts/lib/echarts‘); // 引入柱状图 require(‘echarts/lib/chart/bar‘); // 引入提示框和标题组件 require(‘echarts/lib/component/tooltip‘); require(‘echarts/lib/component/title‘);
mounted() { this.initCharts(); }, methods: { initCharts() { this.chart = echarts.init(this.$el); this.setOptions(); }, setOptions() { this.chart.setOption({ title: { text: ‘ECharts 入门示例‘ }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: ‘销量‘, type: ‘bar‘, data: [5, 20, 36, 10, 10, 20] }] }) } }
项目mock 模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发,加快开发速度。
{ "scripts": { "dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "build:stage": "cross-env NODE_ENV=production env_config=stage node build/build.js", "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js", "lint": "eslint --ext .js,.vue src", "test": "npm run lint", "precommit": "lint-staged" }, }
在config文件夹下的prod.env.js配置如下
module.exports = { NODE_ENV: ‘"production"‘, ENV_CONFIG: ‘"prod"‘, BASE_API: ‘"http://xxx/admin"‘ }
在代码中即可用process.env.env_config
使用判断啦
npm install vue-i18n -D
import Vue from ‘vue‘ import VueI18n from ‘vue-i18n‘ Vue.use(VueI18n) export const i18n = new VueI18n({ locale: ‘CN‘, messages: { ‘CN‘: require(‘./assets/lang/cn‘), ‘EN‘: require(‘./assets/lang/en‘) } })
// en.js export const message = { hello: ‘Hello, World‘ } // cn.js export const message = { hello: ‘你好, 世界‘ }
import { i18n } from ‘./i18n‘ new Vue({ el: ‘#app‘, i18n, ... })
<span>{{ $t("message.hello") }}</span>