Loading...
墨滴

徐小夕

2021/04/15  阅读:193  主题:默认主题

基于Koa + React + TS从零开发全栈文档编辑器(进阶实战)

近几年前端技术发展十分迅猛, 一方面企业对前端岗位的需求量越来越大, 另一方面企业对求职者的技术要求也越来越高, 我们再也不是曾经只会切切图, 写写业务就能轻松找到工作的coder了, 我们需要掌握Javascript, Vue, React, 小程序甚至是可以写后端的NodeJs.

为了让大家快速熟悉前端相关的技术栈, 笔者从企业实际需求出发, 提炼出有针对性的实战项目, 通过实战来加深大家对各个前端技术点的理解.

秉承笔者的开源风格: 不做无用的项目. 每期的实战课程都不仅仅是练习项目, 在掌握笔者设计的项目之后大家完全可以进行二次扩展, 直接用在自己的项目或者工作学习中.

适合人群

本项目有一定的难度, 适合有一定前端经验, 或者了解React开发, 想进阶前端中高级的前端工程师.

基于Koa + React + TS从零开发全栈文档编辑器

该项目主要目标是让大家熟悉React开发以及使用Typescript来规范前端代码, 并通过笔者自己搭建的轻量级后台服务端架构(基于Koa)来让大家快速上手Nodejs开发, 后期可以发展为全栈开发者.

本实战将以以下方式来展开:

  • 技术栈和项目亮点介绍
  • 项目演示
  • 技术点学习
  • 学习方法和路径
  • 技术答疑群
  • 发放全套源码

技术栈和项目亮点介绍

技术栈主要有:

  • React最新全家桶
  • umi3.0 企业级前端集成解决方案
  • 基于Koa全家桶的服务端架构

更多介绍请看上图思维导图.

项目亮点:

  • React hooks开发项目
  • Koa2 + Nodejs 搭建轻量级服务端架构
  • 服务端跨域技术实现
  • 浏览器指纹识别技术
  • 内容加密算法(crypto)
  • 网页截图功能实现(dom-to-image)
  • 网页性能优化方案

项目演示

技术点学习

umi3.0安装与使用

  1. 确保本地node版本是 10.13 或以上
  2. 安装yarn(建议安装国内镜像)
# 国内源
$ npm i yarn tyarn -g
  1. 新建本地项目目录
$ mkdir myapp && cd myapp
  1. 创建umi3.0项目
$ yarn create @umijs/umi-app

到此, 基本umi项目环境创建完毕, 关于项目目录结构,架构划分和.umirc配置项, 可以参考我发的powerNice源码部分. 更多umi3.0配置教程可以参考: https://umijs.org/zh-CN/docs/config

React hooks使用

HookReact 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 本项目99%以上代码都是用Hooks编写, 方便大家学习和研究它的使用. 以下是用Hooks编写的部分代码:

关于如何深入使用Hooks, 如何优化函数组件的性能,大家可以参考我写的文章:

浏览器指纹识别技术

浏览器指纹”是一种通过浏览器对网站可见的配置和设置信息来跟踪Web浏览器的方法,浏览器指纹就像我们人手上的指纹一样,具有个体辨识度,只不过现阶段浏览器指纹辨别的是浏览器。

我们这里用到的主要是canvas指纹, 用来实现用户在不登录网站的情况下来区分用户.

Cavans是HTML5中的动态绘图标签,也可以用它生成图片或者处理图片。即便使用Cavans绘制相同的元素,但是由于系统的差别,字体渲染引擎不同,对抗锯齿、次像素渲染等算法也不同,canvas将同样的文字转成图片,得到的结果也是不同的。

关于如何生成浏览器指纹, 在项目代码里有详细介绍, 我们还会用crypto 来对指纹进行加密.

网页截图功能实现

我们都知道简书有个生成文章分享海报的功能, 主要是基于当前的内容用canvasdom转化为图片, 并加入一定的水印, 为了探索此方案的实现, 我们这里也实现了一个mini版功能, 后期大家可以基于此方案二次开发更强大的截图功能. 这里主要采用了dom-to-image这个库, 实现方式类似于H5-Dooring的生成海报分享图. 大家可以在对应的源码里学习研究.

Koa2 + Nodejs 搭建轻量级服务端架构

服务端我们主要采用NodejsKoa2搭建, 笔者自己基于工程化实践, 开发了一套满足中小型业务的轻量级服务端架构, 主要实现的功能如下:

  • 支持配置跨域白名单
  • 支持开启Gzip
  • 支持渲染前端history模式的页面和hash模式的页面
  • 自动注册路由
  • 文件操作库封装

以上功能实现可以让我们快速开发后端服务, 并轻松做功能集成. 想进阶全栈的朋友, 建议掌握并精通.

学习方法和路径

大家如果对技术点不熟悉, 可以参考如下方式学习:

  • 掌握基本的 React 使用技巧, React hooks使用规范

参考学习资料:

  • 了解 Typescript 基本语法

参考学习资料:

  • 熟悉 umi3 搭建项目的一般方式和基本项目配置

参考学习资料:

  • 熟悉 dva 基本工作流程, 使用 dva 串联业务逻辑, 设计功能组件

参考学习资料:

  • 熟悉 antd 组件库

  • 本地部署, 发布以及服务器配置

以上是笔者整理的一个学习研究顺序, 大家可以参考一下, 有不懂的可以随时私信问我. 接下来附赠笔者设计的前端进阶成长路线:

发放全套源码 & 技术答疑群

为了让大家称帝彻底掌握该项目的开发, 笔者专门建了一个学习打卡群, 大家可以加笔者微信, 回复进群即可进入, 回复源码, 小夕亲自发送您项目全部源码.

最后

如果你已经充分掌握了项目的开发,

如果你对自己的现状不满足, 希望更快速的成长,

欢迎私信我, 第一时间获取大厂内推机会, 专业前端大神带你优化你的简历.

如果你想提高自己的影响力, 也可以私信我, 经过能力评估之后, 可以和我们一起参与github 4000+ star的开源项目, 认识更多牛逼的技术大神.

徐小夕

2021/04/15  阅读:193  主题:默认主题

作者介绍

徐小夕