创新实训【15】——热词网页展示

主要内容

这篇主要记录了网页热词网页的展示，可以查询有关热词的网页，可以通过热词名称，年份和来源查询，展示了网页的名称，发布时间，来源和链接，点击链接可以查看具体的网页，可以按照时间进行升序降序展示。

页面展示

主要通过列表展示网页信息

可以通过热词名称，时间和来源搜索

点击链接可以查看这个网页

主要步骤

1.前端网页展示，主要有搜索框和表格展示网页内容

<template>
    <div>

         <el-row :gutter="10">
          <!-- 搜索添加 -->
           <el-col :span="10">
             <el-input placeholder="请输入查询的热词" v-model="KW" clearable  >

             </el-input>
          </el-col>
          <el-col :span="4">
             
                <el-select v-model="year" clearable placeholder="日期">
                     <el-option
                          v-for="item in yearoptions"
                      :key="item.value"
                    :label="item.label"
                   :value="item.label">
                  </el-option>
                   </el-select>
          </el-col>
          <el-col :span="4">
             
                 <el-select v-model="source" clearable placeholder="来源">
                     <el-option
                          v-for="item in typeoptions"
                      :key="item.value"
                    :label="item.label"
                   :value="item.label">
                  </el-option>
                   </el-select>
          </el-col>
          
        <el-col :span="1">
            <el-button plain @click="getlianjieInfo">搜索</el-button>

        </el-col>
       </el-row>

    <el-table  :data= "lianjie_list"  stripe  style="font-size: 15px " >  
          <el-table-column label='题目' prop='title' width="500"  ></el-table-column>
          <el-table-column label='时间' prop='timestamp' width="200" sortable ></el-table-column>
          <el-table-column label='来源' prop='source' width="200"  ></el-table-column>
          <el-table-column label='链接'  width="300"  >
             <template slot-scope="props">
                <el-link :href="props.row.url" target="_blank">{{props.row.url}}</el-link>
                </template>
            </el-table-column>
    </el-table>
   <div>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
      :current-page="pageNum" :page-sizes="[1, 2, 5, 10]" :page-size="pageSize"
      layout="sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
    
    </div>
</template>

2.搜索时间和来源给出了一些选项，时间可以搜索2021，2020，2019，2018，2017，来源可以搜索央视网，网易新闻，央广网。

 data(){
     return{
            
            lianjie_list:[],
            pageNum:1,
            pageSize:10,
            total:0,
          
         KW:"",
        year:"",
        yearoptions: [{
          value: '选项1',
          label: '2021'
        }, {
          value: '选项2',
          label: '2020'
        }, {
          value: '选项3',
          label: '2019'
        }, {
          value: '选项4',
          label: '2018'
        }, {
          value: '选项5',
          label: '2017'
        }],

        source:"",
        typeoptions: [{
          value: '选项1',
          label: '央视网'
        }, {
          value: '选项2',
          label: '网易新闻'
        }, {
          value: '选项3',
          label: '央广网'
        }],

     };
    },

3.因为可以从热词具体展示页面跳到这个页面，展示有关那个热词的网页信息，也可以直接打开热词网页展示页面，就在created()方法中看看有没有KW，有就获取KW，没有KW=“”，然后执行this.getlianjieInfo()获得网页链接信息。

created(){
      if(this.$route.query.KW !=null){
          this.KW=this.$route.query.KW;
          console.log(this.KW);
      }else{
        this.KW="";
      }
        this.getlianjieInfo();
},

 async getlianjieInfo(){
       const order_query={};
       order_query.KW=this.KW;
       order_query.year=this.year;
       order_query.source=this.source;
       order_query.pageNum=this.pageNum;
       order_query.pageSize=this.pageSize;
             
       console.log(order_query);
          
      const {data:res}= await this.$http.post("lianjie_query",order_query);
      console.log(res.lianjie_list);
      this.total=res.num;
      this.lianjie_list=res.lianjie_list;
    },

4.后端获得网页链接信息

@RequestMapping("/lianjie_query")
public String movie(@RequestBody String data )
{
     JSONObject datajson= JSONObject.parseObject(data);
     System.out.println(datajson);
     String title=datajson.getString("KW");
     String year=datajson.getString("year");
     String source=datajson.getString("source");
     int pageNum=datajson.getInteger("pageNum");
     int pageSize=datajson.getInteger("pageSize");
     List<lianjie> lianjie_list=lianjiedao.getLianjie("%"+title+"%","%"+year+"%","%"+source+"%",pageNum,pageSize);
     int num=lianjiedao.getLianjieCount("%"+title+"%","%"+year+"%","%"+source+'%');
     System.out.println(data);
     HashMap<String,Object> res =new HashMap<>();
     res.put("num",num);
     res.put("lianjie_list",lianjie_list);
     //System.out.println(res);
     String res_json= JSON.toJSONString(res);
     return res_json;

    }

数据库查询链接信息

<select id="getLianjie" resultType="com.example.demo.bean.lianjie">
        select *
        from data1
        where title like #{title} and timestamp like #{timestamp} and source like #{source}
        order by timestamp desc
        LIMIT #{pageStart},#{pageSize}
</select>

获取链接的总数

<select id="getLianjieCount" resultType="java.lang.Integer">
        select count(*)
        from data1
        where title like #{title} and timestamp like #{timestamp} and source like #{source}

</select>

5.前端换页时，改变了pageNum和pageSize，数据库中通过这两个数控制查询出的网页信息的条数。

 handleSizeChange(newSize)
{
     this.pageSize=newSize;
     this.getlianjieInfo();
},

handleCurrentChange(newPage)
{
     this.pageNum=newPage;
     this.getlianjieInfo();
},