共计 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}
绘制 图片列表 组件页面构造并丑化款式
- 制作 顶部的滑动条
- 制作 底部的图片列表
正文完