The fourth chapter axios

preface

I’ve been working on a mini program. Sorry I’m late again. But I want to give you a wave ~ MPvue, with vUE syntax to write small procedures, can run at the same time web and small procedures, thief natural and unrestrained. By the way, VUE is taking over the world.

Write Axios to the prototype chain

In the previous chapter, we had axios installed, so we had to import it if we wanted to use it. Instead of importing every component once, we made it global, adding the following code to SRC /main.js:

import axios from 'axios'
Vue.prototype.$http= axios
Copy the code

False data

In chapter 2, we also installed mock. Js and created mock/index.js under SRC as follows:

//mock/index.js
import Mock from 'mockjs'// Verify the account passwordlet uTable = {
    'password': '123456'.'username':"admin"
}
const data = Mock.mock('http://user.com/login', (param) => {
    let dataJson = JSON.parse(param.body)
    if((dataJson.username == uTable.username) && (dataJson.password == uTable.password)) {
        return 'ok'
    } else {
        return 'no'}})export default {
    data
}
Copy the code

When a component calls an interface using AXIos, the mock intercepts it, and then generates and returns data to the front end as defined. As simple as that, the logic of this section of login interface is, first of all, define an object to store the account and password, and then according to the data transmitted by the request, judge whether it is consistent with the account and password we store, if so, return OK, otherwise return no. Then in SRC /main.js, add:

import Mock from '@/mock/index'
Copy the code

SRC /pages/user/ login.vue SRC /pages/user/ login.vue

<template>
    <div class="login_page">
        <section class="form_contianer">
            <div class="manage_tip"> <p> First backend management system </p> </div> <el-form> <el-form-item prop="username">
			<el-input placeholder="Username" v-model="uname"></el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input type="password" placeholder="Password" v-model="pwd"></el-input>
		</el-form-item>
        	<el-form-item>
		    <el-button type="primary" class="submit_btn" @click="login"> log in < / el - button > < / el - form - item > < / el - form > < section > < / div > < / template > < script >export default {
  data() {
	return {
	    uname:' '.pwd:' '
	}
    },
	methods: {
	    login () {	
	        let self = this	
	        this.$http({
	        method: 'get',
	        url: 'http://user.com/login',
	        data: {
	            username: this.uname,
	            password: this.pwd
	        }
            })
	    .then((r) => {
	        if(r.data == 'ok') {
                    self.$router.push({path:'/'})}else {
                    self.$message.error('Wrong account or password, please fill in again');
                }
            })
        }
    }
}
</script>
<style scoped>
  @import '.. /.. /assets/css/login.css';
</style>


Copy the code

Here are a few points to cover:

  • V-model: binds input to a variable defined in data so that when the value in input changes, the value in data is automatically updated.
  • $HTTP: Axios, which we introduced earlier.
  • $message.error: A pop-up box defined by element.

conclusion

Here we have basically completed the logon page, a few days ago I tried gitHub, the result of the code can not upload, the head is too big. I’ll do some more tinkering. In addition, I created a Q group: 57991865, if you have any questions, welcome to join the group discussion.

All chapters

  • Chapter I Installation of Scaffolding
  • Chapter two: Initial experience
  • Chapter 3 Login page
  • The fourth chapter axios
  • Chapter 5: Routing hook and plug-in development