Vue2 + iView Background Management System Solution

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

Functions and components currently implemented

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                                  //Building configuration directory
│
└─src                                   
    │  App.vue                           //Entry file
    │  main.js                         
    │
    ├─api                                //api
    │
    ├─common                             //Tool class
    │
    ├─components                         //assembly
    │      countUp.vue                   //Digital scroll module
    │      uploadImg.vue                 //Compressed Graph Component
    │
    ├─filter                             //Filter
    │      dateFilter.js
    │
    ├─router                             //Route
    │      index.js
    │      router.js
    │
    ├─static                             //Static file
    │
    ├─template                           //Packing template
    │      index.ejs
    │
    ├─vendors                            //Packing template
    │
    └─view   
        │  about.vue                     //About us
        │  articleList.vue               //Article list
        │  main.vue                      //Entrance
        │  rtf.vue                       //Editing articles
        │  user.vue                      //User list
        ├─index                          //home page
        │
        └─login                          //Login page

User login example

Use  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  //The result of salt addition
//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: 'Server crashed, try again later!'
						});
					}
				}).catch(err => {
					this.$Notice.error({
							title: 'Server crashed, 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 whether 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 Encryption and Decryption Case https://blog.csdn.net/shanyanwt/article/details/97101369


May you remain independent thinking, not humble, not overly aggressive, and try to grow into your own likes.

I am a lonely wolf. Welcome star

Tags: Vue npm git github

Posted on Sun, 06 Oct 2019 05:31:03 -0700 by alexville