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

科技   教育   2024-09-02 00:00   广东  


摘要

随着校园生活的日益便捷化,学生对于跑腿服务的需求日益增长。本文旨在介绍一款面向校园的跑腿便利店小程序的开发过程,该系统集成了跑腿下单、接单、快递代取、陪练陪玩、软件安装、提现及物品重量计算等多种功能。项目采用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 物品重量计算

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

五. 开发流程

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

六. 部署教程

由于篇幅限制,此处仅简述部署流程:
  1. 准备云服务器和数据库环境。
  2. 部署Midway3.0后端服务,并配置好数据库连接。
  3. 部署Nuxt2.x后台管理系统,确保能够正常访问。
  4. 使用HBuilderX等工具将UniApp项目编译为小程序代码,并上传至微信小程序平台进行审核。
  5. 完成小程序审核后,发布上线。

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

项目目录

- 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

3.后台开发

  • 用 vscode 打开“admin”目录
  • 开发文档 https://www.nuxtjs.cn/guide/installation
  • 打开终端
// 以下操作都在终端完成
// 第一步 安装依赖(建议使用yarn,并采用淘宝源)
yarn 或 npm run install

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

4.小程序项目开发

  • 用 vscode 打开“miniprogram”目录
  • uniapp 开发文档 https://zh.uniapp.dcloud.io/

4.1 打开终端

// 注意需要切换node版本至12.x版本
nvm use 12

// 第一步 安装依赖(建议使用yarn,并采用淘宝源)
yarn 或 npm run install

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

4.2 打开微信开发者工具

  • 打开微信开发者工具
  • 导入项目,目录为 miniprogram/dist/dev/mp-weixin

七. 结论

通过本项目的开发,我们成功构建了一个功能丰富、用户友好的校园跑腿便利店小程序。项目采用Midway3.0、Nuxt2.x和UniApp等先进技术,实现了高效、稳定的服务。未来,我们将继续优化系统性能,增加更多实用功能,为校园用户提供更好的服务体验。

以上即为本文的全部内容,希望能够对读者在开发类似项目时提供一些参考和启发。


项目Gitee地址:

https://gitee.com/landalfyao/ddapp
项目配置文档:
https://gitee.com/landalfyao/ddrun/wikis/pages?sort_id=5937464&doc_id=403865

前端模版交流群


技术交流群:



前端组件开发
专注开发和分享前后端组件以及开源前后端框架,以此来提高前后端技术开发的效率。全网有10w+前端伙伴,打造互联网产品渠道平台。
 最新文章