前端学习（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)})
}
```

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/416567.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

转载：python引用DLL文件的方法

转载：python引用DLL文件的方法

python引用DLL文件的方法转载于:https://www.cnblogs.com/Regle/p/7003261.html
阅读更多...
前端学习（2460）：粉丝管理

前端学习（2460）：粉丝管理

# 九、粉丝管理## Web 图形开发介绍- MDN 参考链接&#xff1a;https://developer.mozilla.org/zh-CN/docs/Web/Guide/Graphics### 2D 图像&#xff1a;Canvas- [ECharts](https://echarts.apache.org/)### 2D 图像&#xff1a;SVG- [D3.js](https://d3js.org/)### 3D 图像&…
阅读更多...
前端学习（2461）：打包发布

前端学习（2461）：打包发布

# 十、打包发布## 构建打包在发布上线之前&#xff0c;我们需要执行构建打包&#xff0c;将 .less、.vue、.js 等相关资源进行编译打包&#xff0c;转换成浏览器可以直接识别运行的普通 css、js、html。bash # yarn run build 或者 yarn build npm run build VueCLI 会把打包结…
阅读更多...
网路爬虫 来源

网路爬虫 来源

网络爬虫&#xff08;又被称为网页蜘蛛&#xff0c;网络机器人&#xff0c;在FOAF社区中间&#xff0c;更经常的称为网页追逐者&#xff09;&#xff0c;是一种按照一定的规则&#xff0c;自动地抓取万维网信息的程序或者脚本。另外一些不常使用的名字还有蚂蚁、自动索引、模拟…
阅读更多...
前端学习（2462）：打包优化

前端学习（2462）：打包优化

# 十一、打包优化> 学习打包优化前需要了解 webpack。所谓的优化主要涉及到两方面&#xff1a;- 构建速度的优化 - 构建质量的优化大多数 Vue 项目是基于 VueCLI 搭建的&#xff0c;而 VueCLI 的底层建筑是 webpack。webpack 是现在主流的功能强大的模块化打包工具&#xff…
阅读更多...
火星探险问题

火星探险问题

此题oj上无spj&#xff0c;无法提交 【问题分析】 最大费用最大流问题。 【建模方法】 把网格中每个位置拆分成网络中两个节点<i.a>,<i.b>&#xff0c;建立附加源S汇T。 1、对于每个顶点i&#xff0c;j为i东边或南边相邻的一个节点&#xff0c;连接节点<i.b>…
阅读更多...
工作总结20：遮挡层

工作总结20：遮挡层

阅读更多...
对BOM的总结

对BOM的总结

参考&#xff1a;JavaScript半知半解 TG著 BOM对象 Window对象是客户端JavaScript程序的全局对象。 Window对象使得JavaScript与浏览器进行交互。 所有的JavaScript全局对象&#xff0c;函数以及变量均自动成为window对象的属性和方法。 Document对象也是window对象的成员。 Wi…
阅读更多...
SpringBoot增删改查接口实例

SpringBoot增删改查接口实例

前言 增删改查是后端最基本的技能。下面我就带领小伙伴们通过一个简单的示例来讲解SpringBoot的增删改查。Spring Boot框架层次从上至下可分为5层&#xff1a;分别为View层&#xff0c;Controller层&#xff0c;Service层&#xff0c;Mapper层&#xff0c;Model层 1. View层&a…
阅读更多...
前端学习（2459）：账户设置

前端学习（2459）：账户设置

# 八、账户设置## 创建页面组件并配置路由1、创建 src/views/account/index.vue 组件html <template><div><el-form ref"form" :model"form" label-width"80px"><el-form-item label"用户头像"><el-upload…
阅读更多...
C# 依据KeyEventArgs与组合键字符串相互转换

C# 依据KeyEventArgs与组合键字符串相互转换

/// 快捷键相关的类/// </summary>public static class HotKeyInfo{/// <summary>/// 依据KeyEventArgs生成组合键字符串/// </summary>/// <param name"e"></param>/// <returns></returns>public static string GetStri…
阅读更多...
lpc2000 filash utility 程序烧写工具_单片机烧录程序的次数

lpc2000 filash utility 程序烧写工具_单片机烧录程序的次数

单片机是可编程器件&#xff0c;开发者把程序写好、编译完之后&#xff0c;需要烧录到单片机中&#xff0c;单片机才能按照开发者的逻辑去执行。在这个烧录的过程中需要用到专用的烧录工具。比如51单片机的USB/TTL、STM单片机的STlink等。使用过单片机开发板的同学都清楚&#…
阅读更多...
工作总结21：阅读代码之axios

工作总结21：阅读代码之axios

/*基础接口请求地址*/ const apiBaseUrl "http://xxxxxxxx";/*创建instance实例*/ const service axios.create({baseURL: apiBaseUrl,timeout: 10000 }); 读懂该接口 这边是设置的基础url
阅读更多...
工作总结22：拦截器

工作总结22：拦截器

//设置拦截器 拦截 // request interceptor service.interceptors.request.use(config > {const token Vue.ls.get(ACCESS_TOKEN);// if (token) {// config.headers["X-Access-Token"] token; // 让每个请求携带自定义 token 请根据实际情况自行修改// }retu…
阅读更多...
ug建模文本怎么竖着_入门到成为UG编程高手，这些步骤你不得不了解

ug建模文本怎么竖着_入门到成为UG编程高手，这些步骤你不得不了解

入门到成为UG编程高手&#xff0c;这些步骤你不得不了解加工中心是数控设备的一种&#xff0c;日常的作业离不开数控加工&#xff0c;编程是要害。我们常见的编程软件有不少&#xff0c;mastercam、cimatron、ug、powermill、hypermill等等许多不同的软件&#xff0c;不同的编程…
阅读更多...
工作23:vue---封装request做数据请求

工作23:vue---封装request做数据请求

import axios from axios// 创建一个axios实例 const service axios.create({// headers: {// content-type: application/json;charsetUTF-8,// token: one // },baseURL: http://dianphp.fyz.com,withCredentials: true,timeout: 5000 })// 添加请求拦截器 service.inte…
阅读更多...
华为手机记事本导出_深夜浅谈怎样用一部手机做电影解说？

华为手机记事本导出_深夜浅谈怎样用一部手机做电影解说？

小编从兴趣而至&#xff0c;到开始做第一部电影解说已经过去半个月了&#xff0c;作品也发布了三部&#xff0c;全程没用过一次电脑&#xff0c;自己之前也没接触过专业的软件&#xff0c;什么PR&#xff0c;AU之类的一概不懂&#xff0c;全程一部手机&#xff0c;只用剪映&…
阅读更多...
MySQL多项模糊查询

MySQL多项模糊查询

最近有个需求&#xff0c;就是要根据搜索框里面的关键字&#xff0c;找到符合条件的数据。 如果是单个条件的话&#xff0c;其实就是一个普通的select语句。 但是需求是这个关键字&#xff0c;要在id&#xff0c;desc&#xff0c;step等多个字段模糊查找。 然后最直观的一个思路…
阅读更多...
工作24:封装请求

工作24:封装请求

import { axios } from "./axios";export { axios };export function httpAction(url, parameter, method) {return axios({url: url,method: method,data: parameter}); } /*封装系统需要的post请求 第一个参数传入url地址 第二个传入数据参数*/ export function po…
阅读更多...
保存的图数据丢失_锡柴自主刷写和备份共享数据文件使用介绍

保存的图数据丢失_锡柴自主刷写和备份共享数据文件使用介绍

刷写功能锡柴自主 ECU刷写可以恢复损坏的数据或是新ECU刷上相应车型的数据注意事项确认车辆电瓶电量充足&#xff0c;平板电脑电量充足。发动机不启动。车辆处于刹车状态。建议使用USB线进行刷写可以提高刷写速度。部分车上其它系统对刷写有影响&#xff0c;可拆下来在车下接线…
阅读更多...
最新文章

Copyright @ 2022~2023