VUE從零開始系列（axios），呆萌小白上手VUE

第四章 axios

前言

最近在搞小程序，抱歉又來晚了。。不過想給你們安利一波~mpvue，用vue的語法寫小程序，能夠同時跑web和小程序，賊瀟灑。話說如今vue已經快一統天下了。

把axios寫入原型鏈

在上一章，咱們已經安裝好了axios，想用就得把它引入，爲了避免必每一個組件都得引入一次，咱們把它搞成全局的，在src/main.js中，加入如下代碼：

import axios from 'axios'
Vue.prototype.$http= axios
複製代碼

假數據

在第二章中，咱們也安裝了mock.js（沒有安裝的，請認真聽講），接着在src下新建mock/index.js，代碼以下：

//mock/index.js
import Mock from 'mockjs'


 //驗證帳號密碼
  let 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
}
複製代碼

這裏有必要講一下了，mock.js的用法請自行查閱官方文檔，我講下業務邏輯：在組件中用axios調用接口時，mock進行攔截，而後根據咱們的定義，生成並返回給前端須要的數據。就是這麼簡單，這段登陸接口的邏輯是，首先本身定義一個存放帳號和密碼的對象，而後根據請求傳來的數據，判斷是否與咱們存放的帳號密碼一致，若是一致的話，就返回ok，不然返回no。而後在src/main.js中，加入：

import Mock from '@/mock/index'
複製代碼

假數據已經ok了，如今進入上一章寫好的組件src/pages/user/Login.vue中：

<template>
    <div class="login_page">
        <section class="form_contianer">
            <div class="manage_tip">
                <p>第一個後臺管理系統</p>
            </div>
             <el-form>
		<el-form-item prop="username">
			<el-input placeholder="用戶名" v-model="uname"></el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input type="password" placeholder="密碼" v-model="pwd"></el-input>
		</el-form-item>
        	<el-form-item>
		    <el-button type="primary" class="submit_btn" @click="login">登錄</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('帳號或密碼錯誤，請從新填寫');
                }
            })
        }
    }
}
</script>
<style scoped>
  @import '../../assets/css/login.css';
</style>


複製代碼

這裏有幾個知識點講一下：

• v-model：把input和data中定義的變量綁定，這樣input中的值變化時，會自動更新data中的值。
• $http：就是咱們剛纔引入的axios。
• $message.error：element定義的彈出框。

結語

到這裏咱們的登陸頁邏輯已經基本完成了，前幾天搞了下gitHub，結果代碼上傳不了，頭大了。。我再鼓搗鼓搗。另外我建了個Q羣：57991865，你們有什麼疑惑，歡迎進羣討論。

全部章節

• 第一章 安裝腳手架
• 第二章 初體驗
• 第三章 登陸頁
• 第四章 axios
• 第五章 路由鉤子及插件開發