Vue3.0+Vite2.0项目框架搭建（二）- 引入axios

添加axios依赖

进入项目目录，执行以下命令

yarn add axios

对axios进行简单封装

/comon/request/index.js

main.js

测试

/views/home.vue

<template>
  {{ msg }}
  <button @click="$router.push({ name: 'InfoMy' })">显示小圆球</button>

  <br /><br /><br />

  UserID:<input v-model="user.u_id" /> Password:<input v-model="user.u_pwd" type="password" />
  <button @click="login">测试axios-登录</button>

  <template v-if="token">
    <button @click="getClassList">获取班级列表</button>

    <br /><br /><br />
    <div v-for="cls in classList" :key="cls.c_id">
      {{ cls.c_id }}|{{ cls.c_name }}
    </div>
  </template>
  <router-view />
</template>
<script setup>
import { ref } from "vue";
import request from "@/common/request";

const msg = ref("这是主页面");

//登录用户
const user = {
  u_id: "",
  u_pwd: "",
};

//登录令牌
const token = ref("");

//班级列表
const classList = ref([]);

//登录方法
const login = () => {
  request.http.post("/security/tealogin/tlogin", user).then(({ data }) => {
    if (data.success) {
      token.value = data.result; //存储token

      alert("登录成功！");
    } else {
      token.value = "";
      alert(JSON.stringify(data));
    }
  });
};

//获取班级列表
const getClassList = () => {
  request.http
    .get("/common/classList", { headers: { Token: token.value } })
    .then(({ data: { result } }) => {
      classList.value = result;
    });
};
</script>
<style scoped>
</style>

小结

axios已引入项目，并测试成功，后续将要引入Element3/Vant3。