标签：定义 登录 美食 --- 详情页 菜品 请求 数据 页面

思路:

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

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

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

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

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

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

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

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

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

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

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

代码展示

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

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

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

收藏:

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

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

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

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

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

向后端请求评论的内容

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

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。