天天看点

Vue+SpringBoot+MyBatis-Plus 实现用户信息的修改及模拟充值

作者:架构师全栈之路
使用MyBatis-Plus可以快速实现用户信息的修改。传统的需要编写控制层的代码、然后是服务层的代码逻辑、然后是dao层的代码逻辑、以及编写对应的sql语句。使用MyBatis-Plus可以省略编写sql语句,真的很强、代码量比降低一半还要多。特此记录

1、模拟充值

1.1充值前信息

前台信息展示、使用框架可以迅速搭建起一个页面(Vue+ElementUi实现)

Vue+SpringBoot+MyBatis-Plus 实现用户信息的修改及模拟充值
Vue+SpringBoot+MyBatis-Plus 实现用户信息的修改及模拟充值

1.2 模拟充值

点击充值按钮、弹出一个界面、用户输入充值金额。

Vue+SpringBoot+MyBatis-Plus 实现用户信息的修改及模拟充值

1.3 充值信息后

金额在基础上增加、后端数据库也增加对应金额。这里后台有一个操作、就是充值成功后、将充值后的数据也返回给前端、前端进行数据展示替换

Vue+SpringBoot+MyBatis-Plus 实现用户信息的修改及模拟充值
Vue+SpringBoot+MyBatis-Plus 实现用户信息的修改及模拟充值

2、模拟修改信息

2.1信息修改前

同修改密码流程

Vue+SpringBoot+MyBatis-Plus 实现用户信息的修改及模拟充值
Vue+SpringBoot+MyBatis-Plus 实现用户信息的修改及模拟充值

2.2 修改信息

修改成功、弹窗提示

Vue+SpringBoot+MyBatis-Plus 实现用户信息的修改及模拟充值

2.3 修改信息后

前台展示信息以及后台数据库都改变

Vue+SpringBoot+MyBatis-Plus 实现用户信息的修改及模拟充值
Vue+SpringBoot+MyBatis-Plus 实现用户信息的修改及模拟充值

3、核心源码

3.1 前端核心代码

Vue+SpringBoot+MyBatis-Plus 实现用户信息的修改及模拟充值

3.2 后端核心代码

Vue+SpringBoot+MyBatis-Plus 实现用户信息的修改及模拟充值