Vue2-iView的后台管理系统解决方案

基于 Vue2 + iView2.0 的后台管理系统解决方案示例.

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

• Vue
• 页面：iView2.0
• 文章列表、文章分类
• 用户列表、用户注册
• 富文本框：quillEditor
• 文件上传：使用 iView 自带的文件上传组件
• axios

项目地址

使用

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

目录结构

.
├─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://segmentfault.com/a/11…

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

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