苍穹外卖-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.mzph.cn/news/762954.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

4.1.1 SN74HC05N型反相器(OD门)

1、OD门介绍 为提高逻辑门驱动负载的能力,输出端漏极开路的OD门被广泛使用。使用时,OD门需外接一只电阻上拉到电源正极。相同型号的OD门可以进行多只并联,实现“线与”的逻辑功能。 常用的OD门芯片有74HC05N、I2C设备等。 2、SN74HC05N型反相器(OD门) 2.1 引脚分布和功…

Java中的并发并行与生命周期

并发并行与生命周期 并发、并行什么是进程并发的含义并行的理解多线程是如何在执行 线程的生命周期Java线程的状态线程的6中状态互相转换 并发、并行 什么是进程 正在运行的程序(软件)就是一个独立的进程线程是属于进程的,一个进程中可以同…

全网最全的Postman接口自动化测试(史实级攻略)

软件测试面试刷题,这个小程序(永久刷题),靠它快速找到工作了!(刷题APP的天花板)【持续更新最新版】-CSDN博客 背景 该篇文章针对已经掌握 Postman 基本用法的读者,即对接口相关概念…

2024年Jira全面解析:从 Jira 的概念到优缺点、最新政策

Jira是澳大利亚的Atlassian公司开发的一款项目管理软件,名字来源于日文中“哥斯拉”的称呼“Gojira”。Jira不仅可以追踪缺陷和问题,还能管理项目。很多企业还将JIRA用于一些特殊的场景,比如作为仓库自动化工具、管理文档流程、优化费用等等。…

四川易点慧电子商务抖音小店:安全可靠,购物新选择

在数字化浪潮席卷全球的今天,电子商务已成为人们生活中不可或缺的一部分。四川易点慧电子商务抖音小店作为新兴的电商平台,以其安全可靠、便捷高效的特点,逐渐赢得了广大消费者的青睐。今天,就让我们一起走进四川易点慧电子商务抖…

Python Windows系统 虚拟环境使用

目录 1、安装 2、激活 3、停止 1、安装 1)为项目新建一个目录(比如:目录命名为learning_log) 2)在终端中切换到这个目录 3)执行命令:python -m venv ll_env,即可创建一个名为ll…

抖音开放平台的订单类API接口调用测试指南(内含详细步骤)

一、什么是抖音开放平台 抖音开放平台基于抖音母体,提供抖音服务基础设施和创新行业解决方案的平台。同时满足各类各类机构、创作者及服务商对于内容获取、分享的个性化需求,我们诚邀各个行业、不同阶段的合作伙伴与我们一起,共建内容良性生…

【数据结构】布隆过滤器

SueWakeup 个人主页:SueWakeup 系列专栏:学习技术栈 个性签名:保留赤子之心也许是种幸运吧 本文封面由 凯楠📸 友情提供 目录 本栏传送门 前言 1. 什么是布隆过滤器? 2. 布隆过滤器的原理 2.2 判断元素存在原理…

用虚拟机安装FydeOS,体验国内版ChromeOS首选!

前言 前段时间小白写了在实体机上安装FydeOS系统,发现有很多小伙伴在后台获取了FydeOS的镜像。 国内版ChromeOS?让旧机器焕发第二春的FydeOS安装教程 也有一些小伙伴看到是安装在实体机上的教程,所以就直接放弃了。其实FydeOS也可以用VM…

面试笔记——MySQL(事务:事务特性、并发事务、事务隔离、Redo Log与Undo Log、MVCC)

事务 概念与特性 事务(Transaction)指的是一组数据库操作,这些操作要么全部成功执行,要么全部不执行,保证了数据库的一致性和完整性,它使得数据库操作可以按照逻辑上的单元进行组织和执行,提高…

中等职业学校大数据课程建设方案

大数据产业是以数据及数据所蕴含的信息价值为核心生产要素,通过数据技术、数据产品、数据服务等形式,使数据与信息价值在各行业经济活动中得到充分释放的赋能型产业。 大数据产业定义一般分为核心业态、关联业态、衍生业态三大业态。 一、专…

Nginx实现原理全解析:构建高效Web服务器的关键

1、Nginx是什么 Nginx(engine X)是一个开源的轻量级的HTTP服务器,能够提供高性能的HTTP和反向代理服务。与传统的Apache服务器相比,在性能上Nginx占用系统资源更小、支持高并发,访问效率更高;在功能上&…

Doris实战——工商信息查询平台的湖仓一体建设

目录 前言 一、架构1.0:传统Lambda架构 二、OLAP引擎调研 三、架构2.0:数据服务层All in Apache Doris 四、架构 3.0:基于Doris Multi-Catalog的湖仓一体架构 五、实践经验 5.1 引入Merge-on-Write,百亿级单表查询提速近三…

谷歌DeepMind推出3D游戏AI代理SIMA,实现自然语言操控游戏新纪元

近日,谷歌DeepMind研究团队推出了一款名为SIMA的创新AI代理,专为3D游戏环境设计。这款代理独树一帜,无需访问游戏源代码或依赖定制API,仅通过输入图像和简单的自然语言文本指令,便能实现与人类玩家相当的游戏操作。 AI…

LangChain教程 | langchain 文件加载器使用教程 | Document Loaders全集

提示: 想要了解更多有关内置文档加载器与第三方工具集成的文档,甚至包括了:哔哩哔哩网站加载器、区块链加载器、汇编音频文本、Datadog日志加载器等。 本文主要收集与讲解日常使用的加载器,足够咱们平时开发人工智能的工作使用&am…

【前端性能】前端性能指标和测量方法总结

文章目录 前端性能指标和测量方法总结重要指标名词概念指标测量方法performance APIChrome PerformanceChrome Lighthouseweb-vitals 前端性能指标和测量方法总结 重要指标名词概念 图源 https://dev.to/xnimorz/hitchhiker-s-guide-to-frontend-performance-optimization-460…

计算机+任何行业都等于王炸!

最近笔者刷到一则消息,一位测试员在某乎上分享,从月薪5K到如今的20K,他总共跳了10次槽,其中还经历过两次劳动申诉,拿到了大几万的赔偿,被同事们称为“职场碰瓷人”。 虽说这种依靠跳槽式的挣钱法相当奇葩&a…

Java微服务分布式事务框架seata的TCC模式

🌹作者主页:青花锁 🌹简介:Java领域优质创作者🏆、Java微服务架构公号作者😄 🌹简历模板、学习资料、面试题库、技术互助 🌹文末获取联系方式 📝 往期热门专栏回顾 专栏…

鸿蒙ArkTS实战开发-Native XComponent组件的使用

介绍 本篇Codelab主要介绍如何使用XComponent组件调用NAPI来创建EGL/GLES环境,实现在主页面绘制一个正方形,并可以改变正方形的颜色。本篇CodeLab使用Native C模板创建。 如图所示,点击绘制矩形按钮,XComponent组件绘制区域中渲…

Sketch软件:重塑UI/UX设计流程的革命性工具

Sketch是一款在Mac操作系统上运行的矢量图形设计软件,其功能特色丰富多样,深受设计师们的喜爱。以下是Sketch软件的主要功能特色介绍: 专业矢量图形设计:Sketch为UI设计、移动应用设计和Web设计等领域提供了强大的支持。它支持线条…