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

超市商品管理微信小程序

这是一个纯前端实现的微信小程序,用于模拟超市商品的管理功能。项目未连接任何后端数据库,所有数据均通过小程序的全局变量(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. 点击"编译"即可在模拟器中看到登录界面。
相关推荐
666HZ6668 小时前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
牧杉-惊蛰10 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
摆烂工程师14 小时前
Claude Code 落地实践的工作简易流程
人工智能·claude·敏捷开发
拼图20915 小时前
微信小程序——skyline版本问题
微信小程序·小程序
mg66816 小时前
微信小程序入门实例_____打造你的专属单词速记小程序
微信小程序·小程序
程序员陆通16 小时前
Vibe Coding开发微信小程序实战案例
微信小程序·小程序·notepad++·ai编程
MonkeyKing_sunyuhua19 小时前
微信小程序能不能获取物联网的上的设备数据
物联网·微信小程序·小程序
mg66819 小时前
微信小程序入门实例_____从零搭建你的第一个微信小程序
微信小程序·小程序
bilichen00619 小时前
微信小程序使用wx.chooseImage上传图片时进行压缩,并添加时间水印
微信小程序·小程序
皮皮灬虾20 小时前
微信小程序下单页—地址列表页—新增地址页 页面交互
微信小程序·小程序·交互