改动列表模板，展示电子书列表

前言

在vue3数据绑定显示列表数据基础上，将请求接口后返回的数据填充到对应的内容模板中，展示为电子书列表形式。

引入图标

注意这块图标默认复制官网上的代码是不显示的，需要进行导入，最好一次性导入所有图标，避免仅导入需要用的图标，减少麻烦，

1、安装图标

npm install @ant-design/icons-vue@5.1.8 --save

2、一次性导入图标库

import * as Icons from '@ant-design/icons-vue'; // 引入入图标库


const app = createApp(App);
app.use(store).use(router).use(Antd).mount('#app');

//全局使用图标
const icons: any = Icons;
for(const i in icons){
    app.component(i,icons[i]);
}

注：可以通过对比前后代码，得知导入图标需要哪些代码

改动列表列表模板

原列表模板：

改动后的列表（预期效果）：

需要删减的内容：在原列表模板改动对应的内容

1、引入组件

在script标签中

//定义 listData类型为any
const listData: any = [];
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.',
  });
}

3、返回组件

return {
  listData,
  pagination: {
    onchange: (page: any) => {
    console.log(page);
    },
    pageSize:3,
  },
  actions: [
    {type: 'StarOutlined', text: '156'},
    {type: 'LikeOutlined', text: '156'},
    {type: 'MessageOutlined', text: '2'}
  ],
}

3、添加视图代码

<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>

删除多余内容

删除不需要的内容后：

去掉了:pagination="pagination" 分页还有其他内容。

<a-list item-layout="vertical" size="large"  :data-source="listData">
  <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>
      <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>
    </a-list-item>
  </template>
</a-list>

调整布局为一行三列并更换数据源

改动之后：

添加了:grid="{gutter: 20,column: 3}"栅格布局。

  <a-list item-layout="vertical" size="large" :grid="{gutter: 20,column: 3}"  :data-source="ebooks">
        <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>

需要变动的地方：

修改接口支持动态sql

根据请求时参数name是否有值分为不同情况

1. name有值时，采用模糊查询查询指定数据
2. name没有值时，查询所有数据

将原本service层的代码

//        模糊查询name
criteria.andNameLike("%" + req.getName() + "%");

修改为：

//        根据请求参数情况设置为动态sql, 1)当有参数时，使用模糊查询，2)没有参数，则查询所有
        if (!ObjectUtils.isEmpty(req.getName())) {
//            当请求参数不为空时，使用模糊查询
            criteria.andNameLike("%" + req.getName() + "%");
        }

前后对比：

请求地址http://localhost:8080/ebook/list的效果：

参考