从零构建开源租赁小程序：基于uni-app与云开发的全栈实践

最近在做一个校园内的共享设备项目需要一个轻量级的租赁小程序来管理设备借还。市面上虽然有不少成熟的SaaS方案但要么功能太重要么定制成本太高要么就是闭源无法深度二次开发。于是我决定自己动手从零开始构建一个功能完整、代码清晰、易于部署和二次开发的租赁小程序并最终决定将整个项目完全开源。这个开源项目旨在为开发者、学生以及有轻量级租赁需求的小团队提供一个“开箱即用”的参考实现。它涵盖了小程序前端、管理后台、服务端API以及数据库设计等全栈环节。无论你是想学习uni-app跨端开发、微信小程序云开发还是想了解一个完整业务系统的前后端设计与实现这个项目都能提供一条清晰的路径。本文将详细拆解这个开源租赁小程序的核心架构、技术选型、关键功能实现并附上完整的代码仓库和部署指南你可以直接Fork并用于自己的项目。1. 项目核心架构与技术栈选型在动手之前明确技术栈和整体架构是成功的第一步。我们的目标是快速开发、易于维护、成本可控、支持多端。1.1 整体架构设计项目采用经典的前后端分离架构但根据小程序的特性做了优化。前端 (客户端) 使用uni-app框架开发。这是一次编写可发布到iOS、Android、Web以及各种小程序平台微信、支付宝、百度等的解决方案。这极大地减少了多端适配的工作量。后端 (服务端) 提供了两种可选方案以适应不同开发者的需求和场景。方案A微信小程序云开发。这是微信官方提供的Serverless方案集成了云函数、数据库、存储和云调用。优势是无需自备服务器开发部署极其快捷特别适合个人开发者或快速原型验证。本项目核心功能基于此方案实现。方案BSpring Boot MySQL。这是一个更传统、更可控、功能更强大的方案。使用Java Spring Boot框架提供RESTful APIMySQL作为关系型数据库。优势是生态成熟便于复杂业务扩展和与企业现有系统集成。项目中也提供了该方案的后端代码。管理后台 使用Vue 3Element Plus开发是一个独立的Web应用用于管理商品、订单、用户等。通过API与后端通信。[用户] | | (使用小程序) v [uni-app 小程序前端] | | | (调用云函数/API) | (调用RESTful API) v v [微信云开发环境] [Spring Boot后端] | (云数据库/存储) | (操作MySQL) v v [云数据库/云存储] [MySQL数据库] | v [Vue管理后台]1.2 技术栈明细前端 (uni-app):框架: uni-app (Vue 3 语法)UI组件库: uView UI (或 uni-ui根据项目实际选择)状态管理: Pinia (Vue 3 官方推荐)网络请求: 封装uni.request或使用uni-cloud-http(云开发)后端 (云开发方案):环境: 微信小程序云开发云函数: Node.js数据库: 云数据库 (JSON文档型)存储: 云存储后端 (Spring Boot方案):框架: Spring Boot 2.x安全: Spring Security JWT数据库: MySQL 8.xORM: MyBatis-Plus接口文档: Knife4j (Swagger增强)管理后台:框架: Vue 3 ViteUI: Element Plus路由: Vue Router 4状态管理: Pinia开发工具:IDE: HBuilderX (uni-app开发利器) 或 VS Code微信开发者工具 (调试、云开发管理)DataGrip / Navicat (数据库管理)2. 环境准备与项目初始化“工欲善其事必先利其器”。在开始编码前请确保你的开发环境就绪。2.1 基础环境配置安装 Node.js: 访问 Node.js 官网下载并安装 LTS 版本 (如 v18.x)。安装后在命令行输入node -v和npm -v检查是否安装成功。安装 Java (仅Spring Boot方案需要): 下载并安装 JDK 8 或 JDK 11。配置JAVA_HOME环境变量。安装 MySQL (仅Spring Boot方案需要): 下载并安装 MySQL 8.x记住 root 密码。安装开发工具:HBuilderX: 从DCloud官网下载这是uni-app官方IDE对小程序开发有很好的支持。微信开发者工具: 从微信开放平台下载用于小程序真机调试、预览和上传。2.2 创建与初始化项目我们以微信小程序云开发方案为主线进行说明。步骤1创建uni-app项目在HBuilderX中点击文件 - 新建 - 项目选择uni-app项目模板选择默认模板或uni-app官方示例模板输入项目名称如rental-miniprogram。步骤2关联微信小程序在微信公众平台注册一个小程序账号获取AppID。在HBuilderX中打开项目根目录下的manifest.json文件在微信小程序配置中填入你的AppID。在项目根目录执行npm init -y初始化npm然后安装所需依赖例如 uView UI:npm install uview-ui。步骤3开通并初始化云开发在微信开发者工具中导入你的uni-app项目。点击开发者工具左上角的云开发按钮开通云开发环境会创建一个免费的基础版环境。开通后你会获得一个环境ID(如env-xxx)。在uni-app项目的main.js或App.vue中初始化云开发// main.js 或 App.vue import cloud from /common/cloud.js; // 假设你将云初始化逻辑封装在此文件 // 或者直接在App.vue的onLaunch中 export default { onLaunch: function() { wx.cloud.init({ env: 你的环境ID, // 替换为你的环境ID traceUser: true, // 跟踪用户 }); console.log(云开发初始化成功); } }创建云函数根目录在项目根目录创建cloudfunctions文件夹。在微信开发者工具的云开发控制台中右键点击云函数选择新建Node.js云函数开发者工具会自动在cloudfunctions目录下生成模板。至此项目的基础骨架和云开发环境就搭建完成了。3. 数据库设计与核心数据模型良好的数据库设计是业务逻辑的基石。我们使用云开发的JSON数据库其结构可以类比MongoDB。3.1 核心集合表设计我们主要设计以下几个集合users (用户集合):_openid: 微信用户的唯一标识由云开发自动注入。avatarUrl: 头像。nickName: 昵称。phone: 手机号需用户授权后更新。creditScore: 信用分用于风控。createTime: 创建时间。products (商品/设备集合):name: 商品名称如“GoPro HERO 11”、“无人机 Mavic 3”。category: 分类如“摄影器材”、“户外装备”。coverImage: 封面图片的云存储FileID。images: 详情图片数组。description: 商品描述。pricePerDay: 日租金单位分避免浮点数计算。deposit: 押金单位分。stock: 库存数量。status: 状态on上架,off下架。specs: 规格参数对象如{brand: ‘大疆’, model: ‘Mavic 3’}。orders (订单集合):orderNo: 订单号唯一可规则生成如RENT202405200001。userId: 用户_openid。productId: 商品_id。productSnapshot: 下单时的商品快照对象防止商品信息变更影响订单。rentalDays: 租赁天数。startDate: 租赁开始日期。endDate: 租赁结束日期。totalAmount: 订单总金额租金押金。status: 订单状态pending待支付,paid已支付/待使用,in_use使用中,returned已归还/待退款,completed已完成,cancelled已取消。paymentInfo: 支付信息如微信支付交易单号。createTime,updateTime: 时间戳。rental_logs (租赁日志集合):orderId: 关联订单_id。action: 操作create创建,pay支付,pickup取货,return归还,refund退款。operator: 操作人用户_openid或管理员ID。remark: 备注。createTime: 操作时间。3.2 云数据库索引创建为了提高查询效率必须在云开发控制台为常用查询字段创建索引。例如orders集合为userId、status、createTime创建索引。products集合为category、status、createTime创建索引。4. 核心功能模块实现详解接下来我们深入代码层看看关键功能是如何实现的。4.1 用户登录与授权小程序用户登录依托微信生态。我们使用云开发自带的登录能力。// pages/login/login.vue 或 封装的auth.js export const login () { return new Promise((resolve, reject) { // 1. 调用微信登录接口 wx.login({ success: async (loginRes) { if (loginRes.code) { // 2. 调用云函数将code传给后端后端向微信服务器换取openid和session_key const cloudRes await wx.cloud.callFunction({ name: userLogin, // 云函数名 data: { code: loginRes.code } }); // 3. 云函数返回自定义登录态token或直接使用云开发返回的openid const { openid, token } cloudRes.result; // 4. 将token存储到本地Storage uni.setStorageSync(auth_token, token); uni.setStorageSync(openid, openid); resolve({ openid, token }); } else { reject(new Error(微信登录失败 loginRes.errMsg)); } }, fail: reject }); }); }; // 云函数 userLogin // cloudfunctions/userLogin/index.js const cloud require(wx-server-sdk); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); exports.main async (event, context) { const { code } event; const wxContext cloud.getWXContext(); // 这里可以调用微信接口服务用code换取session_key和openid // 但云开发环境下wxContext.OPENID 已经是可信的 const openid wxContext.OPENID; const appid wxContext.APPID; // 业务逻辑检查用户是否首次登录是则创建用户记录 const db cloud.database(); const users db.collection(users); const userRes await users.where({ _openid: openid }).get(); if (userRes.data.length 0) { // 新用户创建记录 await users.add({ data: { _openid: openid, avatarUrl: , nickName: 微信用户, creditScore: 100, // 初始信用分 createTime: db.serverDate() } }); } // 生成自定义登录态token示例生产环境应用更安全方案 // 这里简单返回openid实际应使用JWT等 return { openid: openid, token: your_generated_token_ openid // 示例token }; };4.2 商品浏览与搜索前端页面通过调用云数据库获取商品列表并支持简单的分类筛选和搜索。!-- pages/product/list.vue -- template view classproduct-list !-- 搜索框和分类筛选 -- u-search placeholder搜索商品 v-modelkeyword searchloadProducts/u-search u-tabs :listcategoryList changeonCategoryChange/u-tabs !-- 商品列表 -- view v-foritem in productList :keyitem._id classproduct-item clickgoDetail(item._id) image :srcitem.coverImage modeaspectFill/image view classinfo text classname{{item.name}}/text text classprice¥{{item.pricePerDay / 100}}/天/text text classdeposit押金: ¥{{item.deposit / 100}}/text /view /view u-loadmore :statusloadStatus / /view /template script setup import { ref, onMounted } from vue; const db wx.cloud.database(); const _ db.command; const keyword ref(); const category ref(all); const productList ref([]); const loadStatus ref(loadmore); const loadProducts async (reset true) { if (reset) { productList.value []; loadStatus.value loading; } else { loadStatus.value loading; } let query db.collection(products).where({ status: on // 只查询上架商品 }); // 分类筛选 if (category.value ! all) { query query.where({ category: category.value }); } // 关键词搜索 (在name和description中模糊匹配) if (keyword.value.trim()) { query query.where(_.or([ { name: db.RegExp({ regexp: keyword.value, options: i }) }, { description: db.RegExp({ regexp: keyword.value, options: i }) } ])); } // 分页查询 try { const res await query.orderBy(createTime, desc) .skip(productList.value.length) .limit(10) .get(); const newList res.data; productList.value reset ? newList : [...productList.value, ...newList]; loadStatus.value newList.length 10 ? nomore : loadmore; } catch (err) { console.error(加载商品失败:, err); uni.showToast({ title: 加载失败, icon: none }); loadStatus.value loadmore; } }; const onCategoryChange (index) { category.value categoryList.value[index].value; loadProducts(true); }; onMounted(() { loadProducts(true); }); /script4.3 下单与支付流程这是最核心的业务链涉及库存校验、订单创建、微信支付等多个环节。// 云函数 createOrder // cloudfunctions/createOrder/index.js const cloud require(wx-server-sdk); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); exports.main async (event, context) { const { productId, rentalDays, startDate } event; const wxContext cloud.getWXContext(); const openid wxContext.OPENID; const db cloud.database(); const _ db.command; const $ db.command.aggregate; // 1. 校验商品和库存 const productRes await db.collection(products).doc(productId).get(); if (!productRes.data) { return { code: 404, msg: 商品不存在 }; } const product productRes.data; if (product.status ! on || product.stock 0) { return { code: 400, msg: 商品已下架或库存不足 }; } // 2. 计算金额和日期 const totalRent product.pricePerDay * rentalDays; const totalAmount totalRent product.deposit; // 总金额 租金 押金 const endDate new Date(new Date(startDate).getTime() rentalDays * 24 * 60 * 60 * 1000); // 3. 生成订单号 (示例) const date new Date(); const orderNo RENT date.getFullYear() String(date.getMonth()1).padStart(2,0) String(date.getDate()).padStart(2,0) String(Math.random()).substr(2,6); // 4. 创建订单记录 (使用数据库事务确保一致性) const orderData { orderNo, userId: openid, productId, productSnapshot: { // 保存快照 name: product.name, pricePerDay: product.pricePerDay, deposit: product.deposit, coverImage: product.coverImage }, rentalDays, startDate: new Date(startDate), endDate, totalAmount, status: pending, // 初始状态待支付 createTime: db.serverDate(), updateTime: db.serverDate() }; let orderId; try { // 使用事务同时创建订单和减少库存 const result await db.runTransaction(async transaction { // 再次检查库存防止并发超卖 const productForUpdate await transaction.collection(products).doc(productId).get(); if (productForUpdate.data.stock 0) { throw new Error(库存不足); } // 创建订单 const orderRes await transaction.collection(orders).add({ data: orderData }); orderId orderRes._id; // 扣减库存 await transaction.collection(products).doc(productId).update({ data: { stock: _.inc(-1) } }); return { orderId }; }); orderId result.orderId; } catch (transactionErr) { console.error(创建订单事务失败:, transactionErr); return { code: 500, msg: 创建订单失败请重试 }; } // 5. 调用微信支付统一下单API (此处为模拟实际需调用微信支付服务) // 注意云函数中调用微信支付需要额外的证书和配置通常建议在自有服务器处理。 // 这里返回一个模拟的支付参数前端调用wx.requestPayment const paymentParams { timeStamp: String(Date.now()), nonceStr: Math.random().toString(36).substr(2, 15), package: prepay_id模拟的预支付ID, signType: MD5, paySign: 模拟的签名, // 这里需要根据微信支付规则生成 orderId: orderId }; // 6. 记录操作日志 await db.collection(rental_logs).add({ data: { orderId, action: create, operator: openid, remark: 创建订单, createTime: db.serverDate() } }); return { code: 200, msg: 订单创建成功, data: { orderId, paymentParams // 前端用此参数调起支付 } }; };前端调用云函数并调起支付// pages/order/confirm.vue 中的方法 const handleCreateOrder async () { uni.showLoading({ title: 创建中... }); try { const res await wx.cloud.callFunction({ name: createOrder, data: { productId: currentProduct.value._id, rentalDays: selectedDays.value, startDate: selectedDate.value } }); if (res.result.code 200) { const { paymentParams } res.result.data; // 调用微信支付 wx.requestPayment({ ...paymentParams, success: (payRes) { uni.showToast({ title: 支付成功 }); // 跳转到订单详情页 uni.navigateTo({ url: /pages/order/detail?id${res.result.data.orderId} }); }, fail: (err) { console.error(支付失败:, err); uni.showToast({ title: 支付取消或失败, icon: none }); // 支付失败可能需要更新订单状态为取消 } }); } else { uni.showToast({ title: res.result.msg, icon: none }); } } catch (err) { console.error(创建订单异常:, err); uni.showToast({ title: 网络异常请重试, icon: none }); } finally { uni.hideLoading(); } };4.4 管理后台实现要点管理后台使用Vue 3 Element Plus通过调用云函数或Spring Boot API来管理数据。关键点1跨域与身份验证云开发方案管理后台一个独立的Web站点无法直接调用云函数域名不同。解决方案是在云函数中配置HTTP触发并在config.json中设置跨域头。或者编写一个简单的Node.js/Spring Boot代理服务器后台调用代理代理再调用云函数。实现一套基于JWT或自定义Token的Admin用户认证系统在云函数中校验Token。Spring Boot方案天然支持Web API只需配置Spring Security和CORS即可。关键点2商品管理页面示例 (Vue 3 Element Plus)!-- admin/views/ProductList.vue -- template div classproduct-management el-card template #header div classcard-header span商品管理/span el-button typeprimary clickhandleAdd新增商品/el-button /div /template el-table :datatableData stylewidth: 100% el-table-column propname label商品名称 / el-table-column propcategory label分类 / el-table-column proppricePerDay label日租金(分) template #defaultscope {{ scope.row.pricePerDay / 100 }} /template /el-table-column el-table-column propstock label库存 / el-table-column propstatus label状态 template #defaultscope el-tag :typescope.row.status on ? success : info {{ scope.row.status on ? 上架 : 下架 }} /el-tag /template /el-table-column el-table-column label操作 width200 template #defaultscope el-button sizesmall clickhandleEdit(scope.row)编辑/el-button el-button sizesmall typedanger clickhandleDelete(scope.row)删除/el-button /template /el-table-column /el-table el-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagecurrentPage :page-sizes[10, 20, 50] :page-sizepageSize layouttotal, sizes, prev, pager, next, jumper :totaltotal /el-pagination /el-card !-- 新增/编辑对话框 -- ProductDialog v-modeldialogVisible :formDatacurrentProduct successloadData / /div /template script setup import { ref, onMounted } from vue; import { ElMessage, ElMessageBox } from element-plus; import ProductDialog from ./components/ProductDialog.vue; import { getProductList, deleteProduct } from /api/product; // 封装的API const tableData ref([]); const currentPage ref(1); const pageSize ref(10); const total ref(0); const dialogVisible ref(false); const currentProduct ref({}); const loadData async () { try { const params { page: currentPage.value, size: pageSize.value }; const res await getProductList(params); tableData.value res.data.list; total.value res.data.total; } catch (error) { ElMessage.error(加载商品列表失败); } }; const handleAdd () { currentProduct.value {}; dialogVisible.value true; }; const handleEdit (row) { currentProduct.value { ...row }; dialogVisible.value true; }; const handleDelete async (row) { try { await ElMessageBox.confirm(确认删除该商品, 提示, { type: warning }); await deleteProduct(row._id); ElMessage.success(删除成功); loadData(); } catch (err) { // 用户取消或删除失败 } }; onMounted(() { loadData(); }); /script5. 项目部署与上线指南开发完成后如何让项目跑起来并对外服务5.1 云开发方案部署上传云函数在微信开发者工具的云开发控制台中右键点击cloudfunctions目录下的每个云函数文件夹选择上传并部署云端安装依赖。配置云数据库权限在云开发控制台的数据库标签页为每个集合设置合适的权限。生产环境务必不要使用“所有用户可读仅创建者可读写”这种宽松设置。建议users: 仅创建者可读写。products: 所有用户可读仅管理员可写通过云函数中间件控制。orders: 用户仅可读写自己的订单管理员可读写所有通过云函数及数据库权限规则结合控制。上传小程序前端在微信开发者工具中点击上传按钮填写版本号和备注提交审核。审核通过后在微信公众平台发布即可。部署管理后台将Vue项目打包 (npm run build)将生成的dist目录部署到任何静态网站托管服务如Nginx、Apache、或云存储腾讯云COS、阿里云OSS等并开启静态网站托管。记得配置API代理指向你的云函数HTTP触发地址或代理服务器。5.2 Spring Boot方案部署数据库初始化在MySQL中创建数据库并执行项目SQL目录下的建表脚本。修改配置文件修改application.yml或application.properties中的数据库连接、Redis配置如有、JWT密钥等。打包应用在项目根目录执行mvn clean package(Maven) 或./gradlew bootJar(Gradle)生成可执行的JAR文件。服务器部署将JAR文件上传到服务器如Linux。安装Java运行环境。使用nohup java -jar your-app.jar app.log 21 后台启动。建议使用进程管理工具如systemd或supervisor来管理应用。配置域名与SSL使用Nginx反向代理Spring Boot应用并配置域名和HTTPS证书。小程序前端配置修改uni-app项目中的请求基地址baseUrl为你的Spring Boot服务器地址。管理后台配置同样修改其API请求地址并打包部署。6. 常见问题与排查思路在开发和部署过程中你可能会遇到以下典型问题。问题现象可能原因排查思路与解决方案云函数调用失败报错FunctionName not found1. 云函数未上传部署。2. 云函数名称拼写错误。3. 环境ID不正确。1. 在微信开发者工具中确认云函数已上传成功图标为绿色。2. 检查前端调用wx.cloud.callFunction时的name参数。3. 确认wx.cloud.init中的env参数与云开发环境ID一致。数据库查询权限错误云数据库集合的权限设置过于严格。1. 在云开发控制台检查该集合的权限规则。2. 对于需要复杂权限控制的场景如用户只能看自己的订单应使用云函数作为中间层来查询而不是直接在前端调用数据库。微信支付调起失败1. 支付参数timeStamp, nonceStr等格式错误。2. 签名计算错误。3. 预支付订单已过期或不存在。1. 确保所有参数均为字符串类型。2.强烈建议支付逻辑应在自己的服务器或一个专门处理支付的云函数中完成严格按照微信支付文档生成签名。3. 检查统一下单接口的返回。uni-app编译到小程序时样式错乱1. 使用了不支持的CSS特性。2. 组件库样式未正确引入。3. rpx单位计算问题。1. 检查小程序官方文档的样式支持列表。2. 确认UI组件库如uView是否按文档正确安装和配置。3. 在pages.json中检查全局样式和页面样式覆盖。管理后台访问API跨域错误浏览器安全策略阻止了跨域请求。后端解决在API服务器Spring Boot或云函数HTTP触发器配置正确的CORS头Access-Control-Allow-Origin等。开发环境临时解决配置开发服务器的代理如Vite的server.proxy。图片上传失败或无法显示1. 云存储权限问题。2. 文件路径或FileID错误。3. 未配置download域名。1. 检查云存储规则。2. 上传成功后云函数会返回文件的FileID确保前端正确存储和使用这个ID。3. 在云开发控制台-存储中将你的管理后台域名添加到downloadFile合法域名中。订单状态流转混乱业务逻辑有漏洞状态可能被非法更新。1. 在云函数或服务端API中对订单状态的修改进行严格校验如“已支付”的订单不能直接变“已完成”必须经过“使用中”和“已归还”。2. 使用数据库事务确保关联操作如扣库存和创建订单的原子性。3. 所有状态变更都通过专门的云函数/API接口进行并记录操作日志。7. 最佳实践与项目扩展建议一个可用的系统是基础一个健壮、可维护的系统才是目标。7.1 代码组织与架构前后端分离清晰明确API边界使用RESTful风格或GraphQL定义接口。云函数单一职责每个云函数应只负责一个明确的业务功能例如createOrder、processPayment、updateUserInfo。避免编写巨无霸函数。错误处理统一在前端和后端定义统一的错误码和错误信息格式。使用try...catch捕获异常并给用户友好的提示。配置外部化将环境变量如数据库连接串、API密钥存储在云开发环境配置或Spring Boot的application-{profile}.yml中不要硬编码在代码里。日志记录在云函数和服务端关键逻辑处添加日志方便问题追踪。云开发自带日志功能Spring Boot可使用Logback或Log4j2。7.2 性能与安全数据库优化为高频查询字段建立索引。避免在云数据库中进行全表扫描或大量skip操作深分页问题。图片等静态资源使用云存储或CDN加速前端使用合适的图片格式和压缩。接口限流与防刷对登录、发送验证码等接口做频率限制。云函数可设置超时时间和内存防止资源耗尽。敏感信息保护用户的手机号、身份证号等敏感信息在数据库存储时应加密。不要在日志中打印敏感数据。权限最小化原则云数据库、云存储的权限规则要收紧。后台管理系统的API接口必须进行严格的角色和权限校验RBAC。7.3 业务功能扩展当前开源版本实现了核心租赁流程。你可以根据实际需求进行扩展短信通知集成阿里云、腾讯云短信服务在订单状态变更时通知用户。优惠券与促销系统增加优惠券集合在下单时计算抵扣。库存预警设置库存阈值库存不足时通过微信模板消息通知管理员。报表与数据分析编写云函数或定时任务统计每日订单量、营收、热门商品等数据。多门店/自提点支持为商品增加location字段用户可选择就近的自提点。预约排队系统对于热门商品在库存为0时允许用户预约排队。接入更强大的支付系统除了微信支付可以接入支付宝、银联等。迁移到微服务当业务复杂后可以将用户服务、商品服务、订单服务拆分为独立的微服务。7.4 开源项目维护清晰的README在项目根目录提供详细的README.md说明项目简介、功能、技术栈、快速开始、配置说明、目录结构等。完善的文档使用docs目录或GitHub Wiki编写更详细的开发文档、API文档和部署文档。Issue与PR规范鼓励社区贡献建立清晰的Issue模板和Pull Request流程。持续集成配置GitHub Actions或Jenkins实现代码检查、自动化测试和自动部署。这个开源租赁小程序项目就像一个精心搭建的“毛坯房”提供了稳固的墙体架构和必要的水电核心功能。你可以直接“拎包入住”也可以根据自己的喜好和需求进行“精装修”功能扩展。无论是用于学习全栈开发还是作为实际项目的起点希望它都能为你带来价值。项目的完整代码已托管在GitHub和Gitee上欢迎Star、Fork和提交Issue让我们一起把它变得更好。