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

32次阅读

共计 1380 个字符,预计需要花费 4 分钟才能阅读完成。

发表评论
把文本框做双向数据绑定
<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. 制作 底部的图片列表

正文完
 0