前端网站项目——满记甜品开发日志 2022.6.22

目录：

前端功能需求→后端功能需求→数据库设计→UI设计→前端实现→后端实现→项目部署

甲方需求简述

用户通过手机号进行登录和注册功能。

用户通过模糊查询、动态查询、热度排行榜等方法挑选甜品类型和口味，并选择几款甜品加入购物车，确认订单后填入收货信息和收货地址并付费购买甜品等功能。

用户登录后可收藏喜欢的甜品，可查看订单进度，可修改个人昵称和手机号、地址，可对商品、商家、骑手进行评价。

管理员通过手机号进行登录管理商品功能。管理员可上架下架甜品，查看用户订单，管理用户订单状态等。

用户注册、登录功能：

（设置在首页）

1.1 用户手机号登录、注册：用户输入手机号或平台账号，系统检查该手机号或账号是否已经注册，如果未注册，用户可以进行注册，如果已经注册，系统会提示用户直接进行登录操作。

1. 打开“首页”界面
2. 点击“登录”或“注册”按钮，进入登录/注册页面
3. 在登录/注册页面中，选择“手机号登录选项，进入相应页面
4. 对于“手机号登录”，用户需要输入手机号码，然后点击“获取验证码”按钮，系统会发送验证码到该手机号，用户填写收到的短信验证码并确认登录
5. 对于“注册”，用户需要填写手机号码或账号，设置密码，填写个人信息，如昵称、性别、地区等
6. 在填写完毕后，点击“提交注册”按钮，系统会验证该手机号码或账号是否已经存在，如果已经存在，系统会提示用户直接进行登录操作
7. 如果该手机号或账号未被注册，系统会将用户的信息进行存储，并提示注册成功
8. 用户完成登录后，可以进行操作：如浏览商品详情页、添加购物车、提交订单、提交收货地址、修改收货地址、查看订单状态等。

（手机号验证API：）

（https://www.tianyandata.cn/）

1.2 管理员登陆：管理员账号是需要单独的数据库存放的，管理员登录时需要输入管理员账户密码进行验证。

1. 打开“首页”登录界面
2. 管理员需要输入管理员用户名和密码进行验证
3. 系统会检测管理员提交的用户名和密码是否匹配数据库中的记录，如果匹配成功，系统会将管理员重定向到后台管理页面
4. 后台管理页面通常包括商品管理、用户管理、订单管理、数据统计、网站配置等模块
5. 管理员可以根据自己的权限管理不同的系统功能，进行相应的操作

注意事项:

1. 管理员账户的密码需要设置为足够安全的复杂度，建议采用字母、数字和特殊字符混合的方式，长度不少于8位。
2. 管理员密码需要定期进行更改，以确保账户的安全性。
3. 管理员登录后需要注意保护账户的安全性，不要将账户信息泄露给他人。
4. 系统必须对管理员的操作进行权限控制，防止管理员滥用权限造成损失。
5. 系统需要记录管理员的操作日志，以便于追溯和审计管理员在系统内的操作。

用户访问商品界面，根据商品分类访问：

（登录后可用）

2.1 查询功能：系统需要提供对商品的模糊查询和动态查询功能，用户可以根据类型、口味、商品热度排行榜、季节店铺榜等方面来查询商品。

1. 打开“产品推介”主界面
2. 点击查询按钮或进入查询页面
3. 选择商品分类方式，如按类型、口味、是否有货、商品热度排行榜、季节店铺榜等
4. 可以输入关键词进行模糊查询
5. 可以选择不同的已有的标签进行动态查询
6. 可以选择热度排行榜
7. 可以选择季节单品榜
8. 模糊查询通过点击“搜索”或“确定”按钮，系统会显示查询结果
9. 动态查询通过美点击一个标签，系统会显示查询结果
10. 用户可以浏览查询到的商品，选择心仪商品进行购买或点赞

用户购物车功能：

（登录后可用）

3.1 添加商品：用户在商品详情页上选择商品数量并通过添加至购物车功能添加商品，如果已经添加过，按钮会显示为加减按钮。

1. 用户通过进入“产品推介”页面
2. 用户需要自己选择喜欢的商品
3. 用户需要点击“添加至购物车”按钮，将商品添加至购物车中
4. 如果用户已经将该商品添加至购物车，购物车按钮会显示为“已添加”，用户可以直接修改商品数量，或者继续浏览其他商品
5. 如果用户已经登录，系统会将商品信息添加至用户的购物车中，并提示“成功添加至购物车”
6. 用户可以在购物车页面查看和修改购物车中的商品信息以及总价
7. 用户可以选择继续浏览商城网站或进行结算购买

注意事项：

1. 商品详情页面需要清晰显示商品的图片、名称、价格、规格等信息，方便用户进行选择
2. 用户在添加商品时，需要注意选择喜欢自己的类型、口味、是否加冰、是否加糖，以避免后续退换货的问题

3.2 提交订单前选择送货地址：用户在提交订单时需要选择送货地址，系统需要提供多地址的功能（即为：数据库中储存用户信息的表中提供多个（5个左右）的地址信息列）地址中需要有姓名、电话和地址。

1. 用户在购物流程中提交订单前，需选择一个送货地址，如在购物车页面中点击“结算”按钮后进入结算页面，选择“收货地址”等选项时需要填写或选择相关信息。
2. 用户需要从数据库中已存储的收货地址信息列表中选择一个地址，如果用户之前没有添加过收货地址，则需要先去“个人中心”页面添加地址。
3. 系统在设计数据库结构时需要开设多个地址信息列，来存储用户的多个地址信息。在网站或APP的收货地址管理页面，需要清晰显示不同地址信息的名称，例如“家庭”、“公司”、“学校”等方便用户识别。
4. 每个地址信息中需要包含姓名、电话和地址等信息，以确保快递员能够准确送到用户的指定位置。
5. 用户可以根据自己的需要进行选择，如果需要更改收货地址，点击“编辑”按钮，对已有地址进行修改。
6. 如果想要添加新的地址，点击“新建地址”按钮，填写相关信息进行添加。
7. 添加/编辑地址的页面需要清晰显示不同地址信息的名称、省/市/区等地址信息，以及联系人姓名、电话等详细信息。用户需要仔细确认自己填写的地址信息，确保其准确无误。

注意事项：

1. 在添加/编辑地址时，需要确保地址信息的格式、拼写和精度，避免因填写错误导致送货地址不准确。
2. 系统需要对接快递公司的API，以便于选择送货地址后对送货范围做出限制。（选做）
3. 添加/编辑地址的页面需要清晰明了，避免用户因为找不到地址修改的入口或填写信息不当而造成不必要的麻烦。
4. 在收货地址管理页面为用户提供批量操作功能，方便用户在多个地址信息之间进行切换、修改、删除等操作。
5. 用户提交的地址信息需要保密，系统需要实现相关保护措施，来确保用户信息不被恶意利用。

3.3 提交订单：用户在提交订单时需要核对收货地址、商品列表（图片、名称、数量、金额）等信息。

1. 提交地址信息后，系统需要进行验证和存储，以确保地址信息的准确性、完整性和安全性。
2. 用户在选择完收货地址后，需要仔细核对相关信息，避免出现快递不能准确到达的问题，进一步确保顺利送货。

注意事项：

1. 系统需要对用户提交的商品信息进行验证和存储，确保数据的准确性、完整性和安全性
2. 系统需要对购物车中商品的价格、优惠等信息进行明细显示，方便用户核对和结算。

用户个人信息界面功能：

（登录后可用）

4.1 查看喜欢的单品：用户可以查询自己点过喜欢的单品。

1. 用户在登录后，通过点击“个人空间”按钮，进入个人信息页面，查看自己的个人信息和各种功能选项。
2. 在个人信息页面中，用户可以选择“我喜欢的”等选项，进入相关页面查看自己的收藏和点赞信息。
3. 如果用户之前收藏了一些单品，可以在“我的喜欢”页面中查看自己的收藏列表，列表中应包含收藏商品的名称、价格、图片等信息。
4. 在查看自己的点赞信息时，用户可以进行一些操作，例如添加/删除收藏、点赞和取消点赞等，以便对自己感兴趣的商品进行管理和处理。

注意事项：

1. 在实现个人中心功能时，需要严格遵守相关法律法规和用户隐私保护规定，确保用户的个人信息不被泄露或不当使用。
2. 在设计个人中心页面时，需要考虑用户使用习惯和个人偏好，并充分考虑用户体验和操作便利性。
3. 在添加/删除收藏等操作时，需要确保系统响应及时、准确和可靠，以避免用户遭受不必要的困扰或损失。

4.2 更改个人信息：用户可以修改个人的收货地址、姓名、电话和头像等信息。

1. 用户在登录后，通过点击“个人空间”按钮，进入个人信息页面，在页面上选择“更改个人信息”选项。
2. 系统将跳转至一个页面，用户可以在该页面上修改自己的各种个人信息，例如收货地址、姓名、电话和头像等信息。
3. 如果用户要更改自己的收货地址，可以点击“编辑地址”按钮，进入修改地址页面，在该页面上输入新的地址信息，并保存修改后的地址信息。
4. 如果用户要更改自己的姓名和电话号码，可以点击“编辑个人信息”按钮，在该页面上修改个人信息，并保存修改后的信息。
5. 在进行以上操作时，用户需要仔细检查自己填写的信息，确保信息的准确性和完整性，特别是个人敏感信息，需要注意保护隐私和安全。
6. 用户输入信息完成后，需要点击“保存”或“确认”按钮，系统会将用户修改的个人信息保存至数据库中。
7. 修改成功后，系统会给用户相应的提示，用户需要注意确认修改是否成功，并检查已修改的信息的正确性。

注意事项：

1. 在进行个人信息修改时，用户需要认真检查自己输入的信息，确保信息的真实性和准确性。
2. 在进行更改个人信息时，需要确保系统稳定可靠，避免数据丢失或其他不必要的困扰。
3. 在更改个人信息时，需要注意保护个人隐私和敏感信息，特别是收货地址和电话等个人敏感信息，需要做好保护措施，并遵守相关法律法规和用户隐私保护规定。

4.3 查看历史订单：用户可以查询历史订单，并且可以使用再来一单功能按钮。

1. 用户在登录后，通过点击“个人空间”按钮，进入个人信息页面，选择“历史订单”选项。
2. 在历史订单页面中，用户可以查看之前已经下过的订单列表，列表中应该包括订单号、下单时间、订单状态、订单总价等信息。
3. 如果用户想要查看某个具体的订单的详情信息，可以点击该订单对应的“详情”按钮，进入订单详情页面，该页面上应包括订单中的商品列表、数量、单价、运费、订单总价等信息。
4. 如果用户想要再来一单，可以选择想要再次购买的订单号，并点击“再来一单”按钮，系统将会将该订单中的商品重新加入购物车中，以备用户下一次购买使用。
5. 在进行以上操作时，用户需要注意保护个人隐私和敏感信息，特别是订单号等个人敏感信息，需要做好保护措施，并遵守相关法律法规和用户隐私保护规定。
6. 用户在使用再来一单功能时，需要注意商品数量、价格等相关信息的准确性和合理性，避免因买多或买少出现不必要的损失。

注意事项：

1. 在进行历史订单查询时，用户需要认真核对订单信息，特别是订单号、订单状态、订单总价等关键信息，以确保查看信息的准确性和完整性。
2. 在再来一单操作时，需要确保系统稳定可靠，商品数据准确，避免因不稳定或数据异常导致的错误操作和不必要的损失。
3. 在购买商品时，需要遵守相关法律法规和商业规范，如在购买过程中需要确认商品的真实性、有效期、售后服务等相关条件，并防止遭受欺诈或其他不良行为的危害。

4.4 评价功能：用户可以对商家和骑手进行评价。

1. 当订单状态为已完成后，用户可以在订单详情页面中选择“评价”选项。
2. 进入评价页面后，用户需要选择要评价的对象，即商家或骑手，然后输入具体的评价内容。
3. 如果是针对商家的评价，用户可以根据自己的实际体验，对商家的服务质量、商品品质、配送速度等方面进行评价，并给出相应的评分等级。
4. 如果是针对骑手的评价，用户可以对骑手的服务态度、配送速度、安全性等方面进行评价，并给出相应的评分等级。
5. 在评价过程中，用户需要注意文明用语，避免使用不文明语言、谩骂或恶意评价等行为，同时也需要认真考虑评价内容和分数，意见和建议应当建立在事实和客观情况基础上。
6. 完成评价后，用户需要点击“提交”或“确认”按钮，系统将会将评价内容和分数保存至数据库中。

注意事项：

1. 后台管理人员需要去审核用户的评价内容和分数，关注实际体验和客观情况，尽量选择有价值的评价信息，管理员应避免用户使用不文明语言、谩骂或恶意评价，保持文明的网络环境。
2. 后台管理人员需要注意保护个人隐私和敏感信息，尤其是对商家和骑手的评价应遵守相关规定和良好的职业道德，遵守相关法律法规和商业规范，保持公正、公平、透明的态度和行为。

4.5 查看优惠券信息：系统需要提供会员优惠功能，包括所有单品打折或使用会员券减价等。

1. 用户在登录后，可以在“个人空间”按钮，进入个人信息页面，找到“我的优惠券”选项，选择该选项进入优惠券页面。
2. 在优惠券页面中，用户可以查看可用的优惠券信息，该信息包括优惠券名称、折扣力度、有效期等重要信息。
3. 如果用户想要使用优惠券进行购物，可以选择该优惠券，然后点击“使用”按钮。
4. 系统将会自动跳转至商品页面，并根据优惠券的类型和折扣力度进行相应的优惠扣减。
5. 在使用优惠券时，用户需要按照优惠券的类型和使用条件进行相关操作，如满足最低消费额度、保证优惠券在有效期内、不重复使用等规定。
6. 如果用户想要查看已经使用的优惠券信息，可以选择“已使用”或“已过期”选项，系统将会显示相应的优惠券使用记录。

注意事项：

1. 在进行优惠券使用时，用户需要按照优惠券的类型和使用条件进行相关操作，避免出现不必要的损失或纠纷。
2. 在查看优惠券信息时，用户需要认真核对优惠券的名称、折扣力度、有效期等相关信息，确保使用的优惠券有效并符合相关条件。
3. 在使用优惠券时，用户需要注意相关的规定和操作流程，如最低消费额度、有效期等等，避免出现错误操作或违规行为。
4. 经营方需要确保优惠券信息和使用流程的准确和规范，避免虚假宣传、误导消费者等违规行为。

管理员/商家管理界面(后台)：

（后台页面/其他页面，与用户看到的前台页面区别开，是独立的页面）

5.1 后台商品管理：管理员需要更新商品数量，管理员通过点击上下架按钮来控制商品上下架。

1. 店长或管理员登录进入商品管理页面，在管理系统中选择“商品管理”选项。
2. 在商品管理页面中，管理员可以查看所有已存在的商品信息。可以在搜索框中输入商品名称、分类、关键词等信息进行快速查找。
3. 如果需要更新商品数量，管理员可以选择想要更新的商品，点击“编辑”按钮。系统将会自动跳转至编辑页面。
4. 在编辑页面中，管理员可以修改商品数量、价格、描述等信息，并点击“确认”按钮进行保存。
5. 如果需要控制商品上下架状态，管理员可以选择想要操作的商品，并点击“上架”或“下架”按钮。
6. 系统将会自动修改商品的上下架状态，并在页面中展示相应操作记录。

注意事项：

1. 在进行商品管理时，管理员需要对商品信息和状态进行准确和规范的管理和操作，避免出现错乱或错误操作等情况。
2. 在更新商品数量或价格等信息时，管理员需要遵守相关规定和良好的职业道德，确保信息的准确和合理。
3. 在进行商品上下架操作时，管理员需要关注商品状态和库存等相关信息，同时需要遵守商业规范和相关法律法规的规定，避免误导消费者和其他违规行为。
4. 经营方需要建立信息化的商品管理体系，确保商品信息和状态的有效和规范管理，提高管理效率和质量。

5.2 分类管理：管理员可以自定义分类，并提供分类管理功能来设置商品的分类。

（首页的页面展示分类：首页的分类还是按首页的来）

1. 店长或管理员登录管理系统。
2. 找到分类管理选项并点击进入。
3. 点击添加分类按钮，输入分类名称，选择分类图片等信息。
4. 确认添加并保存新分类。
5. 可以对已有分类进行编辑、删除等操作。

5.3用户信息管理：管理员可以查看有多少用户购买过本店的哪些商品，并根据购买次数做出排行榜，通过排行榜来查看商品热度。

1. 店长或管理员登录管理系统。
2. 找到用户信息管理选项并点击进入。
3. 查看用户购买记录，可以根据购买时间、商品等进行筛选。
4. 统计每个商品的购买次数和金额，并根据购买次数做出排行榜。
5. 根据排行榜查看商品热度，可以根据此来做出后续的商品管理决策。
6. 可以对用户信息进行编辑、删除等操作，如需要修改个人信息或删除不该被公开的信息。

5.4店铺信息管理：管理员可以修改店铺名称、所在地区、详细地址、营业范围、营业执照等。

1. 店长或管理员登录管理系统
2. 找到店铺信息管理选项并点击进入
3. 找到需要修改的信息，如店铺名称、所在地区、详细地址、营业范围、营业执照等
4. 点击编辑按钮，进行修改操作
5. 修改完毕后，点击保存按钮保存修改
6. 如果需要上传新的营业执照，选择上传文件的选项，找到营业执照所在位置，上传文件。
7. 确认无误后，保存修改并确认变更
8. 可以在店铺信息管理页面中进行查看、编辑、更新操作，如需要进行其他店铺信息维护，也可以在此页面中操作

5.5订单管理：商家可以查看订单详情，并分页查看已处理和未处理订单。

1. 店长或管理员登录商家后台系统。
2. 进入订单管理页面。
3. 选择订单状态，可以查看已处理和未处理订单。
4. 根据需要查看订单列表，可以根据订单编号、时间、金额等进行筛选。
5. 点击订单编号，进入订单详情页面，可以实时查看订单状态，包括下单、备餐、骑手送餐、送达等状态
6. 如果需要对订单状态进行修改，可在订单详情页中进行操作。
7. 在订单管理页面中，可以对订单进行取消、发货、退货、退款等操作。
8. 对于已完成的订单，可以对订单进行评价和追评。
9. 管理员可以进行分页查看已处理和未处理订单，方便统计和管理。

5.6订单用户信息：商家可以点击订单详情来查看订单用户的收货地址和电话号，同时可以添加自己的备注信息。

1. 店长或管理员登录商家后台系统

2. 进入订单管理页面

3. 选择需要查看的订单编号，点击该订单的订单编号

4. 进入订单详情页面，可以实时查看订单状态，包括下单、备餐、骑手送餐、送达等状态

5. 在订单详情页面中，查看用户的收货地址和电话号码。

6. 如有需要，可以在备注栏中添加自己的备注信息，如需要询问用户其他信息可在此备注栏中提出。

7. 保存备注信息后，确认订单无误，即可进行后续的发货、退货、退款等操作。

数据库设计

根据以上需求，可以设计以下数据库：

数据库名：manji_sweet

用户表：user

（一个用户最多可设置5个不同的收货地址）

字段：用户id（主键）、手机号、密码、昵称、地址1、地址2、地址3、地址4、地址5

字段：user_id（主键）、phone_number、password、nickname、address1、address2、address3、address4、address5

商品表：product

字段：商品 id（主键）、甜品名称 、 描述、图片、价格 、类型、分类 、口味 、甜度、状态（上架/下架）

字段：product_id（主键）、product_name、description、image、price、type、category、flavor、sweetness、status（on/off shelf）

订单表：order

字段：订单id（主键）、用户id、商品id、数量、总价、状态（待付款/待发货/已发货/已完成/已取消）、收货人、联系电话、收货地址、下单时间、付款时间、发货时间、更新时间

字段：order_id（主键）、user_id、product_id、quantity、total_price、status（unpaid/paid/delivering/delivered/completed/cancelled）、consignee、phone_number、delivery_address、order_time、payment_time、delivery_time、update_time

收藏表（喜欢表）：collection

字段：id、用户id、商品id、创建时间、更新时间

字段：collection_id、user_id、product_id、create_time、update_time

商品评价表：evaluation

字段：商品id、用户id、管理员id、骑手id、内容、创建时间、更新时间

字段：evaluation_id、product_id、user_id、admin_id、rider_id、content、create_time、update_time

管理员信息表：admin

字段：id、手机号、密码、职位

字段：admin_id、phone_number、password、position

购物车表：cart

字段：id、用户id、商品id、数量、创建时间、更新时间

字段：cart_id、user_id、product_id、quantity、create_time、update_time

用户表：

例子1：user_id为001的用户，手机号为12345678901，密码为123456，昵称为小明，有三个收货地址，分别是“北京市海淀区xx小区xx号楼xx单元”，“北京市朝阳区xx小区xx号楼xx单元”，“北京市丰台区xx小区xx号楼xx单元”。

user_id	phone_number	password	nickname	address1	address2	address3	address4	address5
001	12345678901	123456	小明	北京市海淀区xx小区xx号楼xx单元	北京市朝阳区xx小区xx号楼xx单元	北京市丰台区xx小区xx号楼xx单元

商品表：

例子2：商品id为1001的甜品名称是巧克力蛋糕，描述为口感细腻，图片为一张巧克力蛋糕的照片，价格为80元，类型为蛋糕，分类为甜点，口味为巧克力，甜度为中甜，上架状态。

product_id	product_name	description	image	price	type	category	flavor	sweetness	status
1001	巧克力蛋糕	口感细腻	巧克力蛋糕的照片	80	蛋糕	甜点	巧克力	中甜	上架

订单表：

例子3：订单id为20210801001的订单，用户id为001，商品id为1001，数量为1，总价为80元，状态为已取消，收货人为小明，联系电话为12345678901，收货地址为“北京市海淀区xx小区xx号楼xx单元”，下单时间为2021年8月1日10:00，更新时间为2021年8月10日12:00。

order_id	user_id	product_id	quantity	total_price	status	consignee	phone_number	delivery_address	order_time	payment_time	delivery_time	update_time
20210801001	001	1001	1	80	已取消	小明	12345678901	北京市海淀区xx小区xx号楼xx单元	2021-08-01 10:00:00			2021-08-10 12:00:00

收藏表：

例子4：收藏id为1的用户001，收藏了商品id为1001的甜品，创建时间为2021年8月1日10:00，更新时间为2021年8月1日12:00。

collection_id	user_id	product_id	create_time	update_time
1	001	1001	2021-08-01 10:00:00	2021-08-01 12:00:00

商品评价表：

例子5：商品id为1001的甜品，用户id为001，管理员id为001，骑手id为001，评价内容是非常好吃，创建时间为2021年8月1日10:00，更新时间为2021年8月1日12:00。

evaluation_id	product_id	user_id	admin_id	rider_id	content	create_time	update_time
1	1001	001	001	001	非常好吃	2021-08-01 10:00:00	2021-08-01 12:00:00

管理员信息表：

例子6：管理员id为001，手机号为12345678901，密码为123456，职位为管理员。

admin_id	phone_number	password	position
001	12345678901	123456	管理员

购物车表：

例子7：购物车id为1，用户id为001，加入了商品id为1001的甜品，数量为2，创建时间为2021年8月1日10:00，更新时间为2021年8月1日12:00。

cart_id	user_id	product_id	quantity	create_time	update_time
1	001	1001	2	2021-08-01 10:00:00	2021-08-01 12:00:00