网站色彩运用,音乐网站开发的项目背景,建设网站定位分析,北京公司网站怎么制作# 七、评论模块## 评论列表### 创建组件并配置路由1、创建 src/views/comment/index.vue 并写入html
templatediv评论管理/div
/templatescriptexport default {// 组件的 name 最好起名为两个单词#xff0c;尽量少用一个单词// 为什…# 七、评论模块## 评论列表### 创建组件并配置路由1、创建 src/views/comment/index.vue 并写入html
templatediv评论管理/div
/templatescriptexport default {// 组件的 name 最好起名为两个单词尽量少用一个单词// 为什么为了避免和原生的 html 标签冲突name: CommentIndex,components: {},props: {},data() {return {};},computed: {},watch: {},created() {},methods: {}};
/scriptstyle scoped/style
2、配置路由表3、配置侧边栏的导航路径最后在浏览器中访问测试。### 布局html
templatedivel-card classbox-carddiv slotheader classclearfixspan评论管理/span/divel-table :datatableData stylewidth: 100%el-table-column propdate label日期 width180/el-table-columnel-table-column propname label姓名 width180/el-table-columnel-table-column propaddress label地址 /el-table-column/el-table/el-card/div
/templatescriptexport 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: {}};
/scriptstyle scoped/style
### 展示文章评论列表html
templatedivel-card classbox-carddiv slotheader classclearfixspan评论管理/span/divel-table :dataarticles stylewidth: 100%el-table-column proptitle label标题 width180/el-table-columnel-table-column proptotal_comment_count label总评论数/el-table-columnel-table-column propfans_comment_count label粉丝评论数据/el-table-columnel-table-column label评论状态 width180template slot-scopescope!-- 开关组件绑定的数据是一个布尔值它会根据布尔值的真假来决定开关状态 --el-switchv-modelscope.row.comment_statusactive-color#13ce66inactive-color#ff4949/el-switch/template/el-table-columnel-table-column label操作templateel-button typeprimary修改/el-button/template/el-table-column/el-table/el-card/div
/templatescriptexport 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, 获取数据失败)})}}}
/scriptstyle scoped/style
### 修改评论状态1、给开关组件注册 change 事件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
templatediv评论列表/div
/templatescriptexport default {name: CommentDetail,components: {},props: {},data() {return {};},computed: {},watch: {},created() {},methods: {}};
/scriptstyle scoped/style
2、配置路由3、在评论列表中点击修改跳转到评论详情页### 布局### 展示评论列表1、在 data 中添加 comments 用于存储评论列表js
data () {return {...comments: []}
}
2、在生命周期 created 中请求获取评论数据3、模板绑定html
templatedivel-card classbox-carddiv slotheader classclearfixspan评论详情列表/spanel-button stylefloat: right; padding: 3px 0 typetext操作按钮/el-button/divel-table :datacomments stylewidth: 100%el-table-column label头像 width180template slot-scopescopeimg width50 :srcscope.row.aut_photo //template/el-table-columnel-table-column propcontent label评论内容 width180/el-table-columnel-table-column propname label点赞 width180template slot-scopescope{{ scope.row.is_liking 1 ? 已赞 : 没有赞 }}/template/el-table-columnel-table-column proplike_count label点赞数量 width180/el-table-columnel-table-column proppubdate label评论日期 width180template slot-scopescope!--不传参{{ scope.row.pubdate | dateFormat }}传参{{ scope.row.pubdate | dateFormat(参数) }}--{{ scope.row.pubdate | dateFormat(YYYY-MM-DD) }}/template/el-table-columnel-table-column label是否推荐 width180template slot-scopescopeel-switchv-modelscope.row.is_topactive-color#13ce66inactive-color#ff4949changeonTop(scope.row)/el-switch/template/el-table-columnel-table-column propreply_count label回复数量 width180/el-table-column/el-table/el-card/div
/template
### 评论推荐1、给推荐按钮注册点击事件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)})
}
