SpringBoot + Ajax 实现个人账目管理系统

引言

Hello，我是Bug终结者，一名热爱后端Java的风趣且幽默的程序员~，本周技术分享为大家带来一个基于SpingBoot + Ajax实现个人账目管理系统，篇幅幽默，继续往下看吧~

快来发现我的宇宙哦~

广播站

CSDN博客之星参选博主：Bug终结者.

链接：https://blog.csdn.net/weixin_45526437?spm=1001.2101.3001.5343

五星好评，您的每一分对我都贡献巨大，感谢您投的每一票

再次感谢您的投票，谢谢！

项目简介

本项目主要记录个人的进出账目和总金额

个人资产管理页面

• 上方是新增人员的姓名和初始资产总额，保存后提交到数据表 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;
    }


}

博主寄语

至此，系统到此完美结束，该案例通俗易懂，详细一步步带入，通过本案例，可提高你的学习能力以及训练自己的逻辑思维能力，认真学习的你很耀眼，相信你的技术一定会有一个质的飞跃，好啦，本周技术分享到此结束

GitEE地址：https://gitee.com/javawhc/individual_accounts_manager_system

GieEE教程直达：https://blog.csdn.net/weixin_45526437/article/details/121596998?spm=1001.2014.3001.5501

若在本项目中遇到技术难题，可在下方评论区留言或私信我，授人以鱼不如授人以渔

如果你觉得博主写的不错的话，不妨给个一键三连，点击下方小拳头即可一键三连。

感谢你的支持！