Vue3 列表界面數(shù)據(jù)展示詳情
更新時(shí)間：2021年11月15日 09:34:57 作者：九曲健
這篇文章主要介紹了Vue3 列表界面數(shù)據(jù)展示，文章主要詳介紹的內(nèi)容就是做的就是把打到頁(yè)面的數(shù)據(jù)，帶樣式，也就是說(shuō)好看點(diǎn)顯示,需要的朋友可以參考一下
一、列表界面展示示例
現(xiàn)在要做的就是把打到頁(yè)面的數(shù)據(jù)，帶樣式，也就是說(shuō)好看點(diǎn)顯示。
之前我們?cè)凇?a target="_blank" href="http://m.fzitv.net/article/225553.htm">Vue3（二）集成Ant Design Vue》這篇文章中，有提及組件的使用，對(duì)于一個(gè)前端不是很好（后端也不咋的），本著拿來(lái)主義，我們能現(xiàn)成的是最好、最省事的方式了。
直白點(diǎn)說(shuō)就是，找Ant Design Vue現(xiàn)成的組件，將列表數(shù)據(jù)按組件樣式顯示到界面上。
1、挑選自己喜歡的列表樣式
從https://2x.antdv.com/components/list-cn中，找到list列表，找到自己喜歡的風(fēng)格，
如下圖所示：
2、進(jìn)行數(shù)據(jù)顯示
2.1、組件在列表顯示
接下來(lái)，我們只需要在home里進(jìn)行修改即可，找到剛才對(duì)應(yīng)組件的位置，把對(duì)應(yīng)代碼拷貝到home中，然后在進(jìn)行修改即可，
示例代碼如下：
<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" 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,
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進(jìn)行數(shù)據(jù)綁定
const ebooks=ref();
// 使用reactive進(jìn)行數(shù)據(jù)綁定
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>
重新編譯運(yùn)行，查看效果如下：
2.2、接口返回?cái)?shù)據(jù)在列表顯示
明顯現(xiàn)在，可以看到想要用的列表樣式已經(jīng)在頁(yè)面中成功展示了，但這并不是我想要的，我想要的是后端接口返回?cái)?shù)據(jù)在此處展示，也就是數(shù)據(jù)源，接下來(lái),我們?cè)俅握{(diào)整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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ 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進(jìn)行數(shù)據(jù)綁定
const ebooks=ref();
// 使用reactive進(jìn)行數(shù)據(jù)綁定
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>
重新編譯運(yùn)行，查看效果如下：
2.3、接口數(shù)據(jù)改造
很明顯，列表數(shù)據(jù)太少，我對(duì)接口進(jìn)行改造，讓其返回多條數(shù)據(jù)。
我們從service中，不難看出我們做的是，不管傳入什么，都是寫死的走的模糊查詢，這里我們改成動(dòng)態(tài)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();
//此處代碼的意思相當(dāng)于，搞了一個(gè)Sql的where條件
EBookExample.Criteria criteria = eBookExample.createCriteria();
//劃波浪線為不推薦使用，這里我們?nèi)タ丛创a做個(gè)替換即可
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完成對(duì)象的拷貝
// //BeanUtils.copyProperties(eBook, eBookResp);
// //eBookResp.setId(12345L);
// //單體復(fù)制
// EBookResp copy = copy(eBook, EBookResp.class);
// eBookRespList.add(copy);
//}
//列表復(fù)制
List<EBookResp> respList = copyList(eBookList, EBookResp.class);
return respList;
}
}
查看接口返回?cái)?shù)據(jù)，如下：
2.4、list列表一行顯示為多條數(shù)據(jù)
接口改造完成，接著需要對(duì)列表顯示內(nèi)容進(jìn)行修改，同樣在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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ 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進(jìn)行數(shù)據(jù)綁定
const ebooks=ref();
// 使用reactive進(jìn)行數(shù)據(jù)綁定
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>
知識(shí)點(diǎn)：
:grid="{ gutter: 16, column: 4 }"，是進(jìn)行柵格顯示，柵格間隔16，每行顯示4個(gè)- 這里要?jiǎng)h除:
pagination="pagination"，即分頁(yè)顯示
再來(lái)重新編譯，查看效果如下：
2.5、列表內(nèi)容前圖標(biāo)樣式修改
一切看是很好，但感覺是圖書封面有點(diǎn)小不好看，如下圖：
來(lái)接著改樣式，只需在home里調(diào)整即可，示例代碼如下：
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, 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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ 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進(jìn)行數(shù)據(jù)綁定
const ebooks=ref();
// 使用reactive進(jìn)行數(shù)據(jù)綁定
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>
再次重新編譯，查看下過(guò)如下：
到此這篇關(guān)于Vue3 列表界面數(shù)據(jù)展示詳情的文章就介紹到這了,更多相關(guān)Vue3 列表界面數(shù)據(jù)展示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)展示列表的數(shù)據(jù)
- vue?使用el-table循環(huán)輪播數(shù)據(jù)列表的實(shí)現(xiàn)
- vue實(shí)現(xiàn)動(dòng)態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動(dòng)畫
- vue如何從后臺(tái)獲取數(shù)據(jù)生成動(dòng)態(tài)菜單列表
- 使用Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)
- vue列表數(shù)據(jù)刪除后主動(dòng)刷新頁(yè)面及刷新方法詳解
- vue2.0實(shí)現(xiàn)列表數(shù)據(jù)增加和刪除
- Vue如何獲取數(shù)據(jù)列表展示
- vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示
- vue父列表數(shù)據(jù)獲取子列表數(shù)據(jù)的實(shí)現(xiàn)步驟
相關(guān)文章
methods是如何綁定this的 methods綁定上下文執(zhí)行環(huán)境是通過(guò)bind來(lái)進(jìn)行的呢,本文給大家介紹Vue中methods實(shí)現(xiàn)原理是什么,感興趣的朋友一起看看吧2023-11-11
vuejs 切換導(dǎo)航條高亮(路由菜單高亮)的方法示例
這篇文章主要介紹了vuejs 切換導(dǎo)航條高亮路由高亮的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
vuex + axios 做登錄驗(yàn)證 并且保存登錄狀態(tài)的實(shí)例
今天小編就為大家分享一篇vuex + axios 做登錄驗(yàn)證 并且保存登錄狀態(tài)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
在Vue中，組件是構(gòu)建頁(yè)面的基本單位。通過(guò)組件化開發(fā)，可以提高代碼的復(fù)用性和可維護(hù)性。組件的注冊(cè)方法包括全局注冊(cè)和局部注冊(cè)兩種方式。同時(shí)，需要注意組件名的命名規(guī)范、組件選項(xiàng)的定義方式、組件之間的通信等問(wèn)題，以實(shí)現(xiàn)更好的組件復(fù)用和開發(fā)效率2023-05-05
vue實(shí)現(xiàn)商品購(gòu)物車全選反選
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品購(gòu)物車全選反選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
無(wú)論是開發(fā)新手還是經(jīng)驗(yàn)豐富的老手，我們都喜歡開源軟件包。本文主要介紹了35個(gè)最好用的Vue開源庫(kù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
5分鐘學(xué)會(huì)Vue動(dòng)畫效果(小結(jié))
這篇文章主要介紹了5分鐘學(xué)會(huì)Vue動(dòng)畫效果(小結(jié)),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
JSX是一種Javascript的語(yǔ)法擴(kuò)展,JSX = Javascript + XML,即在 Javascript里面寫XML,因?yàn)?nbsp;JSX 的這個(gè)特性,所以他即具備了 Javascript的靈活性,同時(shí)又兼具h(yuǎn)tml的語(yǔ)義化和直觀性,這篇文章主要給大家介紹了關(guān)于Vue中JSX的基本用法及高級(jí)部分的相關(guān)資料,需要的朋友可以參考下2022-11-11
大家可以用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。這篇文章主要介紹了vue表單詳解,需要的朋友可以參考下2018-04-04
vue項(xiàng)目打包后請(qǐng)求地址錯(cuò)誤/打包后跨域操作
這篇文章主要介紹了vue項(xiàng)目打包后請(qǐng)求地址錯(cuò)誤/打包后跨域操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11