Vue3.0商店後臺管理系統項目實戰-axios的封裝

參考資料

Vue3.0官方文檔：https://cn.vuejs.org/
Element Plus文檔：https://element-plus.gitee.io/zh-CN/

在項目裏面安裝

npm i axios -S

封裝一個axios
在文件裏面新建一個util/service.js

import { ElLoading } from 'element-plus'
import { ElMessage } from 'element-plus'


import axios from "axios"
//使用create 創建axios實例

let loadingObj=null

const Service=axios.create({
    timeout:8000,
    baseURL:"http://xx",
    headers:{
        "Content-type":"application/json;charset=utf-8"
    }
    
})
//請求攔截-增加loading，對請求進行統一的處理
Service.interceptors.request.use(config=>{
    loadingObj=ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })

      return config
})

//響應攔截--對返回值做統一處理
Service.interceptors.response.use(response=>{
    return response.data
},err=>{
    loadingObj.close()
    ElMessage({
        message:"服務器錯誤",
        type:"error",
        duration:2000

    })
})

//post請求
export const post=config=>{
    return Service({
        ...config,
        method:"post",
        data:config.data
    })
}


//get請求
export const get=config=>{
    return Service({
        ...config,
        method:"get",
        data:config.data
    })
}

新建一個request.js

request.js

import {post,get} from "./service"
export const  loginApi=data=>{
    return post({
        url:"./login",
        data
    })
}

在login.vue裏面引入request

在實際項目裏面 封裝使用
service.js

import axios from "axios"

import { ElLoading } from 'element-plus'
import { ElMessage } from 'element-plus'
// //使用create 創建axios實例

// let loadingObj=null

// const Service=axios.create({
//     timeout:8000,
//     baseURL:"http://192.168.16.103:8091/chem/login",
//     headers:{
//         "Content-type":"application/json;charset=utf-8"
//     }
    
// })

// 使用create創建axios實例
let loadingObj = null
const Service = axios.create({
    timeout:8000,
    baseURL:"http://47.100.36.235:8091/check/login",
    headers:{
        "Content-type":"application/json;charset=utf-8",
      //  "Authorization":store.state.uInfo.userInfo.token
    }
})

// 請求攔截-增加loading,對請求做統一處理
Service.interceptors.request.use(config=>{
    loadingObj=ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    return config
})
// 響應攔截-對返回值做統一處理
Service.interceptors.response.use(response=>{
    loadingObj.close()
    const data = response.data
    if(data.meta.status!=200 && data.meta.status!=201){
        ElMessage.error(data.meta.msg||"服務器出錯")
        // 請求出錯 
        return data
    }
    return data

},error=>{
    loadingObj.close()
    ElMessage({
        message:"服務器錯誤",
        type:"error",
        duration:2000
    })
})

// post請求
export const post=config=>{
    return Service({
        ...config,
        method:"post",
        data:config.data
    })
}
// get請求
export const get=config=>{
    return Service({
        ...config,
        method:"get",
        params:config.data
    })
}

request.js

import {post,get} from "./service"
export const loginApi=data=>{ 
    return post({
        url:"/login",
        data
    })
}

login.vue

<template>
  <div class="login_wrap">
    <div class="form_wrap">
      <el-form
        ref="formRef"
        :model="loginData"
        label-width="100px"
        class="demo-dynamic"
      >
        <el-form-item
          prop="username"
          label="用戶名"
          :rules="[
            {
              required: true,
              message: '此項爲必填項',
              trigger: 'blur',
            },
          ]"
        >
          <el-input v-model="loginData.username" />
        </el-form-item>

        <el-form-item
          prop="password"
          label="密碼"
          :rules="[
            {
              required: true,
              message: '此項爲必填項',
              trigger: 'blur',
            },
          ]"
        >
          <el-input type="password" v-model="loginData.password" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleLogin()">登錄</el-button>
        
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";

//引入useStore
import { useStore } from "vuex";
//引入路由
import { useRouter } from "vue-router";

//import {loginApi} from "@util/request"
import {loginApi} from "@/util/request"

export default {
  name: "login",
  setup() {
    const store = useStore();
    const router = useRouter();

    const count = store.state.number.count;

    const data = reactive({
      loginData: {
        username: "",
        password: "",
      },
      num: count,
      // countStatus:
    });

    const handleLogin = () => {
      //請求後臺接口
      loginApi(data.loginData).then(res=>{
        console.log("登錄的返回",res)

        if(res.data){
                    store.commit('setUserInfo', res.data);
                    localStorage.setItem("loginData",JSON.stringify(res.data))
                    // 跳轉/user
                    router.push({
                        path:"/"
                    })
                }
                
      })
      // store.commit("setUserInfo", data.loginData);
      // localStorage.setItem("loginData",JSON.stringify(data.loginData))
      
      // //跳轉user頁面
      // router.push({
      //   path:"/user"
      // })
    };

    // console.log("修改前getters", store.getters["number/countStatus"]);
    // const handleLogin = () => {

    //   store
    //     .dispatch("number/setCountPromise", -100)
    //     .then((res) => {
    //       alert("修改成功");
    //     })
    //     .catch((err) => {
    //       alert(err);
    //     });
    //   console.log(store.state.number.count);
    //   console.log("修改後getters",store.getters["number/countStatus"]);
    // };
    return {
      ...toRefs(data),
      handleLogin,
    };
  },
};
</script>
<style scoped>
.login_wrap {
  width: 100%;
  height: 100vh;
  background: #2d3761;
  position: relative;
}
.form_wrap {
  position: fixed;
  top: 50%;
  transform: translate(130%, -50%);
  background: #fff;
  padding: 30px 50px;
  border-radius: 5px;
}
</style>