Vue3+ts获取后端数据

1、要获取的数据表数据
简单列举一个表格数据演示，命名为user表

id   name   sno
1   You   0001
2   HuZi   0002
2、前端处理
Vue3相对于Vue2发生了很大的改变，使用如果使用了ts而不是js，不同又被放大，下面演示vue3+ts如何接收后端传来的数据列表信息并显示出来
1）创建接收user表的类型接口（实体）

创建base.ts文件，将接口写在里面，一般这种接口都会特定封装在一个ts文件中，这个文件会专门存放各个数据表对应的接口；回到正题，创建user接口，代码如下:

export interface UserData{//用户表对应的接口
    id:number
    name:string
    sno:string
}
export interface SearchModelData{//如果要进行分页，根据用户名搜索数据，可以把相应的变量封装在一起，不用一个一个变量去在vue界面定义，这里直接创建一个整合在一起的接口
    currentPage: number
    pageSize: number
    userName: string
}

接口中数据要与user表对应，且类型也最好对应上，这就是ts的特性，每个变量要求给定相应类型，当然对于类型未知的数据，提供了any类型，表示任意；如name:any即可

2）vue界面开始调用获取

需要注意的是vue3封装对象、变量已经和vue2不同，加上本文使用的是ts，所以差距会更大封装如下
将需要用到的工具导入，并创建对象

<script lang="ts" setup>//这一句很重要，ts表示使用ts语法，setup是一种自动注册机制，将变量和方法自动注册，elementPlus组件就可调用了；有了这些，就用再想vue2+js中那样定义data、methods等
import {toRefs, reactive} from "vue";
import {UserData,SearchModelData} from "@/base";//导入接口
import {getUserListAPI} from "@/api/userApi";//访问后端的request方法，上篇文章讲过如何定义及使用
//定义对象
const state = reactive({
    userInfo:[] as UserData[],//因为后端传来的是List数组，而不是一条数据，这种就是定义成对象数组形式
    total: 0,//如果需要分页，可以定义一个总页数
    searchModel：{
        currentPage: 1,
        pageSize: 10,
        userName: ""
    } as SearchModelData,//上面userInfo是定义对象数组，这个就是定义一个对象的方法，注意差别
})
//封装数据，这个是为了函数以及vue界面的那些组件（v-model）可以取到上面state中定义的对象及变量,封装之后就可以使用state.total这种形式调用了
const {
  userInfo,
  searchModel,
  total,
}=toRefs(state) 
//获取后端数据
function getUserList(){
  getUserListAPI(state.searchModel).then((res:any)=>{
    console.log(res)
    state.userInfo=res.userList
    state.total=res.total
  })
}

需要注意的是，vue3中使用前端组件element时，需要用elementPlus，而不是elementUI，后者是针对vue2的，并不是很兼容vue3。

Vue3+ts获取后端数据

猜你喜欢