SpringBoot + Ajax 实现个人账目管理系统
引言
Hello，我是Bug终结者，一名热爱后端Java的风趣且幽默的程序员~，本周技术分享为大家带来一个基于SpingBoot + Ajax实现个人账目管理系统，篇幅幽默，继续往下看吧~
快来发现我的宇宙哦~
项目简介
本项目主要记录个人的进出账目和总金额
个人资产管理页面
- 上方是新增人员的姓名和初始资产总额，保存后提交到数据表 t_user_all_money 中
- 下方是所有人员总资产的列表。
- 人员总资产只可以初始化新增、不可以修改和删除
- 进出记录数： 是人员对应在 t_user_iomoney 表中的进出金额的记录数
- 点击保存按钮，列表将马上显示人员的资产总额的记录。
- 初始资产总额允许为空，如果空着，则为 初始资产为 0 元
- 点击明细，可以进入到该用户对应的明细页面
- 点击明细进入资产收支明细页面，需要携带参数 user_id , 即明细的超级链接类似 user_iomoney.html?user_id=1
- 点击保存按钮无论成功与否，提示信息都要显示在 下方提示信息区域
个人资产收支明细页面
- 本页面需要拿到当前的用户的id ，需要使用javascript 从地址中获取 user_id 的参数，从url中读取参数的办法见下文： https://blog.csdn.net/cuipy/article/details/122084823
- 页面中要显示当前人员的姓名和总资产
- 点击返回按钮要回到 user_all_money.html 页面
- 点击保存按钮，将收入/支出明细保存到 t_user_iomoney 表中
- 金额不允许为空，也不允许为0
- 点击保存后，根据支出/收入对该人员的总资产进行相应的变动
- 列表要列出当前用户的所有收入支出的明细。
- 保存收入/支出明细成功后，马上在列表上显示出来。
- 点击保存按钮无论成功与否，提示信息都要显示在 下方提示信息区域
- 点击删除按钮，要提示：您是否确信删除这条记录？
- 删除后，要相应的更新当前人员的总资产。
- 支出的金额不允许小于当前人员的总资产。
开发环境
前端：Jquery+Ajax+Bootstrap+HTML+CSS+JavaScript
后端：Spring Boot+MyBatis
IDE：Jetbrains IDEA
JDK：jdk1.8
效果图
数据表
user_all_money表
CREATE TABLE `t_user_all_money` (
`noid` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(32) NOT NULL COMMENT '用户姓名',
`all_money` decimal(10,2) NOT NULL DEFAULT '0.00' COMMENT '总金额',
PRIMARY KEY (`noid`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4
t_user_iomoney表
CREATE TABLE `t_user_iomoney` (
`noid` int(11) NOT NULL AUTO_INCREMENT,
`user_id` int(11) NOT NULL COMMENT '对应t_user_all_money.noid',
`iotype` tinyint(4) NOT NULL DEFAULT '0' COMMENT '收入/支出； 1 收入 ；2 支出',
`iodetail` varchar(128) DEFAULT NULL COMMENT '收入或支出说明',
`iotime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '收入或支出时间',
`iomoney` decimal(10,2) NOT NULL COMMENT '收入或支出金额',
PRIMARY KEY (`noid`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8mb4
项目结构
前端结构
后端结构
依赖文件
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.6.2</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.wanshi</groupId>
<artifactId>test_springboot</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>test_springboot</name>
<description>test_springboot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<exclusions>
<exclusion>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-logging</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-log4j</artifactId>
<version>1.3.8.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-test</artifactId>
<version>2.1.7.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>5.1.9.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.5</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.1.20</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.2</version>
</dependency>
<dependency>
<groupId>joda-time</groupId>
<artifactId>joda-time</artifactId>
<version>2.10.5</version>
</dependency>
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.11</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.9</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml</artifactId>
<version>5.0.0</version>
</dependency>
<dependency>
<groupId>com.googlecode.juniversalchardet</groupId>
<artifactId>juniversalchardet</artifactId>
<version>1.0.3</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
</includes>
<filtering>false</filtering>
</resource>
<resource>
<directory>src/main/resources</directory>
</resource>
<resource>
<directory>libs/</directory>
<targetPath>libs</targetPath>
<includes>
<include>**/*.jar</include>
</includes>
</resource>
</resources>
</build>
</project>
application.yml
server:
port: 8345
servlet:
context-path: /springbootajax/
spring:
servlet:
multipart:
enabled: true
max-file-size: 300MB
max-request-size: 300MB
jackson:
date-format: yyyy-MM-dd HH:mm:ss
time-zone: Asia/Shanghai
mvc:
async:
request-timeout: 30000
datasource:
driverClassName: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://127.0.0.1:3306/db_zhuangaothree?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai&useSSL=true
username: root
password: 111111
type: com.alibaba.druid.pool.DruidDataSource
initialSize: 2
minIdle: 2
maxActive: 120
maxWait: 60000
timeBetweenEvictionRunsMillis: 60000
minEvictableIdleTimeMillis: 300000
validateQuery: SELECT 1 FROM DUAL
testWhileIdle: true
testOnBorrow: false
testOnReturn: false
poolPreparedStatements: true
maxPoolPreparedStatementPerConnectionSize: 20
filters: stat,wall,log4j
connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=5000
logging:
config: classpath:log4j.properties
核心源码
ResultBean统一返回格式类
package com.wanshi.bean;
public class ResultBean<C> {
private Integer code;
private String msg;
private C data;
private ResultBean(Integer code, String msg, C data) {
this.code = code;
this.msg = msg;
this.data = data;
}
public static ResultBean create(Integer code, String msg, Object data) {
ResultBean res = new ResultBean(code, msg, data);
return res;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public C getData() {
return data;
}
public void setData(C data) {
this.data = data;
}
}
UserIOMoneyController类
package com.wanshi.controller;
import com.wanshi.bean.ResultBean;
import com.wanshi.bean.UserIOMoney;
import com.wanshi.service.UserIOMoneyService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@CrossOrigin
@RequestMapping("/user_iomoney")
public class UserIOMoneyController {
@Autowired
private UserIOMoneyService userIOMoneyService;
@PostMapping("/list")
public ResultBean<List<UserIOMoney>> list(UserIOMoney param) {
ResultBean<List<UserIOMoney>> res = userIOMoneyService.list(param);
return res;
}
@PostMapping("/insert")
public ResultBean<Integer> insert(UserIOMoney param) {
ResultBean<Integer> res = userIOMoneyService.insert(param);
return res;
}
@PostMapping("/delete")
public ResultBean<Integer> delete(UserIOMoney param) {
ResultBean<Integer> res = userIOMoneyService.delete(param);
return res;
}
}博主寄语
至此，系统到此完美结束，该案例通俗易懂，详细一步步带入，通过本案例，可提高你的学习能力以及训练自己的逻辑思维能力，认真学习的你很耀眼，相信你的技术一定会有一个质的飞跃，好啦，本周技术分享到此结束
若在本项目中遇到技术难题，可在下方评论区留言或私信我，授人以鱼不如授人以渔
如果你觉得博主写的不错的话，不妨给个一键三连，点击下方小拳头即可一键三连。
感谢你的支持！
