资讯专栏INFORMATION COLUMN

单页面博客从前端到后端

whinc / 3190人阅读

摘要:说到底,当自己独自开发从搭建开发环境,到前端的每一个组件,到动作交互,再到和后端的数据交互,难免遇到不少问题。单页面博客从前端到后端基于和的权限验证与的设计引入来实现富文本编辑器是开源的用于构建富文本编辑器的框架。

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

单页面应用的概念已经被提出很长时间了,无论是基于 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"}

预期计划

前后端同构,服务端渲染

引入 flow 来对 js 做静态类型的检查

加入测试代码

完善文档

最后

欢迎来 star, pr, issues…

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83502.html

相关文章

  • 页面博客前端后端】基于 DVA+ANTD 搭建博客前后台界面

    摘要:在的的配置中添加自定义主题由脚手架和官网介绍,我们已经自己配置并新建好了主题文件。单页面博客从前端到后端环境搭建单页面博客从前端到后端基于搭建博客前后台界面单页面博客从前端到后端基于和的权限验证与的设计 在上篇文章我们已经搭建好了基础的开发环境,接下来会介绍如何引入 DVA 和 ANTD ,以及在引入过程中需要注意的问题。这里只会详细的书写部分组件,其他的组件都是大同小异。你可以在 g...

    zqhxuyuan 评论0 收藏0
  • 页面博客前端后端】环境搭建

    摘要:的配置其中就不多说会解决更改组件的时热更新直接刷新页面的问题。 工欲善其事,必先利其器。单页面应用的开发和生产环境涉及文件的编译、压缩、打包、合并等,目前前端最流行的莫过于 webpack 。为了深入了解 webpack 以及其相关插件,我们决定不采用脚手架,自己来搭建基于 webpack 的开发和生产环境。 基础环境 nodejs的安装: 移步官网 建议使用nvm来管理nodejs...

    wizChen 评论0 收藏0
  • 页面博客前端后端】基于 Passport 和 Koa@2 的权限验证与 DVA 的 Mode

    摘要:我们就采用这种方式来进行权限验证。这里我还是使用在中的下新增单页面博客从前端到后端环境搭建单页面博客从前端到后端基于搭建博客前后台界面单页面博客从前端到后端基于和的权限验证与的设计 基于 JWT 的权限验证 这里有一篇文章描述的已经非常详尽,阐述了 JWT 验证相比较传统的持久化 session 验证的优势,以及基于 angular 和 express 验证的简单流程。 基于Json ...

    luodongseu 评论0 收藏0
  • 页应用的部署方案

    摘要:所以单页应用的部署,需要将所有的页面请求都返回,浏览器下载了后会自动解析并导航到对应页面。总结单页应用与以前的常规多页面应用还是有区别的,开发过程与后端解耦了,同时会出现跨域鉴权以及应用部署的问题。 本文同步发布于我的个人博客上 - 单页应用的部署方案 本文主要简单讲一下单页应用的开发及部署方法,默认你懂一些服务端知识及nginx知识,如果有任何可以在下方评论留言。 单页应用 SPA(...

    yanbingyun1990 评论0 收藏0
  • node-blog:用 node 搭建的个人开源博客

    摘要:项目地址这个项目是为了学习而建的,从前端到后端一手包办。相对来说,还是有一定难度的,适合有一定编程基础的人进阶学习。教程一教程二在安装完后,克隆项目。 项目地址 这个项目是为了学习 node 而建的,从前端到后端一手包办。相对来说,还是有一定难度的,适合有一定编程基础的人进阶学习。 如果有问题,欢迎提 issues 注意,本项目的前后端代码都是放在一起的,前端代码放在 src 目录,后...

    guyan0319 评论0 收藏0

发表评论

0条评论

whinc

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<