VUE项目分享——电商中的评论
前言:
这篇文章也是写完项目之后,深有体会。当时写是真的不会,主要是没有思路,查了好多资料虽然没有直接说但是上面的方法给了我好多思路。项目场景:
通过点击的电商的详情通过路由传参的方式将商品的id获取出来做全局保存,跳转到评论页面后有三个方面需要渲染。第一个方面,是先要从后端获取到这个商品的全部评论进行渲染。
第二个方面就是用户点击提问或发表新评论,这时点击发表有两个判断。
①是用户是否输入的判断
②用户输入完之后发表时要进行是否登录判断,然后进行渲染。
第三个方面是要进行回复评论,有用户回复和发布商品者的回复,然后进行渲染展示在页面上
问题描述:
整体的评论页面完善是需要与后端至少有四个接口连接- 第一个问题是怎样获取到商品id然后进行全局保存。
- 第二个问题是发送评论时怎样发送到对应商品的评论中,并且显示是由哪个用户发表的
- 第三个问题是回复其他用户时生成二级评论
解决方案:
1. 怎样获取到商品id然后进行全局保存。
我是通过Session Storage来进行全局保存的。
点击后保存商品id,其主要代码:
created(){
axios({
//这里提供的是本地模拟数据
url:"http://localhost:3000/details",
// url: "http://fjsni3.natappfree.cc/allcomment/getAllComment",
method: "get",
params: {
id: this.$route.query.id,
},
}).then((res) => {
this.message = res.data;
sessionStorage.setItem("id",this.message[0].id)
});
}
获取商品id时,主要代码,
//这是点击发送时绑定的函数postcomment()
postcomment(){
if(this.postcontent.trim().length <= 0){
Toast('您要评论的内容不能为空');
return;
}
this.id = sessionStorage.getItem("id");
var url = "http://fjsni3.natappfree.cc/comment/saveComment/" + this.id;
//console.log(url)
},
这时我们就可以向服务器发送请求,进行添加评论
2. 发送评论时怎样发送到对应商品的评论中,并且显示是由哪个用户发表的
因为我们是多人协作项目,我主要负责评论这一块,所以发表评论到后端时是已经知道哪位用户发表了,因为再发送之前要判断是否登录,这里用到了独享路由守卫还有cookie进行保存用户id
// src/router/index.js
{
path: '/user',
component: User,
//路由独享守卫
beforeEnter: (to,from,next)=>{ //路由独享守卫 前置
console.log('路由独享守卫');
if(Math.random()<.5){
next()
}else{
next('/login')
}
}
}
这里通过获取cookie中用户的id和发送ajax请求传入到后端数据库中进行添加评论
注释:get请求是向数据库中获取数据,而post请求是向数据库中添加数据
data(){
return{
postcontent : '' , //用来自动获取用户填写的评论内容
list:[] //新建一个空数组接受后端添加的评论
}
},
postcomment(){
//2.0发送ajax请求
//如果Web服务器无法处理编码为application/json的请求,你可以启用emulateJSON选项。启用该选项后,请求会以application/x-www-form-urlencoded作为Content-Type,就像普通的HTML表单一样。
this.$http.post(url,{content:this.postcontent},{emulateJSON:true}).then(function(res){
Toast(res.body.message);
}
//3.0将最新的数据追加到评论列表的最顶部
this.list = [{
"user_name": "匿名用户",
"add_time": new Date(),
"content": this.postcontent
}].concat(this.list);
// 3.0 将文本框中的评论内容清空
this.postcontent = '';
}
3. 回复其他用户时生成二级评论
思路:当第一步获取全部评论时每个评论都会带有用户的id这时我们点击回复时就会获取当前用户的id,将他呈现出来
总结:
上述就是我具体描述,大多数布局就是用vant组件.写的不好希望能指点🙏