第四章 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，大家有什麼疑惑，歡迎進群討論。