在线商城开发文档

在线商城开发文档

项目展示

模拟“淘宝、京东、当当、网易考拉、苏宁易购、唯品会、网易严选”设计一个在线商城。

（1）项目结构图如图 9-1 所示。

图 9-1 项目结构图

（2）前台首页效果如图 9-2 所示。

图 9-2

前台首页

（3）项目后台首页效果如图 9-3 所示。

图 9-3

（4）前后端交互过程如图 9-4 所示。

后台首页

在线商城网站 （前端开发人员负责）

① 访问网站 ② 返回网页模板和JavaScript程序

在线商城API服务器 （后端开发人员负责）

③ 发送Ajax请求 ④ 返回JSON格式的数据

浏览器

图 9-4 交互过程

【任务 1】管理员登录

任务描述

管理员登录功能，就是用户需要输入正确的用户名和密码，才能够登录网站后台进行相

关操作。通过这种机制，可以防止无关人员登录到网站后台进行操作，确保系统安全。

本任务需要完成管理员登录功能的开发，页面效果如图 9-5 所示。

图 9-5 用户登录

在图 9-5 中，用户可以输入后台的用户名（admin）和密码（123456）单击“登录”按 钮即可登录。如果输入正确，就会跳转到后台首页。如果输入错误，则提示“登录失败”和 具体的错误原因。

接口分析

开发管理员登录功能，需要与后台 API 中的 auth 用户认证接口进行交互。关于该接口 的使用说明如表 9-1 所示。

表9-1 用户认证接口

URL http:// 请求方式 POST 说明 用户名 密码 参数名 username password 内容类型 基本信息 主体 在表 9-1中，URL 是接口的地址，在基本信息中，请求方式为 POST 表示该接口需要用

POST 方式进行请求。

“主体”是需要发送给 API 的数据，此处的 username 和 password 是用于认证的用户名 和密码。在开发时，使用表单收集用户输入的用户名和密码，然后将输入的值发送给 API 进行认证即可。

【任务 2】后台管理界面

任务描述

当用户在网站后台登录成功后，就会进入到后台首页。本

后台管理界面主要包括“首页管理”“内容管理”和“系统管理”模块。

会检测当前用户是否已经登录，如果登录，则响应结果为“ok”，如果未登录， 则会返回 JSON 格式的错误信息，可以通过键名 error 获取错误类型，通过键名 msg 获取错 误信息文本。

【任务 3】商品分类管理

任务描述

商品分类管理包括“分类列表”“新增分类”“修改分类”和“删除分类”这 4 个主要

功能。当用户在后台左侧菜单中单击“管理分类”时，就会打开“管理分类”标签页，该标 签页的完成效果如图 9-6 所示。

图 9-6 分类管理

1. 分类列表

在“管理分类”标签页打开后，会自动请求后端 API 获取分类列表数据。分类列表具 有分类名称、排序、状态、创建时间、更新时间这些列，并支持多级嵌套。通过分类名称左 边的小三角可以展开和折叠，最多可以展开到第 3 级，如图 9-7 所示。

图 9-7 分类列表

在列表中，使用鼠标单击其中一行，就会选中一个分类，然后可以通过工具栏上的按钮， 对所选分类进行新增（添加子分类）、编辑和删除操作。

2. 新增分类

选中图 9-7 中的“电子书刊”分类，然后单击“新增”按钮，就会弹出一个标题为“新

增分类”的子窗口，如图 9-8 所示。

图 9-12 新增分类

在图 9-8 中，提供了层次、名称、排序和状态 4 个表单控件。其中，层次是一个切换 按钮（switchbutton），名称是文本框（textbox），排序是数字框（numberbox），状态是组 合框（combobox）。

“层次”可以在“自定义”和“最顶层”之间切换，如果选择“自定义”，就表示为当 前选中的“电子书刊”添加子分类，如果选择“最顶层”，则表示添加最顶层的分类。另外， 若用户在列表中未选中任何一个分类，直接单击“新增”按钮，则层次只能选择“最顶层”。

“名称”和“排序”都是必填项，其中“名称”表示分类的名称，“排序”表示该分类 在同级分类中显示的顺序，数值越大则顺序越靠前，且只能输入整数，不允许输入小数。

“状态”下拉菜单提供了“正常”和“下架”两个菜单项，如果选择“正常”，则该分 类（包括子分类）会在前台显示，如果选择“下架”，则该分类（包括子分类）不会在前台 显示。

在添加子分类时，会判断当前选中的分类是否达到了第 3 级，如果是，则不允许添加子

分类。例如，选中“电子书”单击“新增”按钮，会看到如图 9-9 所示的提示信息。

3. 修改分类

图 9-9 提示信息

在分类列表中选中一项分类后，单击“编辑”按钮，就会进入到分类编辑状态，如图

9-10 所示。

图 9-10 修改分类

在分类编辑模式下，可以修改分类名称、排序和状态的值。当编辑完成后，单击工具栏 中的“保存”按钮，就会将用户编辑的结果发送到后端 API 中进行处理。然后程序会自动 刷新整个列表，从而看到修改结果。若要取消编辑，可以单击“取消”按钮。

4. 删除分类

在分类列表中选中一项分类后，单击“删除”按钮，可以对分类进行删除操作。需要注意的是，如果选中的分类存在子分类，则该分类不允许被删除，只有先删除了所有的子分类，才可以删除父分类。 在执行删除操作前，程序会弹出“您确定要删除此项”的确认框，只有用户单击“确认”后才会执行删除操作，避免用户误操作导致数据丢失，提升用户体验。

【任务 4】商品管理

任务描述

商品管理包括“商品列表”“新增商品”“修改商品”“删除商品”和“商品上下架”

这 5 个主要功能。当用户在后台左侧菜单中单击“管理商品”时，就会打开“管理商品”标

签页，该标签页的完成效果如图 9-10 所示。

图 9-10 商品管理

1. 商品列表

在“管理商品”标签页打开后，会自动到后端 API 请求商品列表数据。商品列表提供 了商品名称、卖点、价格、库存数量、状态、创建日期、更新时间这些列。在列表的底部， 还提供了分页功能，用户可以分页浏览商品列表。

在列表中，用户使用鼠标单击其中一行，就会选中一件商品。若继续单击其它行，则可 以选中多件商品。在每件商品名称的左边，都有一个复选框，表示该商品是否被选中。

2. 新增商品

在工具栏中单击“新增”按钮，就会打开一个“新增商品”的标签页，该标签页的完成效果如图 9-11所示。

图 9-11 商品管理

在图 9-11 中，单击“选择分类”按钮，会弹出如图 9-12 所示的“选择分类”子窗口。

图 9-12 选择分类

在“选择分类”子窗口中，可以选择新添加商品的所属分类，并且只能选择叶子节点的

分类，非叶子节点则可以展开或折叠。

在添加商品时，还可以上传商品图片和商品相册。但由于此功能涉及的代码非常多，本 任务没有对其进行讲解，在下一个任务中会单独进行讲解。

商品描述使用了 UEditor 编辑器，用户可以利用编辑器方便地进行文字格式处理，从而 使商品描述的呈现效果更加美观。

在表单的底部，提供了“保存草稿”和“保存并上架”两个提交按钮，区别在于前者的 商品状态为“下架”，后者的商品状态为“正常”，即上架状态，该商品会在前台中显示。

3. 修改商品

在商品列表中选中一件商品后，单击“编辑”按钮，就会打开“编辑商品”标签页。“编

辑商品”标签页的显示效果与“新增商品”标签页类似，其区别在于，“编辑商品”标签页 会将被编辑商品的原有数据取出来，填入到表单中，从而使用户在原有数据的基础上进行修 改。“编辑商品”标签页同样提供了“保存草稿”和“保存并上架”两个提交按钮，单击前 者，该商品状态保存为“下架”，单击后者，该商品状态保存为“正常”。

4. 删除商品

在商品列表中选中一件或多件商品后，单击“删除”按钮，可以对商品进行删除操作。

为了避免用户误操作，在执行删除操作前，会弹出确认框，只有用户单击“确认”后才会执

行删除操作。

5. 商品上下架

在商品列表中选中一件或多件商品后，单击“上架”或“下架”按钮，可以对商品的上

下架状态进行操作。为了避免用户误操作，在执行操作前，会弹出确认框，防止误操作。

【任务 5】商品图片管理

任务描述

在新增商品或修改商品时，都需要用到图片上传功能。该功能完成后的页面效果如图

9-13所示。

图 9-13 商品图片管理

从图 9-13 中可以看出，页面中有“商品图片”和“商品相册”两个表单项，对应有两 个“选择图片”按钮。需要注意的是，“商品图片”只能上传一张，而“商品相册”可以上 传多张，最多允许上传 10 张图片。 当用户选择图片后，图片就会自动上传，并将预览图显示在“选择图片”按钮上方的 图片列表中。若当前页面是修改商品，则商品原有的图片会显示在图片列表中。图片列表

中的每一张图片都在右上角提供了“删除”功能，用于删除图片。

【任务 6】商城首页

任务描述

商城首页主要由顶部导航栏、头部、主导航栏、内容区域、服务链接、页脚组成。主

导航栏左侧的第一项是“全部商品分类”，在它下面显示了商品分类菜单，当鼠标滑到菜单 上时，会显示该分类下的二级分类和三级分类，如图 9-14 所示。

图 9-14 商品分类菜单

在商品分类菜单的左边，是“轮播图”模块，这些图片来自后端 API。

【任务 7】商品列表

任务描述

当用户在主导航栏的商品分类菜单中单击某一个分类时，就会进入到商品列表页面。该

页面用于浏览某一分类下的商品，查看商品名称、预览图和价格，并提供了分页、筛选和排 序等功能。其页面效果如图 9-15 所示。

图 9-15 商品列表页

在图 9-15 中，当用户切换分类时，会在商品列表的上方提供一个分类导航，用于显示 当前分类的所在路径。在列表的右侧，还提供了“相关商品推荐”，用于向用户推荐一些相 关的商品。

【任务 8】商品详情

任务描述

当用户在商品列表中单击一件商品后，就会打开商品详情页，显示商品的详细信息。

商品详情页开发完成后的效果如图 9-16 所示。

图 9-16 商品详情页

在商品详情页中，主导航栏下方是一个分类导航，用于显示当前商品所属的分类。在树状分类结构中的路径，其显示效果与商品列表中的分类导航相同。 在分类导航下方，左侧是商品相册，右侧是商品信息。其中，商品相册中的图片来自

后台上传的图片，浏览时，可以在多张图片之间切换，并且支持鼠标滑过小图查看大图。 商品信息中包含了商品的名称、卖点、价格、库存等信息。由于本项目并未实现下订单、 在线支付和评价功能，因此累计销量与评价皆显示为 0。

在商品相册的下方，是相关商品推荐，该功能与商品列表页中的相关商品推荐相同。 在其右边，是商品详情，用于显示后台中通过在线编辑器录入的商品详情数据。

【任务 9】购物车

任务描述

当用户在商品详情页单击“加入购物车”按钮后，就会将当前商品加入到购物车，然后

跳转到购物车页面，显示购物车中的商品。完成后的购物车页面效果如图 9-17 所示。

图 9-17 购物车

从图 9-17 中可以看出，购物车页面是一个表格布局。在表格中，第 1 列是一个复选框， 表示提交订单时是否提交该商品，提供了全选功能；第 2 列是商品名称，通过单击商品名称 可以跳转到商品详情页；第 3 列是商品的单价，第 4 列是购买数量，第 5 列用于从购物车中 删除商品。在表格的右下方，显示了当前选择的商品数量和总价格。