SpringBoot4 + MyBatis 前后端分离实战｜从零实现坏习惯管理系统，支持局域网手机访问CRUD

文章目录

• • 标签
• 正文
• • 一、项目简介
  • 二、技术栈
  • 三、项目目录结构
  • 四、功能清单
  • 五、数据库准备
  • 六、后端核心配置
  • 七、跨域解决方案
  • 八、局域网访问最重要知识点（踩坑重点）
  • • [1. 不要在前端写死 `localhost`](#1. 不要在前端写死 localhost)
    • [2. 连通排查顺序](#2. 连通排查顺序)
  • 九、部署运行完整步骤
  • 十、学习收获&常见踩坑总结
  • 十一、开源地址
  • 十二、后续拓展方向（可供读者自行完善）

标签

SpringBoot MyBatis 前后端分离 MySQL 局域网调试 Java练手项目

---

正文

一、项目简介

最近从零手写了一套极简前后端分离Demo：坏习惯管理系统。

没有引入Vue、React等重型前端框架，仅原生HTML+JavaScript实现页面 ；后端采用 Spring Boot4 + MyBatis + MySQL，实现完整增删、查询、编辑、删除功能。

最大亮点：支持局域网内手机、平板、其他电脑 同时访问网页操作数据库，解决新手经常踩坑的 localhost 局域网访问难题。

适合作为Java Web入门练手、课程设计参考项目。

postman 调试：

开源仓库地址：

github : ​​​​​​​​​​​ ​​​​​​​​​​​ ​​​​​​​​​​​ ​​​​​​​​​​​ ​​​​​​​​​​​ ​​​​​​​​​​​ ​​​​​​​​​​​ ​​​​​​​​​​​ ​​​​​​​​​​​ ​​​​​​​​​​​ ​​​​​​​​​​​ ​​​​​​​​​​​ ​​​​​​​​​​​ ​​​​​​​​​​​ ​​​​​​​​​​​ ​​​​​​​​​​​ ​​​​​​​​​​​ bad-habbit-manage

二、技术栈

✅ 后端

• Spring Boot 4.0.8
• MyBatis
• MySQL 8.0+
• Maven

✅ 前端

• 原生 HTML + JavaScript Fetch API
• CSS 原生样式
• Live Server 直接运行，无需前端构建工具

三、项目目录结构

bad-habbit-manage/
├── backend/     # SpringBoot后端完整源码
├── frontend/    # 前端页面 index.html
├── README.md    # 部署文档
├── LICENSE      # MIT开源协议
└── .gitignore

四、功能清单

1. 新增坏习惯记录
2. 表格展示全部数据列表
3. 弹窗编辑修改数据
4. 删除记录（带确认弹窗）
5. 局域网多设备访问（核心亮点）

接口一览：

请求方式	接口地址	功能
POST	/api/addHabbit	新增
GET	/api/list	查询全部列表
GET	/api/getById?id=xx	根据ID查询单条
PUT	/api/update	修改数据
DELETE	/api/del?id=xx	删除数据

五、数据库准备

先在MySQL执行建库、建表SQL

CREATE DATABASE IF NOT EXISTS bad_habbit DEFAULT CHARACTER SET utf8mb4;
USE bad_habbit;

CREATE TABLE `main` (
  `id` INT PRIMARY KEY AUTO_INCREMENT COMMENT '主键ID',
  `name` VARCHAR(100) NOT NULL COMMENT '坏习惯名称',
  `desc` VARCHAR(500) COMMENT '详细描述'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

六、后端核心配置

修改 application.yml，重点注意两处：数据库账号、开放局域网监听

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/bad_habbit?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
    username: root
    password: 你的数据库密码

# 关键配置：0.0.0.0 允许局域网其他设备访问服务
server:
  address: 0.0.0.0
  port: 8080

mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.example.bad_habbit.entity

💡坑点提醒：很多新手局域网手机访问失败，就是缺少 address: 0.0.0.0 配置。

七、跨域解决方案

项目使用全局跨域配置类 ，解决浏览器同源策略限制，兼容 GET/POST/PUT/DELETE 全部请求，比单纯在Controller添加@CrossOrigin更加稳定。

package com.example.bad_habbit.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("*")
                .allowedMethods("GET","POST","PUT","DELETE","OPTIONS")
                .maxAge(3600);
    }
}

八、局域网访问最重要知识点（踩坑重点）

1. 不要在前端写死 localhost

// ❌ 错误写法！手机访问localhost代表手机本机，无法连接电脑后端
const baseUrl = "http://localhost:8080/api";

// ✅ 正确写法：填写电脑局域网IPv4地址
const baseUrl = "http://192.168.x.x:8080/api";

获取本机局域网IP：Windows cmd 执行 ipconfig，找到无线适配器IPv4地址。

2. 连通排查顺序

1. SpringBoot配置 server.address:0.0.0.0，重启项目
2. 关闭Windows防火墙，或者放行8080端口
3. 手机和电脑连接同一个WiFi
4. 修改前端JS接口地址为电脑局域网IP
5. Live Server启动网页，手机浏览器访问LiveServer地址

九、部署运行完整步骤

1. MySQL执行初始化SQL
2. 修改后端yml数据库账号密码，启动SpringBoot
3. 使用VSCode Live Server打开 frontend/index.html
4. 电脑本机直接测试增删改查
5. 同WiFi下手机输入LiveServer地址，局域网访问操作

十、学习收获&常见踩坑总结

1. 415 Unsupported Media Type
   前端使用@RequestBody接收JSON，请求头必须携带 Content-Type:application/json；Postman选择raw->JSON。
2. 跨域CORS报错
   简单@CrossOrigin在高版本SpringBoot对PUT/DELETE预检请求容易失效，推荐全局CORS配置类。
3. 局域网手机页面打开，但是无法提交数据
   90%原因：前端地址写了localhost，没有替换成电脑局域网IP；其次是防火墙拦截、SpringBoot没有监听0.0.0.0。
4. Git推送仓库只上传README
   执行git add .将所有文件加入版本管理，不要只单独add单个文件。

十一、开源地址

完整前后端源码全部开源，欢迎Star、Fork学习：

点击这里进入仓库

十二、后续拓展方向（可供读者自行完善）

1. 增加分页查询
2. 后端增加参数校验、统一异常处理
3. 增加简单登录鉴权
4. 页面UI美化，增加加载动画提示
5. 打包Jar，实现一键启动

---