单页面博客从前端到后端

不会后端的前端，不会写单页面应用...

单页面应用的概念已经被提出很长时间了，不管是基于 vue, angular 仍是 react，相信你们或是耳濡目染，或是设身处地都有所体会。说到底，当本身独自开发从搭建开发环境，到前端的每个组件，到动做交互，再到和后端的数据交互，不免遇到很多问题。在这个过程当中，值得记录每个须要学习、分享的知识点。

若是尚未本身实现过一个单页应用，那能够参考个人一块儿 交流学习
若是已经轻车熟路，欢迎给我 挑毛病

SITUATION

初衷也就是上面所提到的，综合本身所学的知识，打通先后端。不过结果让人欣喜让人忧。当初觉得本身会个 react， 写个应用就不得了。当把本身做为一个伪全栈工程师去踩一个个的坑时，恍然发现路漫漫其修远。

TASK

做为一个前端，不知足于使用 hexo 来生成本身的博客 = =，至少该是 Gatsby 。那就能够开发一个让本身赏心悦目的博客系统。

ACTION

搭建开发环境

前端基于 react 、antd、dva等 react 生态圈等框架，构建工具首选必然是 webpack。相信使用脚手架来开发的时候，遇到了问题，仍是须要扒一扒源代码，咱们不如本身来搭建开发环境，以熟悉 webpack 的每一个配置。

• 【单页面博客从前端到后端】环境搭建

引入 Dva + Antd 实现前端交互

• 【单页面博客从前端到后端】基于 DVA+ANTD 搭建博客先后台界面

基于 koa@2 + mongodb + passport 来实现后端逻辑

若是后端只是简单的增删改查，那有违咱们的初衷。要实现基本的 Auth2.0 权限认证，还要进行基本的业务逻辑和数据层分离等。

• 【单页面博客从前端到后端】基于 Passport 和 Koa@2 的权限验证与 DVA 的 Model 设计

引入 Draftjs 来实现富文本编辑器

Draft.js 是 Facebook 开源的用于构建富文本编辑器的 JavaScript 框架。你能够用它实现像 Bear 笔记那样的 web 端编辑器，极力推荐。

RESULT

一开始后端我用的是 express，若是还不熟悉 nodejs 框架的朋友能够参考这个 github仓库，上手 express。以后我用了 koa 重构了整个项目，在用 async 函数梳理异步流时，窃喜。
在写下这篇文章过程当中，忽然发现本身的这个项目已经有两颗星星了，很高兴！这几天的疲惫全无！

项目我已经部署上线，查看 演示地址
测试帐号：{username: 'test', password: 'test'}

预期计划

1. 先后端同构，服务端渲染

2. 引入 flow 来对 js 作静态类型的检查

3. 加入测试代码

4. 完善文档

最后

欢迎来 star, pr, issues…