zoukankan      html  css  js  c++  java
  • python论文爬取(一)

    对论文爬取的前端页面进行了一些设计

    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 {
       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- 110px;
      display: inline-block;
    }
    
    .comment {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max- 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] {
       100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    select{
       100%;
      padding: 16px 20px;
      border: none;
      border-radius: 4px;
      background-color: #f1f1f1;
    
    }
    input[type=submit] {
       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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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{
                   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=" 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,
                                     '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%;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=" 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>
  • 相关阅读:
    error C2065: “SHCNE_DELETE”: 未声明的标识符
    error C2872: ‘ofstream’ : ambiguous symbol
    error C2065: ‘__in’ : undeclared identifier
    LINK : fatal error LNK1561: 必须定义入口点
    VS2010提示error TRK0002: Failed to execute command
    js怎么获取一个单位为rem的元素真实宽/高度?
    将时间转化为几秒前 几分钟前 几小时前...
    uni-app picker 组件实现二级联动?
    uni-app scroll-view 点击实现元素居中?
    初始化CSS样式
  • 原文地址:https://www.cnblogs.com/wangdayang/p/14914357.html
Copyright © 2011-2022 走看看