VUE项目分享—电商中的评论

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组件.写的不好希望能指点🙏