创新实训【13】——热词信息查看功能

主要内容

这篇主要记录网页中具体热词展示的功能，展示了热词的名称，出现的次数，来源，以及相关的热词，点击具体的相关热词，可以看到相关热词的信息，可以通过点击网页链接，查看有关这个热词的网页。

网页展示

热词展示：

点击相关热词，可以展示这个热词的信息

点击网页链接，可以查看有关这个热词的网页：

主要步骤

1.前端网页的布局，主要有一个el-card卡片，展示热词信息

<template>
    <div>

  <el-card class="box-card"  style="margin-left:200px">
  <div slot="header" class="clearfix">
    <b><span>{{KW}}</span></b>
    <div style="float:right">
     <el-button plain @click="getlianjie()" >网页链接</el-button>
     </div>
  </div>
      
      
          <div  class="text item">
                  <b> <span>热词名称： </span><span>{{ KW}}</span></b>
             </div>
             <div  class="text item">
                  <b> <span>出现次数： </span><span>{{ times}}</span></b>
             </div>
             <div  class="text item">
                  <b> <span>来源： </span><span>{{ sources}}</span></b>
             </div>
           <div  class="text item">
               <el-row >
                  <b> <span>相关热词：</span> <span  v-for="item in otherKW"  :key="item"> <el-link  @click="xiangguan(item)">{{item}}</el-link>，</span></b>
               </el-row>
             </div>
            
  </el-card>
  </div>
</template>

2.因为是在热词查询列表中点击某个热词，展示这个热词的信息，首先展示网页中created方法，获取展示的热词KW，执行this.getInfo()获得热词的信息。

created(){
           
           this.KW=this.$route.query.KW;
           this.getInfo();
    },

getInfo()方法，从后端获取信息

 async getInfo(){
       console.log(this.KW);
       const query={};
       query.KW=this.KW;
       const {data:res}= await this.$http.post("KWinfo",query);
       console.log(res.flag,res.flag=="false");
       if(res.flag=="false")
             return;
       this.times=res.times;
       this.days=res.days;
       this.months=res.months;
       this.years=res.years;
       this.sources=res.sources;
       this.otherKW=res.otherKW;
     },

3.后端获得这个热词的信息

@RequestMapping("/KWinfo")
    public String KWinfo(@RequestBody String data ) {
        JSONObject datajson= JSONObject.parseObject(data);
        System.out.println(datajson);
        String kw=datajson.getString("KW");
        KW m=kwdao.getKWInfo(kw);
        if(m==null){
            HashMap<String,Object> res =new HashMap<>();
            res.put("flag","false");
            String res_json=JSON.toJSONString(res);
            System.out.println(res_json);
            return res_json;
        }
      
        String[] otherKW=m.getOtherKW().split("，");
        HashMap<String,Object> res =new HashMap<>();
        res.put("times",m.getTimes());
        res.put("sources",m.getSources());
        res.put("otherKW",otherKW);
        res.put("flag","true");
        String res_json=JSON.toJSONString(res);
        System.out.println(res_json);
        return res_json;
    }

数据库查询：

<select id="getKWInfo" resultType="com.example.demo.bean.KW">
        select *
        from kwinfo
        where KW=#{KW}
    </select>

4.点击相关热词，展示这个热词的信息

 xiangguan(name){
     console.log(name);
     this.KW=name;
     this.getInfo();
},

5.点击相关网页，跳到热词网页页面展示有关这个热词的网页

async getlianjie()
{
                
     this.$router.push({
     path: '/lianjie',
     query: {
           KW:this.KW,
     }    
    })
},