SpringBoot + Ajax 实现个人账目管理系统 Ajax如此简单~

Posted 2022-01-26 Bug终结者.

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SpringBoot + Ajax 实现个人账目管理系统 Ajax如此简单~相关的知识，希望对你有一定的参考价值。

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教程直达：JavaWeb(SpringBoot)汽车信息管理系统（数据库+源码+论文《精品毕设》）实现客户端汽车信息查看发布汽车信息评论收藏后台对用户管理汽车类型管理汽车管公告信息评论信息的

SpringBoot+ajax+formData实现图片上传和回显

按账目类型和日期查看账目

微信小程序--家庭记账本开发--06

基于Springboot+Mybatis实现个人理财系统

总算完成了第一个项目，宿管系统，和感想