【前端代码】数据查询和展示，使用到了分页查询和一些自定义接口

已于 2022-02-13 23:21:18 修改
阅读量793 收藏
点赞数 1
文章标签： elementui vue.js javascript
于 2022-02-13 00:32:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52226593/article/details/122904529
版权

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="css/msg.css">
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <!--表单-->
    <el-form :inline="true" :model="selectbrand" class="demo-form-inline">
        <el-form-item label="当前状态">
            <el-select v-model="selectbrand.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="企业名称">
            <el-input v-model="selectbrand.companyName" placeholder="企业名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌名称">
            <el-input v-model="selectbrand.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="selectBrand">查询</el-button>
        </el-form-item>
    </el-form>
    <!--按钮-->
    <el-row>
        <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
    </el-row>
    <!--添加数据对话框表单-->
    <el-dialog
            title="编辑品牌"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="addbrand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="addbrand.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="addbrand.companyName"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="addbrand.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="addbrand.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="addbrand.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addBrand">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--修改数据表单-->
    <el-dialog
            title="修改品牌"
            :visible.sync="dialog"
            width="30%">
        <el-form ref="form" :model="upbrand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="upbrand.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="upbrand.companyName"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="upbrand.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="upbrand.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="upbrand.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="upBrand">提交</el-button>
                <el-button @click="dialogVisible2 = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--显示表格-->
    <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange"
    >
        <el-table-column
                type="selection"
                align="center">
        </el-table-column>
        <el-table-column
                type="index"
                align="center"
        >
        </el-table-column>
        <el-table-column
                prop="brandName"
                label="品牌名称"
                align="center"
        >
        </el-table-column>
        <el-table-column
                prop="companyName"
                label="企业名称"
                align="center"
        >
        </el-table-column>
        <el-table-column
                prop="ordered"
                label="排序"
                align="center">
        </el-table-column>
        <el-table-column
                prop="statusStr"
                label="当前状态"
                align="center">
        </el-table-column>
        <el-table-column
                label="操作"
                align="center">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" circle @click="updateBrand(scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="deleteBrand(scope.row.id)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
    </el-pagination>
</div>

<script>

    new Vue({
        el: "#app",

        data() {
            return {
                // 添加数据对话框是否展示的标记
                dialogVisible: false,
                //修改数据对话框是否展示的标记
                dialog: false,
                // 品牌模型数据
                brand: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: "",
                    ordered: "",
                    description: ""
                },

                //回显数据模型和修改数据模型
                upbrand: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: "",
                    ordered: "",
                    description: ""
                },
                // 表格数据
                tableData: [],
                // 复选框选中数据集合
                multipleSelection: [],
                //id集合
                selectedIds: [],
                addbrand: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    ordered: "",
                    description: ""
                },
                selectbrand: {
                    status: '',
                    brandName: '',
                    companyName: '',
                },
                //当前页码
                currentPage:1,
                //每页显示的条数
                pageSize:5,
                //总条数
                totalCount:""

            }
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //查询所有
            selectAll() {
                var _this = this
                axios({
                    method: "get",
                    url: "http://localhost:8080/element_test_demo/brand/selectAll?currentPage="+_this.currentPage+"&pageSize="+_this.pageSize,

                }).then(function (resp) {
                    _this.tableData = resp.data.rows;
                    _this.totalCount = resp.data.totalCount
                });
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val

            },
            // 查询方法，调用post方法，但是在请求路径中也有附带参数
            selectBrand() {
                axios.post("http://localhost:8080/element_test_demo/brand/selectBrand?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.selectbrand).then((resp)=>{
                    this.tableData = resp.data.rows;
                    this.totalCount = resp.data.totalCount
                })
            },
            // 添加数据
            addBrand() {
                var _this = this
                axios({
                    method: "post",
                    url: "http://localhost:8080/element_test_demo/brand/addBrand",
                    data: _this.addbrand
                }).then(function (resp) {
                    if (resp.data == "success") {
                        _this.dialogVisible = false;
                        _this.selectAll()
                        // 弹出消息提示
                        _this.$message({
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });
                    }
                });
            },
            //分页
            handleSizeChange(val) {
                //获取每页显示的条数
                this.pageSize=val;
                this.selectAll();

            },
            handleCurrentChange(val) {
                //获取当前页面
                this.currentPage=val;
                this.selectAll();
            },
            //删除
            deleteBrand(id) {
                //弹出提示框，判断是否删除
                this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //如果确认则删除
                    var _this = this;
                    axios({
                        method: "post",
                        url: "http://localhost:8080/element_test_demo/brand/deleteBrand",
                        data: id
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            _this.selectAll();
                            _this.$message({
                                message: '恭喜你，删除成功',
                                type: 'success'
                            });
                        }
                    });
                }).catch(() => {
                    //如果取消则取消删除
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            //批量删除
            deleteByIds() {
                this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        let selectionElement = this.multipleSelection[i];
                        this.selectedIds[i] = selectionElement.id;
                    }
                    var _this = this;
                    axios({
                        method: "post",
                        url: "http://localhost:8080/element_test_demo/brand/deleteByIds",
                        data: _this.selectedIds
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            _this.selectAll();
                            _this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    });
                }).catch(() => {
                    _this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //修改数据
            updateBrand(row) {
                this.upbrand.brandName = row.brandName;
                this.upbrand.companyName = row.companyName;
                this.upbrand.description = row.description;
                this.upbrand.ordered = row.ordered;
                this.upbrand.status = row.status + "";
                this.upbrand.id = row.id;
                this.dialog = true;
            },
            upBrand(){
                this.$confirm('此操作将修改数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var _this = this;
                    axios({
                        method: "post",
                        url: "http://localhost:8080/element_test_demo/brand/updateBrand",
                        data: _this.upbrand
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            _this.selectAll();
                            _this.dialog=false
                            _this.$message({
                                message: '恭喜你，修改成功',
                                type: 'success'
                            });

                        }
                    });
                }).catch(() => {
                    //如果取消则取消删除
                    this.$message({
                        type: 'info',
                        message: '已取消修改'
                    });
                });
            }

        },
        mounted() {
            this.selectAll();
        }
    });
</script>
</body>
</html>

Trouble=Maker
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaWeb阶段综合案例
qq_46002941的博客
02-22 1917
文章目录综合案例1，功能介绍2，环境准备2.1 工程准备2.2 创建表3，查询所有功能3.1 后端实现3.1.1 dao方法实现3.1.2 service方法实现3.1.3 servlet实现3.1.4 测试后端程序3.2 前端实现4，添加功能4.1 后端实现4.1.1 dao方法实现4.1.2 service方法实现4.1.3 servlet实现4.2 前端实现5，servlet优化5.1 问题导入5.2 代码优化5.2.1 后端优化5.2.2 前端优化6，批量删除6.1.
纯前端！超简单！实现查询功能
weixin_45928161的博客
05-08 2739
然后，对于每个文章对象，使用toLowerCase函数将content属性转换为小写字母，使用includes函数判断是否包含selectContent，如果是，则将该对象添加到articlesShow数组中。曾经一无所知的我手撸过一次纯前端的模糊查询功能，当时绞劲脑汁做出来，还颇有成就感，如今回头看就是纯小丑！方法接受一个函数作为参数，该函数用于测试每个数组元素是否符合指定的条件。方法来过滤一个数组中不需要的元素，返回一个新的数组。方法过滤出其中的偶数，最终得到了一个新的数组。
2024年Web前端最全实习总结 - 分销商数据查询平台 - 需求分析，35岁老年程序员的绝地翻身之路
最新发布
2401_84411018的博客
05-05 284
推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端 通过id 查询详情，让form表单中某地址展示成超链接，点击跳转并查看情况
lzfengquan的博客
09-23 904
例如下图，这里是详情页面，通过点击查询页面的某id跳转至此页面 上图中红色部分均是 form表单 ，其中地址的展示如下代码 className 是样式， 最主要的是render 函数 ,记得return getFieldValue是函数里的方法。 然后一定要看看是否要用 ?. 很有可能没用然后拿不到值 这里的return 就是你要展示的信息了，至于是什么看需求，我这里是超链接 就用了a 标签。 target="_blank" rel="noopener noreferrer" 这些代码还是要加的 为了
前端实现el-pagination分页组件纯前端分页使用方法
Lguorong的博客
08-17 6080
又是被后端欺负的一天，做了个公司的老项目，表格分页后端没法做，那就只能前端来完成。这里我介绍两种方法，需要的自提
前端页面多字段模糊查询
kevin的博客
11-05 1721
前端页面中，一句代码，用Js实现多字段模糊查询
简单JS实现分页带数据查询效果.zip
11-21
在前端开发中，分页和数据查询是常见的功能需求，特别是在大数据量的展示场景下，如电商产品列表、用户管理界面等。这个压缩包“简单JS实现分页带数据查询效果.zip”提供了一个使用JavaScript实现分页和数据查询的...
Vue按时间段查询数据组件使用详解
10-14
首先，我们看到组件的前端展示部分，使用了`<a-col>`和`<a-form-item>`来自定义布局。`<a-range-picker>`是Ant Design Vue库中的日期选择器组件，它允许用户选择一个日期范围。`v-model`绑定到`queryParam....
完美实现bootstrap分页查询
09-03
在实际项目中，还需要考虑性能优化，例如使用懒加载来提高页面加载速度，以及与后端的接口设计，以确保数据的正确获取和展示。通过这些步骤，我们可以创建一个既美观又实用的分页查询功能，为用户提供流畅的数据浏览...
SSM框架实现分页查询例子
06-27
6. **前端展示**：前端接收到分页数据后，根据返回的总记录数、当前页码和每页记录数来渲染分页导航条，用户可以通过点击页码进行翻页，前端再发送请求获取新的数据。 7. **优化与注意事项**：为了提高性能，可以...
spring boot框架layui前端，table拓展，支持动态表头和数据展示，支持table表数据编辑
06-13
通过以上分析，我们可以看出这个项目充分利用了Spring Boot的后端处理能力和Layui的前端展示优势，实现了动态表头、动态数据、分页优化和实时更新等一系列功能，为用户提供了高度可定制和交互性强的表格体验。...
前端调用后端接口,并把数据做分页处理
weixin_57400398的博客
02-08 2659
在methods方法下方进行调用封装的接口,方法名随便起,调用接口方法中的变量和在封装接口中require保持一直,最下方做成功返回数据,若是做数据分页处理,在成功返回下方进行做(下方详细说明)如下图:封装了一个接口,默认值处如果有默认值就写,如果没有默认值就直接写参数名,request下方记得把参数写全。methods中的方法处理好后,先在script下方声明that,格式就是。前端最主要的工作就是联合后端,调用后端接口,把页面用后端数据渲染出来。,记得导入你所封装的接口,,最后调用接口的方法名。
web开发-前端到服务器Controller中的数据传递
weixin_30347009的博客
04-12 691
一, ajax方式 1. ajax获取页面中的数据,包括表单中的数据, 然后封装成对象,数组, 字符串, 或其他基本类型的数据. 2. 将封装得到的数据通过ajax传递到controller中(注:在controller中的接收参数需要与从ajax传过来的数据有相同的类型和名称) 二, post 方式 (一) 创建虚拟表单的方式(属于post方式) 创建虚拟表单的一个实例: 1...
分页插件pagehelper初使用，前端传递当前页码与每页条数后台接受实现分页
Garry
05-11 2891
最新的项目用到了pagehelper分页插件，在此做下笔记方便以后查看！同时也希望能对别人产生帮助。 1.因为项目是maven进行管理的，所以：第一步就是在pom.xml文件中引入pagehelper分页插件。 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> &
基于javaweb的医院门诊查询系统（前端+后端）
qq_43485489的博客
08-09 1278
基于javaweb的医院门诊查询系统（前端+后端），采用eclipse开发工具，结合前端layui+jquery+css，使用jsp+ssm技术进行编写，数据库采用了mysql，navicat作为管理工具。感兴趣的同学可以交流交流！！！！.........
java开发关于在前端实现分页查询的代码案例
tyxzz的博客
05-24 605
分页查询的原理 假设这是一个数据表格，每一行都代表着一条数据，使用命令： select * from table limit （起始条数，数据条数） 即可快速查找数据。 但是，对于前端来说，一般告诉你的都是页号，而不是数据的条数。 所以我们可以整理出一个思路： 将 页号，每一页的行数==起始位置，数据条数。 可以写出公式：起始位置=（页数-1）乘以页的大小 所有行数除以页的大小=共有几页 。 若得到页数乘以页的大小小于所有行数，则要再加1。 实现代码： 新建一个Pager辅助类，定义页号，每一页的条数大
前端实现简单分页功能
SuMakabaka的博客
08-23 529
【代码】前端实现简单分页功能。
前端传递当前页和每页显示数_java后台分页查询方法_前端paging分页，前端设置每页多少条和当前页面的索引，传给后端，数据显示出来...
weixin_34138673的博客
02-27 1081
1.首先引入jquery2.在引入paging.css和paging.js 这2个我存在百度云上：链接：https://pan.baidu.com/s/1SPxlBkkx-pNAtLuRLifEag提取码：pwr43.根据后台接口获取数据的总条数，由于我是tab切换。每个tab都需要分页,所以我把分页的函数提成一个公共的函数var records = category.varient.recor...
java代码,controller层实现分页
qq_41035779的博客
08-03 2588
项目中遇到前后端分离项目,封装的分页没法用,我就随手在controller层中手写简单的分页,前端需要返回当前页就可以啦 首先是对数据库的全查询: List<xx> list = service.queryAll(); 然后直接对当前list分页 maps.put("totalNum", list.size()); maps.put("totalPage", (int)Math.ceil(list.size() / 10
sm框架中怎么知道实现分页查询，详细代码和步骤
08-03
5. 在Controller层接收前端传递过来的当前页码和每页显示的记录数，并调用Service层中的分页查询方法进行查询，最后将查询结果返回给前端。 以上便是在SM框架中实现分页查询的步骤和示例代码。具体代码实现需要根据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值