vue-element-ui前后端交互实现分页查询

news2024/11/19 6:31:07

大体思路：

①添加element-ui分页组件

②在data里定义几个参数用来存放当前页，每页条数，条目总数以及存放后端分页查询的结果

③后端使用分页查询，controller层接收当前页以及每页条数的参数

④前端编写方法发送请求到controller层调用分页查询的方法，并传参当前页及每页条数

⑤接收查询结果并存放进之前定义好的参数中

⑥给前端点击上下页等功能绑定事件，事件调用分页查询的方法并传参

前端：

①添加element-ui分页组件

<!--
            @size-change，pageSize 改变时会触发
            @current-change ， currentPage 改变时会触发
            :current-page 当前页码
            :page-sizes  选择每页显示个数
            :page-size  默认每页显示条目个数，支持 .sync 修饰符
            layout 组件布局，
            :total 总条目数
            -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

②在data里定义几个参数用来存放当前页，每页条数，条目总数以及存放后端分页查询的结果

newsData:[], //存放接收后端的数据
pageNum: 1, // 当前页 默认设值1
pageSize: 5, // 每页显示条目 默认设置5
total: '' ,// 条目总数

 

 ③后端使用分页查询，controller层接收当前页以及每页条数的参数

 controller层

 

service层

 

 ④前端编写方法发送请求到controller层调用分页查询的方法，并传参当前页及每页条数

⑤接收查询结果并存放进之前定义好的参数中

                loadPage(pageNum,pageSize) {
                    let url = '/news/page';
                    axios.get(url,{
                        params:{
                            // pageNum:this.pageNum,
                            // pageSize:this.pageSize
                            pageNum,
                            pageSize
                        }
                    }).then(resp => {
                        resp.data.list.get
                        this.newsData = resp.data.list;
                        this.total = resp.data.total;
                        // this.total = resp.data.list.total;
                        console.log(resp.data);
                    });
                }

⑥给前端点击上下页等功能绑定事件，事件调用分页查询的方法并传参

                handleSizeChange(val) {
                    this.pageSize = val;
                    this.loadPage(this.pageNum,this.pageSize);
                    console.log(`每页 ${val} 条`);
                },
                handleCurrentChange(val) {
                    this.pageNum = val;
                    this.loadPage(this.pageNum,this.pageSize);
                    console.log(`当前页: ${val}`);
                },

功能展示：

 

我的前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>listdemo</title>
    <script src="/js/vue-2.6.10.js"></script>
    <script src="/js/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="root">
        <el-button
                size="mini"
                type="primary"
                @click="clean">发布新闻</el-button>
        <el-table
                ref="news"
                :data="newsData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="nid"
                    label="新闻编号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="ntid"
                    label="主题编号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="ntitle"
                    label="新闻标题"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="nauthor"
                    label="新闻作者"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="ncreateDate"
                    label="创建日期"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="npicPath"
                    label="图片路径"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="ncontent"
                    label="新闻内容"
                    width="120"
                    show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="nmodifyDate"
                    label="修改时间"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="nsummary"
                    label="备注信息"
                    width="120"
                    show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="comment"
                    label="评论信息"
                    width="120">
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-button
                            size="mini" 
                            @click="dialogFormVisible = true;getDate(scope.$index)">编辑
                    </el-button>
                    <el-dialog title="修改信息"
                               :visible.sync="dialogFormVisible"
                               :close-on-click-modal="false"
                               @close="onClose">
                        <el-form ref="form"
                                 :model="form"
                                 :rules="rules"
                                 label-width="100px"
                                 class="demo-form">
                            <el-form-item label="新闻编号" prop="nid">
                                <el-input v-model="form.nid"></el-input>
                            </el-form-item>
                            <el-form-item label="主题编号" prop="ntid">
                                <el-input v-model="form.ntid"></el-input>
                            </el-form-item>
                            <el-form-item label="新闻标题" prop="ntitle">
                                <el-input type="textarea" v-model="form.ntitle"></el-input>
                            </el-form-item>
                            <el-form-item label="新闻作者" prop="nauthor">
                                <el-input v-model="form.nauthor"></el-input>
                            </el-form-item>
                            <el-form-item label="创建日期" prop="ncreateDate">
                                <el-date-picker type="date"
                                                placeholder="选择日期"
                                                v-model="form.ncreateDate"
                                                style="width: 100%;"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="图片路径" prop="npicPath">
                                <el-input v-model="form.npicPath"></el-input>
                            </el-form-item>
                            <el-form-item label="新闻内容" prop="ncontent">
                                <el-input type="textarea" v-model="form.ncontent"></el-input>
                            </el-form-item>
                            <el-form-item label="修改时间" prop="nmodifyDate">
                                <el-date-picker type="date" 
                                                placeholder="修改时间" 
                                                v-model="form.nmodifyDate" 
                                                style="width: 100%;"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="备注信息" prop="nsummary">
                                <el-input type="textarea" v-model="form.nsummary"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
                                <el-button @click="resetForm('form')">重置</el-button>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" 
                                       @click="dialogFormVisible = false;loadUpdate">确 定
                            </el-button>
                        </div>
                    </el-dialog>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--
            @size-change，pageSize 改变时会触发
            @current-change ， currentPage 改变时会触发
            :current-page 当前页码
            :page-sizes  选择每页显示个数
            :page-size  默认每页显示条目个数，支持 .sync 修饰符
            layout 组件布局，
            :total 总条目数
            -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
    <script>
        new Vue({
            el:"#root",
            data(){
                return{
                    newsData:[],
                    pageNum: 1, // 当前页
                    pageSize: 5, // 每页显示条目
                    total: '' ,// 条目总数
                    dialogFormVisible: false,
                    form: {
                        delivery: false,
                        type: [],
                        nid:'',
                        ntid:'',
                        ntitle:'',
                        nauthor:'',
                        ncreateDate:'',
                        npicPath:'',
                        ncontent:'',
                        nmodifyDate:'',
                        nsummary:''
                    },
                    rules: {
                        nid: [
                            { required: true, message: '请输入新闻编号', trigger: 'blur' },
                            { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
                        ],
                        ntid: [
                            { required: true, message: '请输入主题编号', trigger: 'blur' }
                        ],
                        ntitle: [
                            { required: true, message: '请输入新闻标题', trigger: 'blur' }
                        ],
                        nauthor: [
                            { required: true, message: '请输入新闻作者', trigger: 'blur' }
                        ],
                        ncreateDate: [
                            { type: 'date', required: true, message: '请选择创建日期', trigger: 'change' }
                        ],
                        npicPath: [
                            { required: true, message: '请输入图片路径', trigger: 'blur' }
                        ],
                        ncontent: [
                            { required: true, message: '请输入新闻内容', trigger: 'blur' }
                        ],
                        nmodifyDate: [
                            { type: 'date', required: true, message: '请选择修改时间', trigger: 'change' }
                        ],
                        nsummary: [
                            { required: true, message: '请输入备注信息', trigger: 'blur' }
                        ],
                    },
                    formLabelWidth: '120px'
                }
            },

            methods: {
                onClose() {
                    this.form = '';
                },
                clean() {
                    // this.form = '';
                    this.dialogFormVisible = true;
                    // this.show();
                },
                show() {
                    this.dialogFormVisible = true;
                },
                toggleSelection(rows) {
                    if (rows) {
                        rows.forEach(row => {
                            this.$refs.multipleTable.toggleRowSelection(row);
                        });
                    } else {
                        this.$refs.multipleTable.clearSelection();
                    }
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                handleEdit(index, row) {
                    console.log(index, row);
                },
                getDate(index){
                  this.form = this.newsData[index];
                },
                handleDelete(index, row) {
                    this.$confirm('是否确定删除此条数据','提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        // center: true
                    }).then(() => {
                        let url = `/news/delete/${row.nid}`;
                        axios.delete(url).then(resp => {
                            this.loadAll();
                            console.log(resp.data);
                        });
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                    // console.log(index, row);
                },
                loadAll() {
                    //then()回调函数,获取后台响应的数据
                    let url = '/news/findAll';
                    axios.get(url).then(resp => {
                        this.newsData = resp.data;
                        console.log(resp.data);
                    });
                },
                loadUpdate() {
                    let url = 'news/update';
                    // let news = JSON.parse(this.form);
                    axios.put(url, this.form).then(resp => {
                        this.loadAll();
                        console.log(resp.data);
                    });
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            alert('submit!');
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                },
                loadAdd() {
                    let url = 'news/insert';
                    axios.post(url,params).then(resp => {
                        console.log(resp.data);
                    });
                },
                handleSizeChange(val) {
                    this.pageSize = val;
                    this.loadPage(this.pageNum,this.pageSize);
                    console.log(`每页 ${val} 条`);
                },
                handleCurrentChange(val) {
                    this.pageNum = val;
                    this.loadPage(this.pageNum,this.pageSize);
                    console.log(`当前页: ${val}`);
                },
                loadPage(pageNum,pageSize) {
                    let url = '/news/page';
                    axios.get(url,{
                        params:{
                            // pageNum:this.pageNum,
                            // pageSize:this.pageSize
                            pageNum,
                            pageSize
                        }
                    }).then(resp => {
                        resp.data.list.get
                        this.newsData = resp.data.list;
                        this.total = resp.data.total;
                        // this.total = resp.data.list.total;
                        console.log(resp.data);
                    });
                }
            },
            created(){
                this.loadPage(this.pageNum,this.pageSize);
                // this.loadAll();
            }
        })
    </script>

</body>
</html>

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/409287.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

用jsp实现简单登入注册界面功能（css美化）（软件idea）

用jsp实现简单登入注册界面功能（css美化）（软件idea）

思路&#xff1a;创建登入界面&#xff08;login&#xff09;&#xff0c;再创建登入成功与登入失败界面&#xff08;loginsuccess与loginfail&#xff09;&#xff0c;再创建注册成功界面&#xff08;registersuccess&#xff09;与注册界面&#xff08;register&#xff09;以…
阅读更多...
用HTML实现简易版计算器

用HTML实现简易版计算器

计算器功能&#xff1a;实现了加减乘除、清零、回退、四则运算、幂运算、根式运算等等。 运行结果如下&#xff1a; 引入的图片&#xff1a;back.png HTML部分&#xff1a;用table表格添加计算器的按键&#xff0c;给每个按键设置一个相应的单击事件&#xff0c;点击一个按键后…
阅读更多...
RuoYi-Vue——图标使用

RuoYi-Vue——图标使用

使用若依的小伙伴们&#xff0c;是否有遇到找图标的烦恼。若依框架里图标分两种&#xff0c; 1.用在表格中的图标&#xff1a; 2.用在菜单及个人信息的图标&#xff1a; 下面我就针对这两种图标给大家总结一下。 1.表格图标&#xff08;ElementUI图标Icon&#xff09; 若依的表…
阅读更多...
【JavaScript】五个常用功能/案例：判断特定结尾字符串 | 获取指定字符串 | 颜色字符串转换 | 字符串转驼峰格式 | 简易购物车

【JavaScript】五个常用功能/案例：判断特定结尾字符串 | 获取指定字符串 | 颜色字符串转换 | 字符串转驼峰格式 | 简易购物车

CSDN话题挑战赛第2期 参赛话题&#xff1a;学习笔记 &#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&#xff09; &#x1f5a5;️ TypeScript知识总…
阅读更多...
layui数据表格的使用（前端和后端）

layui数据表格的使用（前端和后端）

数据表格&#xff08;纯前端&#xff09; 快速使用 首先需要引入layui的css和js <link rel"stylesheet" href"../static/layui/css/layui.css"> <script src"../static/layui/layui.js" charset"utf-8"></script>…
阅读更多...
如何搭建vue框架-1

如何搭建vue框架-1

提示&#xff1a;前端新人&#xff0c;初来乍到&#xff0c;若文章写的不好大家多包涵。 文章目录前言一、vue是什么&#xff1f;二、ElementUI是什么&#xff1f;三、搭建前的准备四、安装步骤1.安装webpack2.安装vue-cli3.通过vue-cli构建项目4.启动项目5.其他总结前言 基于…
阅读更多...
element-ui表格编辑

element-ui表格编辑

前言&#xff1a; 准备&#xff1a; element-uivue3vscode 实现步骤&#xff1a; 数据标定打开激活编辑保存 1. 设定需要编辑的表格单元格是否编辑标识 在请求后台表格数据时进行一个二次包装&#xff0c;如果后端已经处理则不需要在进行包装&#xff08;此处包装是否编辑…
阅读更多...
手撕前端面试题【javascript~模板字符串、类继承、参数解析器、生成页码等】

手撕前端面试题【javascript~模板字符串、类继承、参数解析器、生成页码等】

前端的那些基本标签&#x1f353;&#x1f353;模板字符串&#x1f353;&#x1f353;类继承&#x1f353;&#x1f353;参数解析器&#x1f353;&#x1f353;生成页码&#x1f353;&#x1f353;js中哪些操作会造成内存泄漏?html页面的骨架&#xff0c;相当于人的骨头&#…
阅读更多...
react router6.x官方DEMO

react router6.x官方DEMO

Tutorial v6.4.2 | React Router 初始化项目 import React from "react"; import ReactDOM from "react-dom/client"; import {createBrowserRouter,RouterProvider,Route, } from "react-router-dom"; import "./index.css";const …
阅读更多...
用CSS设置颜色、背景和图像效果

用CSS设置颜色、背景和图像效果

&#x1f4dc;个人简介 ⭐️个人主页&#xff1a;微风洋洋&#x1f64b;‍♂️ &#x1f351;博客领域&#xff1a;编程基础&#x1f4a1;,后端&#x1f4a1;,大数据,信息安全 &#x1f345;写作风格&#xff1a;干货,干货,还是tmd的干货 &#x1f338;精选专栏&#xff1a;【J…
阅读更多...
js数组常用方法（19种）|你会的到底有多少呢？

js数组常用方法（19种）|你会的到底有多少呢？

一、改变原数组的方法 1.push&#xff08;&#xff09; 末尾添加数据 语法: 数组名.push(数据) 作用: 就是往数组末尾添加数据 返回值: 就是这个数组的长度 //push var arr [10, 20, 30, 40] res arr.push(20) console.log(arr);//[10,20,30,40,20] console.log(res);//52. …
阅读更多...
【Cesium】使用TLE轨道两行数计算轨道信息，并生成CZML格式文件

【Cesium】使用TLE轨道两行数计算轨道信息，并生成CZML格式文件

TLE为轨道两行数&#xff0c;简单的说是用两行数字表示轨道的相关信息&#xff0c;本文即用轨道两行数来计算任一时刻卫星的位置信息和速度信息&#xff0c;并生成CZML文件能够读取的格式 1、satellite.js库简介 简而言之&#xff0c;satellite.js库可以根据TLE轨道两行数&…
阅读更多...
vue 项目适配笔记本1920*1080 125%缩放

vue 项目适配笔记本1920*1080 125%缩放

前言 在台式机上开发pc端项目时&#xff0c;由于是1920*1080的分辨路和100缩放&#xff0c;看起来是没有问题。在笔记本上有问题 因为现在很多14寸的笔记本&#xff0c;出厂默认就是125%或150%的显示。导致很多时候我们的项目&#xff0c;自己开发的时候都是按照100%比例来开发…
阅读更多...
Vue使用Serial连接串口

Vue使用Serial连接串口

本来只是随手记录一下&#xff0c;发现看的人多了&#xff0c;想着还是修复一下bug吧&#xff0c;供各位看官指正 2022-10-24本次更新: 1、修复在不支持Serial的情况下&#xff0c;控制台报错 2022-09-19本次更新: 1、修复了传输数据接收分隔的情况(增加数据缓存) 2、修复串口连…
阅读更多...
【中兴】web训练营~一文带你走进前端 | 百图制作

【中兴】web训练营~一文带你走进前端 | 百图制作

&#x1f4e2;作者简介&#xff1a;物联网领域创作者&#xff0c;&#x1f3c5;阿里云专家博主&#x1f3c5; &#x1f3c5;华为云享专家&#x1f3c5; ✒️个人主页&#xff1a;Choice~ &#x1f310;格言&#xff1a;可正因为难&#xff0c;才有价值&#xff01;&#x1f536…
阅读更多...
Linux 使用Nginx部署web(vue、react)项目

Linux 使用Nginx部署web(vue、react)项目

前言 本文基于&#xff1a;操作系统 CentOS 7.6 使用的工具&#xff1a;Xshell7、Xftp7 1.安装所需依赖 安装gcc yum -y install gcc安装pcre、pcre-devel yum -y install pcre pcre-devel安装zlib、zlib-devel yum install -y zlib zlib-devel安装openssl、openssl-dev…
阅读更多...
【uni-app】点击左上角返回按钮，弹出弹窗或者是携带参数返回上一页

【uni-app】点击左上角返回按钮，弹出弹窗或者是携带参数返回上一页

目录 1、弹出弹窗 2、把这一页的数据带回到上一页&#xff08;获取下一页的数据 &#xff09; 3、跳转页面并携带参数&#xff0c;接受页获取参数 1、弹出弹窗 当我返回上一页的时候需要做一个判断是否需要保存 onBackPress 只支持APP和H5 但不支持小程序 &#xff0c;可以…
阅读更多...
Java web—访问http://localhost:8080/xx/xx.jsp报404错误问题

Java web—访问http://localhost:8080/xx/xx.jsp报404错误问题

由于我们在eclipse ee中把项目部署在web端经常会出现报404错误。 原因为&#xff1a; 404状态码是一种http状态码&#xff0c;其意思是&#xff1a; 所请求的页面不存在或已被删除。通俗的讲就是当用户输入了错误的链接时&#xff0c;返回的页面。 以下描述几种情况&#xff1a…
阅读更多...
IDEA从零到精通（24）之lombok插件的安装与使用

IDEA从零到精通（24）之lombok插件的安装与使用

文章目录作者简介引言导航概述安装插件使用小结导航热门专栏推荐作者简介 作者名&#xff1a;编程界明世隐 简介&#xff1a;CSDN博客专家&#xff0c;从事软件开发多年&#xff0c;精通Java、JavaScript&#xff0c;博主也是从零开始一步步把学习成长、深知学习和积累的重要性…
阅读更多...
【Vue】 组件封装

【Vue】 组件封装

目录1 组件封装1.1 全局注册1.2 局部注册1.2.1 命名1.2.2 引用组件1.2.2.1 传统写法1.2.2.2 setup1.2.2.3 easycom1.3 父子组件间的数据传递1.3.1 子组件 data() 中设置数据1.3.2 父组件通过 prop 将数据传递给子组件1.3.3 子组件不能直接修改 prop 中的值1.3.4 子组件通过 emi…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023