博客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框架快速完成美食网站后，更加离不开这个框架了，简单方便，易于管理和后期的维护。
个人博客框架
如图所示，页面整体可分为几大主模块，有首页、分类、实验室、赞赏、伙伴、留言板、关于、登录注册、用户个人中心，这些主模块通过路由跳转切换；然后还有几个公共模块，如头部和尾部，以及其他的一些公用模块，这些子模块嵌套在主模块中，用于公用样式和公用功能的实现。
项目基于node.js npm 安装vue-cli 脚手架后 的目录结构，如下图，根据项目的需求选择性的安装依赖和插件
搭建博客所安装的插件和依赖，如下图，我使用了 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来开发博客项目，其中看中的一点就是模块化开发，就以打开页面的首页为例，如上面的结构介绍图，我分别使用了头部、尾部、右侧、文章列表这四个子模块组成，就如下图所示
子模块的结构和主模块一样，如果子模块中还需嵌套子模块，同上面一样
按照上面的步骤根据自己的需求添加自己的模块，整个博客网站就搭建完成啦，是不是很简单呢！如果需要了解vue.js具体的api 和element-ui组件的用法，可以访问官方网站，都有详细的说明哦！
需要看详细文档的 https://github.com/Aimee1608
