Vue安装axios及使⽤
1.安装：npm install axios --save-dev
2.main.js中导⼊
import axios from 'axios';
Vue.prototype.$axios=axios;
axios.defaults.baseURL ='localhost/VueApi';  //请求的默认地址
//axios.defaults.headersmon['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
3.login.vue中：
<template>
<div class="page-login">
<div class="logo"></div>
<div class="login-wrap">
<div class="login-title">登录</div>
<el-form class="login-form" label-position="right" label-width="80px">
<div class="input-list">
<el-input
@input="setInpu"
class="input-item active"
v-model="login.user"
placeholder="请输⼊账号: admin"
><i slot="prefix" class="el-input__icon el-icon-user"></i
></el-input>
<el-input
@input="setInpu"
class="input-item"
placeholder="请输⼊密码: cc123456"
v-model="login.password"
show-password
>
<i slot="prefix" class="el-input__icon el-icon-lock"></i>
</el-input>
<el-input
@input="setInpu"
class="input-item"
v-model="login.number"
placeholder="请输⼊分机号: 1000"
><i slot="prefix" class="el-input__icon el-icon-phone-outline"></i
></el-input>
</div>
<div class="btn-wrap">
<div class="form-hint">{{ formHint }}</div>
<el-button class="btn" type="primary" @click="loginFun">登录<i class="el-input__icon el-icon-video-play"></i></el-button>        </div>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "",
components: {},
props: {},
data() {
return {
login: {
user: "",
password: "",
number: ""
},
formHint: ''
};
},
computed: {},
watch: {},
beforeCreate() {},
created() {},
beforeMount() {},jquery获取下拉框选中值
mounted() {},
methods: {
loginFun() {
let { user, password, number } = this.login;
//服务器端签证
this.$axios.post('/Api_User_Login.php', this.login)
.then(function (response) {
console.log(response);
console.log(response.data);
let { login_result, result } = response.data;//解析JSON
console.log(login_result);
if (login_result == "true") {
this.$store.state.current_user_name=this.login.user;
this.$store.state.current_user_pwd=this.login.password;
this.$store.state.current_user_tel=this.login.number;
console.log(this.$store.state.current_user_name +" "+this.$store.state.password+" "+this.$store.state.number );
this.$router.push("/Home"); //直接跳转
}else{
this.formHint = "⽤户名和密码错误！"
}
}.bind(this))
.catch(function (error) {
console.log(error);
});
},
setInpu () {
this.formHint = ''
}
},
};
</script>
<style lang="scss">
@import "./Login.scss";
</style>
4.服务器端 Api_User_Login.php
<?php
error_reporting(E_ALL^E_NOTICE);//Notice不显⽰
//解决 axios 两个请求的问题
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods:POST,GET');// 响应类型
header('Access-Control-Allow-Credentials: true'); // 带 cookie 的跨域访问
header('Access-Control-Allow-Headers:x-requested-with,Content-Type,X-CSRF-Token');// 响应头设置
if(strtoupper($_SERVER['REQUEST_METHOD'])== 'OPTIONS'){//预检请求
exit; //后端遇到请求⽅式是“Request Method： OPTIONS” 时，直接返回或退出即可，不再往下执⾏程序。
}
//获得post的json数据,
$postJson = json_decode($GLOBALS['HTTP_RAW_POST_DATA']);
//获得event参数
$current_user_name=$postJson->user;
$current_user_pwd=$postJson->password;
$current_user_tel=$postJson->number;
//WriteLog( "postJson " . $current_user_name );
//WriteLog( "postJson " . $current_user_pwd );
//WriteLog( "postJson " . $current_user_tel );
//返回值
$arr_result = array();
$arr_result['login_result']="true";
$arr_result['result'] = "OK";
echo json_encode($arr_result );
exit(0);
>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。