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

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

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

• 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://www.jianshu.com/p/73372015c61d

image

image

image

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

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