大二下学期团队项目（前后端结合）
今日与团队中其他队员编写的web前端进行了结合，实现了初步的分类排序查询，
但是页面的布局之间还有些问题，图片部分不知为何展示不出来，但是图片的网址并没问题，
明日将尝试解决，而且现在查询展示的只有前二十条，明日将尝试实现，类似腾讯电影分类界面的下滑加载更多。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>树懒电影</title> <link rel="stylesheet" href="../static/css/show.css"> <style> body { background-color:#FFFFF0; } <!--超链接样式--> /* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: dodgerblue; } /* mouse over link */ a:hover { color: red; } /* selected link */ a:active { color: blue; } /*电影分类样式*/ aside { overflow:hidden } div { display:inline-block; margin-top:15px; } i { font-size:14px; color:#666; font-style:normal; } span { display:inline-block; width:80px; height:24px; text-decoration:none; color:#039; border-radius:2px; font-size:14px; line-height:24px; text-align:center; } span:hover { cursor:pointer; } .mystyle { color:#f60; background-color:#f3edc2; } .last { float:left; color:#666; font-size:14px; margin-top:20px; } #yi { display:inline-block; } #yi span { margin-left:10px; color:#f60; background-color:#f3edc2; } </style> </head> <script src="../static/js/jquery-1.7.2.min.js"></script> <body> <div id="container"> <div id="header"> <!--电影logo <div class="logo"> <img src=".\img\logo.png" height="100px" width="100px" /> </div> --> <div class="title"><h1 id="title">树懒电影</h1></div> <div class="container"> <form action="https://www.baidu.com/?tn=62095104_19_oem_dg" class="parent"> <input type="text" class="search" placeholder="电影名称，主演"> <input type="button" name="" id="" class="btn"> </form> </div> </div> <!--电影分类--> <div id="classfiy"> <aside> <i>类型:</i> <div> <span>全部</span> <span>剧情</span> <span>喜剧</span> <span>动作</span> <span>爱情</span> <span>惊悚</span> <span>犯罪</span> <span>悬疑</span> <span>战争</span> <span>科幻</span> <span>动画</span> <span>恐怖</span> <span>家庭</span> <span>传记</span> <span>冒险</span> <span>奇幻</span> <span>武侠</span> <span>历史</span> </div> </aside> <aside> <i>年份:</i> <div> <span>全部</span> <span>2021</span> <span>2020</span> <span>2019</span> <span>2018</span> <span>2017</span> <span>2016</span> <span>2015</span> <span>2011-2014</span> <span>2006-2010</span> <span>2000-2005</span> <span>90年代</span> <span>80年代</span> </div> </aside> <aside> <i>地区:</i> <div> <span>全部</span> <span>内地</span> <span>香港</span> <span>美国</span> <span>欧洲</span> <span>台湾</span> <span>日本</span> <span>韩国</span> <span>印度</span> <span>泰国</span> <span>英国</span> <span>法国</span> <span>德国</span> <span>加拿大</span> <span>西班牙</span> <span>意大利</span> <span>澳大利亚</span> </div> </aside> <aside> <i>排列顺序:</i> <div> <span>热门(正序)</span> <span>评分(正序)</span> <span>热门(倒序)</span> <span>评分(倒序)</span> <span></span> </div> </aside> <div class="last">已选择: <div id="yi"></div> </div> </div> <script> var oDivLength = []; var div = document.getElementsByTagName('div'); var divSpan = document.getElementsByTagName('span'); //判断有几个列表 for (var i = 0; i < div.length; i++) { div[i].index = i;//给所有div标序号 } for (var i = 0; i < divSpan.length; i++) { divSpan[i].onclick = function() { oDivLength[this.parentElement.index] = this.innerText//标签的文本;获取对应的文本，其中下标为对应div的序号，从5开始 var oChild = this.parentElement.children;//获取div下的所有span标签 for (var j = 0; j < oChild.length; j++) { oChild[j].className = '';//将classname设为“” } this.className = 'mystyle'; //已选中的当前列的当前元素添加样式 document.getElementById('yi').innerHTML = ''//标签的html文本; for (var m = 0; m < oDivLength.length; m++) { //放到已选择里面 if (oDivLength[m] == '' || oDivLength[m] !== undefined) { var para = document.createElement("span"); var node = document.createTextNode(oDivLength[m]); para.appendChild(node); document.getElementById('yi').appendChild(para); } } if(oDivLength[8]=="热门(正序)"){ oDivLength[8]="hot_1" } if(oDivLength[8]=="热门(倒序)"){ oDivLength[8]="hot_0" } if(oDivLength[8]=="评分(正序)"){ oDivLength[8]="star_1" } if(oDivLength[8]=="热门(倒序)"){ oDivLength[8]="star_0" } $.ajax({ url: "/query_tag", data: { type:oDivLength[5],date:oDivLength[6],area:oDivLength[7], first:oDivLength[8],num:"20" }, success: function (data) { $(".ul_show").empty() if(data.data==""){ alert("暂无数据！") }else{ for (var i = 0; i < data.data.length; i++) { appendUlBody ="<li> <p class='picture'>" +"<img src="+"'"+data.data[i][8]+"'"+" height='200px' width='140px' /></p>" +"<p class='instroction'>" +"<a href='https://movie.douban.com/subject/1292052/' style='text-decoration:none;'>" +data.data[i][0]+"</a><br><br>导演: "+data.data[i][2]+"<br>主演: "+data.data[i][1]+"<br>" +data.data[i][4]+"/"+data.data[i][5]+"<br>"+data.data[i][6]+"<br>"+data.data[i][3]+"<br>"+data.data[i][7]+"</p></li>" $(".ul_show").append(appendUlBody); } } }, error: function (xhr, type, errorThrown) { } }) } } //点击完毕后有数据的为下标5,6,7,8 </script> <!--电影分类模块结束--> <div id="main"> <div class="cat"></div> <h1 id="medium_title">豆瓣TOP榜</h1> <div class="content"> <ul style="width: 100%;margin-left:300px; list-style: none" class="ul_show"> </ul> </div> <div class="sidebar"> <p class="p_right">豆瓣用户每天都在对“看过”的电影进行“很差”到“力荐”的评价，豆瓣根据每部影片看过的人数以及该影片所得的评价等综合数据，通过算法分析产生豆瓣电影 Top 250。</p> <p class="ad_right"><img src=".\img\ad.png" height="150px" width="250px" /></p> </div> </div> <!-- <footer class="footer"> <div class="container clearfix"> <div class="left"> <p> 违法和不良信息举报电话：4008353331-9 </p> <p> <img src="img/jubao.png" alt=""> <a href="">中国互联网举报中心</a> 电话：12377 <a href="">新出发京批字第直160029号</a> </p> </div> </div> </footer> --> </div> </body> </html> 后台部分： @app.route('/query_tag') def query_tag(): str_s=[] str_s.append(request.values.get("type")) str_s.append(request.values.get("date")) str_s.append(request.values.get("area")) str_s.append(request.values.get("first")) str_s.append(request.values.get("num")) if(str_s[0]=="全部"): str_s[0]="" if(str_s[1]=="全部"): str_s[1]="" if(str_s[2]=="全部"): str_s[2]="" if(str_s[0]==None): str_s[0]="" if(str_s[1]==None): str_s[1]="" if(str_s[2]==None): str_s[2]="" if(str_s[3]==None): str_s[3]="" print(str_s) data=[] for i in sql.find_class_order(str_s): data.append(i) return jsonify({"data": data})
