文章原发于公众号：程序员周先森。本平台不定期更新，喜欢我的文章，请关注我的微信公众号。其实我的个人博客已经有好几个版本了，一直没有满意的版本，所以一直在不断的完善和测试，但是一直没有正式上线。还记得第一个版本是去年四五月份开发的。当时是用jsp写的，UI采用了PC版百度贴吧的风格。分离出来的项目没有太大价值，所以放弃维护。后面的工作使用了vue框架。因为vue组件单一，重写后的界面效果没有达到我满意的状态，所以在第二个版本上线前就放弃了。年假期间开始设计个人博客第三版。一开始我定的是Vue.js+Node.js+Angular.js，后来想了解新框架，所以用Angular4代替了Vue.js。界面比较简单，因为我个人比较喜欢简洁的页面。这个是前台首页，实现了首页的开发，分类，这三个功能。我目前把前端展示和后端管理系统分开。前期主要是自己发文章，后台管理系统暂时不对外开放。.项目分三台服务器进行开发：client前台展示功能，界面使用4200，主要功能如上图，admin后台管理系统，界面使用4201，主要用于增删新文章，添加新增标签，服务器服务功能，同时为前后台提供服务，进行数据库操作等，接口使用4001，目前我直接将数据存入MongoDB，可能会转入mysql用于稍后上线时的存储。整个项目环境搭建：Node.js+MongoDB。环境搭建完成后，需要先启动MongoDB服务。因为前台系统和后台管理系统都依赖于服务器服务，所以需要先启动服务器服务。服务器服务对MongoDB有操作，所以必须先启动MongoDB，然后npmrundev启动服务器服务。服务器服务其实主要封装了所有的数据库操作，用于前端展示和后台管理。因为目前的工作是负责使用Node.js进行服务端开发，所以我自己的项目也是使用Node.js作为开发语言。为了方便自己维护，我把client、admin、server代码写在一个项目结构中。服务端服务结构在客户端前台展示界面，架构采用Angular4框架，因为客户端服务端端口是4200，而服务端服务端口是4001，如果有直接访问，就会有交叉-域问题。所以我使用Proxy作为代理，将前台4200端口查询数据库的操作全部代理到4001端口，所以必须先开启服务器服务，否则会出现代理失败的警告。我在没有启动服务器服务的情况下启动了客户端服务。启动成功，但是底部报警告：Unabletoproxyrequestsfromlocalhost:4200tolocalhost:4001，所以虽然启动成功了，但是无法读取到数据库中的数据。其实原因是你的服务器服务没有启动，所以现在4001端口没有开启。开启服务端服务，重启客户端服务，会发现前台界面可以正常显示。因为现在手机用户会比较多，所以我抽空把博客适配到了移动端。其实可以使用的方法有很多，比如BootStrap或者rem。我的项目其实比较简单。我会展示移动端的所有界面。自己单独设计了css，使用框架确实开发效率提升了不少，但是开发项目的目的就是让自己学点东西，所以最后没有使用框架。由于前台显示功能比较多，项目结构比较复杂。具体过程是在app.component.html中设计导航栏，其中针对PC端和移动端设计了不同的css样式，然后点击导航栏的不同功能跳转到src/中的不同界面应用程序/页面显示不同的效果。文章浏览和评论功能使用基于GithubIssues的评论系统——gitment。详细可以参考我上一篇文章公众号：https://mp.weixin.qq.com/s?__...前台显示的截图（包括pc和手机）：admin后台管理界面，使用架构为Angular4，管理服务器端口4201，服务器服务器端口4001，同客户端服务器，如果直接访问，会出现跨域问题。所以我也使用Proxy作为代理，将后台管理的4201端口的所有数据库操作都代理到服务器服务的4001端口，所以必须先开启服务器服务，否则会有代理失败的警告。admin服务项目结构：admin后台管理主要是发布帖子和保存标签。目前后台管理界面不对外开放，所以为后台管理界面设计了登录界面，设置管理员账号登录，登录验证成功后，将进入后台管理界面，你可以发布帖子。输入框集成了MarkDown插件，你可以使用MarkDown支持的功能。后台管理系统的第二个功能是添加便利贴。这个功能没什么好说的，就是保存数据操作而已。后台管理最后一个功能是查看存档文章，支持按标签分类搜索，因为后台管理系统用于发布新文章等用途，一直主要应用于PC端，没有适配到移动端。其实个人博客的博客功能现在已经实现了。本来打算这几天把内网打透，生成一个测试地址进行测试。如果测试没有问题，我会在线发布。不过好像是因为代理的bug，本地测试失败了。问题是穿透内网后访问速度会很慢，所以目前正在调试，还没有正式上线。本文不详细讲解源码。想要源码的可以私信我，要源码自己研究。欢迎加入我的技术交流群，不定时更新群里的学习资源。群二维码请见公众号。欢迎关注我公众号：程序员周先森
