12、axios请求库配置和获取数据列表

axios请求库：专门给服务器发送请求信息，服务器返回时拿回数据。（客户端与服务器端进行信息交换）

打开VSCode

打开相应项目目录下的终端，通过axios安装指令进行安装

npm install axios

 安装完成后查看package.json是否安装上 

创建一个api文件夹，存放相关请求的内容

 在api文件夹下创建一个api_config.js文件

配置相关信息

相关代码如下：

// 导入axios这个对象
import axios from 'axios'

//设置基础URL，相当于请求前缀
axios.defaults.baseURL = "http://localhost:8080/api"

//请求类型,将请求头设置成异步类型,不设置或设置为空时默认为同步请求
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'

//设置提交数据类型
axios.defaults.headers.post['Content-Type'] = 'application/json'

//文件导出
export default axios;

转到CategoryView.vue分类信息页 ，通过axios请求库去服务器获取所有分类信息方法

 修改后代码如下：

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>商品分类</span>
        <el-button type="primary" icon="CirclePlus" round>添加分类</el-button>
      </div>
    </template>
    <el-table :data="tableData.list" stripe style="width: 100%">
      <el-table-column prop="id" label="Id" width="180" />
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column fixed="right" label="操作" width="180">
        <template #default>
          <el-button type="success" size="small">修改</el-button>
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>


<script setup>
//定义变量需要导入reactive方法
import { reactive, onMounted } from "vue";
//导入请求库
//@表示在src下
import axios from "@/api/api_config";

// --------------------数据定义-------------
//将拿到的数据放入到list里面去
const tableData = reactive({ list: [] });

// --------------------方法-------------
//初始化方法,相当于后台的构造方法
onMounted(() => {
  getList();
});

// 获取分类信息
const getList = () => {
  //then 获取响应数据
  return axios.get("/category").then(res => {
    //将返回的数据存放到tableData的list里面去
    tableData.list = res.data;
  });
};

//
</script>

最后不要忘记在获取数据绑定时获取到tableData下的list

 

接下来启动服务器，打个断点调试一下

 成功进入程序，前后端连接成功！

 成功获取数据