SSM+Vue实战：银行贷款管理系统搭建、核心流程与避坑指南-北京尧图网络

简介这是一套基于 SSMSpringSpringMVCMyBatis框架与 Vue 前端技术构建的银行贷款管理系统源码包面向高校计算机专业学生、Java 初级开发者及毕业设计选题人员帮助理解银行信贷业务的线上化管理流程覆盖贷款申请、审批、客户资料维护等核心环节。资源共 7 个文件压缩包约 4.55MB包含可运行的前后端源码、数据库脚本sql以及 docx/doc 项目文档、ppt 演示文稿、txt 使用说明其中 sql 脚本用于数据表与初始数据初始化docx/doc 可用于课程设计或毕业设计报告撰写ppt 适合答辩汇报txt 提供快速上手指引。目前已有 63 人学习/下载。除完整代码和配套文档外还涵盖开题报告、任务书、论文等材料有助于读者快速梳理项目结构、理解业务逻辑并规范完成文档写作适合需要从零搭建或二次开发同类管理系统的人群。1. 从一份毕业设计压缩包说起ssm银行贷款管理系统vue 到底能跑出什么如果你手上正好有一份名为“ssm银行贷款管理系统vue.ZIP”的压缩包大概率是在做毕业设计或课程项目。这套系统说白了就是用 Spring SpringMVC MyBatis也就是 SSM做后端接口和数据持久化用 Vue 做前端页面实现一个银行的贷款业务管理后台。它能管客户信息、贷款产品、申请审批、放款记录、还款计划这些核心流程。和那些只写 CRUD 的“增删改查管理系统”不一样银行贷款系统有明确的状态流转——申请、审核、放款、还款、结清每一步都要落库、留痕所以它比普通管理系统多了一层业务规则和权限控制也正因为如此它才能成为毕业设计里“能过查重、能答辩、能演示”的常青树。这篇笔记不吹项目多牛只讲怎么把它跑起来、怎么改、坑在哪。如果你是第一次接触 SSM 或 Vue跟着步骤能做出一个可演示的版本如果你已经写过几个管理后台这里有状态机设计、打包部署、跨域调参这些真正会翻车的地方。2. 先拆骨架SSM 后端 Vue 前端的系统分层与核心流程2.1 系统分层Controller、Service、Mapper 各管哪一段SSM 项目的分层非常固定但很多人写代码时分不清边界最后全堆在 Controller 里。正确分工是Controller 层负责接收 HTTP 请求、校验参数格式、返回统一响应体。它不写业务逻辑只做“翻译”。Service 层负责业务规则例如贷款申请时判断客户黑名单、计算贷款利率、生成还款计划。事务也在这里控制。Mapper 层DAO负责和数据库打交道写 SQL 或 MyBatis XML 映射。一个典型的 Controller 方法长这样Controller RequestMapping(/loan) public class LoanController { Autowired private LoanService loanService; ResponseBody RequestMapping(value /apply, method RequestMethod.POST) public Result apply(RequestBody LoanApplyVO vo) { // 参数校验放在 Controller业务规则放 Service if (vo.getCustomerId() null || vo.getAmount() null) { return Result.error(客户ID和贷款金额不能为空); } try { loanService.apply(vo); return Result.success(); } catch (BusinessException e) { return Result.error(e.getMessage()); } } }这里的Result是一个统一返回体一般包含code、message、data三个字段。为什么要统一因为 Vue 前端要用 Axios 拦截器统一处理错误码如果不统一每个接口返回结构都不一样前端会疯掉的。Service 层的事务控制要注意一个方法里多次调用 Mapper 时必须保证在同一个事务里。SSM 默认用 Spring 的声明式事务在实现类上加Transactional注解即可。但注意Transactional只对 public 方法生效而且默认只回滚 RuntimeException如果业务里抛了BusinessException但不继承 RuntimeException事务不会回滚——这是血泪经验。Mapper 层的 XML 文件里select、update的 id 必须和接口方法名一致参数类型和返回类型也要对应。很多人报错“Invalid bound statement (not found)”就是因为 namespace 写错或 mapper xml 没被扫描到。2.2 贷款业务主流程申请→初审→放款→还款的状态机设计银行贷款管理系统的核心不是 CRUD是状态流转。你要设计的不是一张表而是一个状态机。常见的状态有WAIT_AUDIT待初审提交申请后WAIT_LOAN待放款初审通过后REPAYING还款中放款成功后SETTLED已结清REJECTED已拒绝OVERDUE已逾期状态机设计上我建议在建表时就加一个status字段同时建一个loan_record表记录每次状态变更的时间和操作人。不要直接在loan表上改状态就算了因为答辩时老师必然问“如果贷款被拒绝你如何追溯是哪个环节拒绝的”没有记录表你就是答不上来。一个靠谱的状态变更 restful 接口设计如下RequestMapping(value /audit, method RequestMethod.POST) public Result audit(RequestBody AuditVO vo) { // vo: {loanId, auditResult, comment} // 根据当前状态判断是否允许审核 Loan loan loanMapper.selectById(vo.getLoanId()); if (!WAIT_AUDIT.equals(loan.getStatus())) { return Result.error(当前状态不允许审核); } loanService.audit(loan, vo); return Result.success(); }注意这里有一个“非法状态判断”也就是说状态机的流转条件必须写清楚只有WAIT_AUDIT状态能执行审核只有WAIT_LOAN状态能执行放款。很多新手直接写一个 UPDATE 把状态改了却没有前置校验结果用户乱调接口就能把已拒绝的贷款改成已放款这就是安全漏洞。2.3 数据库表结构至少这 7 张表跑不起来一个能答辩的银行贷款系统最少得有这些表表名作用关键字段customer客户信息id, name, id_card, phone, credit_scoreloan_product贷款产品id, product_name, rate, max_amount, min_amountloan_apply贷款申请主表id, customer_id, product_id, amount, term, status, create_timeloan_audit审核记录id, loan_id, auditor_id, audit_result, comment, audit_timecontract合同表id, loan_id, contract_no, sign_time, valid_daterepay_plan还款计划id, loan_id, period, due_date, principal, interest, repay_statusrepay_record还款记录id, loan_id, period, repay_time, amountuser系统用户登录id, username, password, role其中repay_plan是根据贷款金额、利率、期限计算出来的每期应还本金和利息。这个表很关键放款后就要生成。计算等额本息时每个月的还款额公式为每月还款额 [本金 × 月利率 × (1月利率)^还款月数] / [(1月利率)^还款月数 - 1]别在 Java 里自己用浮点数算容易出现精度问题。用BigDecimal计算并且利率字段用 decimal(10,4) 存金额用 decimal(15,2) 存。面试时能说出为什么不用 float 和 double就算有经验。3. 把后端跑起来IDEA 里启动 SSM 项目的最小步骤3.1 环境准备JDK、Maven、Tomcat、MySQL 的版本搭配第一次跑 SSM 项目最怕版本不对。我自己常用的组合是JDK 81.8、Maven 3.6.3、Tomcat 8.5、MySQL 5.7。别一上来就上 JDK 17 和 Tomcat 10SSM 的老项目多半用的是 javax.servlet 命名空间Tomcat 10 已经改成 jakarta.servlet直接跑会报 NoClassDefFoundError。如果你用的是 IDEATomcat 配置选“Tomcat Server - Local”然后指定 Tomcat 的 home 目录。注意 Deployment 里要加war explodedartifact而不是直接选 war 包这样调试时改代码不需要重启容器。检查依赖时Maven 的pom.xml里至少要锁定 Spring 5.3.x、MyBatis 3.5.x、mysql-connector-java 8.0.x。Spring 5 和 Spring 4 的差异不大但 MyBatis 3.5 之后需要 JDBC 驱动兼容性更好。3.2 修改配置文件数据库连接、MyBatis 映射、Spring 扫描SSM 的配置通常有三个文件applicationContext.xmlSpring 核心配置、springmvc.xmlSpringMVC 配置、mybatis-config.xmlMyBatis 配置。新手经常搞混记住Spring 管业务 beanSpringMVC 管 Controller 和视图解析器MyBatis 管 SQL。数据库连接配置一般放在jdbc.propertiesjdbc.drivercom.mysql.cj.jdbc.Driver jdbc.urljdbc:mysql://localhost:3306/bank_loan?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalse jdbc.usernameroot jdbc.password123456注意serverTimezoneAsia/Shanghai必须加否则 MySQL 8 会报时区错误。另外useSSLfalse可以避免本地连接时 SSL 告警。applicationContext.xml里需要开启组件扫描和事务管理context:component-scan base-packagecom.bank.service context:exclude-filter typeannotation expressionorg.springframework.stereotype.Controller/ /context:component-scan bean iddataSource classcom.alibaba.druid.pool.DruidDataSource property namedriverClassName value${jdbc.driver}/ property nameurl value${jdbc.url}/ property nameusername value${jdbc.username}/ property namepassword value${jdbc.password}/ /bean bean idsqlSessionFactory classorg.mybatis.spring.SqlSessionFactoryBean property namedataSource refdataSource/ property namemapperLocations valueclasspath:mapper/*.xml/ /bean tx:annotation-driven transaction-managertransactionManager/这里的关键是mapperLocations要扫到resources/mapper目录下的所有 XML 文件。如果不写这一行MyBatis 默认只扫描和接口同包的 XML经常导致“mapper 方法没有对应语句”。springmvc.xml里要扫描 Controller 和启用注解驱动context:component-scan base-packagecom.bank.controller/ mvc:annotation-driven/ mvc:default-servlet-handler/mvc:default-servlet-handler/很重要否则浏览器访问静态资源图片、JS时会被 DispatcherServlet 拦截返回404。3.3 启动与验证用 Postman 打第一个接口启动 Tomcat 后如果没报错后端就起来了。但只是起来还不够你得能通过 HTTP 调接口。最粗暴的验证方式是写一个测试 ControllerController RequestMapping(/test) public class TestController { ResponseBody RequestMapping(/hello) public String hello() { return hello bank; } }启动后浏览器访问http://localhost:8080/bank_loan/test/hello能输出hello bank说明 SpringMVC 工作正常。接着测试数据库连通性写一个查询接口Autowired private CustomerMapper customerMapper; ResponseBody RequestMapping(/customer/count) public Result count() { return Result.success(customerMapper.countAll()); }如果这个接口返回1或者0而不是 500 错误就说明 MyBatis 也通了。整个过程不要打开 Vue 前端先确保后端独立可用否则联调时不知道问题出在哪一边。4. Vue 前端怎么接从页面路由到 Axios 调接口4.1 Vue 项目初始化与依赖安装vue-router、axios、element-uiVue 前端最常见的做法是用 vue-cli 创建项目版本选用 Vue 2Vue 3 也兼容但这里很多学校模板基于 Vue 2。初始化命令npm install -g vue/cli vue create bank-loan-front创建时选择Manually select features勾选 Router、Vuex。进入项目后安装业务依赖npm install axios --save npm install element-ui --save npm install sass-loader10 --save-dev注意sass-loader版本不要装 11 以上否则和旧版 node-sass 冲突。如果报 node-sass 编译失败干脆用dart-sassnpm uninstall node-sass npm install -D sass1.26.5 sass-loader10.1.0这是 Vue 2 项目最常见的坑很多新手卡在安装依赖这一步。4.2 后端接口在前端怎么封装request.js 的写法不要在每个页面里直接axios.get那样改后端地址时要把所有页面翻一遍。我一般会在src/utils/request.js里封装一个统一请求实例import axios from axios import { Message } from element-ui import router from ../router const request axios.create({ baseURL: process.env.VUE_APP_BASE_URL || http://localhost:8080/bank_loan, timeout: 10000 }) // 请求拦截器携带 token request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }, error Promise.reject(error)) // 响应拦截器统一处理 code request.interceptors.response.use( response { const res response.data if (res.code ! 200) { Message.error(res.message || 请求失败) if (res.code 401) { router.push(/login) } return Promise.reject(new Error(res.message)) } return res }, error { Message.error(error.message || 网络错误) return Promise.reject(error) } ) export default requestbaseURL一定要和后端部署的上下文路径一致。如果后端 war 包名是bank_loan那么访问接口的完整路径就是http://localhost:8080/bank_loan/customer/list。把baseURL放在process.env.VUE_APP_BASE_URL里可以在.env.development和.env.production分别配不同的值打包时不用改代码。4.3 登录页和贷款申请页的联动逻辑登录页是前后端第一个联调点。前端提交{username, password}后端校验后返回 token 和用户角色。前端拿到 token 后存到 localStorage同时根据角色动态渲染左侧菜单。贷款申请页就是表单提交核心字段是客户ID、产品ID、金额、期限。前端要做的第一件事是回显可选产品列表created() { this.loadProducts() }, methods: { async loadProducts() { const res await request.get(/product/list) this.products res.data }, async submitForm() { this.$refs.form.validate(async valid { if (!valid) return const loading this.$loading({ text: 提交中... }) try { await request.post(/loan/apply, this.form) this.$message.success(申请成功) this.$router.push(/loan/list) } finally { loading.close() } }) } }注意created里调接口要在async上下文中否则.then写起来很难看。另外提交时this.$refs.form.validate是 Element UI 的校验方法非空规则一定要配置否则后端会被各种null轰炸。5. 联调与部署避坑SSM 后端打包进 Tomcat 的 5 个常见问题5.1 跨域问题前端调后端报 CORS 错误现象前端npm run serve跑在http://localhost:8081后端 Tomcat 在http://localhost:8080打开浏览器控制台看到Access-Control-Allow-Origin报错。原因浏览器的同源策略不同端口视为不同源。跨域是后端要解决的事不能在前端改。解决在后端加一个过滤器统一设置响应头public class CorsFilter implements Filter { Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response (HttpServletResponse) res; response.setHeader(Access-Control-Allow-Origin, *); response.setHeader(Access-Control-Allow-Methods, GET, POST, PUT, DELETE, OPTIONS); response.setHeader(Access-Control-Allow-Headers, Content-Type, Authorization); response.setHeader(Access-Control-Max-Age, 3600); chain.doFilter(req, res); } }然后在web.xml里注册这个过滤器注意要放在 Spring 的DispatcherServlet之前。或者更简单用 Spring 的CrossOrigin注解但只对单个 Controller 生效不如过滤器彻底。5.2 日期格式序列化导致的时间差 8 小时现象前端提交的日期后端拿到后变成HH:mm:ss不对或者后端返回的日期前端显示差了 8 小时。原因JSON 序列化时如果 Java 的Date默认序列化为时间戳前端没做时区转换或者 MySQL 连接时区的serverTimezone没对齐。解决统一使用Jackson的日期格式配置。在springmvc.xml里配置mvc:annotation-driven mvc:message-converters bean classorg.springframework.http.converter.json.MappingJackson2HttpMessageConverter property nameobjectMapper refobjectMapper/ /bean /mvc:message-converters /mvc:annotation-driven bean idobjectMapper classcom.fasterxml.jackson.databind.ObjectMapper property namedateFormat valueyyyy-MM-dd HH:mm:ss/ /bean更好用的做法是直接使用 Java 8 的LocalDateTime配合jackson-datatype-jsr310模块。但 SSM 老项目里很多实体还是java.util.Date改起来成本大就用上面这种。注意数据库时间字段也用datetime不要用timestamp因为timestamp会自动转 UTC进一步加剧时区问题。5.3 MyBatis 的 Mapper 接口与 XML 绑定失败现象启动时报Invalid bound statement (not found): com.bank.mapper.LoanMapper.selectById。原因有两种可能。一是 Mapper XML 文件没有放在mapperLocations扫描路径下二是 XML namespace 和接口全限定名不一致。排错步骤打开applicationContext.xml确认mapperLocations是classpath:mapper/*.xml。打开mapper/LoanMapper.xml看mapper namespacecom.bank.mapper.LoanMapper是否和接口包名一致。看接口里的方法名是否和 XML 里select idselectById一致。最后看target/classes目录下有没有生成对应的 XML 文件。如果没有是 IDE 没把resources目录标记为资源目录在 pom.xml 里加build resources resource directorysrc/main/java/directory includes include**/*.xml/include /includes /resource resource directorysrc/main/resources/directory /resource /resources /build把 mapper 的 XML 也放src/main/java里这种做法不推荐但确实能解决很多人打包后 XML 丢失的问题。5.4 静态资源被拦截Controller 映射和前端路由冲突现象后端部署后浏览器访问http://localhost:8080/bank_loan/login.html返回 404或者刷新前端页面时出现空白。原因SpringMVC 的DispatcherServlet默认映射/会把所有请求都当 Controller 处理。如果前端用 Vue Router 的 history 模式刷新/loan/list时后端没有这个路由直接 404。解决开发环境推荐用 Vue Router 的 hash 模式URL 里带#不用后端配合。生产环境如果想用 history 模式后端要配置一个 fallback让所有非接口的请求都转发到index.html。在 SpringMVC 里加一个类似ViewController的注册Configuration public class WebConfig implements WebMvcConfigurer { Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController(/{path:[^\\.]*}).setViewName(forward:/index.html); } }但注意这个配置会覆盖所有非接口路径如果你的后端接口是/api/**前缀就不会受影响。最省事的方案是前端打包成静态文件后直接放到 Tomcat 的webapps/ROOT下后端接口放在/api前缀下这样刷新路由其实没有真正刷新到后端而是让 Tomcat 的默认 servlet 返回 index.html不对Tomcat 默认 servlet 不认识 Vue 路由还是需要转发规则。所以最简单的还是用 hash 模式别折腾。5.5 打包部署war 包与 vue 打包后的静态资源合并后端打成 war 包项目右键Maven - Package生成bank_loan.war放到 Tomcat 的webapps下启动后访问http://localhost:8080/bank_loan。前端打包npm run build生成dist目录里面有index.html、static等文件。要把前端合进 war 包有两个方法方法一把dist里的文件复制到src/main/webapp下然后重新打包 war。注意index.html里的静态资源路径要用相对路径或${pageContext.request.contextPath}否则部署到非 ROOT 路径时资源加载失败。方法二直接把dist目录内容放进 Tomcat 的webapps/bank_loan下和 war 包解压出来的文件合并。但这样每次发布都要手动拷不推荐。我推荐方法一并且把dist复制到webapp下时保留static目录同时将后端接口的baseURL改为/bank_loan这样前后端同源没有跨域。修改request.js里的baseURLbaseURL: /bank_loan然后在.env.production里配置VUE_APP_BASE_URL/bank_loan打包时就会用这个值。注意前端路由用 hash 模式否则刷新会 404。6. 给项目管理者的检查清单验证系统是否真的可用6.1 用一行命令跑通前后端批量插入测试数据很多系统跑起来是空壳没有数据演示时一点观感都没有。我一般会写一个 SQL 脚本插入几十条模拟客户和贷款申请。注意要插入一定量的“待审核”状态数据因为演示时最好展示审核操作而不是全部是已结清。-- 插入测试客户幂等避免重复执行 INSERT INTO customer (id, name, id_card, phone, credit_score) SELECT 1, 张伟, 110101199001011234, 13800000001, 720 FROM DUAL WHERE NOT EXISTS (SELECT 1 FROM customer WHERE id 1); INSERT INTO customer (id, name, id_card, phone, credit_score) SELECT 2, 李娜, 110101199202022345, 13800000002, 680 FROM DUAL WHERE NOT EXISTS (SELECT 1 FROM customer WHERE id 2);用WHERE NOT EXISTS可以让脚本重复执行不报错这个技巧比一股脑INSERT更稳。另外DUAL是 MySQL 的无表查询占位如果你用的是 MySQL 5.7 以上可以直接SELECT 1 ... WHERE NOT EXISTS。批量生成贷款申请可以用存储过程但毕业设计没必要直接手写 10 条就行。重点是保证状态分布合理3 条WAIT_AUDIT、2 条WAIT_LOAN、3 条REPAYING、2 条SETTLED。这样演示时每个功能都有数据。6.2 权限控制shiro 或 spring security 要不要加SSM 系统最常见的登录认证方案是 Shiro因为它的过滤器链在 SSM 下更好配置。但如果你只是做一个演示不涉及多个角色权限的区分手写一个拦截器就够了。拦截器的逻辑很简单登录成功后把用户 ID 存到 session然后拦截除了/login和/static/**之外的请求。在springmvc.xml里配置mvc:interceptors mvc:interceptor mvc:mapping path/**/ mvc:exclude-mapping path/login/ mvc:exclude-mapping path/static/**/ bean classcom.bank.interceptor.AuthInterceptor/ /mvc:interceptor /mvc:interceptorsInterceptor 代码public class AuthInterceptor extends HandlerInterceptorAdapter { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (request.getSession().getAttribute(userId) null) { response.setContentType(application/json;charsetutf-8); response.getWriter().write({\code\:401,\message\:\未登录\}); return false; } return true; } }这里有个坑如果你用了 FastJson 或 Jackson 输出 JSON一定要先setContentType否则前端拿到的是乱码。另外拦截器里不要直接返回重定向到/login因为前后端分离后前端是一个 SPA重定向会导致页面刷新丢失状态。正确做法是返回 JSON 状态码 401前端 Axios 拦截器收到后跳转登录页。权限控制建议加但不必引入 Shiro除非题目明确要求。如果答辩时被问“你怎么做权限控制”能回答出“用拦截器实现 session 校验按角色区分菜单”就够了。如果确实要更细粒度的权限再上 Shiro 也不迟但配置最少要花一两天自己权衡时间。6.3 最后想说的我做过好几个类似的后台管理系统每次都会遇到同样的坑不是后端代码跑不起来而是前端联调时发现接口返回结构不统一、日期格式乱掉、跨域拦路。如果你也是第一次做这个系统建议先别急着追求功能全把“登录 → 加载列表 → 新增一条贷款申请 → 审核通过 → 查看还款计划”这条主链路跑通畅再谈其他功能。最后想分享一个习惯每个接口写完后都要用 Postman 或 Apifox 先测一遍确认返回的 JSON 结构长什么样然后前端照着这个结构写页面。不要两个端同时凭空想象最后一定对不上。希望这篇笔记能让你少踩几个坑祝你的项目顺利通过答辩。本文还有配套的精品资源点击获取

SSM+Vue实战：银行贷款管理系统搭建、核心流程与避坑指南

相关推荐

Linux系统故障修复脚本：状态指纹诊断与原子化修复协议

震旦Generic 22BW-1驱动包深度解析：从文件清单到双面打印配置

macOS设备指纹重置：彻底清除Claude残留的三层次清洗指南

更多资讯

长江岷江沱江SHP数据加载与坐标系修复指南

测控链路：从传感器到上位机

Windows进程间通信完全指南：共享内存与命名管道实战解析

PyCharm安装教程：Windows下Python开发环境配置与使用指南

PyTorch DDP分布式训练全解析：机制、调优与踩坑实践

数据中心与大模型融合学习计划

今日更新

基于sEMG与IMU的手语手势识别：从数据采集到实时部署避坑指南

装配车间MES落地指南：SimpleMES工单流转、BOM与齐套检查实战

AI获客怎样减少重复线索？意客AI的原文复用与版本筛选

本周精选

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？