vue入门(增查改!)

<template><div><!-- 搜索栏 --><el-card id="search"><el-row><el-col :span="20"><el-input v-model="searchModel.name" placeholder="根据名字查询"></el-input><el-input v-model="searchModel.email" placeholder="根据邮件查询"></el-input><el-button @click="searchList" type="primary" round icon="el-icon-search">搜索</el-button></el-col><el-col :span="4"><el-button @click="openEditUI(null)" type="primary" icon="el-icon-plus" circle></el-button></el-col></el-row></el-card><!-- 结果列表 --><el-table :data="userList" style="width: 100%"><el-table-column type="index" label="#" width="180"><template slot-scope="scope">{{ (searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1 }}</template></el-table-column><el-table-column prop="id" label="用户id" width="180"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="age" label="年龄"></el-table-column><el-table-column prop="email" label="电子邮件"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button @click="openEditUI(scope.row.id)" type="primary" icon="el-icon-edit" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></template></el-table-column></el-table><!--  分页功能 --><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page="searchModel.pageNo" :page-sizes="[1, 5, 10, 15]" :page-size="searchModel.pageSize"layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination><!-- 对话框 --><!-- Form --><el-dialog :title="title" :visible.sync="dialogFormVisible"><el-form :model="userForm" :rules="rules"><el-form-item label="名字" :label-width="formLabelWidth"><el-input v-model="userForm.name" autocomplete="off"></el-input></el-form-item><el-form-item label="age" :label-width="formLabelWidth"><el-input v-model="userForm.age" autocomplete="off"></el-input></el-form-item><el-form-item label="email" :label-width="formLabelWidth"><el-input v-model="userForm.email" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="performAction">确 定</el-button></div></el-dialog></div>
</template><script>
import axios from 'axios';
export default {data() {return {title: '添加',userForm: {name: '',age: '',email: ''},dialogFormVisible: false,total: 0,searchModel: {pageNo: 1,pageSize: 5,name: '',email: '',},userList: [],formLabelWidth: '50px', // 设置标签的宽度rules: {name: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],},}},methods: {openEditUI(id) {if (id == null) {this.title = "新增用户";this.userForm = {name: '',age: '',email: ''};} else {this.title = "修改用户";// 根据id查询用户数据axios.get(`/api/sys/demoTable/` + id).then(response => {this.userForm = response.data.data; // 填充编辑数据this.dialogFormVisible = true;}).catch(error => {console.error('获取编辑数据失败:', error);});}this.dialogFormVisible = true;},performAction() {if (this.title === '新增用户') {const newData = {name: this.userForm.name,age: this.userForm.age,email: this.userForm.email};axios.post('/api/sys/demoTable/create', newData).then(response => {if (response.data.code == 1) {this.$message({message: '添加成功',type: 'success'});// 关闭对话框this.dialogFormVisible = false;// 可以更新列表,重新加载数据等操作// 重新加载数据this.getUserList();} else {console.error('数据添加失败');}}).catch(error => {console.error('添加数据失败:', error);});} else if (this.title === '修改用户') {axios.put(`/api/sys/demoTable/update`, this.userForm).then(response => {if (response.data.code === 1) {this.$message({message: '更新成功',type: 'success'});this.dialogFormVisible = false;this.getUserList();} else {console.error('数据更新失败');}}).catch(error => {console.error('更新数据失败:', error);});}},// 分页大小变化handleSizeChange(pageSize) {this.searchModel.pageSize = pageSize;this.getUserList();},// 当前页码变化handleCurrentChange(pageNo) {this.searchModel.pageNo = pageNo;this.getUserList();},// 获取用户列表getUserList() {axios.get('/api/sys/demoTable/list', { params: this.searchModel }).then(response => {console.log(response);const data = response.data.data;this.userList = data.rows;this.total = data.total;}).catch(error => {console.error('获取用户列表失败:', error);});},searchList() {this.searchModel.pageNo = 1; // 重置页码为1,以获取新的查询结果// 构建查询参数const queryParams = {name: this.searchModel.name,email: this.searchModel.email,pageNo: this.searchModel.pageNo,pageSize: this.searchModel.pageSize};// 发送 GET 请求axios.get('/api/sys/demoTable/list', { params: queryParams }).then(response => {const data = response.data.data;this.userList = data.rows;this.total = data.total;}).catch(error => {console.error('获取用户列表失败:', error);});}},mounted() {// 初始化加载用户列表this.getUserList();}}
</script><style>
#search .el-input {width: 300px;margin-right: 20px;
}
</style>

思路

关于 查询和分页的结合分析

1.查询也就是在页面上显示数据,所以用到了分页。

2. 用Mybatis-plus , 进行分页用Map返回数据,注意关键点pageNo和pageSize,这是前端请求头请求的数据,后端要返回一个查询到的结果集和总页数

    @GetMapping("/list")public R<Map<String, Object>> getAllList(@RequestParam(value = "name", required = false) String name,@RequestParam(value = "email", required = false) String email,@RequestParam(value = "pageNo") Long pageNo,@RequestParam(value = "pageSize") Long pageSize) {

3. 关于 添加和修改的功能结合分析

    *  添加按钮和修改按钮,共用一个对话框,用data:title,  的值区分 两个请求。

   * 添加按钮:id为null 或 undifined,  

      而修改按钮id :肯定是有值的。

   *从而分别为title赋值 ,添加 | 修改,

在起一个方法,if ( 添加==添加 ){

添加的请求

} else{

  修改的请求

}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STM32 FLASH 读写数据

1. 《STM32 中文参考手册》&#xff0c;需要查看芯片数据手册&#xff0c;代码起始地址一般都是0x8000 0000&#xff0c;这是存放整个项目代码的起始地址 2. 编译信息查看代码大小&#xff0c;修改代码后第一次编译后会有这个提示信息 2.1 修改代码后编译&#xff0c;会有提示…

python3.73安装教程,python3.10安装教程

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;python3.73安装教程&#xff0c;python3.10安装教程&#xff0c;现在让我们一起来看看吧&#xff01; Python目前已支持所有主流操作系统&#xff0c;在Linux,Unix,Mac系统上自带Python环境&#xff0c;一般默认装的是P…

你敢信?代码小白30min就能搭建一套酷炫级的驾驶舱!

大量研究结果表明&#xff0c;人类通过图像获取信息的速度比通过阅读文字获取信息的速度要快很多。 近几年&#xff0c;数据可视化在企业中越发“流行”&#xff0c;将数字以可视化的形式展示&#xff0c;不仅清晰明了地展现企业真正的实力&#xff0c;也能让管理者快速了解细节…

PG-DBA培训12:PostgreSQL物理备份与恢复实战

一、风哥PG-DBA培训12&#xff1a;PostgreSQL物理备份与恢复实战 课程目标&#xff1a; 本课程由风哥发布的基于PostgreSQL数据库的系列课程&#xff0c;本课程属于PostgreSQL备份恢复与迁移升级阶段之PostgreSQL物理备份与恢复实战&#xff0c;学完本课程可以掌握&#xff1…

Linux6.39 Kubernetes Pod控制器

文章目录 计算机系统5G云计算第三章 LINUX Kubernetes Pod控制器一、Pod控制器及其功用二.pod控制器有多种类型1.ReplicaSet2.Deployment3.DaemonSet4.StatefulSet5.Cronjob 三、Pod与控制器之间的关系1.Deployment2.SatefulSet1&#xff09;为什么要有headless2&#xff09;为…

gulimall-缓存-缓存使用

文章目录 前言一、本地缓存与分布式缓存1.1 使用缓存1.2 本地缓存1.3 本地模式在分布式下的问题1.4 分布式缓存 二、整合redis测试2.1 引入依赖2.2 配置信息2.3 测试 三、改造三级分类业务3.1 代码改造 四、高并发下缓存失效问题4.1 缓存穿透4.2 缓存雪崩4.3 缓存击穿 五、分布…

C++学习第十二天----指针

1.自动存储&#xff0c;静态存储和动态存储 c有3种管理数据内存的方式&#xff1a;自动存储&#xff0c;静态存储和动态存储&#xff08;有时也叫自由存储空间或堆&#xff09;&#xff1b;C其实还有第4种类型----线程存储&#xff1b; 第一&#xff0c;自动存储&#xff0c;在…

Talk | ICCV‘23 HumanMAC:简洁易拓展的人体动作预测新框架

​ 本期为TechBeat人工智能社区第522期线上Talk&#xff01; 北京时间8月16日(周三)20:00&#xff0c;清华大学博士生—陈凌灏的Talk已准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “HumanMAC-简洁易拓展的人体动作预测新框架”&#xff0c;介绍了人体动…

linux 学习————LNMP之分布式部署

目录 一、概述 二、LNMP环境部署 三、配置nginx 四、 配置php使nginx能够解析.php 五、配置mysql 六、配置discuz进行登录论坛访问测试 一、概述 LNMP代表 Linux、Nginx、MySQL、PHP&#xff0c;是一种常用的服务器架构。它由以下组件组成&#xff1a; Linux&#xff1a;作…

【js】js中apply()、bind()、call()用法

这三个方法的作用基本上相同&#xff0c;用法上有一些不同&#xff0c;下面先对比一下它们的用法&#xff1a; apply&#xff1a;调用一个具有给定 this 值的函数&#xff0c;以及以一个数组&#xff08;或一个类数组对象&#xff09;的形式提供的参数。 语法&#xff1a; ap…

Metasploitable2靶机漏洞复现

一、信息收集 nmap扫描靶机信息 二、弱口令 1.系统弱口令 在Kali Linux中使用telnet远程连接靶机 输入账号密码msfadmin即可登录 2.MySQL弱口令 使用mysql -h 靶机IP地址即可连接 3.PostgreSQL弱密码登录 输入psql -h 192.168.110.134 -U postgres 密码为postgres 输入\…

每天一个电商API分享:淘宝商品销量接口,获取淘宝商品销售数据(淘宝商品精准销量、总销量、月销量)

开发背景 商品销量是商家决策的重要参考指标之一。通过淘宝商品销量接口&#xff0c;商家可以获取到实时的销量信息&#xff0c;从而更好地进行库存管理、供应链计划和市场推广等决策。 淘宝商品销量接口可以提供丰富的销售数据&#xff0c;包括销售数量、销售额、销售渠道等…

unity中导入自定义模型

unity中导入自定义模型 准备软件步骤1从SoildWorks中导出模型为STEP格式2将STEP格式文件导入到3DS Max中&#xff0c;再导出为FBX格式3将FBX格式导入至unity中 准备软件 需要SoildWorks、3DS Max和Unity 3D软件步骤 1从SoildWorks中导出模型为STEP格式 2将STEP格式文件导入到…

【数据结构】 List与顺序表及接口的实现

文章目录 什么是List常见接口介绍线性表顺序表顺序表接口的实现add在末尾新增元素在 pos 位置新增元素判定是否包含某个元素查找某个元素对应的位置获取 pos 位置的元素给 pos 位置的元素设为 value删除第一次出现的关键字key获取顺序表的长度清空顺序表 顺序表的优缺点优点&am…

全面掌握 Jaeger 分布式调用链路跟踪理论和实战,Go 为所有使用 go-resty 库发起 HTTP 请求集成链路跟踪 jaeger(附源码)

全面掌握 Jaeger 分布式调用链路跟踪理论和实战,Go 为所有使用 go-resty 库发起 HTTP 请求集成链路跟踪 jaeger(附源码)。 介绍一个开源的分布式跟踪系统 Jaeger,首先从理论基础知识开始学习,将学习如何在 HTTP 请求中集成链路跟踪,以及如何在 GORM 框架实现,最后学习 …

Qt应用开发(基础篇)——滚屏区域基类 QAbstractScrollArea

一、前言 QAbstractScrollArea滚屏区域抽象类继承于QFrame&#xff0c;QFrame继承于QWidget&#xff0c;是QListview(列表浏览器)、QTableview(表格浏览器)、QTextEdit(文本编辑器)、QTextBrowser(文本浏览器)等所有需要滚屏区域部件的抽象基类。 框架类QFrame介绍 QAbstractSc…

java -jar 启动服务后,关闭命令窗口后服务停止

java -jar 启动服务后&#xff0c;关闭命令窗口后服务停止 问题&#xff1a;当我们用java -jar命令启动服务后&#xff0c;只有一直保持Xshell的窗口开启且正常连接服务器时才能访问服务&#xff0c;当关闭命令窗口时&#xff0c;服务会停止运行 解决&#xff1a;使用nohup命…

java之juc二

JMM 请你谈谈对Volatile的理解 Volatile是jvm提供的轻量级的同步机制&#xff08;和synchronized差不多&#xff0c;但是没有synchronized那么强大&#xff09; 保证可见性不保证原子性禁止指令重排 什么是JMM JMM&#xff1a;java内存模型&#xff0c;不存在的东西&#…

常用Linux命令

常用Linux命令 1. 基本命令 uname -m 显示机器的处理器架构 uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 (SMBIOS / DMI) hdparm -i /dev/hda 罗列一个磁盘的架构特性 hdparm -tT /dev/sda 在磁盘上执行测试性读取操作系统信息 arch 显示机器的处理器架构…

一.RocketMQ概念

RocketMQ概念 1.概念2.应用场景3.MQ的优点和缺点4.常见MQ对比 1.概念 MQ(Message Queue)&#xff0c;是一种提供消息队列服务的中间件&#xff0c;也称为消息中间件&#xff0c;是一套提供了消息生产、存储、消费全过程API的软件系统。 RocketMQ是阿里巴巴2016年MQ中间件&…