Vue3学习（七）之 列表界面数据展示

一、前言

昨晚可能是因为更新完文章后，导致过于兴奋睡不着（写代码确实太容易让人兴奋了），结果两点多才睡着，大东北果然还是太冷了。

不知道是不是因为膝盖和脚都是冰凉的，所以才导致很晚才能入睡？

刚眯了一会，大约一个小时吧，感觉不错，接着又想学习了。

二、列表界面展示示例

现在要做的就是把打到页面的数据，带样式，也就是说好看点显示。

之前我们在《Vue3学习（二）之 集成Ant Design Vue》这篇文章中，有提及组件的使用，对于一个前端不是很好（后端也不咋的），本着拿来主义，我们能现成的是最好、最省事的方式了。

直白点说就是，找Ant Design Vue现成的组件，将列表数据按组件样式显示到界面上。

1、挑选自己喜欢的列表样式

从https://2x.antdv.com/components/list-cn中，找到list列表，找到自己喜欢的风格，如下图所示：

2、进行数据显示

2.1、组件在列表显示

接下来，我们只需要在home里进行修改即可，找到刚才对应组件的位置，把对应代码拷贝到home中，然后在进行修改即可，示例代码如下：

重新编译运行，查看效果如下：

2.2、接口返回数据在列表显示

明显现在，可以看到想要用的列表样式已经在页面中成功展示了，但这并不是我想要的，我想要的是后端接口返回数据在此处展示，也就是数据源，接下来,我们再次调整Home的代码，示例代码如下：

重新编译运行，查看效果如下：

2.3、接口数据改造

很明显，列表数据太少，我对接口进行改造，让其返回多条数据。

我们从service中，不难看出我们做的是，不管传入什么，都是写死的走的模糊查询，这里我们改成动态SQL即可，示例代码如下：

package com.rongrong.wiki.service;

import com.rongrong.wiki.domain.EBook;
import com.rongrong.wiki.domain.EBookExample;
import com.rongrong.wiki.mapper.EBookMapper;
import com.rongrong.wiki.req.EBookReq;
import com.rongrong.wiki.resp.EBookResp;
import org.springframework.stereotype.Service;
import org.springframework.util.ObjectUtils;

import javax.annotation.Resource;
import java.util.List;

import static com.rongrong.wiki.util.CopyUtil.copyList;

/**
 * @author rongrong
 * @version 1.0
 * @description
 * @date 2021/10/13 23:09
 */
@Service
public class EBookService {

    @Resource
    private EBookMapper eBookMapper;

    public List list(EBookReq eBookReq) {
        EBookExample eBookExample = new EBookExample();
        //此处代码的意思相当于，搞了一个Sql的where条件
        EBookExample.Criteria criteria = eBookExample.createCriteria();
        //划波浪线为不推荐使用，这里我们去看源代码做个替换即可
        if(!ObjectUtils.isEmpty(eBookReq.getName())){
            criteria.andNameLike("%"+eBookReq.getName()+"%");
        }
        List eBookList = eBookMapper.selectByExample(eBookExample);
        //List eBookRespList = new ArrayList<>();
        //for (EBook eBook: eBookList) {
        //    //EBookResp eBookResp = new EBookResp();
        //    ////spring boot 自带的BeanUtils完成对象的拷贝
        //    //BeanUtils.copyProperties(eBook, eBookResp);
        //    //eBookResp.setId(12345L);
        //    //单体复制
        //    EBookResp copy = copy(eBook, EBookResp.class);
        //    eBookRespList.add(copy);
        //}
        //列表复制
        List respList = copyList(eBookList, EBookResp.class);
        return respList;
    }
}

查看接口返回数据，如下：

2.4、list列表一行显示为多条数据

接口改造完成，接着需要对列表显示内容进行修改，同样在list列表找到栅格列表，我们还在home中修改，示例代码如下：

知识点：

• :grid="{ gutter: 16, column: 4 }"，是进行栅格显示，栅格间隔16，每行显示4个
• 这里要删除:pagination="pagination" ，即分页显示

再来重新编译，查看效果如下：

2.5、列表内容前图标样式修改

一切看是很好，但感觉是图书封面有点小不好看，如下图：

来接着改样式，只需在home里调整即可，示例代码如下：

再次重新编译，查看下过如下：

三、写在最后

几经折腾，终于把样式和数据整出来了，到此，列表界面数据展示完毕，有兴趣的同学自己去尝试！