简介基于 Spring Boot 与 Vue 的房屋交易系统完整源码包面向 Java 全栈入门及进阶学习者尤其适合用作毕业设计、课程设计或工程实训项目。系统实现前后端分离涵盖房源发布、浏览、交易管理等核心业务模块基于 JDK 1.8、MySQL 5.7 与 Maven 构建支持在 Eclipse、IDEA 中直接部署运行也可修改二次开发。压缩包共包含 665 个文件大小约 20.62MB以 Java 后端源码、Vue 前端组件和 SQL 数据库脚本为主体同时包含 SVG、JPG、PNG 图片素材JS、CSS 静态资源以及 BAT 启动与打包脚本其中 Java 文件对应控制器、服务与实体层Vue 文件覆盖页面布局与交互逻辑SQL 脚本可快速完成建库建表及初始数据写入。附带的部署文档配合清晰目录结构能显著降低环境搭建门槛帮助读者掌握前后端分离项目的框架组织、接口调用与业务实现思路。上线以来已有七百四十六人学习适合希望跑通完整项目并借鉴真实业务代码的开发者。1. 拿到 zip 别急着解压SpringBootVue 房屋交易系统该从哪下手很多人电脑上都有类似名为“3b007基于springbootvue的房屋交易系统.zip”的压缩包可能是课程设计或毕业设计平台下载的。这类包通常包含完整的前后端源码、数据库脚本和说明文档但真正跑起来却要费一番功夫。Spring Boot 负责后端接口和数据库交互Vue 负责页面渲染和用户交互两者通过 RESTful API 通信。这个组合在交易类系统中很常见因为它前后端分离职责清晰Spring Boot 的起步依赖和 Vue 的组件化开发都能显著缩短开发周期。下面我会从解压后的工程结构讲起按数据库、后端、前端、联调、打包的顺序把一套房屋交易系统从源码变成生产可用服务的完整路径走一遍。不管你是准备答辩还是第一次接手这类全栈项目都能从里面找到可以直接复用的命令和配置。2. 房屋交易系统的数据库设计与 Spring Boot 后端分层2.1 房屋交易系统的核心实体与表关系交易系统的核心不是“房屋”单张表而是围绕房源、用户、订单、合同、收藏、看房记录这些实体。最常见的做法是设计六张表表名主要字段用途houseid, title, area, price, type, status, owner_id, create_time房源信息type 是 买卖/租赁status 是 上架/下架/已成交userid, username, password, real_name, phone, role用户账号role 区分 普通用户/经纪人/管理员trade_orderid, order_no, house_id, buyer_id, seller_id, amount, status, create_time交易订单status 表示 待付款/已完成/已取消contractid, order_id, house_id, content, sign_time电子合同一对一关联订单favoriteid, user_id, house_id, create_time收藏夹多对多关联的中间表view_appointmentid, house_id, user_id, appoint_time, status看房预约这里有几个设计边界要注意买卖和租赁不要分成两张表用 type 字段区分就行否则用户端筛选和后台统计都很别扭价格字段用DECIMAL(12,2)而不是DOUBLE避免浮点误差订单号order_no设唯一索引因为后续会拿它对接支付回调。2.1.1 数据库脚本的导入与验证zip 里一般会带 .sql 脚本我建议用命令行导入而不是图形化工具能少碰编码坑mysql -u root -p -e CREATE DATABASE house_trade DEFAULT CHARACTER SET utf8mb4; mysql -u root -p house_trade house_trade.sql逻辑说明第一条命令建库指定 utf8mb4 是因为房源标题里可能有表情符号或生僻字utf8 存不下第二条命令导入表结构和初始数据。如果导入时报Unknown collation错误多半是 SQL 文件里的排序规则跟你本地 MySQL 版本不兼容可以用 VS Code 打开 SQL把utf8mb4_0900_ai_ci批量替换成utf8mb4_general_ci。导入后务必执行SHOW TABLES;和SELECT COUNT(*) FROM house;确认有数据很多项目跑不起来就是卡在空表导致前端列表空白。2.2 Spring Boot 项目结构按包名划分职责后端工程解压后标准的 Maven 结构是 src/main/java 下按包名分层com.example.house ├── config // 跨域、鉴权、Swagger 配置 ├── controller // 接口层只做参数接收和结果封装 ├── service // 业务层事务边界在这里 ├── mapper // MyBatis-Plus 的 Mapper 接口 ├── entity // 数据库实体映射 ├── dto // 前端传参和返回用的数据传输对象 └── common // 统一返回 Result、异常处理、常量我一般会在 entity 和 dto 之间做严格区分而不是直接把实体扔给前端。比如前台提交房源时只需要 title、area、price 这几个字段但实体里还有 owner_id、status、create_time 这些后端要自己填的值。用 DTO 接收能防止前端越权提交 status 字段这是交易系统很关键的边界。2.3 用 MyBatis-Plus 写数据访问层少写一半 SQL现在大部分 Spring Boot 房屋交易系统都集成 MyBatis-Plus而不是纯 MyBatis。区别在于 MP 内置了 BaseMapper单表 CRUD 不用写 XML。在 pom.xml 里加依赖dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency版本别用 4.x网上很多配置教程都是 3.x4.x 改了不少包名。MP 的通用接口写法Mapper public interface HouseMapper extends BaseMapperHouse { }Service 层调用时的逻辑说明Service public class HouseService { Autowired private HouseMapper houseMapper; public PageResultHouse listOnSale(String keyword, int page, int size) { LambdaQueryWrapperHouse wrapper new LambdaQueryWrapper(); wrapper.eq(House::getStatus, 1) .like(StringUtils.hasText(keyword), House::getTitle, keyword) .orderByDesc(House::getCreateTime); PageHouse p new Page(page, size); houseMapper.selectPage(p, wrapper); return PageResult.from(p); } }这段代码里eq(House::getStatus, 1)用 Lambda 表达式指定 status 等于 1相比手写列名能避免字段改名后编译不报错的问题like(condition, column, value)的第一个条件参数是 boolean只有 keyword 非空时才拼接 LIKE空参数时自动跳过避免前端传空字符串导致 SQL 语义变化。selectPage是 BaseMapper 自带的分页方法配合 MP 的分页插件才能生效否则你会发现 SQL 里没有 LIMIT。分页插件配置在 config 包里Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }忘了加这个 Bean 是最常见的坑接口能通但返回的 total 永远为 0页面只能看到第一页数据。3. Vue 前端从脚手架到房源列表和交易下单3.1 用 Vite 创建 Vue 3 项目而不是 Vue CLI历史原因很多老教程把 Vue CLI 当成默认方案但新项目我更推荐 Vite它的依赖预构建和热更新速度比 webpack 快一个数量级。命令npm create vitelatest house-web -- --template vue cd house-web npm install npm install vue-router4 pinia axios element-plus npm run dev参数说明--template vue指定 Vue 3 模板Vue 2 模板要写vue-ts或vue-javascript但 Vue 2 已经停止维护交易系统这种新项目直接用 Vue 3。Element Plus 是和 Vue 3 配套的组件库如果老项目用 Vue 2 就得装 element-ui 而不是 element-plus别搞混。安装完后需要修改 src/main.js 把 Element Plus 注册进去这里有个优化点不要全量引入而是按需引入启动体积能小一倍。用官方推荐的 unplugin-auto-import 插件即可这样写el-table时组件自动导入无需手动注册。3.2 用 vue-router 管理页面路由和跳转逻辑房屋交易系统的页面通常包括首页、房源列表、房源详情、发布房源、个人中心、订单管理。在 src/router/index.js 里配置import { createRouter, createWebHistory } from vue-router const routes [ { path: /, component: () import(../views/Home.vue) }, { path: /houses, component: () import(../views/HouseList.vue) }, { path: /houses/:id, component: () import(../views/HouseDetail.vue), props: true }, { path: /orders/:id, component: () import(../views/OrderConfirm.vue), meta: { requiresAuth: true } } ] const router createRouter({ history: createWebHistory(), routes }) router.beforeEach((to) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { return /login?redirect to.path } return true }) export default router代码逻辑说明props: true让路由参数:id作为 props 传给组件这样在组件里直接const props defineProps([id])就能拿到不需要再写route.params。beforeEach做全局鉴权拦截要求登录才能进入订单确认页如果没 token 就跳登录页并带上 redirect 参数登录成功后能回到原目标页。这个模式比在页面里手动检查 token 要清爽得多。3.3 房源列表页的 Axios 请求与状态管理列表页是整个系统最核心的页面。其中 axios 请求建议统一封装在 src/api/house.jsimport request from ../utils/request export const getHouses (params) { return request.get(/api/houses, { params }) } export const createOrder (data) { return request.post(/api/orders, data) }这里的 request 实例在 utils/request.js 里创建核心是拦截器和超时配置import axios from axios import { ElMessage } from element-plus const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.response.use( (response) response.data, (error) { if (error.response?.status 401) { localStorage.removeItem(token) window.location.href /login } else { ElMessage.error(error.response?.data?.message || 网络异常) } return Promise.reject(error) } ) export default request需要解释的是响应拦截器里return response.data是把 axios 包装去掉直接返回后端 Result 结构中的 data 字段这样业务组件里拿到的就是干净的数据不用每处都写.then(res res.data.data)。/api这个 baseURL 在开发环境会交给 Vite 代理转发到后端 8080在生产环境则由 Nginx 反向代理前端本身不需要知道后端真实地址。组件中调用时const list ref([]) const total ref(0) const loading ref(false) const loadHouses async (page 1) { loading.value true const res await getHouses({ page, size: 10, keyword: keyword.value }) list.value res.records total.value res.total loading.value false }分页参数 page、size 和后端 Page 对象字段要对应如果后端返回records和total前端就解这两个。接口联调时用浏览器 DevTools 的 Network 面板看实际响应比猜字段名快得多。3.4 交易下单表单与 Element Plus 表单校验用户从房源详情点击“立即购买”或“联系房东”时通常弹出交易表单包含联系电话、看房时间、留言等。Element Plus 的 Form 校验需要绑定 model 和 rulesel-form refformRef :modelorderForm :rulesrules label-width80px el-form-item label联系电话 propphone el-input v-modelorderForm.phone / /el-form-item el-form-item el-button typeprimary clicksubmitOrder提交订单/el-button /el-form-item /el-formconst rules { phone: [ { required: true, message: 请输入联系电话, trigger: blur }, { pattern: /^1[3-9]\d{9}$/, message: 手机号格式不正确, trigger: blur } ] }提交逻辑里await formRef.value.validate()会返回 Promise校验通过后才发请求。注意 el-form-item 的 prop 名字必须和 rules 的 key 一致否则校验不生效。交易金额不能由前端传后端要根据 house 表的价格重新计算防止用户改 JS 提交 0 元订单这一点在下一章专门讲。4. 前后端联调、JWT 鉴权与交易类系统的安全边界4.1 开发环境跨域与 Vite 代理配置前后端分离后前端跑 5173后端跑 8080直接 fetch 会被 CORS 拦截。最常见的解决方式是前端代理而不是后端开跨域。在 vite.config.js 中export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) } } } })这个代理配置的意思是前端请求/api/houses开发服务器把请求转发到http://localhost:8080/houses因为后端 Controller 里路径是/houses没有/api前缀。如果后端也写/api/houses就去掉 rewrite。changeOrigin: true是必要的它会替换请求头中的 Host 字段绕过后端对域名来源的校验。如果你非要在后端开 CORS也可以但不要在 Spring Security 的 filter 链中乱序配置。用 CorsConfig 类Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); config.addAllowedOrigin(http://localhost:5173); config.addAllowedMethod(*); config.addAllowedHeader(*); config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }setAllowCredentials(true)和addAllowedOrigin不能同时用*浏览器会拒绝这种组合。因此这里写了具体前端地址。4.2 基于 JWT 的登录认证与 Spring Security 配置要点房屋交易系统涉及用户资金和隐私登录认证是刚需。常见方案是 Spring Security JWT。流程用户提交用户名密码到/auth/login后端校验通过后生成 token 返回前端本地存之后每次请求带Authorization: Bearer token。Spring Security 6 的配置和旧版有差异核心过滤器链写法Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http.csrf(csrf - csrf.disable()) .sessionManagement(sm - sm.sessionCreationPolicy(SessionCreationPolicy.STATELESS)) .authorizeHttpRequests(auth - auth .requestMatchers(/auth/login).permitAll() .requestMatchers(/houses/**).permitAll() .requestMatchers(/orders/**).authenticated() .anyRequest().authenticated()) .addFilterBefore(jwtFilter, UsernamePasswordAuthenticationFilter.class); return http.build(); }说明STATELESS是 JWT 模式的关键服务端不保存 session每次请求都从 token 解析用户身份。/houses/**放行是因为房源列表和详情无需登录但/orders/**必须登录下单接口权限收紧。jwtFilter在 UsernamePasswordAuthenticationFilter 之前执行作用是从 header 取 token、解析、把 Authentication 对象放入 SecurityContext。注意若后端返回 403 且控制台没有任何日志先检查csrf.disable()是否执行其次检查 CORS 过滤器顺序。4.3 联调中常见的 4 个异常状态码排查状态码现象排查方向404接口请求找不到路径后端 Controller 路径和前端请求路径是否一致代理 rewrite 是否正确403ForbiddenCSRF 未关闭 / token 过期 / 用户权限不足 / CORS 配置问题401Unauthorized没带 Authorization header / token 无效 / 过期500服务器内部错误看后端控制台日志通常是数据库字段不匹配或空指针联调原则前端先看 Network 面板确认请求 URL、方法、请求头和响应体后端看控制台异常堆栈。在 logback 配置里把 SQL 日志打出来设置logging.level.com.example.house.mapperdebug就能在控制台看到 MyBatis 生成的 SQL 和参数这比任何插件都直观。4.4 交易金额必须后端二次校验前端提交订单时只传 houseId不传金额。后端生成订单逻辑Transactional public TradeOrder createOrder(OrderCreateDTO dto, Long buyerId) { House house houseMapper.selectById(dto.getHouseId()); if (house null || house.getStatus() ! 1) { throw new BusinessException(房源不存在或已下架); } TradeOrder order new TradeOrder(); order.setOrderNo(generateOrderNo()); order.setHouseId(house.getId()); order.setBuyerId(buyerId); order.setSellerId(house.getOwnerId()); order.setAmount(house.getPrice()); order.setStatus(1); tradeOrderMapper.insert(order); house.setStatus(2); // 改为已锁定 houseMapper.updateById(house); return order; }Transactional保证订单创建和房源状态更新要么都成功要么都失败防止用户同时提交多个订单导致一房多卖。generateOrderNo 用时间戳加随机串生成不要用数据库自增 id 当订单号猜测难度太低。5. 打包部署前端静态资源、后端 jar 与 zip 交付结构5.1 前端构建与产物处理本地联调通过后前端打生产包npm run build生成 dist 目录。里边的 index.html 和 assets 目录就是全部静态资源。这里有个常见问题Vue Router 使用 createWebHistory 时刷新非首页会 404因为后台没有对应的路由。解决方式是在 Nginx 配置里加location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; }如果是 Spring Boot 内嵌容器托管 Vue也要在资源映射里做同样处理。很多教程让后端把 dist 复制到 static 目录但更专业的生产方式是用 Nginx 独立部署前端Spring Boot 只暴露 /api 接口这样静态资源性能和接口扩展性都更好。5.2 后端构建与启动参数后端用 Maven 打包mvn clean package -DskipTests java -jar target/house-system.jar --server.port8080如果启动时提示端口占用换端口或netstat -aon | findstr 8080查进程杀掉。数据库连接配置放在application.yml中生产环境建议外部化配置spring: datasource: url: jdbc:mysql://127.0.0.1:3306/house_trade?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: ${DB_PASSWORD}使用${DB_PASSWORD}环境变量替换明文密码避免仓库泄露凭据。transaction 表的字符集也要确认 utf8mb4否则用户昵称存不进。5.3 交付 zip 的标准目录结构从标题“基于springbootvue的房屋交易系统.zip”来看交付物是一个压缩包。我一般会整理成这样的结构对方拿到手不需要问问题就能跑house-trade-system/ ├── backend/ // 后端源码含 pom.xml ├── frontend/ // 前端源码含 package.json ├── sql/ // 建库脚本和种子数据 ├── docs/ // 部署文档和接口说明 └── README.md // 环境版本、快速开始、账号说明README 里要明确写 JDK 版本要求、Node 版本要求、MySQL 版本要求以及初始化步骤三连mysql -u root -p sql/init.sql cd backend mvn spring-boot:run cd frontend npm install npm run dev这三个命令按顺序执行系统就可以在 http://localhost:5173 访问。管理员账号直接写死在 README 中比如 admin/admin123方便评审老师体验完整功能。压缩用zip -r house-trade-system.zip house-trade-system/注意不要把 node_modules、target、.git 打进去这些目录既大又不能直接使用。5.4 部署后的快速验证清单部署完成不要急着关终端按下面列表逐项过一遍访问首页确认图片能加载、房源列表有数据。搜索框输入关键字看 URL 参数是否正确携带。退出登录后直接访问订单 URL 是否被重定向到登录页。使用管理员账号登录后台是否可以上下架房源。用两个普通账号模拟一次购买流程确认双方订单状态变化。其中第 3 步是前端鉴权第 5 步是后端事务与状态流转这两处是房屋交易系统最容易出问题的环节。如果状态流转出错优先检查 trade_order.status 在下单、付款、取消三个动作的 before/after 日志。日志里加上交易单号比看界面上报错直观得多。本文还有配套的精品资源点击获取 SpringBoot+Vue房屋交易系统：从解压zip到部署全流程指南
简介基于 Spring Boot 与 Vue 的房屋交易系统完整源码包面向 Java 全栈入门及进阶学习者尤其适合用作毕业设计、课程设计或工程实训项目。系统实现前后端分离涵盖房源发布、浏览、交易管理等核心业务模块基于 JDK 1.8、MySQL 5.7 与 Maven 构建支持在 Eclipse、IDEA 中直接部署运行也可修改二次开发。压缩包共包含 665 个文件大小约 20.62MB以 Java 后端源码、Vue 前端组件和 SQL 数据库脚本为主体同时包含 SVG、JPG、PNG 图片素材JS、CSS 静态资源以及 BAT 启动与打包脚本其中 Java 文件对应控制器、服务与实体层Vue 文件覆盖页面布局与交互逻辑SQL 脚本可快速完成建库建表及初始数据写入。附带的部署文档配合清晰目录结构能显著降低环境搭建门槛帮助读者掌握前后端分离项目的框架组织、接口调用与业务实现思路。上线以来已有七百四十六人学习适合希望跑通完整项目并借鉴真实业务代码的开发者。1. 拿到 zip 别急着解压SpringBootVue 房屋交易系统该从哪下手很多人电脑上都有类似名为“3b007基于springbootvue的房屋交易系统.zip”的压缩包可能是课程设计或毕业设计平台下载的。这类包通常包含完整的前后端源码、数据库脚本和说明文档但真正跑起来却要费一番功夫。Spring Boot 负责后端接口和数据库交互Vue 负责页面渲染和用户交互两者通过 RESTful API 通信。这个组合在交易类系统中很常见因为它前后端分离职责清晰Spring Boot 的起步依赖和 Vue 的组件化开发都能显著缩短开发周期。下面我会从解压后的工程结构讲起按数据库、后端、前端、联调、打包的顺序把一套房屋交易系统从源码变成生产可用服务的完整路径走一遍。不管你是准备答辩还是第一次接手这类全栈项目都能从里面找到可以直接复用的命令和配置。2. 房屋交易系统的数据库设计与 Spring Boot 后端分层2.1 房屋交易系统的核心实体与表关系交易系统的核心不是“房屋”单张表而是围绕房源、用户、订单、合同、收藏、看房记录这些实体。最常见的做法是设计六张表表名主要字段用途houseid, title, area, price, type, status, owner_id, create_time房源信息type 是 买卖/租赁status 是 上架/下架/已成交userid, username, password, real_name, phone, role用户账号role 区分 普通用户/经纪人/管理员trade_orderid, order_no, house_id, buyer_id, seller_id, amount, status, create_time交易订单status 表示 待付款/已完成/已取消contractid, order_id, house_id, content, sign_time电子合同一对一关联订单favoriteid, user_id, house_id, create_time收藏夹多对多关联的中间表view_appointmentid, house_id, user_id, appoint_time, status看房预约这里有几个设计边界要注意买卖和租赁不要分成两张表用 type 字段区分就行否则用户端筛选和后台统计都很别扭价格字段用DECIMAL(12,2)而不是DOUBLE避免浮点误差订单号order_no设唯一索引因为后续会拿它对接支付回调。2.1.1 数据库脚本的导入与验证zip 里一般会带 .sql 脚本我建议用命令行导入而不是图形化工具能少碰编码坑mysql -u root -p -e CREATE DATABASE house_trade DEFAULT CHARACTER SET utf8mb4; mysql -u root -p house_trade house_trade.sql逻辑说明第一条命令建库指定 utf8mb4 是因为房源标题里可能有表情符号或生僻字utf8 存不下第二条命令导入表结构和初始数据。如果导入时报Unknown collation错误多半是 SQL 文件里的排序规则跟你本地 MySQL 版本不兼容可以用 VS Code 打开 SQL把utf8mb4_0900_ai_ci批量替换成utf8mb4_general_ci。导入后务必执行SHOW TABLES;和SELECT COUNT(*) FROM house;确认有数据很多项目跑不起来就是卡在空表导致前端列表空白。2.2 Spring Boot 项目结构按包名划分职责后端工程解压后标准的 Maven 结构是 src/main/java 下按包名分层com.example.house ├── config // 跨域、鉴权、Swagger 配置 ├── controller // 接口层只做参数接收和结果封装 ├── service // 业务层事务边界在这里 ├── mapper // MyBatis-Plus 的 Mapper 接口 ├── entity // 数据库实体映射 ├── dto // 前端传参和返回用的数据传输对象 └── common // 统一返回 Result、异常处理、常量我一般会在 entity 和 dto 之间做严格区分而不是直接把实体扔给前端。比如前台提交房源时只需要 title、area、price 这几个字段但实体里还有 owner_id、status、create_time 这些后端要自己填的值。用 DTO 接收能防止前端越权提交 status 字段这是交易系统很关键的边界。2.3 用 MyBatis-Plus 写数据访问层少写一半 SQL现在大部分 Spring Boot 房屋交易系统都集成 MyBatis-Plus而不是纯 MyBatis。区别在于 MP 内置了 BaseMapper单表 CRUD 不用写 XML。在 pom.xml 里加依赖dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency版本别用 4.x网上很多配置教程都是 3.x4.x 改了不少包名。MP 的通用接口写法Mapper public interface HouseMapper extends BaseMapperHouse { }Service 层调用时的逻辑说明Service public class HouseService { Autowired private HouseMapper houseMapper; public PageResultHouse listOnSale(String keyword, int page, int size) { LambdaQueryWrapperHouse wrapper new LambdaQueryWrapper(); wrapper.eq(House::getStatus, 1) .like(StringUtils.hasText(keyword), House::getTitle, keyword) .orderByDesc(House::getCreateTime); PageHouse p new Page(page, size); houseMapper.selectPage(p, wrapper); return PageResult.from(p); } }这段代码里eq(House::getStatus, 1)用 Lambda 表达式指定 status 等于 1相比手写列名能避免字段改名后编译不报错的问题like(condition, column, value)的第一个条件参数是 boolean只有 keyword 非空时才拼接 LIKE空参数时自动跳过避免前端传空字符串导致 SQL 语义变化。selectPage是 BaseMapper 自带的分页方法配合 MP 的分页插件才能生效否则你会发现 SQL 里没有 LIMIT。分页插件配置在 config 包里Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }忘了加这个 Bean 是最常见的坑接口能通但返回的 total 永远为 0页面只能看到第一页数据。3. Vue 前端从脚手架到房源列表和交易下单3.1 用 Vite 创建 Vue 3 项目而不是 Vue CLI历史原因很多老教程把 Vue CLI 当成默认方案但新项目我更推荐 Vite它的依赖预构建和热更新速度比 webpack 快一个数量级。命令npm create vitelatest house-web -- --template vue cd house-web npm install npm install vue-router4 pinia axios element-plus npm run dev参数说明--template vue指定 Vue 3 模板Vue 2 模板要写vue-ts或vue-javascript但 Vue 2 已经停止维护交易系统这种新项目直接用 Vue 3。Element Plus 是和 Vue 3 配套的组件库如果老项目用 Vue 2 就得装 element-ui 而不是 element-plus别搞混。安装完后需要修改 src/main.js 把 Element Plus 注册进去这里有个优化点不要全量引入而是按需引入启动体积能小一倍。用官方推荐的 unplugin-auto-import 插件即可这样写el-table时组件自动导入无需手动注册。3.2 用 vue-router 管理页面路由和跳转逻辑房屋交易系统的页面通常包括首页、房源列表、房源详情、发布房源、个人中心、订单管理。在 src/router/index.js 里配置import { createRouter, createWebHistory } from vue-router const routes [ { path: /, component: () import(../views/Home.vue) }, { path: /houses, component: () import(../views/HouseList.vue) }, { path: /houses/:id, component: () import(../views/HouseDetail.vue), props: true }, { path: /orders/:id, component: () import(../views/OrderConfirm.vue), meta: { requiresAuth: true } } ] const router createRouter({ history: createWebHistory(), routes }) router.beforeEach((to) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { return /login?redirect to.path } return true }) export default router代码逻辑说明props: true让路由参数:id作为 props 传给组件这样在组件里直接const props defineProps([id])就能拿到不需要再写route.params。beforeEach做全局鉴权拦截要求登录才能进入订单确认页如果没 token 就跳登录页并带上 redirect 参数登录成功后能回到原目标页。这个模式比在页面里手动检查 token 要清爽得多。3.3 房源列表页的 Axios 请求与状态管理列表页是整个系统最核心的页面。其中 axios 请求建议统一封装在 src/api/house.jsimport request from ../utils/request export const getHouses (params) { return request.get(/api/houses, { params }) } export const createOrder (data) { return request.post(/api/orders, data) }这里的 request 实例在 utils/request.js 里创建核心是拦截器和超时配置import axios from axios import { ElMessage } from element-plus const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.response.use( (response) response.data, (error) { if (error.response?.status 401) { localStorage.removeItem(token) window.location.href /login } else { ElMessage.error(error.response?.data?.message || 网络异常) } return Promise.reject(error) } ) export default request需要解释的是响应拦截器里return response.data是把 axios 包装去掉直接返回后端 Result 结构中的 data 字段这样业务组件里拿到的就是干净的数据不用每处都写.then(res res.data.data)。/api这个 baseURL 在开发环境会交给 Vite 代理转发到后端 8080在生产环境则由 Nginx 反向代理前端本身不需要知道后端真实地址。组件中调用时const list ref([]) const total ref(0) const loading ref(false) const loadHouses async (page 1) { loading.value true const res await getHouses({ page, size: 10, keyword: keyword.value }) list.value res.records total.value res.total loading.value false }分页参数 page、size 和后端 Page 对象字段要对应如果后端返回records和total前端就解这两个。接口联调时用浏览器 DevTools 的 Network 面板看实际响应比猜字段名快得多。3.4 交易下单表单与 Element Plus 表单校验用户从房源详情点击“立即购买”或“联系房东”时通常弹出交易表单包含联系电话、看房时间、留言等。Element Plus 的 Form 校验需要绑定 model 和 rulesel-form refformRef :modelorderForm :rulesrules label-width80px el-form-item label联系电话 propphone el-input v-modelorderForm.phone / /el-form-item el-form-item el-button typeprimary clicksubmitOrder提交订单/el-button /el-form-item /el-formconst rules { phone: [ { required: true, message: 请输入联系电话, trigger: blur }, { pattern: /^1[3-9]\d{9}$/, message: 手机号格式不正确, trigger: blur } ] }提交逻辑里await formRef.value.validate()会返回 Promise校验通过后才发请求。注意 el-form-item 的 prop 名字必须和 rules 的 key 一致否则校验不生效。交易金额不能由前端传后端要根据 house 表的价格重新计算防止用户改 JS 提交 0 元订单这一点在下一章专门讲。4. 前后端联调、JWT 鉴权与交易类系统的安全边界4.1 开发环境跨域与 Vite 代理配置前后端分离后前端跑 5173后端跑 8080直接 fetch 会被 CORS 拦截。最常见的解决方式是前端代理而不是后端开跨域。在 vite.config.js 中export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) } } } })这个代理配置的意思是前端请求/api/houses开发服务器把请求转发到http://localhost:8080/houses因为后端 Controller 里路径是/houses没有/api前缀。如果后端也写/api/houses就去掉 rewrite。changeOrigin: true是必要的它会替换请求头中的 Host 字段绕过后端对域名来源的校验。如果你非要在后端开 CORS也可以但不要在 Spring Security 的 filter 链中乱序配置。用 CorsConfig 类Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); config.addAllowedOrigin(http://localhost:5173); config.addAllowedMethod(*); config.addAllowedHeader(*); config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }setAllowCredentials(true)和addAllowedOrigin不能同时用*浏览器会拒绝这种组合。因此这里写了具体前端地址。4.2 基于 JWT 的登录认证与 Spring Security 配置要点房屋交易系统涉及用户资金和隐私登录认证是刚需。常见方案是 Spring Security JWT。流程用户提交用户名密码到/auth/login后端校验通过后生成 token 返回前端本地存之后每次请求带Authorization: Bearer token。Spring Security 6 的配置和旧版有差异核心过滤器链写法Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http.csrf(csrf - csrf.disable()) .sessionManagement(sm - sm.sessionCreationPolicy(SessionCreationPolicy.STATELESS)) .authorizeHttpRequests(auth - auth .requestMatchers(/auth/login).permitAll() .requestMatchers(/houses/**).permitAll() .requestMatchers(/orders/**).authenticated() .anyRequest().authenticated()) .addFilterBefore(jwtFilter, UsernamePasswordAuthenticationFilter.class); return http.build(); }说明STATELESS是 JWT 模式的关键服务端不保存 session每次请求都从 token 解析用户身份。/houses/**放行是因为房源列表和详情无需登录但/orders/**必须登录下单接口权限收紧。jwtFilter在 UsernamePasswordAuthenticationFilter 之前执行作用是从 header 取 token、解析、把 Authentication 对象放入 SecurityContext。注意若后端返回 403 且控制台没有任何日志先检查csrf.disable()是否执行其次检查 CORS 过滤器顺序。4.3 联调中常见的 4 个异常状态码排查状态码现象排查方向404接口请求找不到路径后端 Controller 路径和前端请求路径是否一致代理 rewrite 是否正确403ForbiddenCSRF 未关闭 / token 过期 / 用户权限不足 / CORS 配置问题401Unauthorized没带 Authorization header / token 无效 / 过期500服务器内部错误看后端控制台日志通常是数据库字段不匹配或空指针联调原则前端先看 Network 面板确认请求 URL、方法、请求头和响应体后端看控制台异常堆栈。在 logback 配置里把 SQL 日志打出来设置logging.level.com.example.house.mapperdebug就能在控制台看到 MyBatis 生成的 SQL 和参数这比任何插件都直观。4.4 交易金额必须后端二次校验前端提交订单时只传 houseId不传金额。后端生成订单逻辑Transactional public TradeOrder createOrder(OrderCreateDTO dto, Long buyerId) { House house houseMapper.selectById(dto.getHouseId()); if (house null || house.getStatus() ! 1) { throw new BusinessException(房源不存在或已下架); } TradeOrder order new TradeOrder(); order.setOrderNo(generateOrderNo()); order.setHouseId(house.getId()); order.setBuyerId(buyerId); order.setSellerId(house.getOwnerId()); order.setAmount(house.getPrice()); order.setStatus(1); tradeOrderMapper.insert(order); house.setStatus(2); // 改为已锁定 houseMapper.updateById(house); return order; }Transactional保证订单创建和房源状态更新要么都成功要么都失败防止用户同时提交多个订单导致一房多卖。generateOrderNo 用时间戳加随机串生成不要用数据库自增 id 当订单号猜测难度太低。5. 打包部署前端静态资源、后端 jar 与 zip 交付结构5.1 前端构建与产物处理本地联调通过后前端打生产包npm run build生成 dist 目录。里边的 index.html 和 assets 目录就是全部静态资源。这里有个常见问题Vue Router 使用 createWebHistory 时刷新非首页会 404因为后台没有对应的路由。解决方式是在 Nginx 配置里加location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; }如果是 Spring Boot 内嵌容器托管 Vue也要在资源映射里做同样处理。很多教程让后端把 dist 复制到 static 目录但更专业的生产方式是用 Nginx 独立部署前端Spring Boot 只暴露 /api 接口这样静态资源性能和接口扩展性都更好。5.2 后端构建与启动参数后端用 Maven 打包mvn clean package -DskipTests java -jar target/house-system.jar --server.port8080如果启动时提示端口占用换端口或netstat -aon | findstr 8080查进程杀掉。数据库连接配置放在application.yml中生产环境建议外部化配置spring: datasource: url: jdbc:mysql://127.0.0.1:3306/house_trade?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: ${DB_PASSWORD}使用${DB_PASSWORD}环境变量替换明文密码避免仓库泄露凭据。transaction 表的字符集也要确认 utf8mb4否则用户昵称存不进。5.3 交付 zip 的标准目录结构从标题“基于springbootvue的房屋交易系统.zip”来看交付物是一个压缩包。我一般会整理成这样的结构对方拿到手不需要问问题就能跑house-trade-system/ ├── backend/ // 后端源码含 pom.xml ├── frontend/ // 前端源码含 package.json ├── sql/ // 建库脚本和种子数据 ├── docs/ // 部署文档和接口说明 └── README.md // 环境版本、快速开始、账号说明README 里要明确写 JDK 版本要求、Node 版本要求、MySQL 版本要求以及初始化步骤三连mysql -u root -p sql/init.sql cd backend mvn spring-boot:run cd frontend npm install npm run dev这三个命令按顺序执行系统就可以在 http://localhost:5173 访问。管理员账号直接写死在 README 中比如 admin/admin123方便评审老师体验完整功能。压缩用zip -r house-trade-system.zip house-trade-system/注意不要把 node_modules、target、.git 打进去这些目录既大又不能直接使用。5.4 部署后的快速验证清单部署完成不要急着关终端按下面列表逐项过一遍访问首页确认图片能加载、房源列表有数据。搜索框输入关键字看 URL 参数是否正确携带。退出登录后直接访问订单 URL 是否被重定向到登录页。使用管理员账号登录后台是否可以上下架房源。用两个普通账号模拟一次购买流程确认双方订单状态变化。其中第 3 步是前端鉴权第 5 步是后端事务与状态流转这两处是房屋交易系统最容易出问题的环节。如果状态流转出错优先检查 trade_order.status 在下单、付款、取消三个动作的 before/after 日志。日志里加上交易单号比看界面上报错直观得多。本文还有配套的精品资源点击获取