SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改

简介: SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改

crud

CRUD(Create, Read, Update, Delete)是指数据存储和管理中最基本的操作。在软件开发中,特别是在数据库操作中,CRUD是一个常见的术语,用于描述对数据的基本操作:

  1. Create(创建):向数据库中创建新的记录或实体。这通常对应于数据库中的 INSERT 操作。
  2. Read(读取):从数据库中检索(或读取)现有的记录或实体。这对应于数据库中的 SELECT 操作。
  3. Update(更新):更新数据库中现有的记录或实体的信息。这对应于数据库中的 UPDATE 操作。
  4. Delete(删除):从数据库中删除现有的记录或实体。这对应于数据库中的 DELETE 操作。

这些操作是构成大多数应用程序数据管理和持久化的基础。在实际开发中,通常会使用各种技术栈来实现这些操作,例如:

  • 数据库操作语言:如SQL(对于关系型数据库)或NoSQL查询语言(对于非关系型数据库)。
  • ORM框架:如Hibernate、Spring Data JPA等,用于简化数据库操作和对象映射。
  • RESTful API:通过HTTP协议的POST(创建)、GET(读取)、PUT/PATCH(更新)、DELETE(删除)方法来实现CRUD操作。

在Web开发中,常见的应用场景包括用户管理、商品管理、文章管理等,这些都依赖于对数据进行CRUD操作来实现数据的持久化和管理。

如果你有具体的CRUD操作相关的问题或需要更详细的解释,请随时提出!

新增操作

正常我们都是从新增功能书写

查看源码

显示的是这个

在vue里面开下来

这样就能显示

点击确定

就能把数据发送到后台进行保存

 //弹出添加窗口
            handleCreate() {
                this.dialogFormVisible = true;
            },
 
            //重置表单
            resetForm() {
            },
 
            //添加
            handleAdd() {
                //绑定的是确定按钮 发起请求
                axios.post("/users", this.formData).then((res) => {
                    //判断当前操作是否成功
                    if (res.data.flag) {
                        //关闭弹层
                        this.dialogFormVisible = false;
                    }
                }).finally(()=>{
                    //重新加载页面
                    this.getAll();
                })
            },

给用户信息展示

//添加
handleAdd() {
    //绑定的是确定按钮 发起请求
    axios.post("/users", this.formData).then((res) => {
        //判断当前操作是否成功
        if (res.data.flag=true) {
            //关闭弹层
            this.dialogFormVisible = false;
            this.$message.success("人员数据添加成功");
        }else {
            this.$message.error("人员数据添加失败");
        }
    }).finally(()=>{
        //重新加载页面
        this.getAll();
    })
},

每次添加的时候都要清理数据

//弹出添加窗口
handleCreate() {
    this.dialogFormVisible = true;
    this.resetForm();
},
 
//重置表单
resetForm() {
    this.formData={};
},

不然数据就会一直留着

让取消按钮绑定功能

//取消
cancel() {
  //关闭弹窗
    this.dialogFormVisible = false;
  //消息提示
    this.$message.info("操作取消");
},

小结

设置数据库添加数据的时候主键自增

axios发送post请求

请求路径是/users

请求参数是this.formData

主要是异步调用

异步调用(Asynchronous Invocation)是指在编程中,某个操作可以在不阻塞当前线程或进程的情况下进行,这样可以提高程序的并发性和响应性能。

在传统的同步编程中,当程序执行一个操作时,会阻塞当前线程直到操作完成才继续执行下一步操作。这种方式在处理大量I/O密集型操作时效率较低,因为线程在等待操作完成时处于空闲状态。

异步调用的核心概念是,当一个操作发起后,程序不会等待操作完成再进行下一步,而是继续执行后续的操作。操作完成后,通过回调函数、事件通知或者Future/Promise等机制来处理操作的结果或状态。这样能够使程序在等待I/O操作完成时,可以继续处理其他任务,提高了程序的并发性和响应性。

异步调用在现代编程中非常常见,特别是在处理网络请求、数据库访问、GUI事件处理等场景下。常见的异步编程模型包括:

  1. 回调函数(Callback):操作完成后调用预定义的回调函数处理结果。
  2. 事件驱动模型(Event-driven):程序通过事件和事件处理器来响应异步操作的完成。
  3. Future和Promise:Future表示一个可能尚未完成的操作的结果,Promise用于设置操作完成后的结果。
  4. 异步/await:现代语言和框架如Python的asyncio、JavaScript的async/await等,提供了更直观和易于理解的异步编程方式。

异步调用可以显著提高程序的性能和响应速度,但也需要开发人员熟练掌握异步编程的相关概念和技术,以避免因并发操作引发的复杂性和错误。

删除操作

首先找入口

然后书写

// 删除
handleDelete(row) {
    axios.delete("/users/"+row.id).then((res)=>{
        if (res.data.flag) {
            this.$message.success("人员数据删除成功");
        }else {
            this.$message.error("人员数据删除失败");
        }
    }).finally(()=>{
        //重新加载页面
        this.getAll();
    });;
},

我们要加判定提醒

// 删除
handleDelete(row) {
    this.$confirm("此操作永久删除当前信息,是否继续?","警告",{type:"info"}).then(()=>{
        axios.delete("/users/"+row.id).then((res)=>{
            if(res.data.flag){
                this.$message.success("删除成功");
            }else{
                this.$message.error("删除失败");
            }
        }).finally(()=>{
            this.getAll();
        });
    }).catch(()=>{
        this.$message.info("取消操作");
    });
},

confirm加提醒

then是成功 catch是失败

修改操作 加载数据

修改功能就是一个列表功能加一个新增功能

首先我们要做的是列表 弹出数据

与上面的html代码进行了数据绑定

动态数据

如果访问此网页

别人修改然后你打不开了

所以我们要加一个flag的判定

//弹出编辑窗口
handleUpdate(row) {
    axios.get("/users/"+row.id).then((res)=>{
        if(res.data.flag && res.data.data !=null){
            this.dialogFormVisible4Edit=true;
            this.formData = res.data.data;
        }else{
            this.$message.error("数据同步失败,自动刷新")
        }
    }).finally(()=>{
        //刷新数据
       this.getAll();
    });
},

加载数据很关键

修改操作

数据加载上来了

接下来我们进行修改吧

查看静态页面弹层绑定的数据模型

绑定的数据模型是formData

与添加操作绑定的是一个数据模型

我们只需要改axios的请求方式和关闭哪个图层就行

//修改
handleEdit() {
    //与添加功能绑定的是一个数据模型
    //绑定的是确定按钮 发起请求
    axios.put("/users", this.formData).then((res) => {
        //判断当前操作是否成功
        if (res.data.flag) {
            //关闭弹层
            this.dialogFormVisible4Edit = false;
            this.$message.success("人员数据修改成功");
        }else {
            this.$message.error("人员数据修改失败");
        }
    }).finally(()=>{
        //重新加载页面
        this.getAll();
    });
},

为了方便我们统一书写弹层方法

cancel方法

小结

目录
打赏
0
1
1
0
38
分享
相关文章
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局:打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中,精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器,通过锚点系统提供了精确定位能力,使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能,帮助你掌握这一核心技术。
56 4
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
240 1
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
141 3
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
304 70
48.[HarmonyOS NEXT RelativeContainer案例五] 精确表单布局:辅助线定位技术打造专业级UI
在HarmonyOS NEXT的UI开发中,表单是常见且重要的界面元素。创建对齐精确、布局合理的表单需要精细的定位控制。RelativeContainer提供的辅助线(Guideline)功能,为表单布局提供了强大的支持。本教程将详细讲解如何使用RelativeContainer的辅助线功能实现精确的表单布局,帮助你掌握这一专业级UI技术。
59 7
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
202 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
前端uin后端php社交软件源码,快速构建属于你的交友平台
这是一款功能全面的社交软件解决方案,覆盖多种场景需求。支持即时通讯(一对一聊天、群聊、文件传输、语音/视频通话)、内容动态(发布、点赞、评论)以及红包模块(接入支付宝、微信等第三方支付)。系统采用前后端分离架构,前端基于 UniApp,后端使用 PHP 框架(如 Laravel/Symfony),配合 MySQL/Redis 和自建 Socket 服务实现高效实时通信。提供用户认证(JWT 集成)、智能匹配算法等功能,助力快速上线,显著节约开发成本。
102 1
前端uin后端php社交软件源码,快速构建属于你的交友平台
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
254 12
构建高效Java后端与前端交互的定时任务调度系统
通过以上步骤,我们构建了一个高效的Java后端与前端交互的定时任务调度系统。该系统使用Spring Boot作为后端框架,Quartz作为任务调度器,并通过前端界面实现用户交互。此系统可以应用于各种需要定时任务调度的业务场景,如数据同步、报告生成和系统监控等。
140 9
【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
本文介绍了如何配置和启动基于Java的若依(RuoYi)项目,涵盖后端和前端的详细步骤。首先,准备Redis、MySQL以及IDE(如Idea和VS)。接着,通过GitHub获取代码并导入到IDE中,执行必要的SQL文件和配置数据库密码。然后,启动Redis并进行相关配置。最后,按照前端配置步骤克隆前端代码库,打开终端执行命令完成前端配置。整个过程详细记录了每一步的操作,帮助开发者顺利部署若依项目。 如果你觉得有帮助,请点赞、关注和收藏,这将是我持续分享的动力!
2566 2

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问