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

超市商品管理微信小程序

这是一个纯前端实现的微信小程序,用于模拟超市商品的管理功能。项目未连接任何后端数据库,所有数据均通过小程序的全局变量(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. 点击"编译"即可在模拟器中看到登录界面。
相关推荐
睿创咨询8 小时前
IPD敏捷开发“三步走”实践分享
敏捷开发·敏捷流程·ipd·集成产品开发·睿创咨询
weixin_4721835413 小时前
微信小程序预览和分享文件
微信小程序·小程序
墨霁青玉13 小时前
微信小程序一个页面同时存在input和textarea,bindkeyboardheightchange相互影响
微信小程序·小程序
sheji34161 天前
【开题答辩全过程】以 基于微信小程序的“XIN”学生组织管理系统为例,包含答辩的问题和答案
微信小程序·小程序
用户6120414922131 天前
C语言做的城市天气数据管理与统计
c语言·后端·敏捷开发
星河顾盼2 天前
【微信小程序预览文件】(PDF、DOC、DOCX、XLS、XLSX、PPT、PPTX)
微信小程序·pdf·powerpoint
小浣熊喜欢揍臭臭2 天前
uniapp+vue3 微信小程序全屏广告组件功能
微信小程序·uni-app
小白_ysf2 天前
阿里云日志服务之WebTracking 小程序端 JavaScript SDK (阿里SDK埋点和原生uni.request请求冲突问题)
前端·微信小程序·uni-app·埋点·阿里云日志服务
微信bysj7982 天前
基于深度学习的车牌识别系统(源码+文档
java·人工智能·spring boot·后端·深度学习·微信小程序·小程序