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

实训【15】——热词网页展示"/>

创新实训【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-optionv-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-optionv-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 data1where title like #{title} and timestamp like #{timestamp} and source like #{source}order by timestamp descLIMIT #{pageStart},#{pageSize}
</select>

获取链接的总数

<select id="getLianjieCount" resultType="java.lang.Integer">select count(*)from data1where 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();
},