小程序做的超市商品管理系统

超市商品管理微信小程序

这是一个纯前端实现的微信小程序,用于模拟超市商品的管理功能。项目未连接任何后端数据库,所有数据均通过小程序的全局变量(globalData)进行存储和管理,关闭小程序后数据会重置。

功能介绍

本项目主要包含两大核心功能模块,由管理员角色进行操作。

管理员账号 : admin 管理员密码 : admin

  1. 商品类别管理

    • 查看类别列表: 以列表形式展示所有商品类别。
    • 添加新类别: 可以输入类别名称,添加新的商品类别。
    • 编辑类别: 可以对已有的类别名称进行修改。
    • 删除类别: 可以删除指定的商品类别。
  2. 商品管理

    • 查看商品列表: 展示所有商品信息,包括商品名称、所属类别、价格和库存。
    • 添加新商品: 可以输入商品名称、价格、库存,并从已有的商品类别中选择一个进行关联。
    • 编辑商品信息: 可以修改已存在商品的各项信息。
    • 删除商品: 可以将某一商品从列表中移除。

创作过程

  1. 项目初始化:

    • 使用微信开发者工具创建一个新的小程序项目。
    • 规划项目结构,确定需要创建的页面,包括:登录页、主菜单页、类别列表页、类别编辑页、商品列表页、商品编辑页。
  2. 全局数据设计 (app.js):

    • app.jsglobalData 中初始化了管理员登录状态、商品类别数组和商品信息数组。这是本项目的"内存数据库"。
    • 预置了一些初始数据,方便功能演示。
  3. 页面路由配置 (app.json):

    • app.json 中注册了所有需要用到的页面路径,并设置了小程序的入口页面为登录页 (pages/login/login)。
    • 配置了窗口的默认标题、导航栏颜色等。
  4. 功能页面开发:

    • 登录页 (pages/login) : 创建了两个输入框用于输入账号密码,通过比对 globalData 中的预设值(admin/admin)实现登录逻辑。登录成功后跳转到主菜单页。
    • 主菜单页 (pages/index) : 提供两个导航入口,分别跳转到"商品类别管理"和"商品管理"页面。通过 onShow 生命周期函数检查登录状态,未登录则自动跳转回登录页,保证了访问控制。
    • 类别管理 (pages/category/list & pages/category/edit) :
      • list 页面:通过 wx:for 循环渲染 globalData 中的类别数据。为每项数据提供"编辑"和"删除"按钮。
      • edit 页面:这是一个复用页面,通过 onLoadoptions 参数判断是"添加"还是"编辑"模式。表单提交时,直接操作 globalData 中的数据(增或改),然后返回上一页。list 页面的 onShow 事件会刷新数据,展示最新结果。
    • 商品管理 (pages/product/list & pages/product/edit) :
      • list 页面:逻辑与类别列表类似,但展示的信息更复杂。为了显示类别名称而不是 categoryId,在 onShow 中对商品和类别数据进行了整合处理。
      • edit 页面:同样是复用页面。表单中使用了小程序的 <picker> 组件,让用户可以方便地从现有类别中选择。保存逻辑与类别编辑类似,直接操作 globalData
  5. 样式与交互:

    • 为各个页面编写了基础的 WXSS 样式,使其布局清晰、美观。
    • 使用 wx.showToastwx.showModal 提供了友好的用户交互提示,如登录失败、删除确认等。

如何运行

  1. 下载或克隆本项目代码到本地。
  2. 打开微信开发者工具。
  3. 选择"导入项目",选择本项目的根目录。
  4. 输入您自己的 AppID (如果需要真机调试) 或使用测试号。
  5. 点击"编译"即可在模拟器中看到登录界面。
相关推荐
黑马源码库miui5208610 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
郭邯1 天前
小程序视图层学习笔记
微信小程序
LouisCanBe1 天前
Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code
开源·产品经理·敏捷开发
拾光拾趣录2 天前
小程序双线程架构:为什么需要两个线程才能跳舞?
前端·微信小程序
源码_V_saaskw3 天前
JAVA国际版任务悬赏+接单系统源码支持IOS+Android+H5
android·java·开发语言·javascript·微信小程序
willjin3 天前
微搭低代码教程四:云函数、云数据库
低代码·小程序·云开发
huya_cxy07143 天前
功能验收分派工具使用攻略大全:验收派发、流程管理、责任追踪全覆盖
敏捷开发
JIngJaneIL3 天前
跑腿小程序|基于微信小程序的跑腿平台小程序设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·跑腿小程序
源码宝3 天前
掌上医院微信小程序平台如何对接医保在线支付?
微信小程序·小程序·医保支付
雪碧聊技术4 天前
Uniapp 纯前端台球计分器开发指南:能否上架微信小程序 & 打包成APP?
前端·微信小程序·uni-app·台球计分器