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

超市商品管理微信小程序

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

功能介绍

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

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

1. 商品类别管理

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

2. 商品管理

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

创作过程

1. 项目初始化:

   • 使用微信开发者工具创建一个新的小程序项目。
   • 规划项目结构，确定需要创建的页面，包括：登录页、主菜单页、类别列表页、类别编辑页、商品列表页、商品编辑页。

2. 全局数据设计 (app.js):

   • 在 app.js 的 globalData 中初始化了管理员登录状态、商品类别数组和商品信息数组。这是本项目的"内存数据库"。
   • 预置了一些初始数据，方便功能演示。

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 页面：这是一个复用页面，通过 onLoad 的 options 参数判断是"添加"还是"编辑"模式。表单提交时，直接操作 globalData 中的数据（增或改），然后返回上一页。list 页面的 onShow 事件会刷新数据，展示最新结果。
   • 商品管理 (pages/product/list & pages/product/edit) :
     • list 页面：逻辑与类别列表类似，但展示的信息更复杂。为了显示类别名称而不是 categoryId，在 onShow 中对商品和类别数据进行了整合处理。
     • edit 页面：同样是复用页面。表单中使用了小程序的 <picker> 组件，让用户可以方便地从现有类别中选择。保存逻辑与类别编辑类似，直接操作 globalData。

5. 样式与交互:

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

如何运行

1. 下载或克隆本项目代码到本地。
2. 打开微信开发者工具。
3. 选择"导入项目"，选择本项目的根目录。
4. 输入您自己的 AppID (如果需要真机调试) 或使用测试号。
5. 点击"编译"即可在模拟器中看到登录界面。