全栈开发高可扩展,高可维护性当当书城WebApp无密分项

#1

download:全栈开发高可扩展,高可维护性当当书城WebApp无密分项

后端自学两个小时,前端,能做什么?
今天的内容有点超前,主要是换换口味。毕竟学东西学久了,想学点新的,休息一下,俗称换个思路。
其实我早就想学会看前端了。不过由于工作忙,也可能是懒癌发作还没发作。直到我在做OKR的时候,有些东西需要前端的支持,而我们没有任何额外的前端,我知道这一点。~我需要开始学前教育~
在我继续说下去之前,突然想起来我有一个前端网友,以前我们都极度贫困(现在升级为贫困)的时候,他会一起讨论问题。有时候我会说你前端怎么样,他会很反感,因为他觉得自己不是前端而是开发者。
虽然我被刺痛了,但我从心底里赞同他。开发者不应该限制自己。我们所有人都只是在做前端或者后端的工作。毕竟有些人招进来就是前端,现在连运维工作都做了,你说呢?@CookieBoty
所以这篇文章的内容会前端和后端混在一起。前端可以看后端内容,后端可以看前端内容,换个思路吧~
1.某视频剪辑软件
我还依稀记得三四年前刚学Java的时候,要学CSS,HTML,JS。做了三年后端,连DOM怎么操作都忘了。可能很多后端的朋友跟我一样。除了HTML的一点标签,其他前端相关知识早就忘记了,这也是很多后端不愿意接触前端的原因。太费功夫了。
所以我决定开始学习前的第一个问题是,我应该先学什么?
想了三分钟,得出一个结论:先学一个前端框架。
我知道任何语言的技术栈都是有一个庞大的生态支撑的。除了前端框架,还有打包工具、依赖管理工具、ES6的新特性(可能是老的,对我来说是新的)、硬卷等等。
这八股文和Java的一样,但是我知道这些东西我都不需要学。当我想学的时候,只有一件事:用工具帮我做东西。
所以,虽然我连解构赋值和操作DOM都不会,但这并不妨碍我学习前端。我要选择一个前端框架去熟悉,然后用这个框架的生态来帮我做东西。
跑题了,回到正题。两三年前,Vue,React,Angular是前三。但到了今年,Angular好像除了外企没怎么用过,所以我的学习目标是专注Vue和React。
如何选择?其实我很纠结。最后还是听从了好兄弟@CookieBoty和很多网友的建议,学了Vue。
网上很多人说Vue好用,文档齐全。我觉得它完全符合我的期望。另外,我在火影结束后开始追逐海贼王。犹大海贼王的命名方式很适合我,于是我开始学习Vue3。
怎么学?想到了一个程序员的梦工厂课程网,找了个教程看。它先是教我模板语法,然后教我单页组件,最后学了Vue路由系统。前前后后花了一个多小时,看了十几个视频,觉得自己能行,就开始练了~
最后我三天没看完一页。
2.反应
Vue3的难度让我措手不及,也许是因为我没有抛弃后端的代码习惯。
我习惯用TS定义数据结构来接收和处理值,但是我发现Vue3中的所有对象都是代理对象。当我尝试把一个地图数据直接转换成JSON字符串的时候,发现不行,我也无法理解为什么一个地图转换成JSON的时候不能把KV带进去。它仍然需要我手动将其转换成一个对象,然后再转换一次。我非常不安。
更让我担心的是,当我尝试用数组对象循环生成某个模板时,我发现很麻烦。感觉这不是我想要的前端。作为后端,我学了脚本语言,但是它让我感觉到很多束缚,比写Java还难。
至此,我才意识到Vue3的入门难度和Vue2并不一样。这是一个成熟的前端框架,需要一个成熟的前端来运营,而不是我这种玩了就扔的二流开发。
当然,Vue还是有很多优点的。在我看来,ele-plus组件库真的很漂亮。
Vue3玩不下去了,想换React。又一次来到一个班级网,找到了React17的视频。我花了一个多小时。好在我已经有了一些先验知识,吸收起来还是挺快的。在学习的过程中,我觉得React给了我想要的:自由,以及编写脚本语言的自由。
在React中,我不再拘泥于单页组件,都是功能组件。单向数据流也让我更容易理解数据的运行方式。而且据说React的B案比Vue高一点。这一切都让我觉得转行反应是对的。
但是,有利也有弊。在编写React的过程中,我发现我用Vue3写代码时的问题是JS特有的,比如我前面提到的映射到JSON的问题。不会因为某个框架就让我更舒服。
可能有些前端的朋友会想:为什么要用地图?
因为Map更符合我对这个后端的认知,所以我把一些不确定的多选参数放在一个容器里,然后序列化到后端。我觉得这是一件极其合理的事情。符合我的心智模式,但是JS和TS都没有做到。
在使用TS的过程中,感觉几乎没有什么好处。反而TS的类型检查让我觉得更不像脚本语言,我觉得比后端的Kotlin差太多了。
虽然有各种限制,但好在React的框架并没有让我感到任何不适,而是无缝衔接。我差点就开始写了。
最后,总结一下我在动笔之前在React中学到的东西:

使用脚手架安装react with ts。
声明类组件和功能组件:功能组件是主流。就稍微看一下类组件,主要是写起来比较麻烦。
理解render:render其实就是通过执行组件代码生成一个HTML片段,然后挂载到DOM上。
CSS模块化:通过CSS模块化添加样式非常方便。懒癌患者直接在代码中加入内联样式是没有问题的,他们只是随心所欲的玩。
而状态道具:状态是关键点,代表组件的状态,比如按钮是否显示。Props是不可变的参数,从外部传入供组件使用。
钩子:钩子,我一般只用这三个:useState,useEffect,useContext。它们分别表示状态变量声明、副作用挂钩声明和全局数据传输。
路由:据我所知,路由是通过占位符和浏览器的锚点完成的,通过锚点定位指定的代码,通过占位符将组件代码生成到占位符所占的DOM。当然这只是我的一点拙见,希望评论区的大佬们能给出更多细节。

学完以上几项,我觉得你写一个小的管理系统是没问题的。啊对,说到管理系统,必然要用到http相关的东西。虽然axios祝玉带,拿来用是可以的。
最后,我觉得React的文档比Vue的好多了。我希望JYM不会喷我。
3.组件库
在编写前端的过程中,组件库对于提高效率至关重要。先后经历过蚂蚁设计、Material UI、Semi设计、Arco设计。
最后,我在项目中使用了Semi Design,因为它可以按需加载,而无需引入全局样式表。虽然我的好大哥告诉我蚂蚁设计也可以达到这种效果,但当时实践中并没有成功,或者说我的功力太弱了。
到目前为止,我用过最舒服最方便的是ele-plus。可惜没有React版本。
虽然组件库是个好东西,但是我觉得过分依赖组件库是个不好的东西。当你想做的功能组件库有了,但就是达不到想要的效果,就会很难受。难怪很多人要自己做组件库~
比如Semi Design,在我使用的过程中,我真的不喜欢它的按键效果。按钮上必须始终有背景色:

我想要一个没有背景色的图标按钮,但是Semi Design的图标按钮都是这样的:

可能这就是它独特的设计风格问题,有些东西随时可能违背我的直觉,让我意识到虽然组件库不错,但是过度依赖也给自己的扩展留下了很多问题。
写到这里,我突然明白为什么前端有时候会跟我说“我用组件库做不出这个效果。”我心想,你的小厮不就是你的主人吗?我实际上可以让组件库来照顾开发人员。被照顾的时候,我好像很理解他当时的处境。原来我的页面真的不是我的主人。
4.页面效果
虽然我只花了几个小时学习前端,但我花了很长时间来写页面。大部分时间,我都在调整一些风格,排查错误。除此之外,我还自学了Flex layout,做了整体的页面布局。
有时候觉得组件效果不好,也写了一些鼠标悬浮的阴影之类的小效果:

一套页面整体感觉还是不错的。难怪前端也叫交互体验工程师。
接下来,我给大家展示一下整体效果。这是主页面:

我的网关控制台分为两个页面:看板和路由表。
路由表如上图所示。它主要是拉下Nacos中的配置,解析成数组对象,显示在表格中。然后可以在表中编辑添加,再通过openApi同步到Nacos的远端,这样就不用手动在一堆配置中修改了。
下面简单说一下Nacos Api。他们的发布配置其实是Get接口,导致我现在在后端做了一层封装,不然数据量大的话很容易被浏览器拦截。我也看了他们新api接口的相关代码,但不是常用的JSON接口,所以跟相关开发者查了一次。
跑题了,回到正题,我的编辑和新页面如下:

看板就是用网关记录一些流量指标,比如总请求数、日总活动量、每小时在线人数、每小时请求数等基本指标,并做成图表形式,包括饼状图和折线图:

当然对我来说最重要的还是路由表的查看页面和新增加的编辑页面。这些页面花费了我最多的精力,而且页面的数据结构比较复杂,对于我这个新手来说做起来有点困难。
值得一提的是,图表是我做过的最简单的页面,用的是蚂蚁的图标组件。
5.后端
最后简单说一下我在后端做了什么。
由于这是一个后台系统,我将其从网关中分离出来,并创建了一个新的管理项目来处理相关的请求,但是什么呢?有了前端,我的网关作为一个整体将有三个部署的服务:网关API、网关控制台前端和网关控制台后端。
为了节省资源,我把前端输出代码通过插件复制到网关后端应用程序中,这样网关后端和前端代码可以打包在一个应用程序中。
具体方法是用插件编译前端,然后在后端应用编译打包时复制前端资源。

在调试和开发的时候,你仍然可以像前端服务分开一样,启动一个后端服务和一个前端服务,只在最后的包里把它们打包在一起。所以,这样一来,即使一个全职的前端帮你写页面,他也是察觉不到的,他也不需要管后端做什么。
6.最后
好了,今天的文章就到这里。本文主要内容不涉及太多技术(当然也分享了一个前端联合打包的技巧),主要分享我自己为项目写一些前端代码的心路历程。我相信现在很多工程师都对整个栈感兴趣,我也想告诉你,前端不太难学,几个小时就能写出来。