1、要获取的数据表数据

简单列举一个表格数据演示,命名为user表

idnamesno
1You0001
2HuZi0002

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;

方法的基本使用就是这样,具体使用起来思想还是和vue2+js+elementUI是一样的,知道vue3+ts如何获取数据与定义函数,就可以将数据进行可视化出来,如果需要,后期会找时间做一个完成vue3+ts+elementPlus来获取数据,分页展示出来,以及增、查、改,删除及批量删除的功能

Logo

前往低代码交流专区

更多推荐