Vue3学习（七）之列表界⾯数据展⽰
⼀、前⾔
昨晚可能是因为更新完⽂章后，导致过于兴奋睡不着（写代码确实太容易让⼈兴奋了），结果两点多才睡着，⼤东北果然还是太冷了。
不知道是不是因为膝盖和脚都是冰凉的，所以才导致很晚才能⼊睡？
刚眯了⼀会，⼤约⼀个⼩时吧，感觉不错，接着⼜想学习了。
⼆、列表界⾯展⽰⽰例
现在要做的就是把打到页⾯的数据，带样式，也就是说好看点显⽰。
之前我们在这篇⽂章中，有提及组件的使⽤，对于⼀个前端不是很好（后端也不咋的），本着拿来主义，我们能现成的是最好、最省事的⽅式了。直⽩点说就是，Ant Design Vue现成的组件，将列表数据按组件样式显⽰到界⾯上。
1、挑选⾃⼰喜欢的列表样式
2、进⾏数据显⽰
2.1、组件在列表显⽰
接下来，我们只需要在home⾥进⾏修改即可，到刚才对应组件的位置，把对应代码拷贝到home中，然后在进⾏修改即可，⽰例代码如下：<template>
<a-layout>
<a-layout-sider width="200" >
<a-menu
mode="inline"
v-model:selectedKeys="selectedKeys2"
v-model:openKeys="openKeys"
:
>
<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" />
{{ text }}
</span>
</template>
<template #extra>
<img
width="272"
alt="logo"
src="gw.alipayobjects/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>
{{ t }}
</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: 'www.antdv/',
title: `ant design vue part ${i}`,
avatar: 'zos.alipayobjects/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 p roduct 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(()=>{
<("localhost:8888/ebook/list?name=spring").then(response =>{
console.log("onMounted");
const data=response.data;
ebooks.t;
ebooks1.t;
})
})
return{
listData,
actions,
ebooks1: ebooks,
ebooks2:toRef(ebooks1,"books")
}
}
});
</script>
重新编译运⾏，查看效果如下：
2.2、接⼝返回数据在列表显⽰
明显现在，可以看到想要⽤的列表样式已经在页⾯中成功展⽰了，但这并不是我想要的，我想要的是后端接⼝返回数据在此处展⽰，也就是数据源，接下来，我们再次调整Home的代码，⽰例代码如下：
<template>
<a-layout>
`<a-layout-sider width="200" >
<a-menu
mode="inline"
v-model:selectedKeys="selectedKeys2"
v-model:openKeys="openKeys"
:
>vue中reactive
<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>
<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" />
{{ 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="ver" /></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: 'www.antdv/',
title: `ant design vue part ${i}`,
avatar: 'zos.alipayobjects/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 p roduct 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(()=>{
<("localhost:8888/ebook/list?name=spring").then(response =>{
console.log("onMounted");
const data=response.data;
ebooks.t;
ebooks1.t;
})
})
return{
listData,
pagination,
actions,
ebooks1: ebooks,
ebooks2:toRef(ebooks1,"books")
}
}
});
</script>
<style>
.ant-layout-sider{
float: left;
}
</style>
重新编译运⾏，查看效果如下：
2.3、接⼝数据改造
很明显，列表数据太少，我对接⼝进⾏改造，让其返回多条数据。
我们从service中，不难看出我们做的是，不管传⼊什么，都是写死的⾛的模糊查询，这⾥我们改成动态SQL即可，⽰例代码如下：ng.wiki.service;
ng.wiki.domain.EBook;
ng.wiki.domain.EBookExample;
ng.wiki.mapper.EBookMapper;
q.EBookReq;
sp.EBookResp;
import org.springframework.stereotype.Service;
import org.springframework.util.ObjectUtils;
import javax.annotation.Resource;
import java.util.List;
import ng.wiki.pyList;
/**
* @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 = ateCriteria();
//划波浪线为不推荐使⽤，这⾥我们去看源代码做个替换即可
if(!ObjectUtils.Name())){
criteria.andNameLike("%"+Name()+"%");
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论