乐趣区

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

jiezi

发表评论
把文本框做双向数据绑定
<textarea placeholder=” 请输出内容 ” maxlength=”120″ v-model=”msg”></textarea>
data 中 msg:“”// 评论 输出的内容

为发表按钮绑定一个事件
<mt-button type=”primary” size=”large” @click=”postComment”> 发表评论 </mt-button>

校验评论内容是否为空，如果为空，则 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 = "";
      }
    });
}
  }

革新图片剖析 按钮为 路由的链接并显示对应的组件页面

<router-link to="/home/photolist">
<img src="../../images/menu2.png" alt="">
<div class="mui-media-body"> 图片分享 </div>
</router-link>

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

绘制 图片列表 组件页面构造并丑化款式

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