Springboot+Vue整合（二）

今天内容1： 用Vue实现了进一步的查询，通过ID进行条件查询 这个内容基本上是在之前的整合的基础上做的修改 流程为： 页面添加搜索框

 <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                    <div style="display: flex; align-items: center;">
                        <el-input
                                v-model="searchText"
                                size="mini"
                                placeholder="输入关键字搜索"/>
                        <el-button
                                size="mini"
                                @click="search">
                            搜索
                        </el-button>
                    </div>
                </template>
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="edit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="remove(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>

这里有一个点是要绑定搜索框和搜索内容，关于这一点

需要先在data中定义一个输入内容的属性

data() {
  return {
    searchText: '', // 初始化为空字符串
    // 其他数据属性
  };
},

然后需要在点击按钮的实现方法中获取到这个属性

<el-input
  v-model="searchText"
  size="mini"
  placeholder="输入关键字搜索"
/>

 computed:
            {
                search() {
                    const searchText = this.searchText;
                    if (searchText.trim() === '') {
                        // 如果搜索文本为空，执行这个逻辑
                        this.$axios({
                            method: 'get',
                            url: 'http://localhost:9090/student/findAll',
                        }).then((response) => {
                            this.tableData = response.data;
                        }).catch((error) => {
                            // 处理错误
                            console.error('请求出错：', error);
                        });
                    } else {
                        // 如果搜索文本不为空，执行这个逻辑
                        // 使用搜索文本构建 URL，并发送搜索请求
                        const url = `http://localhost:9090/student/search/${searchText}`;
                        this.$axios({
                            method: 'get',
                            url: url,
                        }).then((response) => {
                            this.tableData = response.data;
                        }).catch((error) => {
                            // 处理错误
                            console.error('请求出错：', error);
                        });
                    }
                },

            },

这里用了if else进行区分，是为了实现输入内容进行对应查询，如果没输入任何内容默认查询全部

关于外部这个computed 为什么不用method

computed 是Vue.js中的计算属性，它用于根据依赖的数据动态计算衍生的属性。计算属性的值在依赖数据发生变化时自动更新，并且会进行缓存，只有依赖的数据发生改变时，计算属性才会重新计算。计算属性通常用于根据已有的数据计算、过滤、映射或组合出新的数据，以供模板中使用。计算属性使用时无需加括号，直接像读取属性一样使用即可。

说人话就是 computed是动态的，实时变化，然后语法和method有一些区别

我也把search方法放到method下做了验证，得出的结论是，如果使用method，需要点击搜索按钮才能进行查询，而放在computed下会自动进行变化

就用户体验来说，肯定是computed更好一些。