创新实训【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 kwinfo
        where KW like #{KW}
        order by times desc
        LIMIT #{pageStart},#{pageSize}
</select>

获得热词的总数

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