利用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"] } ]
- list.html,list.json形式一样，可以参考上面来实现完成。
