简介一份Java版微信小程序名片管理系统完整项目面向做课程设计与毕业设计的学生适合需要快速上手前后端完整开发的读者。资源内含项目源码、数据库脚本、软件工具与配套教程系统功能完善、界面美观经严格调试可稳定运行。压缩包共736个文件、约11.2MB类型覆盖小程序前端脚本与页面、后端Java代码、后台HTML页面、XML配置及SQL脚本等开发环境推荐IDEA、微信开发者工具、MySQL5.7和Tomcat便于本地部署复现。已有200人学习下载。从内容结构看除核心业务代码外还包含日志、工具压缩包及多种图标字体资源可帮助理解企业信息、注册用户、客户名片、联系人名片、新闻通知、留言板等业务模块也能学习SSM/SpringBoot架构下小程序与后台的交互方式是一份实用价值较高的课设毕设参考资料。1. 名片管理系统这套 Java 源码包里到底装了什么这套基于微信小程序的名片管理系统是典型的 Java 课程设计源码包小程序端负责录入、展示和编辑名片Java 后端提供接口MySQL 数据库负责落库附带教程文档和完整的数据库脚本。我拆包时最大的感受是分层干净小程序页面里看不到堆砌的 SQL所有数据操作都走后端接口这一点在答辩时非常好讲。拿到手你只需要解决三件事把 SQL 导入 MySQL、在 IDEA 里启动 Spring Boot 工程、把小程序端的请求地址指向本机。它适合两类人一类是需要课程设计或毕业设计项目实例的在校生另一类是想找一份真实小程序前后端联调代码来改的开发者。下面我从请求链路开始讲再带你一步步把项目跑起来。2. 系统架构与数据模型从小程序 wx.request 到后端 Mapper 的完整链路很多新手拿到源码后的第一反应是直接点启动结果数据库没导、路径没改冒出一屏红色报错。我建议先花 10 分钟把请求链路读明白后面排错会快很多。这套项目是典型的前后端分离结构小程序只负责页面渲染Java 后端负责业务逻辑与数据访问数据库只存名片和用户相关信息。小程序不直接连 MySQL这是它和传统网页课设最大的区别也是面试官喜欢追问的地方。2.1 请求链路前端怎么把名片数据交给后端小程序端通过wx.request发起 HTTP 请求把名片表单里的字段组装成 JSON 对象POST 到后端接口。后端 Controller 接收 JSON 并调用 ServiceService 再通过 Mapper 访问 MySQL最终把结果返回给小程序。以新增名片为例小程序端核心代码大概是这样的// pages/add/add.js const app getApp() wx.request({ url: app.globalData.baseUrl /api/card/add, method: POST, header: { Content-Type: application/json, Authorization: Bearer wx.getStorageSync(token) }, data: { name: this.data.form.name, company: this.data.form.company, position: this.data.form.position, phone: this.data.form.phone, email: this.data.form.email, address: this.data.form.address, remark: this.data.form.remark }, success(res) { if (res.statusCode 200) { wx.showToast({ title: 保存成功, icon: success }) } else { console.error(保存失败, res) } }, fail(err) { console.error(请求异常, err) } })这段代码里有三个关键点baseUrl在全局配置里维护换环境只改一处Authorization头里带登录 token后端靠它识别用户请求体里的字段名要和后端实体类一一对应否则后端反序列化时拿不到值插入的数据就是 null。后端收到请求后的处理逻辑通常长这样RestController RequestMapping(/api/card) public class CardController { PostMapping(/add) public Result add(RequestBody Card card, RequestHeader(Authorization) String token) { // 从 token 中解出 userId不信任前端传的 userId Long userId tokenUtils.parseUserId(token); card.setUserId(userId); cardService.insert(card); return Result.ok(card.getId()); } }这里我在代码里直接写了“从 token 解出 userId”的注释是因为很多课设源码为了省事会让前端把openid或userId直接放进请求体。如果你拿到的版本也是这种写法建议改成后端解析 token哪怕答辩时被问“如何保证用户只能操作自己的名片”你也能答得出来。Result.ok()是统一返回包装一般包含 code、message、data 三个字段小程序端主要以res.data.code判断业务成功与否。2.2 名片表的数据结构字段、类型与查询索引数据库的设计直接决定后端代码怎么写。名片管理系统的核心表一般是business_card常见的建表语句如下CREATE TABLE business_card ( id int(11) NOT NULL AUTO_INCREMENT, user_id varchar(64) NOT NULL COMMENT 微信用户唯一标识, name varchar(32) NOT NULL COMMENT 姓名, company varchar(64) DEFAULT NULL COMMENT 公司, position varchar(32) DEFAULT NULL COMMENT 职位, phone varchar(20) DEFAULT NULL COMMENT 手机号, email varchar(64) DEFAULT NULL COMMENT 邮箱, address varchar(128) DEFAULT NULL COMMENT 公司地址, remark varchar(255) DEFAULT NULL COMMENT 备注, img_url varchar(255) DEFAULT NULL COMMENT 头像地址, create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_user_id (user_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;表结构透露了三个信息第一user_id是区分不同用户的逻辑外键因为一个微信用户对应一个openid后端登录后会把openid对应到内部用户 ID第二img_url字段说明头像/名片图片是走 URL 存储的而不是把图片二进制直接塞进数据库第三create_time和update_time都设置了数据库默认值插入时不用手动填。此外还需要一张用户表最简单的字段就是id、openid、nick_name、avatar_url、create_time登录时查不到记录就插入一条新用户。关于登录态微信小程序的流程是wx.login拿到临时 code后端拿 code 调微信接口换openid再生成一个随机 token 返回给小程序。后续请求都带这个 token后端通过 token 反查用户。这个机制不复杂但它决定了你后面做“我的名片”这类功能时数据按谁过滤。2.3 源码包的文件地图先读哪几个文件拿到压缩包先别急着跑按下面这张表建立整体认知读文件的顺序也按下表来。路径 / 文件作用优先级/db/namecard.sql建库建表脚本含初始数据最先看/server/src/main/resources/application.yml后端端口、数据库连接、日志配置最先改/server/.../controller/CardController.java名片接口入口查看路由和方法第二看/server/.../service/CardService.java业务逻辑增删改查的规则在这里第三看/server/.../mapper/CardMapper.xmlSQL 语句字段映射的坑都在这里第三看/miniprogram/app.js全局配置baseUrl在这里第二看/miniprogram/pages/index/index.js列表页逻辑看请求封装方式第四看/miniprogram/pages/add/add.js新增/编辑页逻辑表单提交入口第四看我个人的阅读习惯是“数据库 - 配置文件 - Controller - Mapper - 小程序请求封装”。不要从入口文件一路往下看那样会被大量无关代码绕晕。先看数据库能知道系统有哪些业务对象再看 Controller 能知道系统提供哪些接口最后再看小程序页面如何拼接数据。如果这份教程文档里还附带接口说明或答辩 PPT建议参照文档里的接口路径对照 Controller 代码看一遍比凭空猜要快得多。3. 三端联调开发者工具、IDEA 与 MySQL 把项目跑起来这一章解决“能不能跑”的问题。项目跑起来的顺序我建议固定为先数据库、再后端、最后小程序。数据库没导后端启动时连接失败后端没启动小程序端请求直接超时。按这个顺序排错每一步的失败原因都是唯一的。3.1 第一步初始化数据库与准备账号先确认本机环境下表是这套项目常见的前置依赖。JDK 版本不对会导致启动直接失败MySQL 版本过低或过高可能出现驱动或时区问题。依赖建议版本说明JDK1.8 或 11课程设计源码大多基于 JDK 8 编写IDEA2020 及以上社区版也够用重点是装好 Lombok 插件如果代码里用了MySQL5.7 或 8.05.7 时区问题少8.0 需要配时区参数微信开发者工具稳定版无需付费用测试号即可导入项目数据库客户端Navicat / DBeaver / 命令行推荐 DBeaver开源且免费数据库初始化一般是两步先建库再导入 SQL 脚本。Windows 命令行下可以这样操作这里假设你的 MySQL root 密码是123456不是的话自行替换mysql -uroot -p123456 -e CREATE DATABASE IF NOT EXISTS namecard DEFAULT CHARSET utf8mb4; mysql -uroot -p123456 namecard db/namecard.sql第一条命令创建名为namecard的数据库指定utf8mb4字符集避免中文乱码。第二条命令把压缩包里/db/namecard.sql脚本导入到这个库。注意-p与密码之间不能有空格否则 MySQL 会把空格当成密码的一部分。如果源码里的 SQL 脚本自带了CREATE DATABASE语句可以省略第一条命令直接执行导入但如果脚本里没有而你直接往默认库导入表会散落在mysql库或其他库里后端起服务时仍然连不上。导入后可以用SHOW TABLES;确认表已经建好看到business_card和user等表就说明成功。3.2 第二步用 IDEA 启动 Spring Boot 后端用 IDEA 打开压缩包里的server目录不是把整个压缩包拖进去等 Maven 把依赖下载完。这一步通常需要几分钟网络差的时候会卡在下载阶段。依赖完成后重点检查application.yml里的数据源配置server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/namecard?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true这里每个字段都值得核对一遍。port是后端监听端口小程序端请求地址要与它一致username和password必须改成你本机 MySQL 的实际账号serverTimezoneAsia/Shanghai在 MySQL 8.0 下必须带上否则可能出现时间差 8 小时map-underscore-to-camel-case开启后数据库的create_time能自动映射到 Java 实体类的createTime如果不配置查询结果会因为字段名不匹配而全部为 null。修改完成并保存后找到带main方法的启动类类名通常类似NamecardApplication右键 Run 启动。当控制台出现Started NamecardApplication时说明后端已经起来。这时打开浏览器访问http://localhost:8080/api/card/list如果返回一段 JSON说明数据源和 MyBatis 配置都正确如果报 401则是登录拦截器的逻辑在起作用需要先走登录接口拿 token。也可以用 curl 验证curl -X GET http://localhost:8080/api/card/list?page1pageSize10 \ -H Authorization: Bearer 替换成你登录拿到的token返回结果里的字段名是驼峰形式还是下划线形式取决于实体类和映射配置。如果返回的是null数组大概率是表数据为空或字段映射没打开二选一。3.3 第三步小程序端指向本地接口后端跑通后用微信开发者工具导入压缩包里的miniprogram目录。导入时选择测试号不需要自己注册小程序 AppID。由于本地开发环境是 HTTP 明文小程序默认会拦截需要在“详情 - 本地设置 - 勾选不校验合法域名”这一步打开开关。接下来把全局的baseUrl指向本机后端// app.js App({ globalData: { baseUrl: http://127.0.0.1:8080 } })127.0.0.1表示本机回环地址开发者工具模拟器里可以直接访问。但真机预览时手机访问127.0.0.1指的是手机自己必须把地址改成电脑在局域网里的 IP。查看电脑 IP 后把baseUrl改成类似http://192.168.1.100:8080同时保证手机和电脑连的是同一个 WiFi。还需要注意一点如果后端配置了跨域限制小程序端请求可能被拦截常见做法是在后端加一个跨域过滤器允许所有来源访问课程设计阶段一般不会刻意限制跨域。改完baseUrl后在开发者工具里点编译如果能看到名片列表页面正常渲染说明前后端握手成功。3.4 最后的联调验证入库数据在库里长什么样页面能打开只说明静态资源正常真正要验证的是“数据能否从表单走到数据库”。手动在小程序里新增一张名片填上姓名、公司、职位、手机号提交后回到数据库执行SELECT id, user_id, name, company, position, phone, create_time FROM business_card ORDER BY id DESC LIMIT 5;如果结果里出现刚才录入的数据说明整条链路是通的。你还能顺便验证几件事user_id是不是被后端正确填入了create_time是否自动生成备注为空时是不是被存成了 NULL。接着再测编辑和删除把刚才那张名片改个公司名刷新列表看是否更新删除后查询是否消失。这三个操作都跑通这套系统才算真正属于你了。联调时如果界面没有任何报错但数据没写入优先打开开发者工具的“Network 面板”看请求响应再看后端控制台有没有异常日志避免在前端页面里瞎找。4. 避坑与排查域名、时区、Token 和文件路径的四个翻车点下面这些坑是我拆同类课设项目时反复遇到的按出现频率排了序。你会发现大多数报错最后都能归到域名校验、地址写错、时区不对这三件事上不是什么玄学。4.1 高频问题对照表现象常见原因解决思路请求报request:failbaseUrl 写错或域名校验拦截先看控制台 Network 面板确认请求 URL后端启动报时区异常MySQL 8.0 默认时区问题URL 参数加serverTimezoneAsia/Shanghai接口返回 401token 未传或拦截器校验失败检查请求头字段名是否与后端一致图片显示裂图图片路径是本地临时路径用完整 URL 拼接图片地址改静态映射能查到自己数据看不到别人的数据按 user_id 过滤确认登录后拿到的是自己的 openid4.2 四个典型踩坑实录现象一小程序发送请求后一直报request:fail后端控制台一条日志都没有。原因是开发者工具默认校验合法域名而本地调试使用的是 HTTP 明文地址与小程序平台要求不符。解决方法是打开微信开发者工具的“详情 - 本地设置 - 勾选不校验合法域名”如果是在已发布的小程序里则必须把后端换成 HTTPS 并且域名完成 ICP 备案。这个坑是新手遇到最多的好多人以为是后端代码有问题其实后端根本没收到请求。现象二后端在 IDEA 里启动报The server time zone value йʱ is unrecognized。这是 MySQL 8.0 的时区报错因为 JDBC 驱动不能识别系统默认时区。解决方法是在数据库连接 URL 加serverTimezoneAsia/Shanghai如果不行就在 MySQL 里执行SET GLOBAL time_zone 08:00。改完重启后端即可。顺带一提即使不报错时区不对也会导致插入的create_time比北京时间少 8 小时答辩演示时被老师看出时间不对会很尴尬。现象三调用新增接口返回 401但登录接口明明返回了 token。这类问题八成出在请求头的 token 传递上。小程序端可能在登录页把 token 存进了wx.setStorageSync但请求封装里读取的 key 名不一样也可能是后端拦截器要求请求头叫token而前端传的是Authorization。解决方法是先在开发者工具的 Network 面板里看实际发出的请求头再与后端拦截器里RequestHeader注明的名称一一比对。排查时直接在拦截器里加一行日志打印也能快速定位。现象四头像或名片图片在开发者工具里显示正常真机上全部裂图。原因是开发者工具对本地临时文件路径容忍度较高真机无法访问电脑里的本地磁盘地址。常见修复方案是把img_url存成完整 URL比如http://你的电脑局域网IP:8080/uploads/xxx.jpg同时在后端配置静态资源映射。以 Spring Boot 为例常见做法是实现WebMvcConfigurer把/uploads/**映射到本机磁盘目录。注意不要直接在前端拼http://localhost真机上 localhost 指向手机自身。4.3 排查顺序从终端到日志遇到问题不要先怀疑代码逻辑按“终端 - 后端日志 - SQL 日志”的顺序排查。第一步看小程序开发者工具的控制台有没有红色报错Network 面板里请求是否发出去、状态码是多少。第二步切到 IDEA 控制台看后端有没有异常堆栈。第三步如果后端一切正常但数据不对打开 MyBatis 的 SQL 日志看实际执行的语句和参数这一步能暴露字段名映射、参数类型转换等隐藏问题。在application.yml里加一段日志配置即可logging: level: com.example.namecard.mapper: debugmapper包的日志级别调到debug后控制台会打印每条 SQL 的完整语句和参数值。比如你发现查询条件里的userId是 null那就回头看登录流程有没有把用户信息正确写入 token。我处理这类课设问题还有一个习惯直接把数据库连接信息、后端端口、小程序baseUrl三项写在一张便签纸上贴显示器边上90% 的联调问题都出在它们身上其余才轮到代码逻辑。5. 改造成你自己的毕设换主题、加字段与批量导入的三种改法项目跑通只是开始答辩时要展示“你做了自己的东西”就需要在原项目上做出可见的改动。下面三种改法成本低、见效快而且不容易改坏原有代码。5.1 换主题色与改导航标题小程序的主题色集中在app.json和各个页面的wxss里。改导航栏标题和背景色只需打开app.json的window节点window: { navigationBarTitleText: 名片管家, navigationBarBackgroundColor: #1A73E8, navigationBarTextStyle: white }如果想要更彻底的换肤在app.wxss里定义全局 CSS 变量再把页面里的硬编码颜色替换为var(--primary-color)。全局搜索旧色值时注意别漏掉按钮组件的button默认样式改完编译一次看效果。5.2 加一个自定义字段要改几处以给名片加“生日”字段为例需要顺序改四层数据库加列、实体类加属性、Mapper 的增删改查 SQL 加字段、小程序表单加输入项并把它并入请求体。数据库层一句 SQL 就够ALTER TABLE business_card ADD COLUMN birthday varchar(10) DEFAULT NULL;后端的Card实体类加一个private String birthday;再打开CardMapper.xml把insert语句的字段列表、resultMap都补上birthday。小程序端则在add.js的data里加字段并同步到wx.request的请求体。改完重启后端再重新编译小程序新字段就能完整走通一条链路。这一步能讲清楚“数据是怎么从表单流到数据库的”是答辩时非常加分的点。5.3 用脚本批量导入名片做演示加分项如果觉得手工录入太慢可以写一个 Python 脚本读取 Excel 里的名片数据批量调用后端接口。我一般会先用openpyxl读表再用requests循环提交import openpyxl, requests BASE_URL http://127.0.0.1:8080/api/card TOKEN 你的token wb openpyxl.load_workbook(cards.xlsx) sheet wb.active for row in sheet.iter_rows(min_row2, values_onlyTrue): payload { name: row[0], company: row[1], position: row[2], phone: row[3], email: row[4], address: row[5] } resp requests.post(BASE_URL /add, jsonpayload, headers{Authorization: Bearer TOKEN}) print(row[0], resp.status_code)这个脚本每次循环读一行 Excel构造一个 JSON再调一次新增接口。注意TOKEN可以用登录接口拿到的真实值循环 100 条数据也只要几秒钟。演示时先运行脚本再在小程序列表页刷新一下子多出几十张名片效果比逐条手工录入强得多。从那以后我每次拿到课程设计源码包都会强制按这个顺序走一遍先导库、再起后端、再确认小程序域名校验和 baseUrl最后真机预览一次。顺序对了项目基本不会出大问题希望帮到你。本文还有配套的精品资源点击获取
