Java记账系统项目实战 | Spring Boot + MyBatis Plus + Layui 前后端整合开发

本项目为一款基于 Spring Boot 构建的简洁实用型 Java 记账系统,集成了 MyBatis Plus、Druid 数据源、Thymeleaf 模板引擎及 Layui 前端组件,实现了从账单录入、查询、统计到基础用户登录的完整功能流程。


🎯 页面预览截图(可选)

📌 登录页
📌 账单列表页
📌 添加账单弹窗
📌 数据可视化列表展示

📌 项目功能一览

  • 用户登录 + 验证码校验

  • 账单录入(含分类、时间、金额、备注)

  • 账单列表展示、查询筛选、分页加载

  • 分类信息缓存机制(AOP 实现)

  • 基于 MyBatis Plus 的代码生成与数据操作

  • 简洁前端界面(Layui + Thymeleaf)


🏗 技术选型

技术/工具用途
Spring Boot项目主框架
MyBatis Plus持久层框架,简化SQL操作
Druid数据源连接池及监控
Thymeleaf页面模板引擎
Layui前端组件库,快速构建表单和表格
Lombok简化实体类代码
Hutool工具类库
AOP缓存实现(账单类型)

🧩 数据库配置(application.yml)

spring: 
    datasource:     
        druid:     
            driver-class-name: com.mysql.cj.jdbc.Driver 
            url:jdbc:mysql://127.0.0.1:3306/bills?useUnicode=true&characterEncoding=utf8&useSSL=true&serverTimezone=UTC 
            username: root 
            password: 123456


🔧 Maven 依赖配置(pom.xml)

主要依赖包括:

  • spring-boot-starter-web

  • mybatis-plus-boot-starter

  • druid-spring-boot-starter

  • thymeleaf

  • log4j

  • hutool-all

  • lombok

片段如下:

<dependency>
  <groupId>com.baomidou</groupId>
  <artifactId>mybatis-plus-boot-starter</artifactId>
</dependency>
<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>druid-spring-boot-starter</artifactId>
</dependency>

🧑‍💻 登录功能实现(含验证码)

使用 LoginController 实现用户登录:

@RequestMapping("login")
@ResponseBody
public ResultObj login(String loginname,String pwd,String code,HttpSession session) {
    Object codeSession = session.getAttribute("code");
    if(code != null && code.equals(codeSession)) {
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("loginname", loginname);
        queryWrapper.eq("pwd", pwd);
        User user = userService.getOne(queryWrapper);
        return (user != null) ? new ResultObj(200, "登录成功") : new ResultObj(-1, "用户名或密码错误");
    } else {
        return new ResultObj(-1, "验证码错误");
    }
}

验证码采用 Hutool 提供的 CaptchaUtil 生成:

CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(116, 36, 4, 5);
session.setAttribute("code", captcha.getCode());

📋 账单管理模块

💼 账单列表展示(list.html)

通过 Layui 的 table 组件实现分页数据加载:

table.render({
  elem: '#billTable',
  url: '/bills/loadAllBills',
  page: true,
  cols: [[
    {field:'title', title:'账单标题'},
    {field:'billtime', title:'记账时间'},
    {field:'typeName', title:'类型名称'},
    {field:'price', title:'账单金额'},
    {field:'remark', title:'账单备注'}
  ]]
});

📝 添加账单功能

通过点击按钮触发 Layui 弹出层,动态加载账单类型,并提交至后台:

$("#doAdd").on("click", function() {
  // 弹出添加表单
  layer.open({
    type: 1,
    content: $("#addBillDiv"),
    area: ['800px', '600px']
  });
});

⚡ 缓存优化:AOP实现账单类型缓存

通过 Spring AOP 实现简单的本地缓存机制:

@Around(value="pc()")
public Object cacheBillType(ProceedingJoinPoint point) throws Throwable {
    Integer typeId = (Integer) point.getArgs()[0];
    Object cached = cache.get(BILL_TYPE_CACHE_PREFIX + typeId);
    if (cached != null) return cached;
    Billtype res = (Billtype) point.proceed();
    cache.put(BILL_TYPE_CACHE_PREFIX + res.getId(), res);
    return res;
}

🧠 项目适用场景

  • Java Web 实战练手项目

  • 中小企业财务系统雏形

  • 个人理财系统学习样例

  • 系统架构+前后端集成完整参考


✅ 结语

本项目功能完整,界面清爽,适合用于快速搭建 Web 账务管理系统的参考案例。如果你正在学习 Spring Boot、MyBatis Plus、Layui 等技术,这将是一个非常不错的实战模板!

💬 如需源码、演示效果或部署指导,欢迎评论交流!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值