Vue 安裝 axios 及使用

阿新 • • 發佈：2021-01-11

1.安裝：npm install axios --save-dev

2.main.js中匯入

import axios from 'axios';
Vue.prototype.$axios=axios;

axios.defaults.baseURL ='http://localhost/VueApi';  //請求的預設地址
//axios.defaults.headers.common['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() {},
  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);

?>