Vue3 列表介面資料展示詳情
阿新 • • 發佈：2021-11-16
目錄
- 一、列表介面展示示例
- 2、進行資料顯示
- 2.1、元件在列表顯示
- 2.2、介面返回資料在列表顯示
- 2.3、介面資料改造
- 2.4、list列表一行顯示為多條資料
- 2.5、列表內容前圖示樣式修改
一、列表介面展示示例
現在要做的就是把打到頁面的資料，帶樣式，也就是說好看點顯示。
之前我們在《3（二）整合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>
ant design vue
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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ 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,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',{ 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: #fffZsLeApDB">
<a-menu
mode="inline"
v-model:selectedKeys="selectedKeys2"
v-model:openKeys="openKeys"
:style="{ height: '100%',borderRight: 0 }"
>
<a-sub-menu key="sub1">
<template #title>
www.cppcns.com
重新編譯執行，檢視效果如下：
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 x.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,string>[] = [];
export default defineComponent({
components: {
StarOutlined,{ type:www.cppcns.com 'LikeOutlined',];
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,"books")
}
}
});
</script>
<style>
.ant-layout-sider{
float: left;
}
</style>
知識點：
:grid="{ gutter: 16,column: 4 }"，是進行柵格顯示，柵格間隔16，每行顯示4個- 這裡要刪除:
pagination="pagination"，即分頁顯示
再來重新編譯，檢視效果如下：
2.5、列表內容前圖示樣式修改
一切看是很好，但感覺是圖書封面有點小不好看，如下圖：
來接著改樣式，只需在home裡調整即可，示例程式碼如下：
html
<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,"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 列表介面資料展示詳情的文章就介紹到這了,更多相關Vue3 列表介面資料展示內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！