### 一、介绍先说一下，2018年前，我是前后端都精通的，后来React、Angular、Vue等等技术刚流行那会儿，各种前端类库不断涌现，再加上前后端分离成了趋势，我就把精力都放在后端了，前端只是了解。近些年，经过群雄的混战，React和Vue看来是笑道最后了。所以，我在做小程序和网站，开始认真的学习Vue3和React。目前，我的前端实践能力还在逐步提升中。。。下图展示了光子神话网站和我的破斧头小程序的部署结构和主要使用到的技术。

总的来说，使用的均是当下常用且较新的技术。由于两个系统都是刚刚上线，功能并不是很多，功能逻辑也不是非常复杂，因此从技术点和部署架构上来看，都不是很复杂。下面就对其中的细节简单介绍下。在后续的帖子中，我也会结合自己的开发过程，对这些技术在实践中的应用进行持续的分享。 ### 1 光子神话网站网站使用前后端分离的方式开发。前端技术采用React，后端技术用Java。当然，原生的React和Java在当下都很少直接用于工程编码。它们只提供技术核心，如果直接用于生产，需要补全大量的应用级功能。因此，我这里使用了React阵营中非常强大的Next.js和Java领域的霸主Spring Boot，所有版本都使用当前最新的稳定版。为了持续迭代，开发时，我为前端和后端都写了一个框架，前端相对简单，而后端则比较复杂。框架对常用功能进行了实现，尤其是内置了一些编码规范，只要使用框架，就会受到框架在规范上的约束，这样既能减少编码量，又能降低人为的编码错误。同时，当需要对技术进行升级时，只需要重构框架即可，对业务代码的影响可以尽可能地降低。 #### 1.1 前端技术 ##### 1.1.1 Next.js Next.js是一个基于React的Web框架，同时也是React推荐的框架之一。相对于原生的React，有如下一些增强： * 内置了优化项。如：图片、字体和脚本等，这些优化能够在生产环境下，减少很多工作量。 * 动态HTML流。想象下在向AI提问的时候，那种一个字一个字往外蹦的场景... * React服务端组件。基于最新的React功能，一些没有用户交互的静态代码可以在NodeJS服务端渲染。（以前Servlet的时候全是这样，技术就很有意思，总实翻来覆去，不过都是有原因的，另帖再说^_^） * CSS库支持。无缝使用CSS Modules（我的破斧头小程序主要用这个），Tailwind CSS（光子神话主要用这个CSS）等一些流行的类库。 * 数据获取。对向服务端获取数据进行了封装，同时支持服务端组件和客户端组件（光子神话目前只使用服务端组件获取数据）。 * Server Actions。这个挺有意思的，原本我们客户端代码要访问服务端，都是通过API，但是在Next.js中，客户端组件可以直接调用服务端组件中定义的函数。 * Middleware。功能应该比较类似过滤器或者拦截器，对请求和响应进行额外处理。例如：登录验证。 * 文件路由。基于文件系统，根据目录结构，框架自己就可以生成访问路径。总的来说，Next.js是非常强大的，但是内置的规则也比较多，需要经常查文档。 ##### 1.1.2 openapi-typescript 这个我觉得是个神器。后端使用springdoc-openapi可以生成在线的接口文档，然后openapi-typescript可以根据这个在线文档，自动生成接口访问方式、参数、返回值的类型等信息。在我之前的Next.js项目中，接口的类型信息都是手写，一方面非常的费时费力；另一方面，在开发阶段，接口被修改的频率是很高的，这就需要前端开发人员和后端开发人员频繁沟通，非常容易出错。有了这个神器之后，只需要执行一行命令，所有的接口信息都会更新。 ##### 1.1.3 openapi-fetch 又是一个神器，用来提交请求到后端并接收响应。和openapi-typescript配套使用，代码非常简洁。 ##### 1.1.4 toast-ui-editor 这是一个Markdown编辑器，我现在就是在这个编辑器中写这篇帖子（当然是在需要登录才能看到的后台页面，并且我这个后台隐藏的还挺深的^_^）。 ##### 1.1.5 响应式布局最早开发的时候只打算做一个使用电脑浏览器访问的网站，没有考虑移动端，所以也就没想到做响应式布局。后来在使用Tailwind CSS的时候，发现做响应式布局也就是顺手的事情（其实也没有那么顺手），所以就做了。其实是因为觉得大家用手机的频率要比电脑高的多才做的。手机、pad和浏览器在访问网站的时候，会根据屏幕尺寸，显示三种不同的布局。 #### 1.2 后端技术 ##### 1.2.1 Spring Boot 这个应该不用介绍了，Spring全家桶已经统治Java web开发10多年了。 ##### 1.2.2 WebFlux 这个得说一说。Spring Framework有两种web技术，一种是Spring MVC，另一个就是Spring WebFlux。可能都听说过MVC，但听过WebFlux的可能也就只是听过，至少我从业10多年，身边用过的人并不多。 WebFlux基于Reactive Streams规范（要和前端的React区分开），是一个非阻塞的反应式类库。书写起来是流式的并大量使用lambda表达式，下面是个例子： ``` public Mono findArticleAndIncreaseViewCount(@NotNull Long id) { return new ArticleEntity(id).find() .switchIfEmpty(Mono.error(new QianyuException(BackendConstants.Ex.ARTICLE_NOT_FOUND, id))) .flatMap(ArticleEntity::increaseViewCount) .map(entity -> entity.toVo(ArticleVo.class)); } ``` 可以看到，与常见的Java编码方式的差别还是比较大的。这种风格见仁见智，有些人觉得很帅很简洁，有些人觉得可读性不高。我觉得呢，入手难，写多了也就挺舒服的了。早先的时候调试困难，现在编译器的调试工具都很先进了，虽然有时还是需要通过些特殊手段，但大多数情况下都挺好用的。有些人可能会说，Java21的虚拟线程会让WebFlux没有生存空间。这个问题我也思考了很久，不过我想，我这么喜欢更新版本的人，目前Java也只用的17，大量Java8的程序还在跑。等Java21普及的时候，还不知道何年何月呢。总之，对这东西的评价两极分化严重，但是我觉得挺好的，因为槽点都在可读性和调试上，习惯就好了。而且并发性确实好，对资源的需求小，尤其对于我这个买一个2核4G虚拟机还要考虑好几天的人来说——还要啥自行车。。。 ##### 1.2.3 jOOQ 用了WebFlux后，最大的问题实际在数据访问层的技术选型，不能用基于JDBC的阻塞驱动和类库了，比如Mybatis就用不成。得用基于R2DBC的非阻塞驱动和类库。最早的时候，我用的是Spring提供的spring-data-r2dbc，但效果不太好。虽然提供了多种查询方式：什么在Repository接口上用注解写sql；什么用对象的方式进行组装等等。。。。用下来的感觉是，没有一种方式能够覆盖所有场景的，而且写起来很麻烦。所以后来就改用jOOQ。jOOQ提供R2DBC模式，用起来算是比较简洁，而且目前来看，能覆盖我碰到的所有应用场景，算是比较满意的切换。要说缺点吧，也有。就是在API设计上，阻塞和非阻塞方式并没有区分开，而是混在一起的，所以使用过程中可能存在误用阻塞API的情况，导致报错。而且遇到问题时，网上基本都是阻塞式的写法，非阻塞的则需要自己去查文档。这里顺便吐槽下AI大模型的代码生成，尤其是这种小众技术或者是一些特殊用法，生成出来的完全是胡说八道，经常写出压根不存在的方法调用。或者用阻塞的方式为模板，然后把里面的类改成非阻塞的，这都是什么玩意儿。。。 ##### 1.2.4 springdoc-openapi 这是用来生成接口文档的，可以根据Controller中的注解自动生成openapi格式的文档。之前用的是springfox类库生成swagger格式文档，在开发网站的时候，发现springfox类库几乎已经停止更新了，后来发现springdoc类库近期一直在更新，加上这俩名字这么像，猜想应该是替代关系。 ##### 1.2.5 自研框架这个框架在这就不多说了，内容比较多，另帖细说^_^。到此，光子神话网站的技术基本介绍完了，最后再来看下这张图，应该会理解的更深一些。

### 2 我的破斧头小程序我的破斧头小程序是一个AI工具集，目前的功能包括：拍照生成证件照，拍照识别竹签数量，拍照识别血常规报告，拍照识别车型等。小程序是用uni-app开发的，开发好后，会把程序打包上传到微信的服务器上，大家访问小程序的时候，实际上都是从微信服务器上拉取开发好的页面。页面会调用我后端提供的API实现功能。微信小程序的配置能说的还挺多的，也是另帖再说吧。。。 #### 2.1 前端技术 ##### 2.1.1 Uni-app 很早之前就在用它了，早在当时还没有uni-app，而是名叫HBuilder的移动端H5混合应用集成开发工具（IDE）。那时它还在跟一个叫API Builder（好像是叫这个）打源代码侵权的官司。为啥我知道这事呢？因为后来HBuilder官司打赢了，把判决书在首页上贴了好久好久，好久好久。。。后来有了Uni-app，然后又和Vue结成了联盟，所以我就不得不学习下一个要介绍的技术了。。。 ##### 2.1.2 Vue3 Vue也是挺奇葩的，比如至今没人能证实作者的国籍（不说不说了，再说就太八卦了）。 Vue2和Vue3差别比较大，像我这么喜欢新版本的人，当然是用新版本啦。说实话，在写Vue3的代码时，觉得它确实借鉴了很多其他框架的优秀能力。总的来说，没有让我很惊讶的能力，所以我也就只是把它当作一个工具、一项技能。 ##### 2.1.3 Uni-UI uni-app自家出的UI组件库。我除了喜欢用新版本外，另一个爱好则是只要官方有配套的，我就优先用配套的。由于我小程序页面大部分都是自己编码画的，所以uni-ui用的组件数量并不是很多，给我的感觉是常用组件都有，但是并不丰富。不同于网站CSS用的Tailwind CSS，小程序我几乎用的都是CSS Modules。原因其实比较简单，写小程序的时候，我对Tailwind CSS了解得还不多^_^ ##### 2.1.4 微信小程序API 在开发小程序的时候，就只想着做微信小程序，所以什么多端适配我也就不考虑了。什么百度小程序、支付宝小程序等等，我不考虑哈。其实uni-app对微信小程序API有一些封装，但并不完全，所以一些特定的功能还是得调一下原生API。 #### 2.2 AI技术我的破斧头这个小程序的定位就是一个AI工具集，目前提供的功能包括：证件照制作、拍照数竹签、拍照识别血常规报告和拍照识别车型等功能。既然是AI工具集，当然开发中就需要一些相关的技术。 ##### 2.2.1 Python 我原本是想用C++的，一方面我最近准备学一些硬件开发，会使用C++；另一方面我其实对C++一直都有一种崇拜。。。后来想了想，还是选择了Python，毕竟它的AI生态比较齐全，解释型的语言特性开发起来也会比较快，入门难度也是非常低的。 ##### 2.2.2 Flask 这就是Python中的web开发类库。我目前学习的还不算深入，感觉我写出来代码从工程结构上来说，似乎还是有些问题，等后面Python精通了，Flask也熟悉了，到时候再重构一下。现在也就是仅仅能用来开发功能。 ##### 2.2.3 OpenCV 计算机视觉中的领袖型类库，本身是C++开发的，提供Python版的类库。功能很强大，但是API比较零散，而且需要较强的专业知识（线性代数啦、计算机视觉啦。。。），所以我现在更多也只能是边查边做，同时也在学习数学知识（要学的东西太多。。。数学貌似放下一阵子了，赶紧得再抓起来）。 ##### 2.2.4 Pillow 一个图像处理类库。我大部分都只用OpenCV，不过在一些简单图像处理上，Pillow的写法会比OpenCV简洁一些。 ##### 2.2.5 NumPy 提供数组的各种相关操作。做计算机视觉和AI，肯定离不开NumPy，因为我们看到的听到的东西，在计算机看来，都是不同维度的整型数组。。。 ##### 2.2.6 EasyOCR 做拍照识别血常规报告的时候用了这个预训练模型。其实用的效果不太好，预训练模型体积大，识别速度慢（我用的CPU），最关键的是精度不高，什么把“白细胞”识别成“自细胞”啊，等等之类的，搞得我只能再用Java对识别结果进行了一些处理（极其复杂，极其复杂，极其复杂。。。）后面考虑用自己的数据集对它再训练一次。也在考虑自己搞个OCR。 ##### 2.2.7 YOLO 一个开源的目标检测算法，喂给它标注好的数据集，然后调整一些参数，就可以训练出自己的模型了。小程序中的竹签识别模型（手动标注的我眼睛都要瞎了）、汽车识别模型（8万张图片，16G显存的GPU训练了15天）等都是用YOLO训练出来的，效果挺好的。 #### 2.3 后端技术介绍光子神话网站的时候介绍过后端技术了，这两个都用的我自研的框架，所以技术是一样的。至此，我的破斧头小程序的技术栈就介绍完了，最后再看看这幅图。

写在最后欢乐的时间总是过得很快，这就要结束了。今天网站首次上线，这是上线后的第一篇文章，原本计划简单写一些，用2、3个小时搞定的，结果写了7、8个小时。。。未来，随着网站和小程序的持续开发，我也会把实践中的经验和教训分享出来。当然，如果你留意到网站的博客栏目，你会发现，似乎不只有技术分详啊。确实，后面我还会把我生活中的一些经验分详出来，比如修车（没错，就是修车），再比如做饭（没错，就是做饭），还有读书笔记（最近书读的太少了）。在网站的“动态”页面，我会用简单的语言告知大家我最近在忙些什么，避免因为开发太慢或者文章发布太慢导致大家觉得我停止了。我会在“动态”页面告诉大家，我还在折腾！！！

技术栈介绍