python論文爬取（一）
阿新 • • 發佈：2021-06-21
對論文爬取的前端頁面進行了一些設計
style.css
* { box-sizing: border-box; } .subbox table { text-align: center; border-spacing: 0; color: #333; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); table-layout:fixed; WORD-BREAK:break-all; } .subbox td { padding: 8px 16px; font-size: 14px; border-bottom: 1px solid #f4f4f4; } .subbox th { padding: 16px; } .subbox img { width: 40px; border-radius: 50%; } .subbox tr:last-child > td { border: 0; } .subbox tbody > tr:hover { background-color: rgba(221, 221, 221, 0.2); } .subbox thead { text-transform: uppercase; font-size: 12px; background-color: #efefef; letter-spacing: 0.5px; color: rgba(0, 0, 0, 0.4); } .option { display: inline-block; padding: 5px 10px; background-color: #ddd; border-radius: 4px; margin-right: 15px; } .name { min-width: 110px; display: inline-block; } .comment { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; display: inline-block; } .option.is-blue { background-color: #bceefd; } .option.is-orange { background-color: #ffd89e; } .option.is-purple { background-color: #e9cbff; } .option.is-green { background-color: #bef1a9; }
find.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>論文查詢</title> <link href="favicon.ico" rel="shortcut icon"> <link rel="stylesheet" href="../static/css/style.css"> </head> <style> input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } select{ width: 100%; padding: 16px 20px; border: none; border-radius: 4px; background-color: #f1f1f1; } input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } input[type=button], input[type=reset] { background-color: #4CAF50; border: none; color: white; padding: 16px 32px; text-decoration: none; margin: 4px 2px; cursor: pointer; } .button{ background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } </style> <script type="text/javascript" src="../static/js/jquery.min.js"></script> <script type="text/javascript"> var detail_div = 1; var realtotal=1; function add_div() { var str="<table align='center'> <tr><td><select name='lianjie"+detail_div+"'> <option value='AND'>AND</option> <option value='OR'>OR</option> <option value='NOT'>NOT</option>"; str=str+"</select></td><td><select name='tiaojian"+detail_div+"'><option value='題目'>題目</option><option value='摘要'>摘要</option><option value='關鍵詞'>關鍵詞</option><option value='作者'>作者</option></select></td><td><input type='text' name='input"+detail_div+"'></td><td><select name='jingdu"+detail_div+"'><option value='精準'>精準</option><option value='模糊'>模糊</option><td><input type='button' id='addbtn"+detail_div+"' value='+' onclick='add_div()'></td>"; str=str+"<td><input type='button' id='delebtn"+detail_div+"' value='-' onclick='dele_div(this)'></td></tr></table>"; var div = document.createElement("div"); //div.className = "form-group"; div.id = "lotdiv" + detail_div; div.innerHTML = str; document.getElementById("biaodan").appendChild(div); detail_div++; realtotal++; document.getElementById("sum").value=detail_div; document.getElementById("realsum").value=realtotal; } function dele_div(obj){ var id=obj.id; realtotal--; id=id.substring(7); var e = document.getElementById("lotdiv"+id); document.getElementById("biaodan").removeChild(e); document.getElementById("sum").value=detail_div; document.getElementById("realsum").value=realtotal; } var findnummm=0; var resnum=0; var alldata; function sendAjax(){ $.ajax({ type: "get", url: '/c3', data: $('#biaodan').serializeArray() , dataType: "json", success: function(result){ alert("success--result:"+result['title'][0]); alldata=result; reslist(result); if(findnummm==0){ addresfinddiv(); findnummm=1; } else changeresnum(); }, error: function(){ alert("error"); } }); } function reslist(data){ var tab=document.getElementById("restable"); var str="<tr><td width='35%'>標題</td><td width='35%'>作者</td><td width='15%'>時間</td><td width='15%'>連結</td></tr>"; var i=0; for(n in data['title']){ str=str+"<tr><td>"+data['title'][i]+"</td><td>"+data['zuozhe'][i]+"</td><td>"+data['time'][i]+"</td><td><a target='_blank' href='"+data['lianjie'][i]+"'>"+"點此閱讀文章"+"</a></td></tr>"; resnum=resnum+1; i++; } tab.innerHTML = str; } function addresfinddiv(){ var formdiv=document.getElementById("tjdiv"); var str="<select id='resselect' onchange='changedata()'><option value='選擇年份'>選擇年份</option><option value='近三年'>近三年</option><option value='近兩年'>近兩年</option><option value='去年'>去年</option></select>"; str=str+"<h2 align='center' id='totalnumh'>一共"+resnum+"條</h2>" var div = document.createElement("div"); div.id="changeresdiv"; div.innerHTML = str; formdiv.appendChild(div); resnum=0; } function changeresnum(){ var formdiv=document.getElementById("tjdiv"); //document.getElementById("totalnumh").remove(); document.getElementById("changeresdiv").remove(); var str="<select id='resselect' onchange='changedata()'><option value='選擇年份'>選擇年份</option><option value='近三年'>近三年</option><option value='近兩年'>近兩年</option><option value='去年'>去年</option></select>"; str=str+"<h2 align='center' id='totalnumh'>一共"+resnum+"條</h2>" var div = document.createElement("div"); div.id="changeresdiv"; div.innerHTML = str; formdiv.appendChild(div); resnum=0; } function changedata(){ var chdanum=0; var vl=document.getElementById("resselect"); var index = vl.selectedIndex; var chva=vl.options[index].value; document.getElementById("restable").remove(); var str="<table id='restable'>"+"<tr><td width='35%'>標題</td><td width='35%'>作者</td><td width='15%'>時間</td><td width='15%'>連結</td></tr>"; if(chva=="近兩年"){ for(i in alldata){ if(alldata[i].time.substring(0,4)!="2018"){ chdanum=chdanum+1; str=str+"<tr><td>"+alldata[i].title+"</td><td>"+alldata[i].zuozhe+"</td><td>"+alldata[i].time+"</td><td><a target='_blank' href='"+alldata[i].lianjie+"'>"+"點此閱讀文章"+"</a></td></tr>"; } } } else if(chva=="去年"){ for(i in alldata){ if(alldata[i].time.substring(0,4)=="2020"){ chdanum=chdanum+1; str=str+"<tr><td>"+alldata[i].title+"</td><td>"+alldata[i].zuozhe+"</td><td>"+alldata[i].time+"</td><td><a target='_blank' href='"+alldata[i].lianjie+"'>"+"點此閱讀文章"+"</a></td></tr>"; } } } else if(chva=="近三年"){ for(i in alldata){ chdanum=chdanum+1; str=str+"<tr><td>"+alldata[i].title+"</td><td>"+alldata[i].zuozhe+"</td><td>"+alldata[i].time+"</td><td><a target='_blank' href='"+alldata[i].lianjie+"'>"+"點此閱讀文章"+"</a></td></tr>"; } } var div=document.getElementById("reslunwendiv"); div.innerHTML = str+"</table>"; var formdiv=document.getElementById("tjdiv"); document.getElementById("changeresdiv").remove(); var str="<select id='resselect' onchange='changedata()'><option value='選擇年份'>選擇年份</option><option value='近三年'>近三年</option><option value='近兩年'>近兩年</option><option value='去年'>去年</option></select>"; str=str+"<h2 align='center' id='totalnumh'>一共"+chdanum+"條</h2>" var div1 = document.createElement("div"); div1.id="changeresdiv"; div1.innerHTML = str; formdiv.appendChild(div1); } </script> <div > <div align="center"><a target='_blank' href="c1" class="button">關鍵詞檢視</a></div><br/> <form action="servlet?method=findlunwen" method="post" id="biaodan" > <div align="center" id="firdiv" > <table align="center"> <tr> <td> </td> <td><select name="tiaojian" id="tiaojian"> <option value="題目">題目</option> <option value="摘要">摘要</option> <option value="關鍵詞">關鍵詞</option> <option value="作者">作者</option> </select></td> <td><input type="text" id="firinput" name="firinput"></td> <td><select name="jingzhun" id="jingzhun"><option value="模糊">模糊</option><option value="精準">精準</option></select> <td><input type="button" id="firbut" value="+" onclick="add_div()"></td> <td><form method="post" id="tjdiv"> <div align="center"><input type="button" value="查詢" onclick="sendAjax()" class="findbtn"></div> </form></td> </tr> </table> </div> <input type="hidden" name="sum" id="sum" value="1"> <input type="hidden" name="realsum" id="realsum" value="1"> </form> <div align="center" id="reslunwendiv" class="subbox"> <table id="restable" > </table> </div> </div> </body> </html>
view.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>視覺化圖</title> <link href="favicon.ico" rel="shortcut icon"> <script src="../static/js/jquery.min.js"></script> <script src="../static/js/echarts.min.js"></script> <script src="../static/js/echart3.js"></script> <script src="../static/js/echarts-wordcloud.js"></script> <style> #main{ width: 100%; height: 1500px; border:1px solid #ddd; float:center; } .button{ background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .lie{ column-count: 2; } </style> </head> <div align="center"><a target='_blank' href="/" class="button">論文查詢</a></div> <body> <div id="main" align="center" style="height:300%;"> </div> <div id="zhuzhuang" style="height:600%;" align="center"> </div> <div id="box" style="width: 600px;height: 600px;"></div> <script type="text/javascript"> var dt; var hzb=new Array(0); var zzb=new Array(0); var mydata = new Array(0); $.ajax({ url : "/c2", async : true, type : "POST", data : { }, dataType : "json", success : function(data) { dt = data; for (var i = 0; i < 10; i++) { var d = {}; d["name"] = dt['keyword'][i]; d["value"] = dt['value'][i]; mydata.push(d); reslist(mydata); hzb.push(dt['keyword'][i]); zzb.push(dt['value'][i]); } var myChart = echarts3.init(document.getElementById('main')); //設定點選效果 myChart.setOption({ title: { text: '' }, tooltip: {}, series: [{ type : 'wordCloud', //型別為字元雲 shape:'smooth', //平滑 gridSize : 8, //網格尺寸 size : ['50%','50%'], //sizeRange : [ 50, 100 ], rotationRange : [-45, 0, 45, 90,60,16], //旋轉範圍 textStyle : { normal : { fontFamily:'微軟雅黑', color: function() { return 'rgb(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ')' } }, emphasis : { shadowBlur : 5, //陰影距離 shadowColor : '#333' //陰影顏色 } }, left: 'center', top: 'center', right: null, bottom: null, width:'100%', height:'100%', data:mydata }] }); var zhudiv=echarts3.init(document.getElementById('zhuzhuang')); option = { xAxis: { type: 'category', data: hzb }, yAxis: { type: 'value' }, series: [{ data: zzb, itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: 'black' } } }, }, type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' } }] }; option && zhudiv.setOption(option); //初始化ehcharts例項 var myline=echarts.init(document.getElementById("box")); //使用剛剛指定的配置項和資料項顯示圖表 myline.setOption(option2); }, error : function() { alert("請求失敗"); }, }); </script> <table id="restable" align="center" border="1" style="height:100%;width:40%;" > </table> <script> function reslist(mydata){ var tab=document.getElementById("restable"); var str="<tr><td width='50%'>關鍵詞</td><td width='50%'>次數</td></tr>"; var i=0; for(n in mydata){ str=str+"<tr><td>"+mydata[i]['name']+"</td><td>"+mydata[i]['value']+"</td></tr>"; i++; } tab.innerHTML = str; } </script> </body> </html>
text.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="box" style="width: 600px;height: 600px;"></div> <script> //初始化ehcharts例項 var myChart=echarts.init(document.getElementById("box")); //指定圖表的配置項和資料 var option={ //標題 title:{ text:'生鮮銷量統計' }, //工具箱 //儲存圖片 toolbox:{ show:true, feature:{ saveAsImage:{ show:true } } }, //圖例-每一條資料的名字叫銷量 legend:{ data:['銷量'] }, //x軸 xAxis:{ data:["蘋果","橘子","橙子","香蕉","菠蘿","榴蓮"] }, //y軸沒有顯式設定，根據值自動生成y軸 yAxis:{}, //資料-data是最終要顯示的資料 series:[{ name:'銷量', type:'line', data:[40,20,35,60,55,10] }] }; //使用剛剛指定的配置項和資料項顯示圖表 myChart.setOption(option); </script> </body> </html>