之前写过一篇vue初始化项目,构建vuex的后台管理项目架子,这个structure-admin-web所拥有的功能
1、vuex来实现状态管理2、静态页面,未引入后端服务
3、组件是用的是element-ui
4、页面布局是上左右,左右布局使用的弹性和布局flex,左边定宽,右边计算宽度
5、左右的滚动条是相互独立的,去掉body上的滚动条
6、没有业务代码,仅仅是一个静态的vuex的架子
说明:之前使用左侧menu的fixed布局,发现element-ui的弹窗组件不能正常显示,考虑换成flex布局
接下来,针对structure-admin-web的不足,进行了补充,开发了具有登陆的structure-admin项目,技术站:主要是node+vue+redis+mysql+es6
欢迎访问https://github.com/saucxs/structure-admin
接下来:
一、后端服务nodejs,thinjs的redis配置,操作数据库
二、前端vue+vuex全局路由守卫,axios请求拦截
三、项目启动必读
一、后端服务nodejs,thinjs的redis配置,操作数据库
我使用的是thinkjs,一个nodejs的框架。
1、首先介绍登陆的控制
逻辑:
(1)已经登陆的,直接根据的路由跳到相应页面;
(2)已经登陆的,不能跳到登陆页面,跳到首页;
(3)没有登陆的,输入url必须跳到登陆页;
(4)退出系统的,必须回到登陆页,状态是未登录
1.1 thinkjs的redis的配置文件adapter.js
exports.session = { type: 'redis', common: { cookie: { name: 'thinkjs', keys: ['werwer', 'werwer'], signed: true } }, redis: { handle: redisSession, host: '127.0.0.1', port: 6379, password: 'a123456' } };