vue+koa2+mongodb搭建个人博客

博客2.0更新啦！

博客地址：mangoya.cn

整体样式基本没有变化，主要变化是前后端重构，之前的1.0版本后端为php，并非博主所开发，这次重构调整了数据结构和所熟悉的语言，采用koa2+mongodb。

废话不多说，下面介绍博客的搭建教程和思路。

技术栈：

• 博客主页：vue2
• 管理后台：vue3
• 后端：koa2+mongodb

博客主要功能：

• 文章：列表、分类、详情、点赞、收藏、评论
• 用户中心：登录/注册、收藏列表、点赞列表、设置友链
• 其他：静态信息展示、留言板、点赞、最受欢迎文章排行榜、友链

前端模块拆分：

博客主页主要为展示信息和用户留言等信息模块，其中评论和留言板可以复用一个组件，首页列表和点赞收藏列表也可以复用一个的组件，页面整体为头部、左侧 和右侧，其中只有左侧内容为页面切换内容，头部和右侧则固定不变。

管理后台包含文章、分类、标签、用户、留言等管理功能。

后端数据文档划分：

• 文章
• 文章分类
• 文章标签
• 留言
• 点赞
• 收藏
• 浏览
• 网站点赞
• 用户
• 资源

主要功能点介绍：

用户登录注册：
使用github oauth 实现第三方认证登录，可能会遇到接口请求慢的情况，可以通过翻墙软件设置代理访问。

浏览量：
由时间戳+ua+随机数 加密生成log_id设置2个小时有效期的cookie，访问页面详情时，通过log_id和文章id去重存储浏览表。

留言和评论：
留言关于我等设置为固定的留言文章id，和文章一样存储用户信息，并添加回复的父级id存储，查询时递归获取并返回数据。

收藏和点赞：
分别存储收藏表和点赞表，包含用户id/文章id。

资源：
使用koa-body 实现文件上传功能，将资源保存在某个目录，并设置对应的url，存资源列表。

源码：

博客前端：https://github.com/Aimee1608/myblog2.0
管理后台：https://github.com/Aimee1608/myblog2.0-admin
服务端：https://github.com/Aimee1608/myblog2.0-server

版本要求：

• node>=12
• koa2
• mongodb4
• vue2.0/3.0

安装mongodb后，启动服务，即可运行。

欢迎点赞和评论~

博客1.0

为何选择vue.js搭建博客

为什么会选择使用vue.js框架搭建博客呢？原因有多个。作为前后端分离的多数据绑定项目，首选的就是mvc 以及mvvm等框架，也就是主流的react 和vue；在使用vue.js框架快速完成美食网站后，更加离不开这个框架了，简单方便，易于管理和后期的维护。

个人博客框架

image.png

如图所示，页面整体可分为几大主模块，有首页、分类、实验室、赞赏、伙伴、留言板、关于、登录注册、用户个人中心，这些主模块通过路由跳转切换；然后还有几个公共模块，如头部和尾部，以及其他的一些公用模块，这些子模块嵌套在主模块中，用于公用样式和公用功能的实现。

image.png

image.png

项目基于node.js npm 安装vue-cli 脚手架后 的目录结构，如下图，根据项目的需求选择性的安装依赖和插件

image.png

搭建博客所安装的插件和依赖，如下图，我使用了 element-ui组件来开发样式，还有vue-resource和vue-router 以及css-loader等样式加载依赖，安装成功后，在webpack.config.js上写上相应的配置

image.png

得在上图中的routes完成主路由模块的配置，并且export出来，这里需要注意的是，可以通过component: resolve 来设置懒加载，对于带宽为1M的服务器来说，这点非常重要，不然打开页面需要好几分钟，还需要在webpack.config.js中注释掉 devtool: '#eval-source-map'，这个是项目webpack打包的时候设置的参数，使用webpack -p 这个命令打包，即为压缩打包，打包的文件更小，除去不需要的注释

接着是入口文件文件的配置，根据自己的需求，引入对应的模块和路由等文件

image.png

运行项目

使用命令窗口，cd到当前目录，使用npm run dev ，就可以打开运行项目，编辑项目保存的同时，页面会自动更新，即为实时监控。

模块化开发

之所以使用vue.js来开发博客项目，其中看中的一点就是模块化开发，就以打开页面的首页为例，如上面的结构介绍图，我分别使用了头部、尾部、右侧、文章列表这四个子模块组成，就如下图所示

image.png

子模块的结构和主模块一样，如果子模块中还需嵌套子模块，同上面一样

image.png

按照上面的步骤根据自己的需求添加自己的模块，整个博客网站就搭建完成啦，是不是很简单呢！如果需要了解vue.js具体的api 和element-ui组件的用法，可以访问官方网站，都有详细的说明哦！

需要看详细文档的 https://github.com/Aimee1608