TOP250電影demo · 前端學習筆記

# 1.輸入電影名稱，獲得豆瓣電影網相關海報及評分原理：連接豆瓣電影端口，獲取，發送，接收 ![](https://i.loli.net/2019/03/09/5c837ef2f2b6a.gif) ### 1.1引用jQuery ~~~ <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> ~~~ ~~~ <body> //可以預設圖片和評分（圖片用的獲取下來的網圖） <img src="images/movie.webp" alt="" id="img"> <p>評分：<span id="average">8.2</span></p> <form > <input type="text" name="user" id="user"> <input type="button" id="btn" value="搜索"> </form> <script> var user = document.getElementById("user"); var btn = document.getElementById("btn"); var img = document.getElementById("img") var average = document.getElementById("average") btn.onclick = function(){ var url="https://api.douban.com/v2/movie/search?q="+user.value+"&count=1"; $.ajax({ url, type:"get", dataType:"jsonp", success:res=>{ var averageData = res.subjects[0].rating.average; var imgUrl = res.subjects[0].images.small; img.src=imgUrl; average.innerHTML = averageData; } }) } </script> </body> ~~~ ### 1.2Vue和jQuery配合使用（效果實現不出來，疑似端口問題？）引用Vue和jQuery ~~~ <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script> ~~~ ~~~ <body> <div id="app"> <img :src="imgUrl" alt=""> <p>評分:<span>{{average}}</span></p> <form> <input type="text" v-model="keyValue"> <input type="button" value="搜索" @click="handleClick"> </form> </div> <script> new Vue({ el:"#app", data:{ imgUrl:"https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.webp", average:8.2, keyValue:"綠皮書" }, methods:{ handleClick(){ var url = "https://douban.uieee.com/v2/movie/search?q="+this.keyValue+"&count=1"; $.ajax({ url, type:"get", dataType:"jsonp", success:res=>{ var subjects = res.subjects[0]; var {rating,images}=subjects; var average = rating.average; var imgUrl = images.small; this.imgUrl = imgUrl; this.average = average; } }) } } }) </script> </body> ~~~ # 2.Top250顯示渲染引用Vue和jQuery ~~~ <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script> ~~~ ~~~ <style> *{margin:0;padding:0} #app{ max-width: 700px; margin-left: auto; margin-right: auto; border:1px solid #333; overflow: hidden; } .item{ border:1px solid #eee; border-radius: 15px; width:200px; } #app .item:not(:nth-child(3n+3)){ margin-right:47px; } img{ width:200px; height:300px; } .item{ float:left; } </style> <body> <div id="app"> //連接到端口目錄subjects下的images下的small（Vue的掛載點知識） <div class="item" v-for="item of subjects"> <img :src="item.images.small" alt=""> <h5>{{item.title}}</h5> </div> </div> <script> //固定格式，沒什么道理 new Vue({ el:"#app", data:{ subjects:[] }, mounted(){ /* 1.讀取網絡數據 */ $.ajax({ //端口 url:"https://www.easy-mock.com/mock/5c7e1784726aba26bf2e6a6d/top250/top250", type:"get", dataType:"json", success:res=>{ this.handleData(res) } }) }, methods:{ /* 2.處理網絡數據 */ handleData(res){ this.subjects = res.subjects; } } }) </script> </body> ~~~