构建校园跑腿便利店小程序——基于Midway3.0、Nuxt2.x与UniApp的实战探索

前端组件开发

于 2024-09-29 18:00:05 发布

阅读量646

点赞数 17

文章标签：小程序 uni-app 云计算 ux vue.js 前端

本文链接：https://blog.csdn.net/chenchuang0128/article/details/142640889

版权

摘要

随着校园生活的日益便捷化，学生对于跑腿服务的需求日益增长。本文旨在介绍一款面向校园的跑腿便利店小程序的开发过程，该系统集成了跑腿下单、接单、快递代取、陪练陪玩、软件安装、提现及物品重量计算等多种功能。项目采用Midway3.0作为后端框架，Nuxt2.x作为后台管理界面，以及UniApp构建跨平台的小程序前端，实现了高效、稳定且用户友好的跑腿服务平台。本文将从技术选型、系统架构、主要功能实现、开发流程及部署等方面进行详细阐述。

一. 引言

在数字化校园建设的背景下，开发一款高效便捷的跑腿服务小程序显得尤为重要。它不仅能够解决学生日常生活中的琐碎事务，还能促进校园内资源的优化配置。本文所介绍的跑腿便利店小程序，正是基于这一需求而设计开发的。

二. 技术选型

2.1 后端框架：Midway3.0

Midway 是一个基于 TypeScript 的企业级 Node.js 框架，它融合了 IoC 容器和装饰器，提供了灵活而强大的功能。选择 Midway3.0 作为后端框架，主要考虑到其高效的开发效率、良好的扩展性以及对 TypeScript 的原生支持，这些特性有助于构建稳定可靠的后端服务。

2.2 后台管理界面：Nuxt2.x

Nuxt.js 是一个基于 Vue.js 的服务器端渲染应用框架。采用 Nuxt2.x 构建后台管理系统，可以充分利用 Vue.js 的响应式特性和组件化优势，同时借助服务器端渲染技术提升页面加载速度和SEO效果。

2.3 小程序前端：UniApp

UniApp 是一个使用 Vue.js 开发所有前端应用的框架，它支持编译到iOS、Android、H5、以及各种小程序等多个平台。选择 UniApp 开发小程序前端，可以极大提升开发效率，实现一套代码多平台运行，降低维护成本。

三. 系统架构

本系统采用前后端分离的设计模式，前端通过API接口与后端进行数据交互。后端服务部署在云服务器上，使用数据库存储用户数据、订单信息等。前端包括小程序和后台管理系统，小程序面向用户提供服务，后台管理系统供管理员进行订单管理、用户管理、系统设置等操作。

四. 主要功能实现

4.1 跑腿下单与接单

用户通过小程序下单，填写跑腿需求（如取快递、买东西等），系统根据位置信息分配给附近的接单员。接单员在收到订单后，可以选择接受或拒绝。订单完成后，用户可以进行评价。

4.2 快递代取

支持用户指定快递点、快递单号等信息，由接单员代为取件并送达指定地点。

4.3 陪练陪玩、软件安装

提供多样化的服务选项，如陪练篮球、陪玩游戏、安装电脑软件等，用户可根据需求下单。

4.4 提现功能

接单员完成一定数量的订单后，可申请提现，系统将金额转至其绑定的银行账户或支付账户。

4.5 物品重量计算

为支持按重量计费的跑腿服务，小程序内置了物品重量计算工具，帮助用户估算费用。

五. 开发流程

需求分析：明确系统功能和用户需求。
技术选型：确定前后端技术栈及数据库选型。
系统设计：设计系统架构、数据库模型和接口规范。
编码实现：按照设计文档进行前后端开发。
测试调优：进行功能测试、性能测试和用户测试，优化系统性能。
部署上线：将系统部署到云服务器，进行线上验证和维护。

六. 部署教程

由于篇幅限制，此处仅简述部署流程：

准备云服务器和数据库环境。
部署Midway3.0后端服务，并配置好数据库连接。
部署Nuxt2.x后台管理系统，确保能够正常访问。
使用HBuilderX等工具将UniApp项目编译为小程序代码，并上传至微信小程序平台进行审核。
完成小程序审核后，发布上线。

校园跑腿-跑腿便利店小程序-本地开发

项目目录

- server // 服务端项目
- admin // 后台项目
- miniprogram // 小程序项目

1.准备工作

1.1 本地环境

nodejs 建议使用 v16.x 版本以上。但是小程序项目必须使用 v12.x 版本
nvm(建议安装) node 版本管理工具包
mysql 5.7 以上
redis 2.x 以上

1.2 开发工具

vscodehttps://code.visualstudio.com/download
微信开发者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.服务端开发

用 vscode 打开“server”目录
开发文档 https://midwayjs.org/docs/quickstart

2.1 配置文件

找到 /server/src/config/config.env.ts.bak 文件复制并粘贴到同目录下。命名为 config.local.ts 打开文件进行配置

// 数据库配置
...
orm: {
/**
* 单数据库实例
*/
type: 'mysql',
host: 'localhost',
port: 3306,
username: 'root', // 用户名
password: 'root', // 密码
database: 'ddrunv2-free', // 数据库
synchronize: true, // 如果第一次使用，不存在表，有同步的需求可以写 true
logging: false,
}
...
// 配置redis
redis: {
client: {
port: 6379, // Redis port
host: '127.0.0.1', // Redis host
password: '',
db: 0,
},
}
...
// task 和 bull中的redis 都填一样的即可

2.2 打开终端

// 以下操作都在终端完成
// 第一步安装依赖(建议使用yarn,并采用淘宝源)
yarn 或 npm run install

// 第二步启动项目
yarn local 或 npm run local

// 如出现以下信息，表示运行成功
[ Midway ] Start Server at http://127.0.0.1:8001
[ Midway ] Start on LAN http://192.168.31.179:8001