← 返回文章

教链项目小节

总结了一下在项目中所作的工作

虽然仍有一些问题还仍待解决中,但是教链项目正式版的第一版应该差不多完成了。

在这个项目中,主要负责前端界面工作,以及前后端接口调用的工作。

前端工作(原生hmtl-->React-->Vue)

前端工作算是一个很复杂的工作历程了。最初接手这个项目时,还并不会使用 前端框架,就非常 “勤奋” 用原生 html + css +jQuery 做出来第一版的前端界面。

其中做了大量的重复性且无意义的复制粘贴工作,每个界面的元素都要一个个手动细节调节,之后一旦一个元素需要调节,就得手动将其他界面的css 样式重新调节一遍。最后很累,做出的效果却很差,算是只能到达一个能用的界面。



之后寻找前端框架,都2020年了,绝对会有前端框架的,大量的重复性且无意义的复制粘贴工作绝对不是程序员该做的事情,绝对有解决方法。最终发现了 React 和 Vue。

在最终抉择后选择了 React,然后开始学习 React 的教程。看着视频教程 + 官网资料,手动的敲了一遍示例代码。

学完React 以后,感触也蛮深刻的:我之前也太out,太过时了。React 也太好用了,再也不要需要做复制粘贴的工作了。第一次知道了组件化思维,所见一切都可组件化,太强了。

随后就开始着手重构之前写的前端页面了,还有第三方的组件库,太方便了,极大的简化前端界面编写的代码,人家都已经写好了。我只需要引入这些组件,然后在通过类似于搭积木的方式搭建出来,很快就将之前的前端界面再一次的重构出来(本身功能也很简单)。

写完之后才发现,人家 React 已经不流行export default class Main extends Component 这种写法了,现在都是 hook钩子,看的我似懂非懂。哭了,学了一个过时的React 的写法。本来打算再一次重构的时候,学习 hook 这种写法的,但是最后又变成 Vue 框架了。

React 写完以后的第二个感触就是,前端框架的生命周期太重要了,核心功能都是在 生命周期中完成的:

// 挂载时:
constructor  -->  getDerivedStateFromProps --> render  --> componentDidMount

// 更新时
getDerivedStateFromProps  -->  shouldComponentUpdate --> render -- getSnapshotBeforeUpdate  -->  compontDidUpdate

// 卸载时
compontentWillUnmount

搞懂生命周期,才能知道数据流转的过程,进而才能知道在哪操作数据以及获取数据。



再然后,为什么就转 Vue 框架了呢。因为公司嫌弃我们自己做的不好看,就让学校中的外包公司做了前端界面UI,顺带让他们也实现了前端代码。可惜他们不会 React的,只会Vue。于是就让他们用 Vue 实现了前端的静态界面,说实话,人家做的是真的好看,比我们之前的强了100倍。

再然后,我拿到做好的静态Vue前端界面,学习了一下Vue 的基础语法,以及它的生命周期。就很容易将静态界面 通过 Ajax 异步调用后端接口,变成了动态前端界面。

对Vue代码调整完,也有一些感触:React 和 Vue 虽然有很多细节上的不一样,但大体上是一样的,都是组件化思维,都是玩 生命周期。对于我们初学者来说,只需要弄懂基础句法以及生命周期就能很快开发出一个网站出来(再加上百度解决报错问题)。

对于前端来说,这个项目我收获:React 入门了。了解了Vue 中的生命周期以及一些模板语法。

后端工作(SpringBoot)

主要是使用 SpringBoot 来接收前端发送的请求,然后通过访问区块链上数据做一些处理,并将结果返回给前端。

对 SpringBoot 中的标签多了一些了解。

其他的应该也没什么了,后端代码,大部分靠百度就能完成。

前后端合并

首先通过前端框架,将前端代码编译打包(打包后的文件必须要本地可以打开才行。因为前端并没有存放的nginx 这种web服务器上,而是直接扔掉SpringBoot项目中)。

将编译打包后的前端文件扔掉的 SpringBoot 中resource资源文件中的 public 中。