Vue3学习（七）之 列表界面数据展示
一、前言
昨晚可能是因为更新完文章后，导致过于兴奋睡不着（写代码确实太容易让人兴奋了），结果两点多才睡着，大东北果然还是太冷了。
不知道是不是因为膝盖和脚都是冰凉的，所以才导致很晚才能入睡？
刚眯了一会，大约一个小时吧，感觉不错，接着又想学习了。
二、列表界面展示示例
现在要做的就是把打到页面的数据，带样式，也就是说好看点显示。
之前我们在《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>
再次重新编译，查看下过如下：
三、写在最后
几经折腾，终于把样式和数据整出来了，到此，列表界面数据展示完毕，有兴趣的同学自己去尝试！
Vue3学习（七）之 列表界面数据展示的更多相关文章
- 12、Django实战第12天：课程机构列表页数据展示
今天完成的是课程机构列表页.... 1.启动服务,进入xadmin后,添加5个城市信息用作测试数据 2.添加课程机构,其中有一项要上传封面图的地方要注意 封面图上传路径是我们在models中设置好的 ...
- Django（十四）课程机构列表页数据展示，Django的modelform，关于urls的重新分发
关于urls的重新分发: 如果所有url都配置在根路径的urls.py里,会特别多,而且也不易于修改,Django框架里支持urls的重新分发: 1.在根路径的urls配置上: PS:namespac ...
- Vue3学习（十一）之 table表格组件的使用
一.前言 大约有两周没学习更文,不是懒,而是没心情,相亲路屡战屡败,着实很影响心情. 我想这世上对我而言,最难的事,莫过于恋爱结婚了,再一次经历了见光死的高光时刻. 二.又见Ant Design Vu ...
- django学习-27.admin管理后台里：对列表展示页面的数据展示进行相关优化
目录结构 1.前言 2.完整的操作步骤 2.1.第一步:查看ModelAdmin类和BaseModelAdmin类的源码 2.2.第二步:查看表animal对应的列表展示页面默认的数据展示 2.3.第 ...
- Vue3学习（六）之使用Vue3进行数据绑定及显示列表数据
一.写在前面 说来还是比较惭愧的,从周二开始事就比较多,周三还电脑坏了,然后修电脑等等一些杂事,忙的团团转,因为周二.周三自己走的过多了,导致不敢直腰,周四卧床一天. 之前都听说<陈情令> ...
- 网络学习day02_OSI七层模型及数据的传输过程
title: 2018.9.2 OSI七层模型及数据的传输过程 tags: 计算机网络, OSI七层模型, 数据传输, 数据解封装 --- OSI七层模型和TCP/IP五层模型 OSI七层模型 我们说 ...
- python基础学习（七）列表
列表的定义 List(列表) 是 Python 中使用 最频繁 的数据类型,在其他语言中通常叫做 数组(例如java.c) 专门用于存储 一串 信息 列表用 [] 定义,数据 之间使用 , 分隔 列表 ...
- 《学习R》笔记：科学计算器、检查变量和工作区、向量、矩阵和数组、列表和数据框
一.第二章 科学计算器 要检查两个数字是否一样,要使用 all.equal() ,不要使用 == ,== 符号仅用于比较两个整型数是否存在相同 . > all.equal(sqrt(2)^2,2 ...
- 大数据技术之_25_手机APP信息统计系统项目_01_APP 数据生成模块 + 数据收集模块 + 数据处理模块框架搭建 + 业务需求处理 + 数据展示模块 +项目总结 + 问题总结
一 项目概述1.1 角色1.2 业务术语1.3 项目效果展示二 项目需求三 项目概要3.1 项目技术架构3.2 项目目录结构3.3 项目技术选型3.4 项目整体集群规划3.5 创建项目工程四 APP ...
随机推荐
- 前后端数据交互(二)——原生 ajax 请求详解
一.ajax介绍 ajax 是前后端交互的重要手段或桥梁.它不是一个技术,是一组技术的组合. ajax :a:异步:j:js:a:和:x:服务端的数据. ajax的组成: 异步的 js 事件 其他 j ...
- spring整合jdbc方法一
用了一段时间的spring这,闲来没事做一下spring整合jdbc 目录文件 导入jar包 由于spring的jar包是在myeclipse中自动导入的有些暂时用不到的也没有处理. Emp类 pac ...
- CGLib 简析
背景 JDK 动态代理存在的一些问题: 调用效率低 JDK 通过反射实现动态代理调用,这意味着低下的调用效率: 每次调用 Method.invoke() 都会检查方法的可见性.校验参数是否匹配,过程涉 ...
- 《openssl编程》：第一章基础知识
第一章 基础知识 1.1 对称算法 对称算法使用一个密钥.给定一个明文和一个密钥,加密产生密文,其长度和明文大致相同.解密时,使用读密钥与加密密钥相同. 对称算法主要有四种加密模式: (1) 电子密码 ...
- Playfield 类方法的注释
前言 本篇随笔的底包采用的是百度炉石兄弟吧20200109折腾版中自带的 routines 文件. 本次仅为绝大多数方法添加 xml 注释和简单解析,没有具体解析与重构. Playfield 类方法众 ...
- 从零开始学习SQL SERVER（1）--- 了解SQL
SQL是什么 SQL (发音为 sequal [' sikwəl ' ]) SQL指 Structured Query Language 结构化查询语言,是用于访问和处理数据库的标准的计算机语言. ...
- djang2.1教育平台02
在次申明,之所以重做这个资料是因为原幕课教程漏洞太多,新手根本没有办法正常照些学习,我凭着老男孩python 课程基础,重做这个教程 ,更改版本为当前最新版本,为了方法以后的人学习,并不是照着原文照 ...
- 基于python2.7 Tkinter 做一个小工具
1.源码:先写一个界面出来,放需要放入的点击事件的函数 # -*- coding:utf-8 -*- import Tkinter from Tkinter import * import Excle ...
- 一朵云、一张网、一体化 ——GRTN 打造最佳流媒体场景实践
阿里巴巴 GRTN 是面向流媒体云原生设计的,方便客户构建自己的流媒体云原生应用,让流媒体服务无处不在. 在近期召开的分布式云主题报告会上,阿里云资深技术专家卢日发表了题为<GRTN 打造阿里云 ...
- P1909 [NOIP2016 普及组] 买铅笔
如果她选择购买第一种包装,那么她需要购买29份,共计2×29=58支,需要花费的钱为2×29=58. 实际上,P老师会选择购买第三种包装,这样需要买22份.虽然最后买到的铅笔数 量更多了,为30×2= ...