苍穹外卖-day15:套餐管理

套餐管理

课程内容

  • 套餐分页查询
  • 启售停售套餐
  • 删除套餐
  • 新增套餐

1. 套餐分页查询

1.1 需求分析和接口设计

根据产品原型来了解需求,套餐分页查询的产品原型如下:

在这里插入图片描述

业务规则:

  • 根据页码展示套餐信息(套餐名称、套餐图片、套餐分类、价格、售卖状态、最后操作时间等)
  • 每页展示10条数据
  • 分页查询时可以根据需要,输入套餐名、套餐分类、售卖状态 进行查询

要展示套餐分页数据,就需要前后端进行数据交互,对应的接口有两个:

  • 分类查询接口(用于套餐分类下拉框中分类数据展示)
  • 套餐分页查询接口

(1)分类查询接口

基本信息

Path: /admin/category/list

Method: GET

请求参数

Query

参数名称是否必须示例备注
type2分类类型:1为菜品分类,2为套餐分类

返回数据

名称类型是否必须默认值备注其他信息
codeinteger必须format: int32
dataobject []非必须item 类型: object
├─ createTimestring非必须format: date-time
├─ createUserinteger非必须format: int64
├─ idinteger非必须format: int64
├─ namestring非必须
├─ sortinteger非必须format: int32
├─ statusinteger非必须format: int32
├─ typeinteger非必须format: int32
├─ updateTimestring非必须format: date-time
├─ updateUserinteger非必须format: int64
msgstring非必须

(2)套餐分页查询接口

基本信息

Path: /admin/setmeal/page

Method: GET

请求参数

Query

参数名称是否必须示例备注
categoryId分类id
name套餐名称
page页码
pageSize每页记录数
status套餐起售状态

返回数据

名称类型是否必须默认值备注其他信息
codenumber必须
msgnull非必须
dataobject非必须
├─ totalnumber非必须
├─ recordsobject []非必须item 类型: object
├─ idnumber必须
├─ categoryIdnumber必须
├─ namestring必须
├─ pricenumber必须
├─ statusnumber必须
├─ descriptionstring必须
├─ imagestring必须
├─ updateTimestring必须
├─ categoryNamestring必须

1.2 代码开发

要开发前端代码,首先需要找到对应的组件。从路由文件 router.ts 中找到套餐管理页面(组件)。

在这里插入图片描述

可以看到,套餐管理页面(组件)的位置为:src/views/setmeal/index.vue。我们只需要在此文件中开发套餐分页查询相关的前端代码即可,整个开发过程大概可以分为以下几个关键步骤:

  1. 根据产品原型,制作页面头部效果(输入框、下拉框、查询按钮等)
  2. 动态填充套餐分类下拉框中的分类数据
  3. 为查询按钮绑定单击事件,发送Ajax请求,查询套餐分页数据,实现前后端交互
  4. 提供 vue 的初始化方法,在页面加载后就查询分页数据
  5. 使用ElementUI提供的表格组件展示分页数据
  6. 使用ElementUI提供的分页条组件实现翻页效果

注意:开发过程中,并不是所有的代码都实现了再测试,而是开发一部分,就需要测试一下,看效果,如果有问题再调整。没有问题,再继续开发、测试。所以,这是一个逐渐完善的过程。下面我们就按照上面的几个关键步骤来开发,每开发完一个关键步骤,就需要测试一下,来验证我们的代码是否正确。

2.2.1 制作页面头部效果

根据产品原型,制作页面头部效果(输入框、查询按钮等)。产品原型中的头部效果如下:

在这里插入图片描述

注意:输入框和按钮都是使用 ElementUI 提供的组件,对于前端的组件只需要参考 ElementUI 提供的文档,进行修改即可。实现代码如下:

在这里插入图片描述

注意:当前套餐分类下拉框中的数据是直接在页面固定写死的,后续需要改为从后端动态获取。

2.2.2 动态填充套餐分类下拉框数据

现在需要将套餐分类下拉框中的数据改为动态获取,即前端需要发送Ajax请求,调用后端的分类查询接口,然后将后端返回的套餐分类数据动态展示在下拉框中。因为本次前后端交互是需要查询分类数据,所以按照项目规范,发送Ajax请求的代码需要定义到 src/api/category.ts 文件中。其实在此文件中已经定义了此方法,如下:

在这里插入图片描述

所以,此处只需要将此方法(getCategoryByType)导入当前组件,然后在 created 方法中调用此方法,获取套餐分类数据,动态填充套餐分类下拉框即可。具体代码如下:

在这里插入图片描述

注意:因为此处我们要查询的是套餐分类,所以传递的参数type值为2。

前面我们已经初步实现了页面头部制作,并且可以填充下拉框中的数据了。但是命名上并不是特别规范,所以我们需要进行一个调整,具体修改后端的代码如下:

在这里插入图片描述

两个下拉框的测试效果如下:

在这里插入图片描述

2.2.3 动态获取套餐分页数据

前面我们已经完成了页面头部效果开发,接下来就需要开发前后端数据交互的动态效果。

第一步:为查询按钮绑定单击事件

在这里插入图片描述

第二步:在methods中定义 pageQuery 方法,先验证当前方法能否正常执行

在这里插入图片描述

注意:按照开发规范,真正发送Ajax请求的代码需要封装到 api目录下的ts文件中(src/api/setMeal.ts)

第三步:在src/api/setMeal.ts 中定义 getSetmealPage 方法,实现发送Ajax请求获取分页数据

在这里插入图片描述

注意:发送 Ajax 请求的URL地址需要和前面我们设计的分页查询接口对应

第四步:在套餐管理组件中导入 setMeal.ts 中定义的方法,并在data() 方法中定义分页相关的模型数据

在这里插入图片描述

注意:需要将属性和上面的输入框、下拉框进行双向绑定。

第五步:在pageQuery 方法中调用 getSetmealPage方法,实现前后端数据交互

在这里插入图片描述

2.2.4 自动发送Ajax请求

前面的代码我们已经实现了前后端数据交互,但是有一个问题,就是只有在点击查询按钮时才会发生Ajax请求,实现分页数据查询。我们通常需要的是在当前页面(组件)加载后,就需要发送Ajax请求,查询第一页的数据。要实现这个效果,我们可以通过vue的生命周期方法,即created方法来做到,代码如下:

在这里插入图片描述

2.2.5 使用表格展示分页数据

前面我们已经实现了前后端数据交互,现在就需要将后端返回的数据通过表格展示出来,我们可以使用ElementUI提供的表格组件,具体使用方法可以参照官方提供的示例 https://element.eleme.io/#/zh-CN/component/table

在这里插入图片描述

2.2.6 使用分页条实现翻页效果

使用 ElementUI 提供的分页条组件,并绑定事件处理函数,具体使用方法可以参照官方提供的示例 https://element.eleme.io/#/zh-CN/component/pagination

在这里插入图片描述

1.3 功能测试

可以通过下面两种方式来测试:

  • 直接进行前后端联调,查看页面效果
  • 通过浏览器F12查看数据交互过程

在这里插入图片描述

2. 启售停售套餐

2.1 需求分析和接口设计

根据产品原型来进行需求分析:

在这里插入图片描述

可以对状态为“启售” 的套餐进行“停售”操作

可以对状态为“停售”的套餐进行“启售”操作

状态为“停售”的套餐不展示在用户端小程序中,所以用户不能购买停售的套餐

接口设计如下:

基本信息

Path: /admin/setmeal/status/{status}

Method: POST

请求参数

Headers

参数名称参数值是否必须示例备注
Content-Typeapplication/json

路径参数

参数名称示例备注
status1套餐状态,1表示起售,0表示停售

Query

参数名称是否必须示例备注
id101套餐id

返回数据

名称类型是否必须默认值备注其他信息
codeinteger必须format: int32
dataobject非必须
msgstring非必须

2.2 代码开发

第一步:为启售停售按钮绑定单击事件

在这里插入图片描述

第二步:编写对应的处理函数handleStartOrStop

在这里插入图片描述

到此可以先测试一下,检查当前方法能否成功执行,页面效果如下:

在这里插入图片描述

第三步:在 setMeal.ts 中封装套餐起售停售方法,发送Ajax请求

在这里插入图片描述

注意:发送请求的方式和相关参数,必须和前面的接口设计保持一致

第四步:在套餐管理组件中引入上面定义的enableOrDisableSetmeal方法,并完善 handleStartOrStop 方法

在这里插入图片描述

注意:

  • 在进行套餐启售停售操作时,建议先弹出确认框,用户点击确定按钮后再进行前后端交互
  • 在传递套餐状态参数status时,需要进行简单的处理,即:如果当前套餐状态值为1,则传递过去的参数为0;如果当前套餐状态值为0,则传递过去的参数为1

2.3 功能测试

直接进行前后端联调,查看页面效果

通过浏览器F12查看数据交互过程

在这里插入图片描述

3. 删除套餐

3.1 需求分析和接口设计

根据产品原型来进行需求分析,产品原型如下:

在这里插入图片描述

  • 点击 删除 按钮,删除指定的一个套餐
  • 勾选需要删除的套餐,点击 批量删除 按钮,删除选中的一个或多个套餐
  • 状态为 “启售” 的套餐不能删除,需要给出操作提示

可以看到,删除套餐功能在操作时有两种方式。一种是点击【删除】按钮,可以删除对应的一个套餐;一种是勾选需要删除的套餐,然后点击【批量删除】按钮,可以删除勾选的多个套餐。我们在设计接口时可以兼容这两种不同的操作方式,也就是只需要一个接口即可。

接口设计如下:

基本信息

Path: /admin/setmeal

Method: DELETE

请求参数

Query

参数名称是否必须示例备注
ids1,2,3ids

返回数据

名称类型是否必须默认值备注其他信息
codeinteger非必须format: int32
dataobject非必须
msgstring非必须

3.2 代码开发

要开发删除套餐前端代码,首先需要了解删除套餐业务功能的操作步骤:

  1. 在套餐管理列表页面,点击 【删除】按钮,或者勾选套餐然后点击【批量删除】按钮,弹出确认对话框
  2. 点击确认对话框中的【确定】按钮,则执行删除操作。如果套餐状态为“启售”,则不能删除,弹出信息提示
  3. 点击确认对话框中的【取消】按钮,则关闭对话框,不执行删除操作

接下来我们就可以按照上面的操作步骤来具体开发前端的代码。

第一步:在 setMeal.ts 中封装删除套餐方法,发送Ajax请求,用于实现前后端交互

在这里插入图片描述

注意:

  • 发送请求的方式和相关参数,必须和前面的接口设计保持一致
  • 使用此方法时,别忘了在组件中通过import导入

第二步:为【批量删除】按钮绑定单击事件,并在methods中编写对应的处理函数

在这里插入图片描述

在这里插入图片描述

到目前为止我们点击【批量删除】按钮,是可以执行handleDelete方法的。接下来我们需要解决一个问题,就是当前选中了哪些套餐呢?我们需要能够动态获取到,因为我们需要将这些套餐的id作为参数传递到后端。

第三步:参考 ElementUI 的官方文档,为表格组件添加 selection-change 事件和对应的处理函数,通过此事件我们就可以动态获取到当前勾选的套餐有哪些

在这里插入图片描述

在这里插入图片描述

注: selection-change 事件为 当选择项发生变化时触发的事件

第四步:完善 handleDelete 方法,获取当前被选中的行,并进行参数准备

在这里插入图片描述

注意:单个删除 和 批量删除,都是调用 handleDelete 方法,所以此方法还需要进一步调整

第五步:为【删除】按钮绑定单击事件,处理函数还是 handleDelete

在这里插入图片描述

注意:

  • 在 handleDelete 方法中通过第一个参数来区分是单个删除还是批量删除
  • S表示单个删除,B表示批量删除

第六步:调整 handleDelete 方法,使其兼容单个删除和批量删除

在这里插入图片描述

第七步:完善 handleDelete 方法,进行相应提示

在这里插入图片描述

注:

  • 批量删除时,如果没有选中套餐,给出提示
  • 删除之前需要弹出确认框,让用户确认

3.3 功能测试

直接进行前后端联调,查看页面效果

通过浏览器F12查看数据交互过程

在这里插入图片描述

4. 新增套餐

4.1 需求分析和接口设计

根据产品原型来进行需求分析,产品原型如下:

在这里插入图片描述

在这里插入图片描述

新增套餐时需要录入套餐名称、所属分类、套餐价格、套餐包含的菜品、套餐图片、描述等信息。其中套餐包含的菜品需要在弹出的添加菜品窗口中勾选。在弹出的添加菜品窗口中需要按照分类来展示菜品。

新增套餐功能涉及到4个接口,分别是:

  • 根据类型查询分类 接口
  • 根据分类查询菜品 接口
  • 文件上传 接口
  • 新增套餐 接口

(1) 根据类型查询分类 接口

基本信息

Path: /admin/category/list

Method: GET

请求参数

Query

参数名称是否必须示例备注
type2分类类型:1为菜品分类,2为套餐分类

返回数据

名称类型是否必须默认值备注其他信息
codeinteger必须format: int32
dataobject []非必须item 类型: object
├─ createTimestring非必须format: date-time
├─ createUserinteger非必须format: int64
├─ idinteger非必须format: int64
├─ namestring非必须
├─ sortinteger非必须format: int32
├─ statusinteger非必须format: int32
├─ typeinteger非必须format: int32
├─ updateTimestring非必须format: date-time
├─ updateUserinteger非必须format: int64
msgstring非必须

(2) 根据分类查询菜品 接口

基本信息

Path: /admin/dish/list

Method: GET

请求参数

Query

参数名称是否必须示例备注
categoryId101分类id

返回数据

名称类型是否必须默认值备注其他信息
codeinteger必须format: int32
dataobject []非必须item 类型: object
├─ categoryIdinteger非必须format: int64
├─ createTimestring非必须format: date-time
├─ createUserinteger非必须format: int64
├─ descriptionstring非必须
├─ idinteger非必须format: int64
├─ imagestring非必须
├─ namestring非必须
├─ pricenumber非必须
├─ statusinteger非必须format: int32
├─ updateTimestring非必须format: date-time
├─ updateUserinteger非必须format: int64
msgstring非必须

(3) 文件上传 接口

基本信息

Path: /admin/common/upload

Method: POST

请求参数

Headers

参数名称参数值是否必须示例备注
Content-Typemultipart/form-data

Body

参数名称参数类型是否必须示例备注
filefile文件

返回数据

名称类型是否必须默认值备注其他信息
codeinteger必须format: int32
datastring必须文件上传路径
msgstring非必须

(4) 新增套餐 接口

基本信息

Path: /admin/setmeal

Method: POST

接口描述:

请求参数

Headers

参数名称参数值是否必须示例备注
Content-Typeapplication/json

Body

名称类型是否必须默认值备注其他信息
categoryIdinteger必须分类idformat: int64
descriptionstring非必须套餐描述
idinteger非必须套餐idformat: int64
imagestring必须套餐图片
namestring必须套餐名称
pricenumber必须套餐价格
setmealDishesobject []必须套餐包含的菜品item 类型: object
├─ copiesinteger必须份数format: int32
├─ dishIdinteger必须菜品idformat: int64
├─ idinteger非必须套餐和菜品关系idformat: int64
├─ namestring必须菜品名称
├─ pricenumber必须菜品价格
├─ setmealIdinteger必须套餐idformat: int64
statusinteger必须套餐状态:1位起售 0为停售format: int32

返回数据

名称类型是否必须默认值备注其他信息
codeinteger必须format: int32
dataobject非必须
msgstring非必须

4.2 代码解读

新增套餐操作步骤:

①点击 “新建套餐”按钮,跳转到新增页面

②在新增套餐页面录入套餐相关信息

③点击“保存”按钮完成新增操作

首先需要找到新增套餐页面,可以通过操作过程来找:

第一步:在套餐管理列表页面中找到【新建套餐】按钮,查看按钮绑定的事件和对应的处理函数

在这里插入图片描述

第二步:在methods中找到handleAdd函数,查看跳转的路由路径

在这里插入图片描述

第三步:在路由文件中找到此路径对应的视图组件,可以看到是src/views/setmeal/addSetmeal.vue

在这里插入图片描述

第四步:解读src/views/setmeal/addSetmeal.vue这个文件即可

4.3 功能测试

直接进行前后端联调,查看页面效果

通过浏览器F12查看数据交互过程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/468537.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

大数据管理平台建设方案书

1.1.系统概述 1.1.1需求描述 1.1.2.需求分析 1.1.3.重难点分析 1.1.4.重难点解决措施 1.2.系统架构设计 1.2.1.系统架构图 1.2.2.关键技术 软件开发全资料获取进主页。

【贪心算法】Leetcode 55. 跳跃游戏 45. 跳跃游戏 I

【贪心算法】Leetcode 55. 跳跃游戏 45. 跳跃游戏 II Leetcode 55. 跳跃游戏解法1 贪心 Leetcode 45. 跳跃游戏I解法 贪心 Leetcode 55. 跳跃游戏 ---------------🎈🎈55. 跳跃游戏 题目链接🎈🎈------------------- 解法1 贪心…

【Python循环4/5】跳出循环的办法

目录 导入 break 具体用法 在for循环中的运用 在while循环中的运用 continue 具体用法 区别 总结 导入 前几天的博文里,我们学习了for循环和while循环。 无论是for循环还是while循环,默认的终止条件都是边界条件。在触发边界条件之前&am…

【Ubuntu】FTP站点搭建

配置顺序 前提条件:确保软件仓库可以正常使用,确保已正常配置IP地址 1.安装FTP服务 2.编辑FTP配置文件 3.设置开机自启 4.创建用户 5.配置用户限制名单 6.重启服务 7.查看运行状态 8.测试在同一局域网下的Windows查看文件 1.安装FTP服务 sudo apt insta…

大广赛获奖作品分享:平面设计精选!

全国大学生广告艺术大赛:简称大广赛,是中国最大的高校广告艺术传播平台,是由教育部高等教育司指导、中国高等教育学会广告教育专业委员会主办的全国性高校文科大赛。大广赛旨在提高大学生的创新精神和实践能力,激发大学生的创意灵…

如何查看MySQL数据库的连接数

连接数是指用户已经创建多少个连接,也就是MySQL中通过执行 SHOW PROCESSLIST命令输出数据库中运行着的线程个数的详情,如图6-1-1所示。 SHOW PROCESSLIST默认情况下只显示前100条记录的详情,如果需要显示超过100条的所有记录,可以…

qt使用Windows经典风格,以使QTreeView或QTreeWidge有节点线或加号

没有使用Windows经典风格的QTreeView或QTreeWidget显示如下: 使用Windows经典风格的QTreeView或QTreeWidget显示如下: 树展开时: 树未展开时: 可以看到: 未使用Windows经典风格时,QTreeView或QTreeWidget…

RealBasicVSR使用记录

对各种场景图片、视频超分结果都很不错的模型。 paper:https://arxiv.org/pdf/2111.12704.pdf code:https://github.com/ckkelvinchan/RealBasicVSR 一、使用步骤 1. git clone https://github.com/ckkelvinchan/RealBasicVSR.git 2. 我的环境已安装…

AJAX——综合案例

1 Bootstrap弹框 功能&#xff1a;不离开当前页面&#xff0c;显示单独内容&#xff0c;供用户操作 步骤&#xff1a; 引入bootstrap.css和bootstrap.js准备弹框标签&#xff0c;确认结构通过自定义属性&#xff0c;控制弹框的显示和隐藏 <!DOCTYPE html> <html la…

阿里云优惠券是什么?如何领取阿里云优惠券?

阿里云作为国内领先的云计算服务提供商&#xff0c;为广大用户提供了丰富的云产品和解决方案。为了吸引用户上云&#xff0c;阿里云经常推出各种优惠活动&#xff0c;其中最受用户欢迎的就是阿里云优惠券。那么&#xff0c;阿里云优惠券究竟是什么呢&#xff1f;我们又该如何领…

面经Java开发

联奕一面: 1、这段代码的输出结果是多少?t q z package com.smart.community.test;public class Test {public class B{static {System.out.println("t");}public B(){System.out.println("z");}}public class A extends B{static {System.out.println…

数据结构——lesson10排序之插入排序

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#x…

语文新读写杂志语文新读写杂志社语文新读写编辑部2023年第18期目录

视点_名作鉴赏 新年醉话《语文新读写》投稿&#xff1a;cn7kantougao163.com 老舍; 1 那些年&#xff0c;唐朝人一起喝过的酒 章雪峰; 2-5 酒德颂 刘伶; 5 刘伶病酒 刘义庆; 6 将进酒 李白; 7 把酒问月 李白; 8 哭宣城善酿纪叟 李白; 9 饮中八…

login登录界面

展示情况 代码&#xff1a; <template><div class"wrapper"><div style"margin: 200px auto; background-color: #fff; width: 350px; height: 300px; padding: 20px; border-radius: 10px"> <div style"margin: 20px 0; text…

基于spring boot框架的发艺美发店管理系统

摘 要 系统根据现有的管理模块进行开发和扩展&#xff0c;采用面向对象的开发的思想和结构化的开发方法对发艺美发店管理的现状进行系统调查。采用结构化的分析设计&#xff0c;该方法要求结合一定的图表&#xff0c;在模块化的基础上进行系统的开发工作。在设计中采用“自下而…

熵、交叉熵、KL散度【详细理论推导】

机器学习笔记 第一章 机器学习简介 第二章 感知机 第三章 支持向量机 第四章 朴素贝叶斯分类器 第五章 Logistic回归 第六章 线性回归和岭回归 第七章 多层感知机与反向传播【Python实例】 第八章 主成分分析【PCA降维】 第九章 隐马尔可夫模型 第十章 奇异值分解 提示&#x…

【机器学习-05】模型的评估与选择

在前面【机器学习-01】机器学习基本概念与建模流程的文章中我们已经知道了机器学习的一些基本概念和模型构建的流程&#xff0c;本章我们将介绍模型训练出来后如何对模型进行评估和选择等 1、 误差与过拟合 学习器对样本的实际预测结果与真实值之间的差异&#xff0c;我们称之…

最新2024年阿里云服务器地域和可用区全球分布表

2024年最新阿里云服务器地域分布表&#xff0c;地域指数据中心所在的地理区域&#xff0c;通常按照数据中心所在的城市划分&#xff0c;例如华北2&#xff08;北京&#xff09;地域表示数据中心所在的城市是北京。阿里云地域分为四部分即中国、亚太其他国家、欧洲与美洲和中东&…

spring 没完没了

start 轻量级开源的j2ee框架&#xff0c;容器框架 装javabean aop ioc 定义一个starter的jar包&#xff0c;写一个configuration配置类&#xff0c;将bean定义其中&#xff0c;在starter包的meta-inf/spring.factories中写入配置类&#xff0c;springboot会按约定加载该配置类 …

3D模型优化服务+三维可视化+数字孪生+元宇宙=眸瑞科技

眸瑞科技&#xff1a;老子云平台AMRT3D数字孪生引擎 老子云概述 老子云3D可视化快速开发平台&#xff0c;集云压缩、云烘焙、云存储云展示于一体&#xff0c;使3D模型资源自动输出至移动端PC端、Web端&#xff0c;能在多设备、全平台进行展示和交互&#xff0c;是全球领先、自…
最新文章