VueCli+Node+mongodb打造个人博客（包括前端展示和后台管理系统）（下）

上一篇：https://segmentfault.com/a/11...中篇：https://segmentfault.com/a/11...github地址：https://github.com/ssevenk/ss...现在只剩下展示东西的页面了。有四种类型的页面（实际上是四个组成部分）：文章、杂项、收藏夹、特定文章或杂项。前三者虽然布局相同，但功能略有不同。考虑到以后可能需要针对不同的类型做不同的布局方式，我还是定义了三个组件ShowBlogs、ShowEssays、ShowArticles以及具体的TheOne。可以看到他们共用一个headerlogo和navigationbar，所以我把这部分写成前面组件的其余部分使用路由来决定显示哪个组件使用嵌套路由数据。这很简单。创建（）{this.getData（）;},方法：{getData(){this.$axios.get("/data/blog").then(res=>{this.blogs=res.data;this.show=this.blogs;});}使用v-for将router-link循环出的每条数据都是一个链接，可以跳转到具体的内容页面{{item.date}}{{item.title}}分页在上面的代码中，你应该已经注意到，你看到了一个很熟悉的东西show.slice((currentPage-1)*pageSize,currentPage*pageSize)这是我们在后台管理系统中使用的页面搜索这里就不重复了，搜索功能和后台管理有点区别。这次，我定义了一个显示数组。点击搜索后，我调用了搜索功能，将搜索结果存入show，所以我们show的始终是show数组。由于三个页面都用到了搜索框，所以我把搜索框做成一个单独的组件，并没有引入main.js中让它成为一个全局组件，因为我们希望它是ShowBlogs、ShowEssays、ShowEssays这三个组件的子组件。而ShowArticles组件存在，所以调用父组件提供的方法importmySearchfrom"./mySearch"比较方便；每个组件都引入点击搜索，将搜索框中的内容发出给父组件，并调用父组件的方法//mySearch。vuemethods:{search(){this.$emit('search',this.content)}}在父组件methods:{searchfor(s){this.show=(this.blogs.filter(item=>{if(item.title.includes(s)){returnitem;}}));}}对于每个组件，搜索框的颜色是不同的这里使用$route.path来决定在搜索框的组件中写什么样式。使用路径来确定要使用的样式。具体文章或杂谈获取后端发送的数据（字符串）调用simpleMDE的prototype方法将其转化为html格式this.contentMarkdown=SimpleMDE.prototype.markdown(this.theOne.content)用v-html