瑞吉外卖之移动端菜品数据的展示

瑞吉外卖之移动端菜品数据的展示

• 界面分析

界面分析

上篇我们主要完成了了瑞吉外卖移动端界面登录的功能。完成界面登录自然要进入主界面。

我们和前面的登录界面进行衔接上。

在这里插入图片描述

于是我们跳转到这个界面，也就是我们的移动端的点餐的主界面，大体的话，就是这样的一个界面。

在这里插入图片描述

我们所需要做的就是具体的展示一些菜品。我们可以先去看前端

在这里插入图片描述

可以看到这里其实就是一个自动挂载的方法，在进入这个界面的时候然后这个方法就会自动执行。我们可以看到里面一共有两个方法，，然后后面就是吉布提的获取数据的一些操作。 我们点进去去看这两个方法是在干什么。

首先这里是获取菜品的分类，我们之前已经实现过了。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

这两个方法也是写在js里面，一个是获取菜品的数据，一个是获取具体的购物车数据。购物车我们还没有开发，没法返回数据，所以后面的数据分类展示也没有办法执行。 如果想要展示的话，其实可以先将里面购物车请求的api去掉，然后可以展示到菜皮的数据。

这是初始化加载的数据，也就是说在进入index.html 的时候就会自动发送这个请求，加载到数据。然后再前端进行了一个装填。

在这里插入图片描述

在这里插入图片描述

这里就是获取分类的第一个分类，这个，所以从这里看，其实就是获取默认的分类中的第一个分类。

其实这里获取到了分类的列表，填充到了左侧边栏

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

为了验证这个观点判断，害特意去控制台输出了这个获取的id。

在这里插入图片描述

所以前其实对照这个id，可以去数据中去查找这个id，在分类表中去查找这个这个id对应的分类。 所以其实首先会先展示到菜品的分类。是川菜

在这里插入图片描述

那么将川菜分类获取出来一定是位了查找川菜分类下的具体的菜品。 这里进行了对分类类型的判断，这里其实就可以判断出来就是type =1，那么就是属于菜品的分类，于是去调用查找菜品分类下面对应的数据的具体的方法。

在这里插入图片描述

然后下面这里就是具体的方法对应的获取数据的操作。

在这里插入图片描述

在这里首先进行了一个判空的操作，如果传入的categoryId为null的话，那么就不会去执行相应的方法。反之就会继续调用获取具体的菜品分类下面的具体的数据。将categoryId传入，然后传入status为1,意思就是处于售卖状态下的。 这个js我们之前写过，所以这里复用到了这个方法。

在这里插入图片描述

然后其实前端就是这里对列表数据进行遍历然后进行了一个展示，这里还绑定了点击的按钮，当点击以后又可以传入数据。

在这里插入图片描述

在这里插入图片描述

当我们点击到对应的分类的时候，就会对应到这个方法，然后就还是按照这里去获取对应的分类数据。就是这样的逻辑。。这里就是菜品展示的一个整体逻辑。