Vue2 + iView Background Management System Solution

Time:2019-10-9

An example of background management system solution based on Vue2 + iView2.0.

Functions and components currently implemented

  • Vue
  • Page: iView2.0
  • List of articles, classification of articles
  • User List, User Registration
  • Rich text box: quill Editor
  • File upload: Using the file upload component that comes with iView
  • axios

Project address

Use

git https://github.com/shanyanwt/koa_vue_blog.git
NPM install // installation dependency
NPM run dev // local development
NPM run build // production deployment

directory structure

.
-build//Build configuration directory
│
└─src                                   
    App.vue//entry file
    │  main.js                         
    │
    ├─api                                //api
    │
    -common//Tool class
    │
    -components//components
    CountUp.vue//Digital Scroll Component
    _uploadImg.vue//Compressed Graph Component
    │
    -filter//filter
    │      dateFilter.js
    │
    -router//routing
    │      index.js
    │      router.js
    │
    -static//static file
    │
    -template//packing template
    │      index.ejs
    │
    -vendors//Packing Template
    │
    └─view   
        About.vue//About us
        ArticleList.vue//ArticleList
        Main.vue//Entry
        Rtf.vue//Editing articles
        User.vue//User List
        -index//home page
        │
        -login//login page

User login example

Using crypto MD5 encryption

// Introduce utils. JS with the above encapsulation
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 /// encrypted results
// MD5 Salting Logon
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// Salting results
// The server compares ciphertext with library again after encrypting

                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:'Log in successfully! ',
                        });
                        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:'User name password error! '
                        });
                    } else {
                        this.$Notice.error({
                            Title:'The server is bursting, try again later!'
                        });
                    }
                }).catch(err => {
                    this.$Notice.error({
                            Title:'The server is bursting, try again later!'
                        });
                })
  • Whether the user has logged in through router’s beforeEast
router.beforeEach((to, from, next) => {
    let userInfo = cacheUtils.localStorage(consts.USERINFO).get(consts.USERINFO)
    If (! UserInfo & & to. name!='login') {// Determine if you have logged in and go to the login page
        next({
            name: 'login'
        });
    } else if(userInfo && to.name == 'index') {
        next({
            name: 'home'
        });
    } else {
        Next (); // Continue downward after login
    }
});

MD5 salt decryption case https://segmentfault.com/a/11…
Vue2 + iView Background Management System Solution
Vue2 + iView Background Management System Solution

May you keep thinking independently, not humble, not overbearing, and not be anxious to grow into the way you like.

I am a lonely wolf… welcome star