瑞吉外卖之移动端菜品数据的展示
瑞吉外卖之移动端菜品数据的展示
- 界面分析
界面分析
上篇我们主要完成了了瑞吉外卖移动端界面登录的功能。完成界面登录自然要进入主界面。
我们和前面的登录界面进行衔接上。
于是我们跳转到这个界面，也就是我们的移动端的点餐的主界面，大体的话，就是这样的一个界面。
我们所需要做的就是具体的展示一些菜品。我们可以先去看前端
可以看到这里其实就是一个自动挂载的方法，在进入这个界面的时候然后这个方法就会自动执行。我们可以看到里面一共有两个方法，，然后后面就是吉布提的获取数据的一些操作。
我们点进去去看这两个方法是在干什么。
首先这里是获取菜品的分类，我们之前已经实现过了。
这两个方法也是写在js里面，一个是获取菜品的数据，一个是获取具体的购物车数据。购物车我们还没有开发，没法返回数据，所以后面的数据分类展示也没有办法执行。
如果想要展示的话，其实可以先将里面购物车请求的api去掉，然后可以展示到菜皮的数据。
这是初始化加载的数据，也就是说在进入index.html 的时候就会自动发送这个请求，加载到数据。然后再前端进行了一个装填。
这里就是获取分类的第一个分类，这个，所以从这里看，其实就是获取默认的分类中的第一个分类。
其实这里获取到了分类的列表，填充到了左侧边栏
为了验证这个观点判断，害特意去控制台输出了这个获取的id。
所以前其实对照这个id，可以去数据中去查找这个id，在分类表中去查找这个这个id对应的分类。
所以其实首先会先展示到菜品的分类。是川菜
那么将川菜分类获取出来一定是位了查找川菜分类下的具体的菜品。
这里进行了对分类类型的判断，这里其实就可以判断出来就是type =1，那么就是属于菜品的分类，于是去调用查找菜品分类下面对应的数据的具体的方法。
然后下面这里就是具体的方法对应的获取数据的操作。
在这里首先进行了一个判空的操作，如果传入的categoryId为null的话，那么就不会去执行相应的方法。反之就会继续调用获取具体的菜品分类下面的具体的数据。将categoryId传入，然后传入status为1,意思就是处于售卖状态下的。
这个js我们之前写过，所以这里复用到了这个方法。
然后其实前端就是这里对列表数据进行遍历然后进行了一个展示，这里还绑定了点击的按钮，当点击以后又可以传入数据。
当我们点击到对应的分类的时候，就会对应到这个方法，然后就还是按照这里去获取对应的分类数据。就是这样的逻辑。。这里就是菜品展示的一个整体逻辑。
瑞吉外卖之移动端菜品数据的展示相关推荐
- 黑马瑞吉外卖之移动端验证码登录使用qq邮箱
黑马瑞吉外卖之移动端验证码登录 说明 用qq邮箱进行验证码发送 hi,我是兰舟千帆,本次更文还是将瑞吉外卖的笔记完善一下.每一篇都写得很认真哦,希望需要的人可以得到帮助,谢谢你们的阅读. 说明 pc端 ...
- 瑞吉外卖项目：新增菜品与菜品分页查询
目录 一. 新增菜品 1.1 需求分析 1.2 数据模型 1.3 代码实现 二. 菜品分页查询 2.1 需求分析 2.2 代码编写 一. 新增菜品 1.1 需求分析 后台系统可以管理菜品信息,通过新增 ...
- 瑞吉外卖（3）—菜品分类管理
目录 一.公共字段填充 1.1 问题分析 1.2 代码实现 二.新增分类 2.1 需求分析 2.2 数据模型 2.3 代码开发 三.菜品类的分页 3.1 需求分析 3.2 代码开发 四.删除分类 4. ...
- 瑞吉外卖项目移动端再来一单功能
我的前端页面是拷贝了资料中day6的前端页面 这里"/order/again"浏览器传来的数据是orders表中的id数据 注意:数据库中order_detail表中的order_ ...
- 黑马瑞吉外卖项目开发笔记
目录 软件开发整体介绍 开发流程 角色分工 软件环境 瑞吉外卖项目介绍 项目介绍 产品原型展示 技术选型 功能架构 角色 开发环境搭建 数据库环境搭建 Maven环境搭建 1.直接创建maven项目( ...
- 瑞吉外卖-移动端菜品展示功能，购物车添加菜品及修改等功能，用户下单功能及历史订单派送功能
整理记录下学习整个瑞吉外卖项目,详细代码可在我的Gitee仓库瑞吉外卖实战克隆下载学习使用! 12.菜品展示 12.1 需求分析 12.2 更改前台页面使其正常显示 由于购物车功能还未进行开发,所以修 ...
- 猿创征文｜瑞吉外卖——管理端_菜品管理_1
个人名片: 博主:酒徒ᝰ. 专栏:瑞吉外卖 个人简介:沉醉在酒中,借着一股酒劲,去拼搏一个未来. 本篇励志:真正的程序员不看参考手册,新手和胆小鬼才会看. 本项目基于B站黑马程序员Java项目实战&l ...
- SB_5_瑞吉外卖_4_文件上传下载_菜品新增_菜品分页查询_菜品修改
瑞吉外卖-Day04 课程内容 文件上传下载 菜品新增 菜品分页查询 菜品修改 1. 文件上传下载 1.1 上传介绍 1.1.1 概述 文件上传,也称为upload,是指将本地图片.视频.音频等文件上 ...
- 黑马瑞吉外卖之菜品的启售停售
黑马瑞吉外卖值菜品的启售卖.和停售 这一部分功能是课程没有去完成的,但是其实是比较简单的,我们需要去完成菜品的启售和停售. 执行之前的项目,我们要完成的就是这里的这个售卖的状态的更改. 我们先去看一下 ...
最新文章
- Python--数据存储：pickle模块的使用讲解
- 和ts一般怎么玩_KPL：一诺采访引热议，quot;裴擒虎是个野王都会quot;，暖阳怎么办?...
- CTFshow 爆破 web23
- 让你觉得破坏了封装性的扩展方法
- java gc回收区域_java内存区域以及GC回收
- 百度启用Baidu.co.jp域名，有利于其在日本推广
- 3层vni vxlan_什么是VXLAN 三层网络搭建二层网络的设计方案
- 吴恩达机器学习 11.聚类
- HTTP-meta标签
- FTPSFTP的基本命令
- SQLServer安装Northwind数据库
- 计算机音乐对应的数字,音乐和数字之间的关系
- 01-Springboot优点缺点
- 在同一个数据集中同时更新多表..............
- html css图标怎么跟文字并排,科技常识：css图标与文字对齐的两种实现方法
- 基于Verilog HDL的数字时钟
- 图像修复 python_50.图像修复
- mysql表analyze,ANALYZE TABLE语句如何帮助维护MySQL表？
- apmserv mysql,APMServ MySQL 1577错误解决方法
- 盘点那些多倍积分的银行卡