网络请求和状态管理
安装axios
创建项目，输入名称
新建文件夹：
在文件夹下输入cmd
运行
最后在复制到浏览器中
得到页面
使用axios
axios封装成模块
实现一个学生信息案例
模拟数据，请求数据
安装完成后新建一个mock文件夹，制作一个模拟数据
配置模拟数据的信息
App.vue删空
导入
<template>
<div class="box">
<button @click="getData">请求数据</button>
<table>
<caption>
<h2>学生信息列表</h2>
</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr v-for="item in studentData.list" :key="item.student_id">
<td>{{ item.student_id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
<td>{{ item.class }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { reactive } from 'vue'
import request from './axios/request.js'
import './mock/mockServer.js'
const studentData = reactive({
list:[]
})
const getData = function(){
request({
url:'/mock/getStudents',
method:'get'
}).then(res=>{
studentData.list = res.data.data
}).catch(error=>{
console.log(error);
})
}
</script>
<style>
body,html {
width: 100%;
height: 100%;
}
#app {
width: 100% !important;
}
table {
border-collapse: collapse;
margin: 0 auto;
text-align: center;
}
table td, table th {
border: 1px solid #cad9ea;
color: #666;
height: 30px;
}
table thead th {
background-color: #cce8eb;
width: 100px;
}
table tr:nth-child(odd) {
background: #fff;
}
table tr:nth-child(even) {
background: #f5fafa;
}
</style>
在main.css和App.vue分别导入