利用Vue,fetch实现前后端数据交互

224 阅读 0 评论 148 点赞

我是靠谱客的博主老迟到牛排，这篇文章主要介绍利用Vue,fetch实现前后端数据交互，现在分享给大家，希望可以做个参考。

利用Vue,fetch实现前后端数据交互

利用fetch实现数据的交互，简单练习的小实例。

目录结构
index.html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script type="text/javascript">
    	
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
   			
   		});
   		
    </script>
	<style type="text/css">
		ul{
			width: 80vw;
		}
    	ul li{
			width: 80vw;
			height: 5vh;
    		background-color: red;
    		margin-top: 10vh;
			list-style: none;
			text-align: center;
    	}
		.tag{
			width: 20vw;
			height: 30px;
			background-color: blue;
			margin-top: 10px;
		}
		.list  img{
			width: 30px;
			height: 30px;
			position:absolute;
			left: 8px;
		}
    </style>
</head>
<body>
		<div style="width: 100px;height:100px;background:red;"><a href="list.html">list</a></div>
	<div id="app">
		<ul class="list" v-for=" item in categories ">
			
			<li>
					<img :src=item.icon >
					{{item.name}}
			</li>
			<div class="tag" v-for = "tag in item.tags">{{tag}}</div>
		</ul>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js" ></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.min.js" ></script>
	<!-- 兼容 feach 异步请求 -->
	<script type="text/javascript">
		const vm =  new Vue({
			el:'#app',
			data:{
				categories:[]
			},
			created() {
				 fetch('http://127.0.0.1:5500/api/index.json')
				 	.then(res => {
						 return res.json()
					 })
					.then( data=> {
						// return data;// 真正的数据
						vm.categories = data;
					})
			},
		})
	</script>
</body>
</html>

index.json中数据（可自己改，或者调用后台接口）

[
    {
        "icon":"./img/1.jpg",
        "name":"技术",
        "tags":["java","php","js"]
    },
    {
        "icon":"./img/2.jpg",
        "name":"职业",
        "tags":["js","node","vue"]
    },
    {
        "icon":"./img/2.jpg",
        "name":"职业",
        "tags":["js","node","vue"]
    },
    {
        "icon":"./img/2.jpg",
        "name":"职业",
        "tags":["js","node","vue"]
    },
    {
        "icon":"./img/2.jpg",
        "name":"职业",
        "tags":["js","node","vue"]
    }
]