记账管理系统网页版
一、项目概述
这是记账系统网页版，另外也有GUI版本：
个人记账管理系统的设计与实现_个人记账系统-CSDN博客
先看视频
个人记账系统网页版演示
本财务管理系统旨在为用户提供便捷、全面的财务数据管理服务，包括登录注册功能以保障用户数据安全与个性化体验，账户管理功能方便用户对自身账户信息进行维护，以及细致的收入管理、支出管理、科目管理功能，搭配灵活的收入查询与支出查询功能，使用户能够清晰地掌握自身财务状况，最后还具备简洁的退出系统操作，确保用户使用流程的完整性与流畅性。
二、前端技术选型与实现
（一）HTML + CSS 构建界面基础
<!-- 部分代码如下，全码加v: ershiqijian -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="demo1_2.css">
</head>
<body>
<div class="container right-panel-active">
<div class="container__form container--signup">
<form action="#" class="form" id="form1">
<h2 class="form__title">登录</h2>
<input type="text" id="username1" placeholder="用户名" class="input" required />
<input type="password" id="password1" placeholder="密码" class="input" required />
<button type="button" class="btn" id="bt1">登录</button>
</form>
</div>
<div class="container__form container--signin">
<form action="#" class="form" id="form2">
<h2 class="form__title">注册</h2>
<input type="text" id="username2" placeholder="用户名" class="input" required />
<input type="password" id="password2" placeholder="密码" class="input" required />
<button type="button" class="btn" id="bt2">注册</button>
</form>
</div>
<!-- Overlay -->
<div class="container__overlay">
<div class="overlay">
<div class="overlay__panel overlay--left">
<button class="btn" id="signIn">注册</button>
</div>
<div class="overlay__panel overlay--right">
<button class="btn" id="signUp">登录</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="demo1_3.js"></script>
</body>
</html>（二）JavaScript 实现交互逻辑
JavaScript 是赋予前端页面动态交互能力的核心技术。在本财务管理系统中，它承担着众多关键任务。例如，在登录注册功能中，通过 JavaScript 对用户在表单中输入的信息进行实时验证，检查用户名是否符合规范、密码是否达到强度要求等，在用户提交表单之前及时给予提示，避免无效数据的提交。在收入管理和支出管理模块，当用户添加新的收支记录时，JavaScript 能够动态计算金额、选择对应的科目，并将数据以合适的格式发送到后端进行处理。同时，在页面切换、数据展示等方面，JavaScript 也发挥着不可或缺的作用，如根据用户的操作动态加载不同的页面内容，实现无刷新页面更新，提升用户体验的流畅性。
效果展示，使用模版
部分展示
三、后端技术架构与功能实现
（一）SpringBoot 搭建高效后端框架
//部分代码如下，项目源码加v: ershiqijian
package com.example.demo_server.controller;
import com.example.demo_common.constant.JwtClaimsConstant;
import com.example.demo_common.constant.RedisTokenNameConstant;
import com.example.demo_common.propeities.JwtProperties;
import com.example.demo_common.result.Result;
import com.example.demo_common.utils.JwtUtil;
import com.example.demo_pojo.dto.UserDTO;
import com.example.demo_pojo.entity.User;
import com.example.demo_pojo.vo.UserVO;
import com.example.demo_server.service.TokenService;
import com.example.demo_server.service.UserService;
import com.example.demo_server.service.ZhglService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/user")
@Slf4j
public class UserController {
@Autowired
private UserService userService;
@Autowired
private ZhglService zhglService;
@Autowired
private JwtProperties jwtProperties;
@Autowired
private TokenService tokenService;
@Autowired
private RedisTemplate redisTemplate;
@PostMapping("/login")
public Result<UserVO> login(@RequestBody UserDTO userDTO){
log.info("用户登录,{}", userDTO);
User user=userService.login(userDTO);
//登录成功后，生成jwt令牌
Map<String, Object> claims = new HashMap<>();
claims.put(JwtClaimsConstant.USERNAME, user.getUsername());
String token = JwtUtil.createJWT(
jwtProperties.getUserSecretKey(),
jwtProperties.getUserTtl(),
claims);
//这里当用户登录时储存token相关信息便于验证
//检查redis是否包含key值
boolean exists=redisTemplate.hasKey(RedisTokenNameConstant.TOKEN_PREFIX +user.getUsername());
if(exists){
tokenService.removeToken(user.getUsername());
tokenService.storeToken(user.getUsername(),token);
}else {
tokenService.storeToken(user.getUsername(), token);
}
UserVO userVO=UserVO.builder()
.username(user.getUsername())
.password(user.getPassword())
.token(token)
.build();
return Result.success(userVO);
}
@PostMapping("/signup")
public Result<String> signup(@RequestBody UserDTO userDTO){
String data;
log.info("用户注册,{}", userDTO);
List lists=zhglService.getUser();
if(lists==null||lists.isEmpty()){
userService.signup(userDTO);
data="注册成功";
}else {
data="该系统已存在初始用户,请联系初始用户进行注册";
}
return Result.success(data);
}
@PostMapping("/logout")
public Result<String> logout() {
return Result.success();
}
}
SpringBoot 作为后端开发的核心框架，极大地简化了项目的初始搭建与配置过程。它采用约定优于配置的原则，使开发人员能够快速聚焦于业务逻辑的实现。在本项目中，SpringBoot 负责管理整个后端应用的生命周期，从启动初始化到资源加载与配置管理。例如，通过简单的注解配置，即可快速创建 RESTful 风格的接口，方便与前端进行数据交互。在处理登录注册请求时，SpringBoot 接收前端传来的用户数据，调用相应的业务逻辑层方法进行处理，如验证用户信息的合法性、与数据库进行交互存储用户数据等。
（二）SpringMVC 处理请求与响应
package com.example.demo_server.controller;
import com.example.demo_common.result.Result;
import com.example.demo_pojo.dto.ShouruDTO;
import com.example.demo_pojo.entity.Shouru;
import com.example.demo_server.service.SrglService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/user/srgl")
@Slf4j
public class SrglController {
@Autowired
SrglService srglService;
@RequestMapping("/getSrinfo")
public Result<List<Shouru>> getSrinfo(){
log.info("查询收入信息");
List<Shouru> shourus=srglService.getSrinfo();
return Result.success(shourus);
}
....
SpringMVC 作为 Spring 框架中的重要模块，在本项目中承担着接收前端请求并分发到相应处理方法的关键角色。它基于 MVC（Model-View-Controller）设计模式，将请求处理流程清晰地划分。当用户在前端发起登录请求时，SpringMVC 根据请求的 URL 映射到对应的登录处理控制器方法，该方法接收请求参数，调用业务层服务进行登录验证，然后根据验证结果返回相应的响应数据给前端。在收入查询与支出查询功能中，SpringMVC 同样负责接收前端传来的查询条件参数，将其传递给业务层进行数据查询操作，并将查询结果以合适的格式（如 JSON 数据）返回给前端进行展示。
（三）MyBatis 简化数据库操作
package com.example.demo_server.mapper;
import com.example.demo_pojo.entity.Kemu;
import com.example.demo_pojo.entity.Shouru;
import com.example.demo_pojo.vo.KemuVO;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
@Mapper
public interface KmglMapper {
void addKemu(Kemu kemu);
void deleteKemu(Long id);
List<KemuVO> getKemu();
}
.....MyBatis 在本项目中负责与 MySQL 数据库进行高效的数据交互。它通过 XML 配置文件或注解的方式，将 SQL 语句与 Java 代码进行解耦，使数据库操作更加灵活与易于维护。在用户管理方面，MyBatis 提供了诸如插入用户数据（注册功能）、查询用户信息（登录验证功能）等操作的 SQL 映射方法。例如，在注册功能中，MyBatis 根据前端传来的用户注册信息，将其插入到数据库的用户表中，同时确保密码在存储到数据库之前使用 MD5 加密算法进行加密处理，保障用户密码的安全性。在收入管理和支出管理中，MyBatis 负责对收入表和支出表进行数据的增删改查操作，如插入新的收支记录、根据条件查询收支数据等，为整个财务管理系统的数据持久化提供了可靠的支持。
四、数据库设计与安全考量
本项目采用 MySQL 数据库存储各类财务数据与用户信息。其中，对于用户密码的存储，采用了 MD5 加密算法，这一举措有效保障了用户密码在数据库中的安全性。即使数据库发生数据泄露事件，攻击者也难以直接获取用户的原始密码，大大降低了用户账户被盗用的风险。在数据库表结构设计方面，根据项目功能需求，设计了用户表（存储用户的基本信息，如用户名、密码、账户信息等）、收入表（记录用户的收入来源、金额、时间等信息）、支出表（记录用户的支出项目、金额、时间等信息）以及科目表（对收入和支出的科目进行分类管理）等。这些表之间通过合理的关联关系，如用户表与收入表、支出表通过用户 ID 进行关联，确保了数据的完整性与一致性，方便进行数据的查询、统计与分析操作。
五、网关层的作用与实现
网关层采用 Nginx 作为反向代理服务器，在本财务管理系统中起到了连接前后端的关键桥梁作用。Nginx 负责接收前端发来的请求，根据配置的规则将请求转发到后端相应的服务实例上。它不仅能够实现请求的负载均衡，将大量并发请求均匀地分配到后端多个服务器节点上，提高系统的整体并发处理能力，还可以对请求进行缓存处理，减少对后端服务器的重复请求压力。例如，在用户频繁访问收入查询或支出查询功能时，Nginx 可以将查询结果进行缓存，当下次相同请求到来时，直接返回缓存中的数据，提升了系统的响应速度。同时，Nginx 还具备强大的安全防护功能，如通过配置访问控制策略，限制特定 IP 地址或域名的访问权限，有效防止恶意攻击与非法访问，为整个财务管理系统构建起一道坚固的安全防线。
六、以上技术概括
本项目功能
登录，注册，登录账户管理，收入管理，支出管理，科目管理，收入查询，支出查询，退出系统
前端技术
html,css,javaScript
后端技术
SpringBoot SpringMVC myhabits
数据库
mysql (用户的密码使用MD5加密算法储存数据库中)
网关层
使用 nginx的 反向代理，连接前后端