Vue2.6 + iView的后台管理系统解决方案

基于Vue2.6 + iView4.5的后台管理系统解决方案示例.

目前实现的功能及用到的组件

• Vue
• 页面： iView4.5.0
• 文章列表、文章分类
• 用户列表、用户注册
• 富文本框： quillEditor
• 文件上传： 使用iView自带的文件上传组件
• axios
  项目地址

使用

git https://github.com/shanyanwt/koa_vue_blog.git
npm install      	// 安装依赖
npm run dev         // 本地开发
npm run build       // 生产部署

目录结构

.
└─src                                   
    │  App.vue                           //入口文件
    │  main.js                         
    │
    ├─api                                //api
    │
    ├─common                             //工具类
    │
    ├─components                         //组件
    │      countUp.vue                   //数字滚动组件
    │      uploadImg.vue                 //压缩图组件
    │
    ├─filter                             //过滤器
    │      dateFilter.js
    │
    ├─router                             //路由
    │      index.js
    │      router.js
    │
    ├─static                             //静态文件
    │
    ├─template                           //打包模板
    │      index.ejs
    │
    ├─vendors                            //打包模板
    │
    └─view   
        │  about.vue                     //关于我们
        │  articleList.vue               //文章列表
        │  main.vue                      //入口
        │  rtf.vue                       //编辑文章
        │  user.vue                      //用户列表
        ├─index                          //首页
        │
        └─login                          //登录页

用户登录示例

使用  crypto MD5加密

// 引入上述封装的utils.js
import utils from '../utils.js'
let name = 'abcd'
let password = '123'
let user_ticket = utils.md5(utils.md5(name + utils.md5(password)))
console.log(user_ticket)  => 3a59492a85438a3a39a30fd0d8103ac5 //加密后的结果
//MD5加盐登录
let name = 'abcd'
let password = '123'
var timestamp = Date.parse(new Date()) / 1000
let user_ticket = utils.md5(utils.md5(utils.md5(name + utils.md5(password))) + timestamp)
console.log(user_ticket) =>0b3298cb3c20b08318c185aec803a929  //加盐的结果
//服务端在通过加密后打密文和库中再次作比较

				var timestamp = Date.parse(new Date()) / 1000
				let user_ticket = utils.md5(utils.md5((utils.md5((this.formInline.user).toLowerCase() +
					utils.md5(this.formInline.password))).toLowerCase()) + timestamp)
				axios({
					method: 'post',
					url: api.API.admin_login,
					data: {
						'user_ticket': user_ticket,
						'name': this.formInline.user,
						'timestamp': timestamp
					}
				}).then(res => {
					if(res.error_code == consts.ERROR_CODE.SUCCESS) {
						this.$Notice.success({
							title: '登录成功！',
						});
						let userInfo = JSON.stringify(res.result_data)
						cacheUtils.localStorage(consts.USERINFO).set(consts.USERINFO, userInfo)
						this.$router.push('/home');
					} else if(res.error_code == consts.ERROR_CODE.USERNAME_OR_PASS_ERRROR) {
						this.$Notice.error({
							title: '用户名密码错误！'
						});
					} else {
						this.$Notice.error({
							title: '服务器挤爆了，稍后重试!'
						});
					}
				}).catch(err => {
					this.$Notice.error({
							title: '服务器挤爆了，稍后重试!'
						});
				})

• 管理端通过 router 的 beforeEach进行用户是否已经登录

router.beforeEach((to, from, next) => {
	let userInfo = cacheUtils.localStorage(consts.USERINFO).get(consts.USERINFO)
	if(!userInfo && to.name != 'login') { // 判断是否已经登录且前往的是登录页
		next({
			name: 'login'
		});
	} else if(userInfo && to.name == 'index') {
		next({
			name: 'home'
		});
	} else {
		next();				 //登录后继续向下执行
	}
});

MD5加盐解密案例 https://blog.csdn.net/shanyanwt/article/details/97101369

愿你保持独立思考、不卑、不亢、不怂努力长成自己喜欢的样子

我是一只孤独的狼…欢迎star