# 1.输入电影名称，获得豆瓣电影网相关海报及评分
原理：连接豆瓣电影端口，获取，发送，接收
### 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>
~~~
- 第一章 git
- 1-1 git基本命令
- 1-2 ssh的配置
- 1-3 版本回退
- 第二章 markdown的基本语法
- 第三章 HTML-CSS
- 1-1 HTML基本概念
- 1-2 CSS常见样式
- 第四章
- 1-1 HTML-02am
- 1-2 HTML-02pm
- 命名规范
- 待整理小要点
- 第五章
- 盒子模型（详细）
- HTML-03
- HTML-定位
- 第六章 JS,DOM,jQuery
- 初识JS
- github-netlify-阿里云配置
- jQuery实例
- 初识Vue
- TOP250电影demo
- HTML-04
- HTML-05
- DOM
- 第七章
- node.js
- css(day07)
- css(day06)
- bootstrap
- vue/cli
- 小程序
- 入门第一天
- java