一、前言

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

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

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

二、列表界面展示示例

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

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

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

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

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

2、进行数据显示

2.1、组件在列表显示

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

<template>

  <a-layout>

    <a-layout-sider width="200" style="background: #fff">

      <a-menu

          mode="inline"

          v-model:selectedKeys="selectedKeys2"

          v-model:openKeys="openKeys"

          :style="{ height: '100%', borderRight: 0 }"

      >

        <a-sub-menu key="sub1">

          <template #title>

                <span>

                  <user-outlined />

                  subnav 1

                </span>

          </template>

          <a-menu-item key="1">option1</a-menu-item>

          <a-menu-item key="2">option2</a-menu-item>

          <a-menu-item key="3">option3</a-menu-item>

          <a-menu-item key="4">option4</a-menu-item>

        </a-sub-menu>

        <a-sub-menu key="sub2">

          <template #title>

                <span>

                  <laptop-outlined />

                  subnav 2

                </span>

          </template>

          <a-menu-item key="5">option5</a-menu-item>

          <a-menu-item key="6">option6</a-menu-item>

          <a-menu-item key="7">option7</a-menu-item>

          <a-menu-item key="8">option8</a-menu-item>

        </a-sub-menu>

        <a-sub-menu key="sub3">

          <template #title>

                <span>

                  <notification-outlined />

                  subnav 3

                </span>

          </template>

          <a-menu-item key="9">option9</a-menu-item>

          <a-menu-item key="10">option10</a-menu-item>

          <a-menu-item key="11">option11</a-menu-item>

          <a-menu-item key="12">option12</a-menu-item>

        </a-sub-menu>

      </a-menu>

    </a-layout-sider>

    <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">

      <template #footer>

        <div>

          <b>ant design vue</b>

          footer part

        </div>

      </template>

      <template #renderItem="{ item }">

        <a-list-item key="item.title">

          <template #actions>

          <span v-for="{ type, text } in actions" :key="type">

            <component v-bind:is="type" style="margin-right: 8px" />

            {{ text }}

          </span>

          </template>

          <template #extra>

            <img

                width="272"

                alt="logo"

                src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"

            />

          </template>

          <a-list-item-meta :description="item.description">

            <template #title>

              <a :href="item.href">{{ item.title }}</a>

            </template>

            <template #avatar><a-avatar :src="item.avatar" /></template>

          </a-list-item-meta>

          {{ item.content }}

        </a-list-item>

      </template>

    </a-list>

  </a-layout>

</template>

<script lang="ts">

import { defineComponent,onMounted,ref,reactive,toRef} from 'vue';

import axios from 'axios';

import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';

const listData: Record<string, string>[] = [];

for (let i = 0; i < 23; i++) {

  listData.push({

    href: 'https://www.antdv.com/',

    title: `ant design vue part ${i}`,

    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',

    description:

        'Ant Design, a design language for background applications, is refined by Ant UED Team.',

    content:

        'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',

  });

}

export default defineComponent({

  components: {

    StarOutlined,

    LikeOutlined,

    MessageOutlined,

  },

  name: 'Home',

  setup(){

    const pagination = {

      onChange: (page: number) => {

        console.log(page);

      },

      pageSize: 3,

    };

    const actions: Record<string, string>[] = [

      { type: 'StarOutlined', text: '156' },

      { type: 'LikeOutlined', text: '156' },

      { type: 'MessageOutlined', text: '2' },

    ];

    console.log('set up');

    //使用ref进行数据绑定

    const ebooks=ref();

    // 使用reactive进行数据绑定

    const ebooks1=reactive({books:[]})

    onMounted(()=>{

      axios.get("http://localhost:8888/ebook/list?name=spring").then(response =>{

        console.log("onMounted");

        const data=response.data;

        ebooks.value=data.content;

        ebooks1.books=data.content;

      })

    })

    return{

      listData,

      pagination,

      actions,

      ebooks1: ebooks,

      ebooks2:toRef(ebooks1,"books")

    }

  }

});

</script>

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

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

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

<template>

  <a-layout>

    `<a-layout-sider width="200" style="background: #fff">

      <a-menu

          mode="inline"

          v-model:selectedKeys="selectedKeys2"

          v-model:openKeys="openKeys"

          :style="{ height: '100%', borderRight: 0 }"

      >

        <a-sub-menu key="sub1">

          <template #title>

                <span>

                  <user-outlined />

                  subnav 1

                </span>

          </template>

          <a-menu-item key="1">option1</a-menu-item>

          <a-menu-item key="2">option2</a-menu-item>

          <a-menu-item key="3">option3</a-menu-item>

          <a-menu-item key="4">option4</a-menu-item>

        </a-sub-menu>

        <a-sub-menu key="sub2">

          <template #title>

                <span>

                  <laptop-outlined />

                  subnav 2

                </span>

          </template>

          <a-menu-item key="5">option5</a-menu-item>

          <a-menu-item key="6">option6</a-menu-item>

          <a-menu-item key="7">option7</a-menu-item>

          <a-menu-item key="8">option8</a-menu-item>

        </a-sub-menu>

        <a-sub-menu key="sub3">

          <template #title>

                <span>

                  <notification-outlined />

                  subnav 3

                </span>

          </template>

          <a-menu-item key="9">option9</a-menu-item>

          <a-menu-item key="10">option10</a-menu-item>

          <a-menu-item key="11">option11</a-menu-item>

          <a-menu-item key="12">option12</a-menu-item>

        </a-sub-menu>

      </a-menu>

    </a-layout-sider>`

    <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="ebooks1">

      <template #renderItem="{ item }">

        <a-list-item key="item.name">

          <template #actions>

          <span v-for="{ type, text } in actions" :key="type">

            <component v-bind:is="type" style="margin-right: 8px" />

            {{ text }}

          </span>

          </template>

          <a-list-item-meta :description="item.description">

            <template #title>

              <a :href="item.href">{{ item.name }}</a>

            </template>

            <template #avatar><a-avatar :src="item.cover" /></template>

          </a-list-item-meta>

        </a-list-item>

      </template>

    </a-list>

  </a-layout>

</template>

<script lang="ts">

import { defineComponent,onMounted,ref,reactive,toRef} from 'vue';

import axios from 'axios';

import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';

const listData: Record<string, string>[] = [];

for (let i = 0; i < 23; i++) {

  listData.push({

    href: 'https://www.antdv.com/',

    title: `ant design vue part ${i}`,

    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',

    description:

        'Ant Design, a design language for background applications, is refined by Ant UED Team.',

    content:

        'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',

  });

}

export default defineComponent({

  components: {

    StarOutlined,

    LikeOutlined,

    MessageOutlined,

  },

  name: 'Home',

  setup(){

    const pagination = {

      onChange: (page: number) => {

        console.log(page);

      },

      pageSize: 3,

    };

    const actions: Record<string, string>[] = [

      { type: 'StarOutlined', text: '156' },

      { type: 'LikeOutlined', text: '156' },

      { type: 'MessageOutlined', text: '2' },

    ];

    console.log('set up');

    //使用ref进行数据绑定

    const ebooks=ref();

    // 使用reactive进行数据绑定

    const ebooks1=reactive({books:[]})

    onMounted(()=>{

      axios.get("http://localhost:8888/ebook/list?name=spring").then(response =>{

        console.log("onMounted");

        const data=response.data;

        ebooks.value=data.content;

        ebooks1.books=data.content;

      })

    })

    return{

      listData,

      pagination,

      actions,

      ebooks1: ebooks,

      ebooks2:toRef(ebooks1,"books")

    }

  }

});

</script>

<style>

.ant-layout-sider{

  float: left;

}

</style>

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

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<EBookResp> list(EBookReq eBookReq) {

        EBookExample eBookExample = new EBookExample();

        //此处代码的意思相当于，搞了一个Sql的where条件

        EBookExample.Criteria criteria = eBookExample.createCriteria();

        //划波浪线为不推荐使用，这里我们去看源代码做个替换即可

        if(!ObjectUtils.isEmpty(eBookReq.getName())){

            criteria.andNameLike("%"+eBookReq.getName()+"%");

        }

        List<EBook> eBookList = eBookMapper.selectByExample(eBookExample);

        //List<EBookResp> 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<EBookResp> respList = copyList(eBookList, EBookResp.class);

        return respList;

    }

}

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

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

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

<template>

  <a-layout>

    `<a-layout-sider width="200" style="background: #fff">

      <a-menu

          mode="inline"

          v-model:selectedKeys="selectedKeys2"

          v-model:openKeys="openKeys"

          :style="{ height: '100%', borderRight: 0 }"

      >

        <a-sub-menu key="sub1">

          <template #title>

                <span>

                  <user-outlined />

                  subnav 1

                </span>

          </template>

          <a-menu-item key="1">option1</a-menu-item>

          <a-menu-item key="2">option2</a-menu-item>

          <a-menu-item key="3">option3</a-menu-item>

          <a-menu-item key="4">option4</a-menu-item>

        </a-sub-menu>

        <a-sub-menu key="sub2">

          <template #title>

                <span>

                  <laptop-outlined />

                  subnav 2

                </span>

          </template>

          <a-menu-item key="5">option5</a-menu-item>

          <a-menu-item key="6">option6</a-menu-item>

          <a-menu-item key="7">option7</a-menu-item>

          <a-menu-item key="8">option8</a-menu-item>

        </a-sub-menu>

        <a-sub-menu key="sub3">

          <template #title>

                <span>

                  <notification-outlined />

                  subnav 3

                </span>

          </template>

          <a-menu-item key="9">option9</a-menu-item>

          <a-menu-item key="10">option10</a-menu-item>

          <a-menu-item key="11">option11</a-menu-item>

          <a-menu-item key="12">option12</a-menu-item>

        </a-sub-menu>

      </a-menu>

    </a-layout-sider>`

    <a-list item-layout="vertical" size="large"

            :grid="{ gutter: 16, column: 3 }" :data-source="ebooks1">

      <template #renderItem="{ item }">

        <a-list-item key="item.name">

          <template #actions>

          <span v-for="{ type, text } in actions" :key="type">

            <component v-bind:is="type" style="margin-right: 8px" />

            {{ text }}

          </span>

          </template>

          <a-list-item-meta :description="item.description">

            <template #title>

              <a :href="item.href">{{ item.name }}</a>

            </template>

            <template #avatar><a-avatar :src="item.cover" /></template>

          </a-list-item-meta>

        </a-list-item>

      </template>

    </a-list>

  </a-layout>

</template>

<script lang="ts">

import { defineComponent,onMounted,ref,reactive,toRef} from 'vue';

import axios from 'axios';

import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';

const listData: Record<string, string>[] = [];

export default defineComponent({

  components: {

    StarOutlined,

    LikeOutlined,

    MessageOutlined,

  },

  name: 'Home',

  setup(){

    const pagination = {

      onChange: (page: number) => {

        console.log(page);

      },

      pageSize: 3,

    };

    const actions: Record<string, string>[] = [

      { type: 'StarOutlined', text: '156' },

      { type: 'LikeOutlined', text: '156' },

      { type: 'MessageOutlined', text: '2' },

    ];

    console.log('set up');

    //使用ref进行数据绑定

    const ebooks=ref();

    // 使用reactive进行数据绑定

    const ebooks1=reactive({books:[]})

    onMounted(()=>{

      axios.get("http://localhost:8888/ebook/list?name=").then(response =>{

        console.log("onMounted");

        const data=response.data;

        ebooks.value=data.content;

        ebooks1.books=data.content;

      })

    })

    return{

      pagination,

      actions,

      ebooks1: ebooks,

      ebooks2:toRef(ebooks1,"books")

    }

  }

});

</script>

<style>

.ant-layout-sider{

  float: left;

}

</style>

知识点：

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

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

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

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

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

<template>

  <a-layout>

    `<a-layout-sider width="200" style="background: #fff">

      <a-menu

          mode="inline"

          v-model:selectedKeys="selectedKeys2"

          v-model:openKeys="openKeys"

          :style="{ height: '100%', borderRight: 0 }"

      >

        <a-sub-menu key="sub1">

          <template #title>

                <span>

                  <user-outlined />

                  subnav 1

                </span>

          </template>

          <a-menu-item key="1">option1</a-menu-item>

          <a-menu-item key="2">option2</a-menu-item>

          <a-menu-item key="3">option3</a-menu-item>

          <a-menu-item key="4">option4</a-menu-item>

        </a-sub-menu>

        <a-sub-menu key="sub2">

          <template #title>

                <span>

                  <laptop-outlined />

                  subnav 2

                </span>

          </template>

          <a-menu-item key="5">option5</a-menu-item>

          <a-menu-item key="6">option6</a-menu-item>

          <a-menu-item key="7">option7</a-menu-item>

          <a-menu-item key="8">option8</a-menu-item>

        </a-sub-menu>

        <a-sub-menu key="sub3">

          <template #title>

                <span>

                  <notification-outlined />

                  subnav 3

                </span>

          </template>

          <a-menu-item key="9">option9</a-menu-item>

          <a-menu-item key="10">option10</a-menu-item>

          <a-menu-item key="11">option11</a-menu-item>

          <a-menu-item key="12">option12</a-menu-item>

        </a-sub-menu>

      </a-menu>

    </a-layout-sider>`

    <a-list item-layout="vertical" size="large"

            :grid="{ gutter: 16, column: 3 }" :data-source="ebooks1">

      <template #renderItem="{ item }">

        <a-list-item key="item.name">

          <template #actions>

          <span v-for="{ type, text } in actions" :key="type">

            <component v-bind:is="type" style="margin-right: 8px" />

            {{ text }}

          </span>

          </template>

          <a-list-item-meta :description="item.description">

            <template #title>

              <a :href="item.href">{{ item.name }}</a>

            </template>

            <template #avatar><a-avatar :src="item.cover" /></template>

          </a-list-item-meta>

        </a-list-item>

      </template>

    </a-list>

  </a-layout>

</template>

<script lang="ts">

import { defineComponent,onMounted,ref,reactive,toRef} from 'vue';

import axios from 'axios';

import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';

const listData: Record<string, string>[] = [];

export default defineComponent({

  components: {

    StarOutlined,

    LikeOutlined,

    MessageOutlined,

  },

  name: 'Home',

  setup(){

    const pagination = {

      onChange: (page: number) => {

        console.log(page);

      },

      pageSize: 3,

    };

    const actions: Record<string, string>[] = [

      { type: 'StarOutlined', text: '156' },

      { type: 'LikeOutlined', text: '156' },

      { type: 'MessageOutlined', text: '2' },

    ];

    console.log('set up');

    //使用ref进行数据绑定

    const ebooks=ref();

    // 使用reactive进行数据绑定

    const ebooks1=reactive({books:[]})

    onMounted(()=>{

      axios.get("http://localhost:8888/ebook/list?name=").then(response =>{

        console.log("onMounted");

        const data=response.data;

        ebooks.value=data.content;

        ebooks1.books=data.content;

      })

    })

    return{

      pagination,

      actions,

      ebooks1: ebooks,

      ebooks2:toRef(ebooks1,"books")

    }

  }

});

</script>

<style scoped>

.ant-layout-sider{

  float: left;

}

.ant-avatar {

  width: 50px;

  height: 50px;

  line-height: 50px;

  border-radius: 8%;

  margin: 5px 0;

}

</style>

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

三、写在最后

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

最新文章

1. 在selenium2.0中使用selenium1.0的API
2. 关于oracle的笔记
3. Kafka 消息监控 - Kafka Eagle
4. 【转载】C++ 值传递、指针传递、引用传递详解
5. 20145305 《Java程序设计》第7周学习总结
6. C#——System.Diagnostics.Process.Start的妙用
7. 自制单片机之十三……时钟IC_DS1302
8. ARM LDR伪指令使用方法具体解释
9. 【链表+启发式合并】Bzoj1483 [HNOI2009] 梦幻布丁
10. tensorflow--交叉熵
11. 青蛙的约会 POJ - 1061 （exgcd）
12. centos7下使用docker安装nginx
13. jQuery validator plugin之Selector
14. jQuery EasyUI combobox多选及赋值
15. springboot项目连接数据库报错
16. 包含MIN函数的栈+一个数组实现两个堆栈+两个数组实现MIN栈
17. 如何彻底卸载mysql（xp）
18. Hibernate: save, persist, update, merge, saveOrUpdate[z]
19. 使用ngxtop实时监控nginx
20. centos+apache+mod_ssl

热门文章

1. ssl.SSLCertVerificationError: [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate in certificate chain (_ssl.c:1122)
2. MeteoInfo-Java解析与绘图教程(四)
3. 阿里云服务器安装配置nginx
4. Python - 通过PyYaml库操作YAML文件
5. VueJS学习资料大全
6. MySQL数据库初体验
7. 创建一个web项目
8. Centos下Yum安装PHP7.0
9. CentOS安装oh-my-zsh并配置语法高亮和命令自动补全
10. 图的遍历BFS广度优先搜索