前端学习（2458）：评论模块

# 七、评论模块## 评论列表### 创建组件并配置路由1、创建 `src/views/comment/index.vue` 并写入```html
<template><div>评论管理</div>
</template><script>export default {// 组件的 name 最好起名为两个单词，尽量少用一个单词// 为什么？为了避免和原生的 html 标签冲突name: "CommentIndex",components: {},props: {},data() {return {};},computed: {},watch: {},created() {},methods: {}};
</script><style scoped></style>
```2、配置路由表![image-20191118164202742](assets/image-20191118164202742.png)3、配置侧边栏的导航路径![image-20191118164238617](assets/image-20191118164238617.png)最后在浏览器中访问测试。### 布局```html
<template><div><el-card class="box-card"><div slot="header" class="clearfix"><span>评论管理</span></div><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table></el-card></div>
</template><script>export default {// 组件的 name 最好起名为两个单词，尽量少用一个单词// 为什么？为了避免和原生的 html 标签冲突name: "CommentIndex",components: {},props: {},data() {return {tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄"},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄"},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄"},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄"}]};},computed: {},watch: {},created() {},methods: {}};
</script><style scoped></style>
```### 展示文章评论列表```html
<template><div><el-card class="box-card"><div slot="header" class="clearfix"><span>评论管理</span></div><el-table :data="articles" style="width: 100%"><el-table-column prop="title" label="标题" width="180"></el-table-column><el-table-column prop="total_comment_count" label="总评论数"></el-table-column><el-table-column prop="fans_comment_count" label="粉丝评论数据"></el-table-column><el-table-column label="评论状态" width="180"><template slot-scope="scope"><!-- 开关组件绑定的数据是一个布尔值，它会根据布尔值的真假来决定开关状态 --><el-switchv-model="scope.row.comment_status"active-color="#13ce66"inactive-color="#ff4949"></el-switch></template></el-table-column><el-table-column label="操作"><template><el-button type="primary">修改</el-button></template></el-table-column></el-table></el-card></div>
</template><script>export default {// 组件的 name 最好起名为两个单词，尽量少用一个单词// 为什么？为了避免和原生的 html 标签冲突name: 'CommentIndex',components: {},props: {},data () {return {+      articles: [] // 文章列表（文章的评论数据字段）}},computed: {},watch: {},created () {+    this.loadArticles()},methods: {+++    loadArticles () {this.$axios({method: 'GET',url: '/articles',params: {response_type: 'comment'// page: xxx // 页码}}).then(res => {this.articles = res.data.data.results}).catch(err => {console.log(err, '获取数据失败')})}}}
</script><style scoped></style>
```### 修改评论状态1、给开关组件注册 `change` 事件![image-20191118164548717](assets/image-20191118164548717.png)2、在事件处理函数请求修改评论状态```js
onStatusChange (article) {this.$axios({method: 'PUT',url: '/comments/status',params: {article_id: article.id.toString()},data: {// 开关组件双向绑定了 article.comment_status// 所以获取 article.comment_status 也就是在获取开关组件的启用状态allow_comment: article.comment_status}}).then(res => {console.log(res)this.$message({type: 'success',message: `${article.comment_status ? '启用' : '关闭'}成功`})}).catch(err => {console.log(err)this.$message.error('操作失败')})
}
```### 数据分页## 评论管理> 测试文章：1196354762019176448### 创建组件并配置路由1、创建 `src/views/comment-detail/index.vue` 并写入```html
<template><div>评论列表</div>
</template><script>export default {name: "CommentDetail",components: {},props: {},data() {return {};},computed: {},watch: {},created() {},methods: {}};
</script><style scoped></style>
```2、配置路由![image-20191119101923708](assets/image-20191119101923708.png)3、在评论列表中点击修改跳转到评论详情页![image-20191119102408641](assets/image-20191119102408641.png)### 布局### 展示评论列表1、在 data 中添加 `comments` 用于存储评论列表```js
data () {return {...comments: []}
}
```2、在生命周期 `created` 中请求获取评论数据![image-20191119164810415](assets/image-20191119164810415.png)3、模板绑定```html
<template><div><el-card class="box-card"><div slot="header" class="clearfix"><span>评论详情列表</span><el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button></div><el-table :data="comments" style="width: 100%"><el-table-column label="头像" width="180"><template slot-scope="scope"><img width="50" :src="scope.row.aut_photo" /></template></el-table-column><el-table-column prop="content" label="评论内容" width="180"></el-table-column><el-table-column prop="name" label="点赞" width="180"><template slot-scope="scope">{{ scope.row.is_liking === 1 ? '已赞' : '没有赞' }}</template></el-table-column><el-table-column prop="like_count" label="点赞数量" width="180"></el-table-column><el-table-column prop="pubdate" label="评论日期" width="180"><template slot-scope="scope"><!--不传参：{{ scope.row.pubdate | dateFormat }}传参：{{ scope.row.pubdate | dateFormat(参数) }}-->{{ scope.row.pubdate | dateFormat('YYYY-MM-DD') }}</template></el-table-column><el-table-column label="是否推荐" width="180"><template slot-scope="scope"><el-switchv-model="scope.row.is_top"active-color="#13ce66"inactive-color="#ff4949"@change="onTop(scope.row)"></el-switch></template></el-table-column><el-table-column prop="reply_count" label="回复数量" width="180"></el-table-column></el-table></el-card></div>
</template>
```### 评论推荐1、给推荐按钮注册点击事件![image-20191119164601086](assets/image-20191119164601086.png)2、在处理函数中```js
onTop (comment) {this.$axios({method: 'PUT',url: `/comments/${comment.com_id}/sticky`,data: {// comment.is_top 双向绑定给了开关按钮// 所以获取 comment.is_top 就是在获取开关的状态sticky: comment.is_top}}).then(res => {this.$message('操作成功')}).catch(err => {this.$message.error('操作失败', err)})
}
```

前端学习（2458）：评论模块相关推荐

前端学习之CSS模块
目录 CSS基础语法 CSS基本样式基本样式内联样式与内部样式外部样式及两种写法 CSS中的颜色表示法 CSS背景样式 CSS边框样式 CSS文字样式字体大小粗细样式 CSS段落样式 CSS复 ...
前端学习总结，经验分享，项目经验分享过程
前言来,和魔王哪吒总结一下,分享一下自己对前端学习总结,经验分享,以及写过的项目经验分享过程. 如果觉得还不错的话,浏览的过程中,需要您: 点赞,分享,评论有钱的捧个钱场,没钱的捧个人场技术实践 ...
“计算机之子”winter：我的前端学习路线与方法
你好,我是winter.今天我们一起来聊聊前端的学习路线与方法. 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更 ...
Linux内核学习--内存管理模块
Linux内核学习--内存管理模块首先,Linux内核主要由五个部分组成,他们分别是:进程调度模块.内存管理模块.文件系统模块.进程间通信模块和网络接口模块. 本部分所讲的内存是内存管理模块,其主要 ...
hbuilder前端需要的插件_最新web前端学习路线
随着互联网的深入发展,前端开发工程师已成为市场上极具竞争力的人才.许多学生,包括以前的UI,java,或完全零基础,想学习的前端.下面的思维导图是在互联网上广泛传播的前端学习地图.许多初学者说,当他们 ...
前端学习路线_前端学习路线图
2020年全新前端学习路线图分享给大家! 学习是一个循序渐进的过程,是一件非常难得坚持的事情.如果真的想学习前端开发,一定要下决心! 我这里分享给你的前端学习路线图,希望对你有帮助,以下为2020年更 ...
react实战项目_前端学习路线图--从网页设计到项目开发
前端学习路线是螺旋上升的,需要耗费的时间和精力不比其他编程的少,由于其稳健性的特点,使其成为大多数企业开发的刚需编程语言.在网上看到有很多的前端学习路线图,但大部分的前端学习路线图是很零碎的,没有系统 ...
黑马程序员：从零基础到精通的前端学习路线
黑马程序员:从零基础到精通的前端学习路线随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习前端.下图是网上 ...
猛增 110K Star！年增长数最多的 10 大顶级前端学习资源项目！
https://risingstars.js.org/2019/en 大家好,我是你们的猫哥,那个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 关于猫哥,大家可以看看我的年终总结前端工程师的 2020 年 ...

前端学习（2458）：评论模块

前端学习（2458）：评论模块相关推荐

最新文章

热门文章