创新实训【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】——热词查询功能相关推荐
- 【创新实训8】手势理解功能与实际应用整合
本周实现用户手势的语义理解,从而实现根据手势操作应用. 之前队友使用了Face++进行情绪分析,Face++同样也有手势识别,但是手势的种类有限,因此采用了百度的API. http://ai.baid ...
- 创新实训项目分析——第十三篇
2021SC@SDUSC 目录 前言 一.项目环境 二.代码分析 1.透视变换,矫正图像 2.为按钮添加监听,完善功能 三.总结 前言 对于图片抗扭曲功能算法的实现,可以划分为以下任务: 1.采⽤寻找 ...
- 创新实训个人记录 : 个人工作总结
创新实训个人记录 : 个人工作总结 分条目.分进度总结个人工作 阅读书籍(6.8-6.18) 近似算法设计(6.19-6.27) 程序验证(6.28-7.1) 工作难点 接触近似算法领域,学习新知识 ...
- 创新实训个人记录:approximation factor, maximum matchingvertex cover
创新实训个人记录:approximation factor, maximum matching&&vertex cover approximation factor(近似比) maxi ...
- 创新实训个人记录:P versus NP
创新实训个人记录:P versus NP computation&&computable&& computational efficiency 一些符号 decision ...
- 创新实训个人记录:metric k-center
创新实训个人记录:metric k-center 一些概念 k-center(k-中心) dominating set(支配集) independent set(独立集) 独立集&&支 ...
- 创新实训团队记录:为BR-MTC问题设计一个近似算法
创新实训团队记录 : 为BR-MTC问题设计近似算法 阅读书籍和论文 近似算法设计思路变化总结 算法框架 改变初始顶点集 继续添加路径,作为新的初始顶点集 程序验证 近似解与最优解存在差距&& ...
- 国家开放大学计算机基础实训项目一,国家开放大学电大专科《微机系统与维护》网络课实训11及实训12作业及答案...
国家开放大学电大专科<微机系统与维护>网络课实训11及实训12作业及答案 实训11 微机软件系统的维护实训报告 实训内容 操作系统维护工具的使用.注册表的维护.Windows优化大师软件的 ...
- 山东大学创新实训---前端原型设计以及环境配置
近期创新实训项目进展及技术上遇到问题的碎碎念. ps: 参考材料都列出原网址,如版权等问题欢迎私聊.AI专业,目标算法工程师.前端0基础,都是参考B站直接上手,无奈课业繁重,'逼'算法为前端.十分欢迎 ...
最新文章
- 【iOS】UIButton 图标在上文字在下
- 集合、泛型、增强for
- NR 5G 协议层服务和功能
- Angularjs API指令查询
- 并发编程-04线程安全性之原子性Atomic包的4种类型详解
- SDNU 1427.分解质因数(水题)
- word 中同样的字号和行距倍数,不一样的行距
- layui前端框架弹出框图标整理
- 学习计划(11.5)
- Android USB(type-c)耳机(十)
- 如何 方法内指令重排 进制_宁波PLC编程培训:新手如何学习PLC?
- MySQL创建网吧管理系统_java网吧信息管理系统
- visual studio 2019/2022 安装时卡住,一直正在提取文件时的亲测有效的解决方案
- 科学计算机sd mode使用方法,科学计算器使用方法
- 西安市经开区-公司设立流程-公司名称审核
- Gif录制工具--Mac篇
- 楼梯计算机公式,楼梯计算公式
- 自动创建文件夹 pictureBox 显示图片 并调用系统窗体打开文件夹
- 编译安装 Python
- sanic入门(一)