简介
最近在写前端h5项目，在课余的时间总结一下Vue中通过Axios的请求，更加详细的讲解进入这个官网Axios中文说明文档。这里只是简单性的记录一下代码
代码引用
首先引用Vue.j和Axios，如下HTML代码。
- 注:Vue.js是通过本地引用，Axios是链接的请示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>我在Vue.js中使用Axios</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--引用Vue-->
<script type="text/javascript" src="js/vue.js"></script>
<!--Axios引用-->
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="don_login">
<div class="don_title">
<img src="./images/title.png" alt="">
</div>
<div class="login-group">
<h2>用户登录</h2>
<ul>
<li class="input_group"><i class="icon_user"></i><input type="text" v-model="username" placeholder="请输入用户名">
</li>
<li class="input_group"><i class="icon_pwd"></i><input type="password" v-model="password"
placeholder="请输入密码"></li>
<li class="btn_group">
<button class="login_btn" @click="login">登 录</button>
</li>
<li class="btn_group">
<button class="reset_btn" @click="reset">重 置</button>
</li>
</ul>
</div>
<div class="don_technical_support">
<img src="./images/technical_support.png" alt="">
</div>
</div>
<script src="js/use/app.js"></script>
</body>
</html>
Vue中的网络请在
- 请看
app.js
const vue = new Vue({
el: '.don_login',
data: {
username: '',
password: '',
},
methods: {
login: function () { //登录
if (this.username === "" || this.username === undefined) {
$.myToast("用户名不能为空，请输入用户名！");
return
}
if (this.password === "" || this.password === undefined) {
$.myToast("密码不能为空，请输入密码！");
return
}
// if (this.password.length < 6) {
// $.myToast("密码长度不能小于6!");
// return
// }
// this.requestLogin();
window.location.href = PATH_SEARCH_HOME;
},
reset: function () { //重置
console.log("进入reset");
this.username = "";
this.password = ""
},
requestLogin: function () {
//模拟登录
axios.get("data/index.json", { //get
"username": this.username,
"password": this.password
}).then(function (res) {
console.log(res);
console.log(res.data);
//判断是否登录成功。成功就保存账号和密码
//localStorage.
var userInfo = {
"username": this.username,
"password": this.password
};
// window.localStorage.userInfo = JSON.stringify(userInfo);
$.myToast("登录成功!");
//这里需要保存返回的数据
// window.sessionStorage.setItem("user", JSON.stringify(userInfo));//保存数据
window.location.href = PATH_SEARCH_HOME;
}).catch(function (error) {
console.log(error);
})
//post
// axios.post('/user', {
// "username": this.username,
// "password": this.password
// })
// .then(function (response) {
// console.log(response);
// })
// .catch(function (error) {
// console.log(error);
// });
},
getUserInfo: function () {//获取用户信息
if (window.localStorage.userInfo) { //是否存在已经登录保存的信息
var userInfo = JSON.parse(window.localStorage.userInfo);
this.username = userInfo.username;
this.password = userInfo.password;//将信息设置到页面中
}
}
},
mounted: function () {
this.getUserInfo();
}
});
总结
这里进行记录Vue中通过Axios进行网络请求，完成需求。
