Angular4+Koa2+MongoDB开发我的博客

文章原创于公众号：程序猿周先森。本平台不定时更新，喜欢个人文章，欢迎关注个人微信公众号。

其实我的博客已经有好几个版本了，一直没有很满意的版本，因此一直在不断改进不断测试还未正式上线。还记得初版是去年四五月份开发的，当时用jsp写的，UI则采用百度贴吧pc版风格，可是使用了几个月，由于jsp先后端不分离很差维护，加上先后端不分离的项目没有太大价值，因此放弃了维护。后面工做使用vue框架，由于vue组件的单一，重写的界面效果没有达到本身满意的状态，因此第二版还未上线就被我舍弃掉。年假开始设计第三版我的博客，一开始设定为Vue.js + Node.js + Angular.js，可是后面想着了解一下新框架，因此用了Angular4替代了Vue.js，界面比较简单，由于我我的比较喜欢简单一点的页面。

这是前台主页，实现了主页·归类·关于这三个功能的开发，我目前将前台展现和后台管理系统进行了分离，前期的话主要是本身发文章为主，后台管理系统暂时不对外开放。

项目分为三个服务器进行开发：client前台展现功能，接口采用4200，主要功能如上图所示，admin后台管理系统，接口采用4201，主要用于添加删除新文章，添加新标签，server服务功能，为前端后台同时提供服务，进行数据库操做等，接口采用4001.

目前数据我直接存储在MongoDB,后期上线可能转移到mysql进行存储。整个项目环境搭建：Node.js + MongoDB，将环境搭建完毕，须要先开启MongoDB服务。

由于前台系统和后台管理系统都依赖于server服务，因此须要先启动server服务，server服务里面有对MongoDB的操做，因此要先开启MongoDB，而后npm run dev开启server服务。

server服务其实主要就是封装了前台展现和后台管理的全部数据库操做。由于目前工做负责服务器端开发使用的Node.js,因而本身的项目也使用Node.js做为开发语言。为了方便我维护，我是把client,admin,server三个部分代码都写在一个项目结构里面，server服务结构如图

client前台展现界面,采用Angular4框架进行架构，由于client服务器端口4200，server服务端口4001，若是直接访问会出现跨域的问题。因此我使用了Proxy进行代理，将前台4200端口全部查询数据库的操做代理到4001端口，因此前提必须开启server服务，不然会出现代理失败的警告.

我在不开启server服务的前提启动了client服务，启动成功了，可是最下方报了警告：没法从localhost:4200代理请求到localhost:4001，因此虽然启动成功了可是读取不到数据库任何数据，其实缘由就是你server服务没有启动，因此如今4001端口并无开启，当开启server服务以后重启client服务会发现前台界面能够正常展示了。由于如今移动端使用人数会比较多，因此特地花时间去将博客适配了移动端，其实有很多方法可使用，BootStrap或者rem,个人项目其实比较简单，我对全部界面的移动端展现单独设计了css，使用框架确实开发效率提升很多，不过开发项目目的就是让本身可以学到东西，因此最后我没有采用框架。

因为前台展示功能比较多，因此项目结构比较复杂。具体流程就是app.component.html中设计导航栏，其中针对pc端和移动端分别进行设计不一样的css样式，而后点击导航栏不一样功能会跳转到src/app/page中不一样界面中去显示不一样的效果。文章浏览评论功能使用了基于Github Issues的评论系统--gitment，具体能够看下我公众号上一篇文章：https://mp.weixin.qq.com/s?__...

前台展现截图(包括pc端和移动端)：

admin后台管理界面,采用Angular4进行架构，Admin服务器端口4201，server服务器端口4001，和client服务器同样，若是直接访问会出现跨域的问题。因此我同样使用了Proxy进行代理，将后台管理4201端口全部针对数据库的操做代理到server服务4001端口，因此前提必须开启server服务，不然会出现代理失败的警告.

admin服务项目结构：

admin后台管理主要是进行帖子的发布，以及标签的保存，目先后台管理界面是未对外进行开放，因此目先后台管理界面设计了一个登陆界面，设定了一个管理员帐号进行登陆。

登陆验证成功就会进入后台管理界面，能够进行帖子的发布，输入框集成了MarkDown插件，可使用MarkDown支持的功能。

后台管理系统第二个功能就是能够新增便签，这个功能没啥说的，就是保存数据操做而已。

后台管理最后一个功能就是查看归档文章，支持按照标签分类进行查找

由于后台管理系统是用于新文章的发布等用途，已主要适用于pc端，未对移动端进行适配。其实我的博客的博客功能如今已经实现了，原本打算这几天进行内网穿透，生成测试地址进行测试的，测试没问题就准备发布上线，可是好像由于代理出了点bug，在本地测试没问题，内网穿透完就会出现访问速度很慢的问题，因此最近在调试，还未正式上线。这篇文章没有具体对源码进行讲解，有想要源码的能够私下联系我要源码本身研究。欢迎加入个人技术交流群，不按期在群里更新学习资源。群二维码请看公众号。

欢迎关注我我的公众号：程序猿周先森