瑞吉外卖之移动端菜品数据的展示
瑞吉外卖之移动端菜品数据的展示
界面分析
上篇我们主要完成了了瑞吉外卖移动端界面登录的功能。完成界面登录自然要进入主界面。
我们和前面的登录界面进行衔接上。
于是我们跳转到这个界面,也就是我们的移动端的点餐的主界面,大体的话,就是这样的一个界面。
我们所需要做的就是具体的展示一些菜品。我们可以先去看前端
可以看到这里其实就是一个自动挂载的方法,在进入这个界面的时候然后这个方法就会自动执行。我们可以看到里面一共有两个方法,,然后后面就是吉布提的获取数据的一些操作。 我们点进去去看这两个方法是在干什么。
首先这里是获取菜品的分类,我们之前已经实现过了。
这两个方法也是写在js里面,一个是获取菜品的数据,一个是获取具体的购物车数据。购物车我们还没有开发,没法返回数据,所以后面的数据分类展示也没有办法执行。 如果想要展示的话,其实可以先将里面购物车请求的api去掉,然后可以展示到菜皮的数据。
这是初始化加载的数据,也就是说在进入index.html 的时候就会自动发送这个请求,加载到数据。然后再前端进行了一个装填。
这里就是获取分类的第一个分类,这个,所以从这里看,其实就是获取默认的分类中的第一个分类。
其实这里获取到了分类的列表,填充到了左侧边栏
为了验证这个观点判断,害特意去控制台输出了这个获取的id。
所以前其实对照这个id,可以去数据中去查找这个id,在分类表中去查找这个这个id对应的分类。 所以其实首先会先展示到菜品的分类。是川菜
那么将川菜分类获取出来一定是位了查找川菜分类下的具体的菜品。 这里进行了对分类类型的判断,这里其实就可以判断出来就是type =1,那么就是属于菜品的分类,于是去调用查找菜品分类下面对应的数据的具体的方法。
然后下面这里就是具体的方法对应的获取数据的操作。
在这里首先进行了一个判空的操作,如果传入的categoryId为null的话,那么就不会去执行相应的方法。反之就会继续调用获取具体的菜品分类下面的具体的数据。将categoryId传入,然后传入status为1,意思就是处于售卖状态下的。 这个js我们之前写过,所以这里复用到了这个方法。
然后其实前端就是这里对列表数据进行遍历然后进行了一个展示,这里还绑定了点击的按钮,当点击以后又可以传入数据。
当我们点击到对应的分类的时候,就会对应到这个方法,然后就还是按照这里去获取对应的分类数据。就是这样的逻辑。。这里就是菜品展示的一个整体逻辑。
相关文章
- 数据透视表上线!如何在纯前端实现这个强大的数据分析功能?
- 微软ACL 2022:永远不要低估你的训练数据!
- 【信管1.13】新技术(二)大数据与移动互联网
- 【重磅推荐】2015年移动应用质量大数据报告
- 手动删除 Matomo/Piwik 历史日志(MySQL删除大量数据)
- 大厂热数据探测开源项目不能错过!
- 大数据Kudu(六):Kudu Java Api操作
- 手把手教你玩转 Excel 数据透视表
- SAP MM MR21修改过的移动平均价才能出现在该物料主数据修改历史
- 【RecyclerView】 十三、RecyclerView 数据更新 ( 移动数据 | 数据改变 )
- Spark项目之电商用户行为分析大数据平台之(四)离线数据采集详解大数据
- SAP MM MIRO的时候,发票价格与物料主数据的价格(移动平均价)有差异的处理详解编程语言
- PCL读取PCD文件的数据详解编程语言
- Linux硬盘分区技巧:快速移动数据(linux移动硬盘分区)
- 掌握Linux文件系统格式化技巧,轻松管理数据存储(linux格式化文件系统)
- Redis工具类——高效管理数据的必备利器(redis的工具类)
- 在云中安全移动数据的最佳实践
- 库Oracle移动数据库:追求极致的灵活性(oracle 移动数据)
- MySQL密码MD5加密:提升数据安全性(mysql密码md5加密)
- MySQL查询:获取最前面的100条记录(mysql查询前100条数据)
- 从Redis中获取数据的方法(怎么从redis中取数据)
- MySQL数据迁移技巧快捷移动两张表中的数据(mysql两表数据迁移)
- 移动应用与Oracle连接实现数据同步(apps oracle)
- Oracle DMT 数据移动的强大利器(oracle dmt)
- 央行Q2支付数据:移动支付快速增长,POS机数不升反降
- DB2中的数据移动(一)
- 两个table之间相互移动数据
- python爬取网站数据保存使用的方法