2021-01-02

实现在网页中搜索elasticsearch中的数据并显示在网页上。

在上一篇博客中,我们已经获取到了elasticsearch中的数据,上一篇博客地址
接下来,我们就要通过Vue的数据绑定,来将数据显示在网页上。

博客有的没叙述清楚,请看源码吧: github源码地址

1.编写Controller。

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HtmlController {
     
    @GetMapping("/test")
    public String test(){
     
        return "test";

    }
}

2021-01-02_第1张图片

2.test.html

2021-01-02_第2张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<body>
<div id="app">
  <input type="text" v-model="keyword">
<input type="button" @click="searchKey" value="搜索">
    <hr/>
    <p>{
    {keyword}}p>
    <hr/>

    <p v-for="item in arr">

        图片 :{
    {"http://pic.netbian.com"+item.img}}
        名称 :{
    {item.name}}
        <img :src="'http://pic.netbian.com'+item.img">
    p>

    <hr/>
div>
<script>
    new Vue({
      
        el: '#app',
        data: {
      
            keyword: '搜索的内容',      //搜索的关键字
            arr: ["初始数据1","初始数据2","初始数据3"]      //搜索的结果
        },
    methods: {
      
        searchKey(){
      
              var keyword = this.keyword;
              console.log(keyword);
               //对接后端的接口
            axios.get("search/"+keyword+"/1/20").then
            (response=>{
      
                console.log(response);
                //赋值给result
                this.arr = response.data;
                //console.log(this.arr);
            },function (err){
      
                console.log(err);
            })
        }
    }
    })

script>

body>
html>

2.页面讲解。

使用到Vue+axios,先引入。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

script的代码,就是通过axios去请求接口,得到数据,再渲染到网页上。

<script>
    new Vue({
     
        el: '#app',
        data: {
     
            keyword: '搜索的内容',      //搜索的关键字
            arr: ["初始数据1","初始数据2","初始数据3"]      //搜索的结果
        },
    methods: {
     
        searchKey(){
     
              var keyword = this.keyword;
              console.log(keyword);
               //对接后端的接口
            axios.get("search/"+keyword+"/1/20").then
            (response=>{
     
                console.log(response);
                //赋值给result
                this.arr = response.data;
                //console.log(this.arr);
            },function (err){
     
                console.log(err);
            })
        }
    }
    })

</script>

3.效果。

2021-01-02_第3张图片

请查看源码

github源码地址

你可能感兴趣的:(js,vue,javascript,html,elasticsearch)