admin 管理员组文章数量: 1087652
创新实训【12】——热词查询功能
主要内容
这篇主要记录网页中热词查询功能，首先会展示所有热词的一个基本信息，包括它的名称，出现次数，来源网站，相关热词，可以通过查询搜索热词，也可以对结果按出现次数升序或降序排序。
页面展示如下：
使用工具
- 前端 vue+elementUI
- 后端 java
主要步骤
1.前端的页面布局，主要有一个搜索框，一个表格展示热词
<template><div><el-row ><!-- 搜索添加 --><el-col :span="10"><el-input placeholder="请输入查询的热词" v-model="infoKW" clearable ><el-button slot="append" icon="el-icon-search" @click="getKWInfo"></el-button></el-input></el-col></el-row><el-table :data= "kw_list" stripe style="font-size: 15px "> <el-table-column label='热词' prop='kW' width="150" ></el-table-column><el-table-column label='出现次数' prop='times' width="150" sortable></el-table-column><el-table-column label='来源' prop='sources' width="200" ></el-table-column><el-table-column label='相关热词' prop='otherKW' width="600" ></el-table-column><el-table-column label='热词信息' width="150"><template slot-scope="props"><el-link @click="juti(props.row.kW)">热词信息</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.数据为前端从后端获得的数据
async getKWInfo(){const kw_query={};kw_query.infoKW=this.infoKW;kw_query.pageNum=this.pageNum-1;kw_query.pageSize=this.pageSize;console.log(kw_query);const {data:res}= await this.$http.post("kw_query",kw_query);this.total=res.num;this.kw_list=res.kw_list;console.log(this.kw_list);
},
3.后端通过前端的热词搜索，页码查询数据库
@RequestMapping("/kw_query")public String kw(@RequestBody String data ){JSONObject datajson= JSONObject.parseObject(data);System.out.println(datajson);String kw=datajson.getString("infoKW");System.out.println(kw);int pageNum=datajson.getInteger("pageNum");int pageSize=datajson.getInteger("pageSize");List<KW> kw_list=kwdao.getKW("%"+kw+"%",pageNum,pageSize);int num=kwdao.getKWCount("%"+kw+"%");System.out.println(data);HashMap<String,Object> res =new HashMap<>();res.put("num",num);res.put("kw_list",kw_list);System.out.println(res);String res_json=JSON.toJSONString(res);return res_json;}
查询数据库语句：
<select id="getKW" resultType="com.example.demo.bean.KW">select *from kwinfowhere KW like #{KW}order by times descLIMIT #{pageStart},#{pageSize}
</select>
获得热词的总数
<select id="getKWCount" resultType="java.lang.Integer">select count(*)from kwinfowhere KW like #{KW}
</select>
4.前端中刚开始展示网页时，获取全部热词列表，created()函数中执行this.getKWInfo()方法
created(){this.getKWInfo();
},
data(){return{infoKW:"",kw_list:[],pageNum:1,pageSize:10,total:0,};
},
5.前端换页时，改变了pageNum和pageSize,这个控制了后面数据库查询的数据条数。
handleSizeChange(newSize){this.pageSize=newSize;this.getKWInfo();},handleCurrentChange(newPage){this.pageNum=newPage;this.getKWInfo();},
6.前端每个热词的具体信息，通过点击具体热词，可以跳到热词具体页面查看。
async juti(name){console.log(name);this.$router.push({path: '/infoKW',query: {KW:name,} })},
本文标签： 创新实训12热词查询功能
版权声明：本文标题：创新实训【12】——热词查询功能 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687331345a90418.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论