Sublime Text
Chrome浏览器调试
列表页面代码如下图（分析重点代码）: 1.多个模块共用列表，所以这里使用vue组件功能ArticlesList，减少重复代码； 2.页面加载时（created），获取栏目名articleType（从左导航栏传值）后，执行this.$store.dispatch('getArticleList', data)，获取该栏目的列表数据（原理参考《Vue仿今日头条--后台网站配置文件和首页页面》）。 Tips：Local.set('articleType', articleType)是为了缓存articleType的值给组件ArticlesList使用。
组件ArticlesList的template和style代码如下图： 1.template中“el-”开头的标签都是来自“element-ui”框架，详细可查看api（主要使用Form 表单和Table 表格）； 2.标签el-form添加@submit.native.prevent，屏蔽敲击enter刷新页面；因为点击左导航栏会传栏目名，而直接刷新会导致没有栏目名报错； 3.标签el-table添加:row-style='{height:'20px'}' :cell-style='{padding:'6px'}'，因为默认行距太高，不美观； 4.标签el-table-column添加el-popover，用于弹出框显示点赞列表数据； 5.style样式使用less编写，由于多个页面共用，这里写了一个公共less（下图3），并在main.js文件中全局引用。
组件ArticlesList的script代码如下图（分析重点代码）： 1.加载页面时（created），获取缓存的值Local.get('articleType')，用于后面的查询和翻页等； 2.查询操作（onSubmit），也是执行this.$store.dispatch('getArticleList', data)，区别就在data数据不一样；data数据不一样会走接口的不同分支，可对比《Vue仿今日头条--服务器端》； 3.添加数据（addArticle）、查看数据（examine）、编辑数据（edit）和查看评论数据（goCommentRecord）都是使用this.$router.push进行跳转到对应页面，区别在于如果需要传参就使用“name”，因为“params”和“path”不能合用； 4.删除数据（delArticle），使用this.$confirm弹出确认框，点击确定则执行this.$store.dispatch('delArticle', data, this)，用于调用store-article的方法delArticle，来删除对应的文章数据； 5.翻页功能（handleCurrentChange），除了page的值会根据翻页的页数赋值（因为接口使用了skip，所以能根据页数显示对应数据），其它跟查询的原理一样。
新增/编辑页面代码如下图: 1.多个模块共用新增/编辑，所以这里使用vue组件功能AddArticle，减少重复代码。
组件AddArticle的template和style代码如下图： 1.template中“el-”开头的标签都是来自“element-ui”框架，详细可查看api（主要使用Form 表单和Upload 上传）； 2.图片区域代码比较复杂，分三种格式（无图片、左右结构和上下结构），根据el-radio的选择显示对应的格式，也会对应到手机端的排版显示； 3.图片区域增加el-input（隐藏），为了保持提示信息跟其他输入框一致； 4.标签el-upload（用于上传图片和视频）属性比较多，也比较难理解，对应的功能下面会分析，但是具体的属性怎么使用，还需要自行查看API理解； 5.标签quill-editor用于实现富文本功能，显示富文本哪些功能由quill-config.js控制，详细可查看《Vue仿今日头条--后台网站配置文件和首页页面》； 6.style样式使用less编写。
组件AddArticle的script代码如下图（分析重点代码）： 1.加载页面时（created），由于新增和编辑共用页面，所以需先判断this.$route.params.id，如果存在则为编辑，并执行this.$store.dispatch('articleDetails', articleId)来获取该id的文章信息（注意articleContent是包括整个html代码，所以赋值使用innerHTML，这样才能包含富文本的排版格式）； 2.handleExceed达到上传最大数量时触发，最大数量由el-upload中的“:limit”控制； 3.handleRemove移除图片功能和handlePictureCardPreview预览图片，对应el-upload自带的属性“:on-remove”和“:on-preview”，逻辑比较简单； 4.公共方法uploadFile，判断如果是上传视频，则计算获取分秒格式（that.checkForm.videoDuration），用于手机端视频信息显示； 5.上传图片方法onUploadChange和上传视频方法onUploadVideoChange都不是即时上传，而是文件状态改变时，把上传的文件转换为base64文件存储起来，跟表单一起提交（方法check）； 6.方法onEditorChange，用来获取富文本输入的数据（包括样式），所以使用editor.html，包括样式才能保证查看时候正常显示，也能正常显示在手机端（:options为配置文件）。
查看页面代码如下图: 1.多个模块共用查看页面，所以这里使用vue组件功能ArticleDetails，减少重复代码。
组件ArticleDetails的template和style代码如下图： 1.template中“el-”开头的标签都是来自“element-ui”框架，详细可查看api； 2.style样式使用less编写。
组件ArticleDetails的script代码如下图（分析重点代码）： 1.加载页面时（created），执行this.$store.dispatch('articleDetails', articleId)，根据传入的文章id获取文章的详细信息，然后渲染到页面（注意富文本使用document.querySelectorAll('.ql-editor')[0].innerHTML）； 2.方法onEditorReady，用于准备编辑器时候禁止富文本被编辑。
列表页面代码如下图（分析重点代码）: 1.多个模块共用列表，所以这里使用vue组件功能CommentRecord，减少重复代码； 2.页面加载时（created），获取文章列表的id后，执行this.$store.dispatch('getCommentRecord', data)，获取该文章下的所有评论信息。 Tips：Local.set('articleId', articleId)是为了缓存articleId的值给组件CommentRecord使用。
组件CommentRecord的template和style代码如下图： 1.template中“el-”开头的标签都是来自“element-ui”框架，详细可查看api（主要使用Form 表单和Table 表格）； 2.标签el-form添加@submit.native.prevent，屏蔽敲击enter刷新页面；因为点击文章列表会文章id，而直接刷新会导致没有文章id报错； 3.标签el-table添加:row-style='{height:'20px'}' :cell-style='{padding:'6px'}'，因为默认行距太高，不美观； 4.style样式使用less编写，由于多个页面共用，这里写了一个公共less（下图2），并在main.js文件中全局引用。
组件CommentRecord的script代码如下图（分析重点代码）： 1.加载页面时（created），获取缓存的值Local.get('articleId')，用于后面的查询和翻页等； 2.查询操作（onSubmit），执行this.$store.dispatch('getCommentRecord', data)来获取评论列表数据； 3.翻页功能（handleCurrentChange），除了page的值会根据翻页的页数赋值（因为接口使用了skip，所以能根据页数显示对应数据），其它跟查询的原理一样； 4.方法toggleShow，执行this.$store.dispatch('updateComment', { commentId: row._id, commentState: !row.commentState }) 来修改该评论的状态，如果为隐藏则在手机端不显示（屏蔽不当言论）；为了即时看到状态效果，执行this.onSubmit()进行刷新。