分享开发商城系统系统过程中遇到的问题处理

发表评论
把文本框做双向数据绑定

data中 msg: “” // 评论 输入的内容

为发表按钮绑定一个事件
发表评论

校验评论内容是否为空，如果为空，则Toast提示用户 评论内容不能为空
main.js中Vue.http.options.root下面写

//使用ajax的post方式时，第三个参数一般都是一样的，所以每次都重写，还不如全局定义一下，就省略这个重复写的过程。
// 全局设置 post 时候表单数据格式组织形式   application/x-www-form-urlencoded
Vue.http.options.emulateJSON = true;

通过 vue-resource 发送一个请求，把评论内容提交给 服务器
当发表评论OK后，重新刷新列表，以查看最新的评论
如果调用 getComments 方法重新刷新评论列表的话，可能只能得到 最后一页的评论，前几页的评论获取不到
换一种思路： 当评论成功后，在客户端，手动拼接出一个 最新的评论对象，然后 调用 数组的 unshift 方法， 把最新的评论，追加到 data 中 comments 的开头；这样，就能 完美实现刷新评论列表的需求；
想要开发的商城系统开发系统项目咨询v:kjwenlc,希望能帮到您！

 postComment() {
  // 校验是否为空内容  trim() 方法去除字符串的头尾空格:
  if (this.msg.trim().length === 0) {
    return Toast("评论内容不能为空！");
  }

  // 发表评论
  // 参数1： 请求的URL地址
  // 参数2： 提交给服务器的数据对象 { content: this.msg }
  // 参数3： 定义提交时候，表单中数据的格式  { emulateJSON:true }
  this.$http
    .post("api/postcomment/" + this.$route.params.id, {
      content: this.msg.trim()
    })
    .then(function(result) {
      if (result.body.status === 0) {
        // 1. 拼接出一个评论对象
        var cmt = {
          user_name: "匿名用户",
          add_time: Date.now(),
          content: this.msg.trim()
        };
        this.comments.unshift(cmt);
        this.msg = "";
      }
    });
}
  }

改造图片分析 按钮为 路由的链接并显示对应的组件页面

图片分享

import PhotoInfo from './components/photos/PhotoInfo.vue'
{ path: '/home/photoinfo/:id', component: PhotoInfo }

绘制 图片列表 组件页面结构并美化样式

1. 制作 顶部的滑动条
2. 制作 底部的图片列表