第四章 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,大家有什么疑惑,欢迎进群讨论。