天天看點

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 實作使用者資訊的修改及模拟充值