Vue3+typeScripte -03

本节：编写商品列表的页面内容。

一、编写商品列表的页面内容（1.搜索框，2.表格，3.分页）

1.对应接口的ts文件要先写好。

axios.create(config) 对axios请求进行二次封装

import axios from "axios";
//创建axios实例
const service = axios.create({
    baseURL: "https://www.fastmock.site/mock/bf1fcb3c2e2945669c2c8d0ecb8009b8/api",
    timeout: 5000,//超时时间
    headers: {//编译语言
        "Content-type" : "application/json;charset=utf-8"
    }
})
//请求拦截
//就是你请求接口的时候，我会先拦截下来，对你的数据做一个判断，或者携带个token给你
service.interceptors.request.use((config) => {//请求的数据
    config.headers = config.headers || {}  // 没有数据的话就设置为空设置为数据
    if(localStorage.getItem("token")){//先确保登录
        config.headers.token = localStorage.getItem("token") || ""
    }
    return config//必须返回出去，不然请求发不出去
})
//响应拦截：后端返回来的结果
service.interceptors.response.use((res) => {
    const code : number = res.data.code//code是后端的状态码
    if(code != 200){
      return Promise.reject(res.data)
      //Promise.reject(res.data)可以返回失败的数据
    }
    return res.data//返回成功的数据
},(err) => {
    console.log(err)//错误信息的处理
})
//因为别的地方要用，所以就把实例暴露出去，导出
export default service

//我要用到的一些接口
import service from "@/request/index";
import {ILoginData} from "@/type/login";  //引入接口
 
// 登录接口
export function login(data: ILoginData) {//接口ILoginData接口的变量名
    return service({
        url: "/login",
        method: "POST",
        data
    })
}
 
// 商品列表接口
export function getGoodsList(){
    return service({
        url: "/getGoodsList",
        method: "GET"
    })
}
 
// 用户列表接口
export function getUserList(){
    return service({
        url: "/getUserList",
        method: "GET"
    })
}
 
// 角色列表接口
export function getRoleList(){
    return service({
        url: "/getRoleList",
        method: "GET"
    })
}
 
// 权限列表接口
export function getAuthorityList(){
    return service({
        url: "/getAuthorityList",
        method: "GET"
    })
}

2.对应的数据规范化接口，数据的类，要写好，在type文件下，创建了goods.ts文件（文件名都可以自定义）

//商品接口，规范显示数据的类型
export interface ListInt{//写接口，ILoginData接口名
  userId: string,
   id: number,
   title: string,
   introduce:string
}
interface selectDataInt { //规范搜索数据的类型
  title:string,
  introduce: string,
  page: number,
  count: number,
  pagesize:number
}
 
 
export class InitData { 
  selectData: selectDataInt = {//搜索数据的类
    title: "",
    introduce: "",
    page: 1,
    count: 0,
    pagesize:10
  }
  list:ListInt[]=[]//展示的内容数据的类
}

 3.这里写的是搜索框的变量规范化。

ts中重要的规范化变量步骤： 

4、表格的使用

（1）引入代码规范化的ts文件，引入接口获取后端数据，赋值给规范化里面定义好的数组，然后循环出来。这里只是表单的一个赋值

 5.分页的使用

6、搜索数据 

7.后面对代码进行了一个函数封装，优化了一下，在生命周期挂载的时候，封装了调用获取后端数据的接口方法，要用那个方法的话，直接调用封装好的方法名就可以了。

全部代码：

这里有一个点不明白，就是分页每一样大小本来为10，后面改成每一页，只有5，count就乘2了

 这里的原因是因为她是提前知道那个值的所以是写死的，这种写法是不正确的，应该直接用element里面的属性就可以了。

上面的代码很多bug,上面的搜索也有问题，1.搜索了之后一次之后，就把搜索到的数据，放在了表格里面循环，其实不对，因为这样再次点击搜索之后，就是在搜索之后的数据里面查找，所以这样是查找不到的，应该把搜索到的数据，赋值到一个新的变量，然后显示在表单，但是总的数据是不变的。

2.还有就是他获取一个数据之后，进行了一个判断，其实也不对，不应该是还写在else里面，因为写在else里面，执行了true的值，下面的 值就不执行判断了。

修改之后的代码：

<template>
  <div>
  <div class="select-box">
    <el-form :inline="true" :model="selectData" class="demo-form-inline">
      <el-form-item label="标题">
        <el-input v-model="selectData.title" placeholder="请输入关键字" />
      </el-form-item>
      <el-form-item label="详情">
        <el-input v-model="selectData.introduce" placeholder="请输入关键字" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
  <!-- 表单的组件  :data="dataList.comList"遍历的数组-->
  <el-table :data="comList"  style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="title" label="标题" width="180" />
    <el-table-column prop="introduce" label="详情" />
  </el-table>
    <!-- prop绑定的是数组里面要展示出来的数据 label是标题 -->
 </div>
    <el-pagination
     @current-change="currentChange"
     @size-change="sizeChange"
     layout="prev, pager, next" 
     :page-size="selectData.pagesize"
     :total="selectData.count" />
<!-- @current-change当前页发生变化的时候触发的方法
     @size-change当页数大小发生变化的时候，触发方法 
    这里有个不懂的，pagesize原本为10，后面改成5，selectData.count就 *2 了
     
-->
  </div>
</template>
 
<script lang="ts">
// import { da } from 'element-plus/es/locale';
import { computed, defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
import { getGoodsList } from '../request/api'//1.引入接口文档
import { InitData,ListInt} from '../type/goods'//1.引入接口文档，变量规范化
 
// 这里又犯了个错误，就是创建新的数组，位置放错了，导致报错
export default defineComponent({
  setup() {//赋值后端数据：
    const data = reactive({...new InitData() });//实例化类
    onMounted(() => {//生命周期，挂载
        getGoods();
      }
    );
    const getGoods=()=> { 
      getGoodsList().then((res) => { //2.使用这个接口文档里面的对应内容
      console.log(res);
      // 接收后台返回的数据
      data.list = [...res.data, {id: 34,
          introduce: "haha",
          title: "旺仔牛奶",
          userId: 1
        }];
        data.searchData = data.list;
      // selectData定义类里面的变量来接收后端传过来的数据
      data.selectData.count = res.data.length;//赋值数据的长度
    })
    }
   
    // 分页：定义一个计算属性
    // const dataList = reactive({
    //   comList: computed(() => {
    //     // 1---> [1 -10]   2---> [11-20] 3---> [21-30] 
    //     // data.selectData.page是第一条，但是数据是从下标开始取的，所以要-1，变成0
    //     return data.list.slice( //(0, 10)从第0开始，截取10个数
    //       (data.selectData.page - 1) * data.selectData.pagesize,//0乘任何数都为0，
    //       data.selectData.page * data.selectData.pagesize//1*10=10，包头不包尾,
    //     )
    //   })
    // })
    const comList = computed(() => {
      // 1---> [1 -10]   2---> [11-20] 3---> [21-30] 
      // data.selectData.page是第一条，但是数据是从下标开始取的，所以要-1，变成0
      return data.searchData.slice( //(0, 10)从第0开始，截取10个数
        (data.selectData.page - 1) * data.selectData.pagesize,//0乘任何数都为0，
        data.selectData.page * data.selectData.pagesize//1*10=10，包头不包尾,
      )
    });
    //把后端传过来的数据，放到类里面赋值
    const currentChange = (page: number) => {
      data.selectData.page = page
    }
    const sizeChange = (pagesize: number) => {
      data.selectData.pagesize = pagesize
    }
 
    // 搜索框,接收搜索框的数据，放在数组里面
    const onSubmit = () => {
      let arr: ListInt[] = [];//接收查询之后，展示的数据
      console.log(data.selectData, "data.selectData");
      if (data.selectData.title || data.selectData.introduce) {
        //判断标题输入框里面是否有值
        if (data.selectData.title) {
          arr = data.list.filter((value) => { //filter过滤判断value是真的就赋值，不是真的就不赋值
            return value.title.indexOf(data.selectData.title)!==-1
            //indexOf用搜索框数组里面的内去查找后端返回的数据里面，
            //是不是有对应的关键字，有就不等于-1，为true，返回给arr
          })
        }  //判断详情输入框里面是否有值
          if (data.selectData.introduce) {
            arr = data.list.filter((value) => { //filter过滤判断value是真的就赋值，不是真的就不赋值
              return value.introduce.indexOf(data.selectData.introduce)!==-1
              //indexOf用搜索框数组里面的内去查找后端返回的数据里面，
              //是不是有对应的关键字，有就不等于-1，为true，返回给arr
            })
        }
      }
      else {
        arr = data.list;
      }
      data.searchData = arr//最後，把過濾了的數組，放在表格里面再次循环出来
      data.selectData.count = arr.length//总页数也发生改变
    };
    //監聽輸入框的屬性
    watch([() => data.selectData.title, () => data.selectData.introduce], () => { 
      if (data.selectData.title == '' || data.selectData.introduce == '') {
        //如果不為空，就重新獲取數據，重新賦值
        onSubmit();
      }
       
    })
    // dataList
    return { ...toRefs(data), currentChange, sizeChange, comList, onSubmit };
   }
  })  
</script>
 
<style scoped>
 
</style>

最后，写代码过程又犯了一个错误，就是数组的位置写错了，导致报错。