elasticsearch搜索+element-ui+html显示+axios前端无刷新渲染分页

最新推荐文章于 2024-05-12 09:56:39 发布

通财

最新推荐文章于 2024-05-12 09:56:39 发布

阅读量395

点赞数 1

分类专栏： thinkphp vue.js element-ui 文章标签： elasticsearch thinkphp elementui

本文链接：https://blog.csdn.net/weixin_54964053/article/details/117768894

版权

thinkphp 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

vue.js

2 篇文章 0 订阅

订阅专栏

element-ui

1 篇文章 0 订阅

订阅专栏

elasticsearch搜索+element-ui+html显示+axios前端无刷新渲染分页

在这里插入图片描述

前端渲染

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">

    <template>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="关键词">
                <el-input v-model="form.word" style="width: 200px;"></el-input>
                <el-button type="primary" @click="searche()">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table

                v-loading.fullscreen.lock="fullscreenLoading"

                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="brand_id"
                    label="id"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="pid_path_name"
                    label="商品类型"
                    width="180">
                <template slot-scope="scope">
                    <div v-html='scope.row.pid_path_name'></div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="cate_name"
                    label="分类">
            </el-table-column>
            <el-table-column
                    prop="brand_name"
                    label="品牌名称">
            </el-table-column>
            <el-table-column
                    prop="logo"
                    label="品牌LOGO">
                <el-image
                        slot-scope="scope"
                        style="width: 100px; height: 100px"
                        :src='"/"+scope.row.logo'
                ></el-image>
            </el-table-column>
        </el-table>
    </template>
    <template>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[5,10,15,20]"
                    :page-size="5"
                    :current-page="page"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </template>
</div>


</body>
</html>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                fullscreenLoading: true,
                page:1,
                size:5,
                total:0,
                form: {
                    word: '',
                }
            };
        },
        methods:{
            handleSizeChange(val) {
                //下拉列表 每页val条
                var that=this
                that.size=val
                axios
                    .get('essearch?page='+that.page+'&size='+that.size+'&word='+that.form.word)
                    .then(function (res) {
                        console.log(that.tableData)
                        that.tableData=res.data.data
                        console.log(that.tableData)
                    })
            },
            handleCurrentChange(val) {
                //跳转第val页
                var that=this
                that.page=val
                axios
                    .get('essearch?page='+that.page+'&size='+that.size+'&word='+that.form.word)
                    .then(function (res) {
                        console.log(that.tableData)
                        that.tableData=res.data.data
                        console.log(that.tableData)
                    })

            },
            searche(){
                var that=this
                that.page=1
                if (String(that.form.word)==''){
                    $url='essearch?page='+that.page+'&size='+that.size;
                }else{
                    $url='essearch?word='+that.form.word+'page='+that.page+'&size='+that.size
                }
                axios
                    .get($url)
                    .then(function (res) {
                        // console.log(that.tableData)
                        that.tableData=res.data.data
                        // console.log( that.loding)
                        that.total=res.data.total
                        // console.log(that.tableData)
                    })
            }
        },
        created:function (res) {
            var that=this
            axios
                .get('essearch')
                .then(function (res) {
                    console.log(that.tableData)
                    that.tableData=res.data.data
                    //页面加载时触发loding 0.5 秒
                    setTimeout(() => {
                        that.fullscreenLoading = false;
                    }, 500);
                    that.total=res.data.total
                    console.log(that.tableData)
                })
        }
    })
</script>

后端tp框架

public function essearch(){
        $search_field="pid_path_name";//搜索的字段
        $word = input('word','');//接收关键字
        $page = input('page',1);//接收当前页（如果没接收到，默认是1）
        $size = input('size',5);;//每页显示条数
        $limit = ($page-1)*$size;//偏移量
        $client = ClientBuilder::create()->setHosts(['127.0.0.1:9200'])->build();//创建es实例
        //设置查询的条件
        if (empty($word)){
            $body=[

            ];
        }else{
            $body=[
                //查询内容
                'query' => [
                    'match' => [//匹配
                        $search_field => $word//匹配字段
                    ]
                ],
                'highlight' => [//高亮
                    'pre_tags' => ["<em style='color: red'>"],//样式自己写
                    'post_tags' => ["</em>"],
                    'fields' => [
                        $search_field => new \stdClass()
                    ]
                ]
            ];
        }
        $params = [
            'index' => 'task',//索引（类似于库）
            'body' => $body,
            'size'=>$size,//每页显示条数
            'from'=>$limit//偏移量
        ];
        $results = $client->search($params);//es搜索
        if (!empty($word)){
            foreach ($results['hits']['hits'] as $k=>$v){
                $results['hits']['hits'][$k]['_source'][$search_field] = $v['highlight'][$search_field][0];
            }
        }


        $data = array_column($results['hits']['hits'],'_source');


        $arr['page'] = $page;//当前页
        $arr['total'] = $results['hits']['total']['value'];//总条数
        $arr['last_page'] = ceil($results['hits']['total']['value']/$size);//总页数
        $arr['data'] = $data;//数据
        return json($arr);
    }

接口返回的数据格式
在这里插入图片描述

测试数据

通财

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
elasticsearch搜索+element-ui+html显示+axios前端无刷新渲染分页

elasticsearch搜索+element-ui+axios前端无刷新渲染分页前端渲染<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> //vue.js <script src="__STATIC__/vue/vue.js" type="text/javascript" charset="utf-8
复制链接

扫一扫