vue项目美食杰 -- 菜品详情

          时间过的挺快的，眨眼间，美食杰项目迎来了最后一个大的板块了，此块功能完成之后，整个项目可以算是完结了，当然除了一些边边角角的细节和一些未发现的小问题，正题步入：今天呢，整个板块整体称之为‘菜品详情页’，具体如下：

 大致功能还是比较简单的，所以写起来也是行云流水，

首先菜品详情页自然是菜品的详细信息，所以从菜品在的模块跳转，我这里举例的是轮播图中的跳转，当然了跳转的时候菜品的id必不可少：

然后根据路由中的提供的菜品id结合后端接口，拿到菜品数据：

watch:{$route:{handler(){const {menuId} = this.$route.queryif(this.$store.state.userInfo._id == menuId){this.isMyslfe = true}else{this.isMyslfe = false}menuInfo({menuId}).then(({data})=>{this.menuDetail = data.info})             },immediate:true}},

使用Element-ui组件来渲染请求到的数据：

在这里需要注意的是根据id来判断是否是自己的菜品，如果是就不用显示收藏按钮，点击收藏时需要切换状态和颜色，以此来完成收藏与否：

 methods:{async collectionToggle(){const data = await toggleCollection({menuId:this.info.menuId})this.info.isCollection = data.data.isCollection}}

后面部分根据请求来的数据渲染页面即可，没有需要操作的功能：

最后是评论部分，根据接口请求到的数据，首先渲染评论：

{{item.userInfo.name}}
{{item.commentText}}
{{item.updateAt}}

 const {menuId} = this.$route.querygetComments({menuId}).then(({data})=>{this.comments = data.comments})

在发表评论时，需要注意判断登陆状态，未登录则需要登陆，且不能发表评论：

请先登录后，再评论登录提交

判断登陆状态，从vuex拿到登陆状态即可：

 isLogin(){console.log(this.$store.getters.isLogin);return this.$store.getters.isLogin}

此时点击发表评论，拿到输入框中的内容，通过接口向后端发送数据,页面自动更新，页面完成。。

     整个项目已经大致完结，在整个过程中遇到了很多困难，但都一一克服。

也在过程中学习到了很多东西，对技术的提升有了很大的帮助，。。

祝生活安好

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！