美食杰---详情页

思路:

详情页总共可分为三部分,头部,主体,以及评论 ps:还有一个主页面

头部包含图片,菜名,用户信息,收藏
头部较为简单,需把请求到的数据渲染到页面中
在主页面定义一个空对象,用于存放请求到的所有数据,
还需在里面再定义一个对象,因为请求的到的数据嵌套的层数较多,把数据传递给子组件时,会渲染不上页面,所以需要再定义一个对象
这个空对象也有几个数组和对象,因为异步请求数据时服务器响应过慢,浏览器会报找不到这几个数据,但页面中不会受到影响,为了不让浏览器报错,所以我们可以定义几个空的对象存放数据

可以定义一个判断,如果没有登录,就不能收藏菜品,需要登录之后才可收藏,登录完成跳转到主页面
从后端返回的数据同步到组件内

isOnwer是用于判断当前用户是本人的菜品还是别人的菜品,如果是自己的,状态为true,收藏会隐藏掉,如果是false,显示收藏,通过比对路由中的menuId和当前页的menuId来实现

主体也可分为三部分菜品用料,菜品步骤和菜品故事

主体没有什么难点,只需把数据渲染到页面中即可

评论也为上下两部分,上边为先判断用户是否登录,如果没登陆跳转到登录页,若登录过隐藏掉,登陆成功即可输入评论

定义空数据存放从后端请求到的数据,
定义一个空字符串存储文本中输入的内容

从vuex中拿取判断是否登录的数据

向后端请求评论的内容
点击提交会把内容,头像,作者名字等数据显示在第二部分

设置一个点击事件,点击提交拿取从父组件传入的info
同时在第二部分插入一条数据,
清空文本中的数据

代码展示

头部包含图片,菜名,用户信息,收藏
头部较为简单,需把请求到的数据渲染到页面中
在主页面定义一个空对象,用于存放请求到的所有数据,
还需在里面再定义一个对象,因为请求的到的数据嵌套的层数较多,把数据传递给子组件时,会渲染不上页面,所以需要再定义一个对象
这个空对象也有几个数组和对象,因为异步请求数据时服务器响应过慢,浏览器会报找不到这几个数据,但页面中不会受到影响,为了不让浏览器报错,所以我们可以定义几个空的对象存放数据

可以定义一个判断,如果没有登录,就不能收藏菜品,需要登录之后才可收藏,登录完成跳转到主页面
从后端返回的数据同步到组件内

isOnwer是用于判断当前用户是本人的菜品还是别人的菜品,如果是自己的,状态为true,收藏会隐藏掉,如果是false,显示收藏,通过比对路由中的menuId和当前页的menuId来实现

收藏:

主体也可分为三部分菜品用料,菜品步骤和菜品故事

主体没有什么难点,只需把数据渲染到页面中即可

评论也为上下两部分,上边为先判断用户是否登录,如果没登陆跳转到登录页,若登录过隐藏掉,登陆成功即可输入评论

定义空数据存放从后端请求到的数据,
定义一个空字符串存储文本中输入的内容

从vuex中拿取判断是否登录的数据

向后端请求评论的内容

点击提交会把内容,头像,作者名字等数据显示在第二部分

设置一个点击事件,点击提交拿取从父组件传入的info
同时在第二部分插入一条数据,
清空文本中的数据

标签：定义,登录,美食,---,详情页,菜品,请求,数据,页面
来源： https://blog.csdn.net/Sco_114/article/details/120731399