SpringBoot 整合 ElasticSearch 實作京東搜索（手把手帶你完成一個 “前后端分離專案”）-有解無憂

前言

專案上傳到Gitee上了，需要專案原始碼的自行點擊鏈接獲取：
后端專案地址：https://gitee.com/WuZe-wz/jdelasticsearch.git
前端專案地址：https://gitee.com/WuZe-wz/jdelasticsearchvue.git

說明：本專案主要關注功能的實作，對于代碼的規范性以及頁面的展示還待優化…

（1）創建后端專案（版本 2.2.5.RELEASE）

1）勾選需要的依賴

在這里插入圖片描述

注：Thymeleaf 模板后來沒有用到

2）更改Springboot版本2.2.5.RELEASE、ES版本7.6.1

在這里插入圖片描述

3）引入其他依賴（fastjson）

<!--        jsoup 決議網頁-->
        <dependency>
            <groupId>org.jsoup</groupId>
            <artifactId>jsoup</artifactId>
            <version>1.10.2</version>
        </dependency>

<!--        fastjson-->
        <!--        json格式轉換工具-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>

4）application組態檔

<1>配置埠

<2>關閉thymeleaf快取（穿越：thymeleaf 后面沒有用到）

在這里插入圖片描述

（2）爬蟲

1）分析

去京東商城，搜索 ”java“，可以分析其中核心的請求地址就是

https://search.jd.com/Search?keyword=java

再提取，核心就是 keyword 屬性！

總結：

爬取資料：其實就是 ”獲取請求回傳的頁面資訊，篩選出我們想要的資料“！

Java 中對應的包：jsoup

2）整合jsoup包

<1>匯入 jsoup 依賴

<!--        jsoup 決議網頁-->
        <dependency>
            <groupId>org.jsoup</groupId>
            <artifactId>jsoup</artifactId>
            <version>1.10.2</version>
        </dependency>

注：jsoup 只能爬取網頁資訊，像音樂這些沒辦法爬取，

<2>撰寫工具類決議網頁

package com.wuze.jdelasticsearch.config;

import com.wuze.jdelasticsearch.pojo.JDBook;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

import java.net.URL;
import java.util.ArrayList;
import java.util.List;

/**
 * @author wuze
 * @desc ...
 * @date 2021-02-21 17:49:56
 */

//爬取京東首頁資料工具類
public class HtmlParseUtil {

    /*public static void main(String[] args) throws Exception {
        List<JDBook> bookList = new HtmlParseUtil().parseJD("vue");
        for (JDBook jdBook : bookList) {
            System.out.println(jdBook);
        }

    }*/

    public List<JDBook> parseJD(String keyword) throws Exception {
        //獲取請求（url）
        String url = "https://search.jd.com/Search?keyword="+keyword;
        //決議網頁，jsoup 回傳的 document 就是 瀏覽器的 Document物件（接下來對document的操作就跟前端 js 操作一樣）
        Document document = Jsoup.parse(new URL(url),30000);//30s超時
        //獲取搜索結果的 List 集合
        Element jGoodsList = document.getElementById("J_goodsList");
        //獲取集合里面的單個元素
        Elements liGoodsList = jGoodsList.getElementsByTag("li");

        //創建List 集合
        List<JDBook> jdBookList = new ArrayList<>();

        //遍歷所有 li 標簽，獲取單個商品資訊
        for (Element perGoods : liGoodsList) {
            //1、添加 .text() 方法，才能轉換成 String 輸出
            //2、圖片img 是懶加載方式，所以只提取 img 的src屬性是爬取不到資料的，需要指定data-lazy-img 屬性
            String img = perGoods.getElementsByTag("img").attr("data-lazy-img");//獲取商品圖片（先獲取標簽，再獲取標簽內屬性）
            String price = perGoods.getElementsByClass("p-price").text();//書的價格
            String name = perGoods.getElementsByClass("p-name").text();//書的名稱
            String bookShop = perGoods.getElementsByClass("p-shopnum").text();//書店名
            JDBook jdBook = new JDBook();
            jdBook.setImg(img);
            jdBook.setPrice(price);
            jdBook.setName(name);
            jdBook.setBookShop(bookShop);
            jdBookList.add(jdBook);

        }

        return jdBookList;


    }
}

（3）整合swagger2

1）添加swagger依賴（2.8.0）（其他版本我的環境下有彈窗問題）

<!--        swagger-->
<!--        2.9.2有彈窗問題，所以降低版本到2.8.0-->
        <dependency>
              <groupId>io.springfox</groupId>
              <artifactId>springfox-swagger2</artifactId>
              <version>2.8.0</version>
        </dependency>

        <dependency>
              <groupId>io.springfox</groupId>
              <artifactId>springfox-swagger-ui</artifactId>
              <version>2.8.0</version>
        </dependency>

2）SwaggerConfig 配置類

package com.wuze.jdelasticsearch.config;

import com.google.common.base.Predicates;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.service.Contact;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

    /**
     * @author wuze
     * @desc ...
     * @date 2021-02-21 18:51:24
     */
@Configuration //指定為配置類（注入spring）
@EnableSwagger2 //表示swagger整合
public class SwaggerConfig {
    @Bean
    public Docket webApiConfig(){
        return new Docket(DocumentationType.SWAGGER_2)
                .groupName("webApi")
                .apiInfo(webApiInfo())
                .select()
                .paths(Predicates.not(PathSelectors.regex("/admin/.*")))
                .paths(Predicates.not(PathSelectors.regex("/error.*")))
                .build();
    }

    private ApiInfo webApiInfo(){
        return new ApiInfoBuilder()
                .title("網站-JD首頁書籍資訊API檔案")
                .description("本檔案描述了JD首頁書籍資訊介面定義")
                .version("1.0")
                .contact(new Contact("wz", "http://wuzest.com",
                        "wuzest@163.com"))
                .build();
    }

}

（4）引入 ES API 工具類

package com.wuze.jdelasticsearch.config;


import com.alibaba.fastjson.JSON;
import com.wuze.jdelasticsearch.pojo.JDBook;
import org.apache.http.HttpHost;
import org.elasticsearch.action.admin.indices.delete.DeleteIndexRequest;
import org.elasticsearch.action.bulk.BulkRequest;
import org.elasticsearch.action.bulk.BulkResponse;
import org.elasticsearch.action.delete.DeleteRequest;
import org.elasticsearch.action.delete.DeleteResponse;
import org.elasticsearch.action.get.GetRequest;
import org.elasticsearch.action.get.GetResponse;
import org.elasticsearch.action.index.IndexRequest;
import org.elasticsearch.action.index.IndexResponse;
import org.elasticsearch.action.search.SearchRequest;
import org.elasticsearch.action.search.SearchResponse;
import org.elasticsearch.action.update.UpdateRequest;
import org.elasticsearch.action.update.UpdateResponse;
import org.elasticsearch.client.RequestOptions;
import org.elasticsearch.client.RestClient;
import org.elasticsearch.client.RestHighLevelClient;
import org.elasticsearch.client.indices.CreateIndexRequest;
import org.elasticsearch.client.indices.CreateIndexResponse;
import org.elasticsearch.client.indices.GetIndexRequest;
import org.elasticsearch.common.unit.TimeValue;
import org.elasticsearch.common.xcontent.XContentType;
import org.elasticsearch.index.query.MatchAllQueryBuilder;
import org.elasticsearch.index.query.MatchQueryBuilder;
import org.elasticsearch.index.query.QueryBuilders;
import org.elasticsearch.search.SearchHit;
import org.elasticsearch.search.builder.SearchSourceBuilder;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.concurrent.TimeUnit;

/**
 * @author wuze
 * @desc ...
 * @date 2021-02-21 15:06:07
 */
@Configuration
public class ElasticSearchUtils {



    /**
     * 注入 RestHighLevelClient
     * @return
     */
  @Bean
    public RestHighLevelClient restHighLevelClient(){
        RestHighLevelClient client = new RestHighLevelClient(
                RestClient.builder(
                        new HttpHost("localhost", 9200, "http")));
        return client;
    }


    /*
    * 注意：RestHighLevelClient 需要傳入方法，呼叫時再從 bean容器 里面@Autowired拿出
    * 所以這里不需要拿出，呼叫時再拿出（直接傳入形參操作即可！）
    */
    //@Autowired
    //private static RestHighLevelClient restHighLevelClient;




    /
    //  索引操作  
    /

    //1 創建索引
    public static void creareIndex(String indexName, RestHighLevelClient restHighLevelClient){
        try {
            //1 創建索引請求
            CreateIndexRequest indexRequest = new CreateIndexRequest(indexName);
            //2 客戶端執行請求,請求后獲得回應
            CreateIndexResponse indexResponse = restHighLevelClient.indices().create(indexRequest, RequestOptions.DEFAULT);
            System.out.println(indexResponse);
        }catch (Exception e){
            e.printStackTrace();
        }

    }



    //2 獲取索引（“索引”相當于“資料庫”，只能判斷其是否存在）
    public static void isExistsIndex(String indexName, RestHighLevelClient restHighLevelClient){
        try {
            //注意：GetIndexRequest匯入的包是org.elasticsearch.client.indices.GetIndexRequest;
            GetIndexRequest indexRequest = new GetIndexRequest(indexName);
            boolean isExists = restHighLevelClient.indices().exists(indexRequest, RequestOptions.DEFAULT);
            System.out.println(isExists);
        }catch (Exception e){
            e.printStackTrace();
        }


    }

    //3 洗掉索引
    public static void deleteIndex(String indexName, RestHighLevelClient restHighLevelClient){
        try {
            DeleteIndexRequest deleteRequest = new DeleteIndexRequest(indexName);
            restHighLevelClient.indices().delete(deleteRequest, RequestOptions.DEFAULT);
        }catch (Exception e){
            e.printStackTrace();
        }

    }





    /
    //  檔案操作  
    /


    //1、添加檔案（添加 ”行“ ）
    public static void addDocument(JDBook jdBook, String indexName, RestHighLevelClient restHighLevelClient){
        try {
            //1、創建物件
            //User user = new User("wz1", 22);
            //2、創建請求(指定 “索引”（資料庫）)
            IndexRequest indexRequest = new IndexRequest(indexName);
            //3、配置請求基本規則
            indexRequest.id("1");//行號為 1
            indexRequest.timeout(TimeValue.timeValueSeconds(1));//過期時間1s
            //4、將我們的資料放入請求(先將物件轉換成json格式)
            indexRequest.source(JSON.toJSONString(jdBook), XContentType.JSON);
            //5、客戶端發送請求，獲取回應結果
            IndexResponse response = restHighLevelClient.index(indexRequest, RequestOptions.DEFAULT);

            System.out.println(response.toString());//輸出回應結果，json--> string
            System.out.println(response.status());//輸出 回應狀態（Create/Update/...）

        }catch (Exception e){
            e.printStackTrace();
        }

    }


    //2 獲取檔案資訊（先查詢檔案是否存在）
    public static void getDocument(String indexName, String docId, RestHighLevelClient restHighLevelClient){
        try {
            //1、創建請求(指定 “索引”（資料庫） 和 id（行號）)
            GetRequest request = new GetRequest(indexName,docId);
            //2、判斷檔案是否存在
            boolean isExists = restHighLevelClient.exists(request, RequestOptions.DEFAULT);
            //如果存在
            if(isExists){
                //發送請求，獲取檔案，得到回應
                GetResponse response =restHighLevelClient.get(request, RequestOptions.DEFAULT);
                System.out.println(response.getSourceAsString());//轉換成字串輸出
                System.out.println(response);//原輸出，跟命令列方式輸出一致
            }

        }catch (Exception e){
            e.printStackTrace();
        }


    }

    //3 更新檔案資訊
    public static void updateDocument(JDBook jdBook, String indexName, String docId, RestHighLevelClient restHighLevelClient){
        try {
            //1、創建更新請求
            UpdateRequest updateRequest = new UpdateRequest(indexName,docId);
            //2、設定基本規則
            updateRequest.timeout(TimeValue.timeValueSeconds(1));

            //3、將我們的新資料放入請求(先將物件轉換成json格式)
            //XContentType.JSON 指定型別為 json
            //User user = new User("wz222", 18);
            updateRequest.doc(JSON.toJSONString(jdBook), XContentType.JSON);

            //4、客戶端發送 update 請求，得到回應
            UpdateResponse response = restHighLevelClient.update(updateRequest, RequestOptions.DEFAULT);

            System.out.println(response);

        }catch (Exception e){
            e.printStackTrace();
        }


    }



    //4 洗掉檔案
    public static void deleteDocument(String indexName, String docId, RestHighLevelClient restHighLevelClient){
        try {
            //1、創建洗掉的請求
            DeleteRequest deleteRequest = new DeleteRequest(indexName,docId);
            //2、客戶端發起洗掉請求，得到回應
            DeleteResponse deleteResponse = restHighLevelClient.delete(deleteRequest, RequestOptions.DEFAULT);

            System.out.println(deleteResponse.status());//輸出回應狀態

        }catch (Exception e){
            e.printStackTrace();
        }


    }



    //5 批量插入資料（List）
    public static void bulkDocumentList(List<JDBook> bookList, String indexName, RestHighLevelClient restHighLevelClient){
        try {
            //1、創建批量插入的請求
            BulkRequest bulkRequest = new BulkRequest();

            //2、傳入批量資料（這里用List演示）
//            List<User> userList = new ArrayList<>();
//            userList.add(new User("阿澤1",11));
//            userList.add(new User("阿澤2",12));
//            userList.add(new User("阿澤3",13));

            //基本規則配置
            bulkRequest.timeout("10s");//設定超時時間

            //遍歷，插入資料
            for (int i = 0; i < bookList.size(); i++) {
                // 指定索引
                // 設定id（否則生成隨機id）（注意：最好不要這樣指定id，否則每次把資料添加到這個索引，都是覆寫掉前面的值，而不是繼續新增！！！）
                // 插入資料(json)
                bulkRequest.add(new IndexRequest(indexName)
                        //.id(""+(i+1))
                        .source(JSON.toJSONString(bookList.get(i)), XContentType.JSON)
                );
            }
            //發送請求，得到回應
            BulkResponse bulkResponse = restHighLevelClient.bulk(bulkRequest, RequestOptions.DEFAULT);
            System.out.println(bulkResponse.hasFailures());//是否失敗，false為不失敗，即 成功！

        }catch (Exception e){
            e.printStackTrace();
        }



    }



    //6 查詢整個索引內的所有檔案
    public static ArrayList<Map<String,Object>> searchAllDocument(String indexName, RestHighLevelClient restHighLevelClient){
        try {

            //1、創建查詢請求（指定索引（資料庫））(SearchRequest)
            SearchRequest searchRequest = new SearchRequest(indexName);

            //2、構建搜索條件(SearchSourceBuilder)
            SearchSourceBuilder sourceBuilder = new SearchSourceBuilder();

            //3、創建查詢條件（使用 工具類QueryBuilders ）
            //查詢所有檔案
            MatchAllQueryBuilder matchAllQueryBuilder = QueryBuilders.matchAllQuery();

            //4、配置 “搜索條件” 基本規則 并執行 “查詢條件”
            sourceBuilder.timeout(new TimeValue(60, TimeUnit.SECONDS));
            sourceBuilder.query(matchAllQueryBuilder);

            //5、構建請求（系結 “搜索條件”）
            searchRequest.source(sourceBuilder);

            //6、執行請求
            SearchResponse searchResponse = restHighLevelClient.search(searchRequest, RequestOptions.DEFAULT);

            //將結果封裝成List，并回傳List
            ArrayList<Map<String,Object>> resopnseList = new ArrayList<>();

            //7、獲取搜索結果
            //System.out.println(JSON.toJSONString(searchResponse.getHits()));
            //System.out.println("==========================================");
            for (SearchHit hit : searchResponse.getHits().getHits()) {
                resopnseList.add(hit.getSourceAsMap());
                //System.out.println(hit.getSourceAsMap());
            }
            return resopnseList;

        }catch (Exception e){
            e.printStackTrace();
            return null;
        }


    }



//根據 indexName 和 keyword 查詢資料（條件查詢）
    public static ArrayList<Map<String, Object>> searchDocumentByKeyWord(String indexName, String keyWord, RestHighLevelClient restHighLevelClient){
        try {

            //1、創建查詢請求（指定索引（資料庫））(SearchRequest)
            SearchRequest searchRequest = new SearchRequest(indexName);

            //2、構建搜索條件(SearchSourceBuilder)
            SearchSourceBuilder sourceBuilder = new SearchSourceBuilder();

            //3、創建查詢條件（使用 工具類QueryBuilders ）
            //查詢所有檔案
            //matchQuery：會將搜索詞分詞，再與目標查詢欄位進行匹配，若分詞中的任意一個詞與目標欄位匹配上，則可查詢到，
            //termQuery：不會對搜索詞進行分詞處理，而是作為一個整體與目標欄位進行匹配，若完全匹配，則可查詢到，
            //name 欄位 系結到 keyWord 屬性！（從head工具可以查看，書名的欄位叫“name”）
            MatchQueryBuilder matchQuery = QueryBuilders.matchQuery("name", keyWord);

            //4、配置 “搜索條件” 基本規則 并執行 “查詢條件”
            sourceBuilder.timeout(new TimeValue(60, TimeUnit.SECONDS));
            sourceBuilder.query(matchQuery);

            //5、構建請求（系結 “搜索條件”）
            searchRequest.source(sourceBuilder);

            //6、執行請求
            SearchResponse searchResponse = restHighLevelClient.search(searchRequest, RequestOptions.DEFAULT);

            //將結果封裝成List，并回傳List
            ArrayList<Map<String, Object>> resopnseList = new ArrayList<>();

            //7、獲取搜索結果
            //System.out.println(JSON.toJSONString(searchResponse.getHits()));
            //System.out.println("==========================================");
            for (SearchHit hit : searchResponse.getHits().getHits()) {
                resopnseList.add(hit.getSourceAsMap());
                //System.out.println(hit.getSourceAsMap());
            }
            return resopnseList;


        }catch(Exception e){
            e.printStackTrace();
            return null;
        }

    }



}

關鍵注意的地方：

1、索引中檔案（欄位）問題

這里使用 termQuery 更好！

在這里插入圖片描述

2、id問題（添加/覆寫的區別）

在這里插入圖片描述

（5）后端Controller（記得跨域配置）

package com.wuze.jdelasticsearch.controller;

import com.wuze.jdelasticsearch.config.ElasticSearchUtils;
import com.wuze.jdelasticsearch.config.HtmlParseUtil;
import com.wuze.jdelasticsearch.pojo.JDBook;
import org.elasticsearch.client.RestHighLevelClient;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

/**
 * @author wuze
 * @desc ...
 * @date 2021-02-21 18:29:20
 */
@RestController
@RequestMapping("/jdes")
@CrossOrigin	//跨域
public class JDEsController {

    @Autowired
    private RestHighLevelClient restHighLevelClient;

    @PostMapping("addbooklist/{keyword}")
    public void addBookList(@PathVariable String keyword) throws Exception {
        List<JDBook> jdBookList = new HtmlParseUtil().parseJD(keyword);
        ElasticSearchUtils.bulkDocumentList(jdBookList,"jd-es-test3",restHighLevelClient);
    }


    
    
    
    @GetMapping("getall")
    public ArrayList<Map<String, Object>> getAllBooks(){
        ArrayList<Map<String, Object>> booksList = ElasticSearchUtils.searchAllDocument("wz_springboot_es_index2", restHighLevelClient);
        /*for (Map<String, Object> book : booksList) {
            System.out.println(book);
        }*/
        return booksList;
    }
    
    
    
    

    //將指定keyword資料從指定索引中通過elasticsearch 查詢出來
    // （爬蟲+es）
    @GetMapping("getbykeyword/{keyWord}")
    public ArrayList<Map<String, Object>> getByKeyWord(@PathVariable String keyWord) throws Exception {
        String indexName = "jd-es-test3";

        ArrayList<Map<String, Object>> booksList = ElasticSearchUtils.searchDocumentByKeyWord(indexName,keyWord,restHighLevelClient);
        /*for (Map<String, Object> book : booksList) {
            System.out.println(book);
        }*/
        return booksList;
    }

}

（6）swagger測驗 / 瀏覽器提交get請求測驗（OK）

（7）創建前端 vue 專案

1）在新檔案夾 `npm init webpack 專案名` 初始化vue環境并創建專案

2）進入專案目錄，`cnpm i` 安裝所需依賴

3）安裝 axios 插件 `npm install axios`

安裝完插件會生成 node_modules 檔案夾，就ok

4）專案啟動測驗（`npm run dev`）

如果出現vue專案啟動界面，則專案創建成功，

5）專案結構分析

<1>本專案關鍵

在這里插入圖片描述

本專案需要改動的地方只有 main.js檔案、App.vue 檔案、index.html檔案

main.js：配置axios
App.vue：寫頁面，呼叫后端介面方法（核心）
index.html：寫主頁（首頁）資訊

<6>其他檔案結構說明

1、build（構建腳本目錄）（一般不需要修改）

1）build.js ==> 生產環境構建腳本；

2）check-versions.js ==> 檢查 npm，node.js 版本；

3）utils.js ==> 構建相關工具方法；

4）vue-loader.conf.js ==> 配置了 css 加載器以及編譯 css 之后自動添加前綴；

5）webpack.base.conf.js ==> webpack 基本配置；

6）webpack.dev.conf.js ==> webpack 開發環境配置；

7）webpack.prod.conf.js ==> webpack 生產環境配置；

2、config：（專案環境配置）

1）dev.env.js ==> 開發環境變數；

2）index.js ==> 專案組態檔；

3）prod.env.js ==> 生產環境變數；

3、node_modules：npm 加載的專案依賴模塊

4、src：這里是我們要開發的目錄（關鍵），基本上要做的事情都在這個目錄里，里面包含了幾個目錄及檔案：

1）assets：資源目錄，放置一些圖片或者公共 js、公共 css，這里的資源會被 webpack 構建；

2）components：組件目錄，我們寫的組件就放在這個目錄里面；

3）router：前端路由，我們需要配置的路由路徑寫在 index.js 里面；

4）App.vue：根組件；

5）main.js：入口 js 檔案；

5、static：靜態資源目錄，如圖片、字體等，不會被 webpack 構建

6、index.html：首頁入口檔案，可以添加一些 meta 資訊等

7、package.json：npm 包組態檔，定義了專案的 npm 腳本，依賴包等資訊

6）`main.js` 引入 axios插件依賴！

在這里插入圖片描述

// 匯入axios
import axios from 'axios'
Vue.prototype.$axios = axios

7）`index.html` 添加主頁css檔案（css鏈接寫在 head頭部）（在京東首頁拷貝代碼）

在這里插入圖片描述

<link type="text/css" rel="stylesheet" href="//misc.360buyimg.com/??jdf/1.0.0/unit/ui-base/5.0.0/ui-base.css,jdf/1.0.0/unit/shortcut/5.0.0/shortcut.css,jdf/1.0.0/unit/global-header/5.0.0/global-header.css,jdf/1.0.0/unit/myjd/5.0.0/myjd.css,jdf/1.0.0/unit/nav/5.0.0/nav.css,jdf/1.0.0/unit/shoppingcart/5.0.0/shoppingcart.css,jdf/1.0.0/unit/global-footer/5.0.0/global-footer.css,jdf/1.0.0/unit/service/5.0.0/service.css,jdf/1.0.0/unit/global-header-photo/5.0.0/global-header-photo.css,jdf/1.0.0/ui/area/1.0.0/area.css" />
<link type="text/css" rel="stylesheet" href="//misc.360buyimg.com/product/search/1.0.8/css/search.css" />

<script type="text/javascript" src="//misc.360buyimg.com/??jdf/1.0.0/unit/base/5.0.0/base.js,jdf/lib/jquery-1.6.4.js,product/module/es5-shim.js"></script>

8）`App.vue`（主頁面+系結后端介面）

注（說明）：

因為前端頁面只涉及首頁，單頁面，所以直接在 App.vue 頁面寫，就沒有在 components/views/... 去單獨創建頁面（并配置路由跳轉）

主要代碼組成：

搜索框頁面（京東首頁原始碼提取）
圖書展示頁面（京東首頁原始碼提取）
使用axios系結后端介面

完整代碼：

<template>
    <div id="app">
         <div id="logo-2014">
            <a href="//www.jd.com/" class="logo">京東</a>
        </div>
        <div id="search-2014" >
            <ul id="shelper" class="hide"></ul>
            <div>
              <form>
                <!-- 輸入框通過 v-model 雙向系結引數，獲取輸入值 -->
                <input v-model="keyword" type="text" οnkeydοwn="javascript:if(event.keyCode==13) search('key');" autocomplete="off" id="key" accesskey="s" class="text" />
                <button type="submit" @click.prevent="searchKey" class="button cw-icon"><i></i>搜索</button>
              </form>
            </div>
        </div> 





        <!-- 圖書 -->
        <div  id="J_goodsList" class="goods-list-v2 gl-type-4 J-goods-list">
		
            <ul class="gl-warp clearfix" data-tpl="2">
            
            <li v-for="result in results" :key="result.id" class="gl-item">
                <div class="gl-i-wrap">
                  <div class="p-img">
                      <img width="220px" height="280px" :src="result.img" :data-lazy-img="result.img"/>                                               
                   </div>
                                
                  <div class="p-price">
                      <strong class="J_71846911661"  data-done="1"  >
                              <i>{{result.price}}</i>
                      </strong>
                  </div>

                  <div class="p-name">
                        <a target="_blank" >
                          <em><font class="skcolor_ljg">{{keyword}}</font>{{result.name}}</em>
                          <i class="promo-words" id="J_AD_71846911661"></i>
                      </a> 
                  </div>
                                
                  <div class="p-shopnum" >
                      <a class="curr-shop hd-shopname" target="_blank"  :title="result.bookShop">{{result.bookShop}}</a> 
                  </div>
                                
                            
                  <!-- https://onlineedu-wz.oss-cn-hangzhou.aliyuncs.com/2021/01/22/3fc2259071fc4b30955d97407cc7697b05.jpg -->
                  <img :source-data-lazy-advertisement="result.img">
                </div>
            </li>
            <!-- 2095行 -->

          </ul>
        
        </div>
    </div>
                
            
            <!-- 4253行 -->

   
</template>

<script>
import axios from 'axios'

export default{
    data(){
        return{
            keyword: '',    //搜索關鍵字，如 java
            indexName:'',
            results: []  //搜索結果
        }
                
    },
    created(){
        
    },
    methods:{
        searchKey()
        {
          //按下搜索按鈕，將keyword值取出
          //從瀏覽器地址獲取（搜索框雙向系結了 keyword，這里可以 this.keyword獲取）
          //這里要用區域變數接受 this.keyword，不然這個變數無法傳入下面的方法中
          var keyword = this.keyword
          console.log(this.keyword)
            axios({
              method:'get',
              //使用 ' 符號 拼接
              url:'http://localhost:8082/jdes/getbykeyword/'+keyword
              })
            .then(response=>{
                this.results = response.data
                console.log(this.results)
            })
        }
    }
}



    </script>

9）效果演示（注：搜索不區分大小寫）

剛進入：

在這里插入圖片描述

搜索的前提是索引（資料庫）中有這個 keyword 對應的資料（書籍）

現在 索引 jd-es-test3 里面有 python、java、css、html…

搜索java：
在這里插入圖片描述

搜索python：

比起京東首頁，顯然界面不是特別美觀，但目前想實作的功能效果已經達到了，頁面的美化等后續完善…

本文如果對你有幫助，一鍵三連噢，感謝支持～

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/262590.html

標籤：其他

上一篇：如何用python做后端寫網頁-flask框架

下一篇：谷歌稱居家辦公影響作業效率！2021 年將回歸線下辦公

SpringBoot 整合 ElasticSearch 實作京東搜索（手把手帶你完成一個 “前后端分離專案”）

前言

（1）創建后端專案（版本 2.2.5.RELEASE）

1）勾選需要的依賴

2）更改Springboot版本2.2.5.RELEASE、ES版本7.6.1

3）引入其他依賴（fastjson）

4）application組態檔

<1>配置埠

<2>關閉thymeleaf快取（穿越：thymeleaf 后面沒有用到）

（2）爬蟲

1）分析

2）整合jsoup包

<1>匯入 jsoup 依賴

<2>撰寫工具類決議網頁

（3）整合swagger2

1）添加swagger依賴（2.8.0）（其他版本我的環境下有彈窗問題）

2）SwaggerConfig 配置類

（4）引入 ES API 工具類

（5）后端Controller（記得跨域配置）

（6）swagger測驗 / 瀏覽器提交get請求測驗（OK）

（7）創建前端 vue 專案

1）在新檔案夾 npm init webpack 專案名 初始化vue環境并創建專案

2）進入專案目錄，cnpm i 安裝 所需依賴

3）安裝 axios 插件 npm install axios

4）專案啟動測驗（npm run dev）

5）專案結構分析

<1>本專案關鍵

<6>其他檔案結構說明

6）main.js 引入 axios插件依賴！

7）index.html 添加主頁css檔案（css鏈接寫在 head頭部）（在京東首頁拷貝代碼）

8）App.vue（主頁面+系結后端介面）

9）效果演示（注：搜索不區分大小寫）

1）在新檔案夾 `npm init webpack 專案名` 初始化vue環境并創建專案

2）進入專案目錄，`cnpm i` 安裝所需依賴

3）安裝 axios 插件 `npm install axios`

4）專案啟動測驗（`npm run dev`）

6）`main.js` 引入 axios插件依賴！

7）`index.html` 添加主頁css檔案（css鏈接寫在 head頭部）（在京東首頁拷貝代碼）

8）`App.vue`（主頁面+系結后端介面）