html如何和后端交互_2020年如何成为一个全栈（完）

最新推荐文章于 2023-05-27 03:45:14 发布

weixin_39688687

最新推荐文章于 2023-05-27 03:45:14 发布

阅读量2.1k

点赞数 1

文章标签： html如何和后端交互

本文链接：https://blog.csdn.net/weixin_39688687/article/details/112091493

版权

翻译自 https://www.colbyfayock.com/2020/02/how-to-become-a-full-stack-web-developer-in-2020原作者 Colby Fayock 【https://twitter.com/colbyfayock】喜欢的可以关注他的twitter，了解更多的技术信息。

费时一周，总算翻译完了

同时还顺带上手了Vercel

把自己多年的博客站搬了过去

活到老，学到老

生命在于运动，技术改变生活

全栈开发工程师(以下简称全栈)就好比代码届的瑞士军刀，获得这个头衔意味你可以从头到尾设计、开发并部署一个解决方案。
那么如何才能成为一个合格的全栈呢？

首先，如何定义全栈？

笼统来说所有前端开发都或多或少都算得上是全栈，但是仅仅会利用Netlify等工具部署一个静态网站并不能让你成为一个合格的全栈。这听起来可能有点让人沮丧，但是是事实。很多厉害的工具如Netlify、Zeit能帮助你顺利完成从设计到开发到部署的所有过程，然而这些经验并不能增加你下次面试全栈岗位的竞争力。

以上结论并没有否定前端的能力。现阶段各种技术飞速成长，配合便捷灵活的辅助工具，前端能做的事情已经大大超越了其字面所指代的部分。

网站开发的历史

网站开发的发展还是挺快的。此前的一段时间，Wordpress作为内容管理系统(以下简称CMS)的王者，被超过三分之一的网站选用，间接导致了PHP的流行。剩下的那些网站，大多则采用了更加自定义的解决方法。

图片来自 https://trends.builtwith.com/cms

像Wordpress这种基于LAMP框架、使用某种CMS配合一种服务器端语言(比如PHP)来链接数据库和生成浏览器端页面的模式相对比较传统实用。开发者还能利用Javascript和CSS来控制管理一些交互的动态显示效果。因此很多网站仅仅依靠这类框架就能实现所有的需求。但是依然有一些更大更复杂的站点需要单独的团队来管理和设计一些特定的服务从而最终实现生产环境的自动化部署，新的网站开发框架也因此不断被发明出来。

网站开发的现在和未来

现在Wordpress依然在扮演着很重要的角色，但是serverless和JAMstack隐隐有后来居上的趋势。这里解释一下serverless，并不是不使用服务器来部署网站，而是更多地依赖于支持云计算的服务器。

比如AWS Lambda就提供这样一种服务，可以让你处理简单的输入输出。配合AWS的API Gateway的话，你立马得到了一个不需要配置真实服务器就能进行交互操作的端口。再比如，AWS的S3可以让你上传各种静态文件，包括HTML、CSS、JS和图片等，无需进行任何处理，就能直接给用户呈现这些内容。这种方法的高明之处就是，你需要维护的东西超级少，费用也相对十分便宜，同时还会带来访问性能的大幅提升，因为静态文件基本无需处理就能直接传输给用户浏览器，有着最直接的提升用户体验的优势。

同样，这并不是鼓励大家去使用JAMstack，仅仅是用来示范一下全栈的生态是在不断发展着的，十分具有研究的意义。

现在的网站开发基本是这样子的，DevOps团队负责管理云资源和应用部署，后端负责开发API和包含lambda在内的中间件，前端则主要利用Javascript开发类似React、Vue的框架来使用后端提供的服务。前端可能也会大量使用到CSS，但是也许CSS可以归到设计团队？
这种分类目前看起来有清晰明显的分工，但是他们之间的界限正在慢慢变得模糊。

在继续深入之前，我们来谈谈侧重点

看完前面的描述，你也许会发现成为一个全栈还是挺诱人的。但是有必要在此强调一下侧重点的问题，不然很有可能你会成为一个什么都懂一点但是什么都不精通的“万金油”。

在试图成为一个开发者的时候，没有侧重点，是很危险的。首先，你需要分析一下自己是什么类型学习者，然后把学习重心放在自己认为最重要的部分，因为一个超长的学习列表并不能很快帮助你快速获取心仪的工作。比较合理的作法是，选取一个侧重点，比如成为一个可以独立部署自己应用的前端，并且能以此为基础继续学习其他的全栈技巧。

另外比较重要的一点是，成为一个全栈并不是说一定要精通x/y/z等编程语言。一个优秀的全栈应该熟识代码和软件设计的理念，并且能够发现、处理遇到的任何问题。

综上，找到最适合自己的切入点，不要让过高的野心成为你学习道路上的战争迷雾。

那么，我们从哪里开始？

本文建议按照传统的构成全栈的元素(前端，后端等。。。)来学习。当然，很多人可能不认可这个传统构成的存在，因为现在全栈开发的工作内容日新月异，坚守传统可能会让全栈这门职业走向一个死胡同。

随着学习的进行，我们会越来越推荐serverless的架构，因为他们会变得越来越常见，还能让你在就业市场变得更抢手。

下面我也会解释到，这并不意味着你需要学习所有的数据库类型和所有的加载方案。一个厉害的全栈同样不能局限于某个特定的框架或者某种特定的工具，了解代码和工具背后的逻辑十分重要。举个栗子，你可能现在主要用React工作，并且用的挺顺手的，但是谁知道你下一个工作中核心框架变成了Vue，甚至是可能没听过的Svelte。。。你需要了解的是为什么选用了当前的框架，面对不同的问题，需要发散的思维选择最合适的解决方法。

至此，我觉得我们可以正式开始学习了。

前端

首先，什么是前端？一个网站或者应用的前端一般指提供给用户进行交互操作的界面。

目前前端市场上最重头的就是Javascript，而React和Vue等都是基于Javascript而生成的比较成熟的前端框架。使用现成的框架会让前端开发变得异常简单，可能上手会比较慢，但是一旦熟悉了，开发特定的模块或者功能就会变得像搭积木一样容易。

最后，不管你是前端小白还是老司机，你都绕不开jQuery，即使现在Javascript已经发展到在很多时候能够完全替代jQuery。不过呢，我们还是建议仅仅了解jQuery的功能和用处就好，因为早期并不合适开啃jQuery这个巨头。即使是复杂的应用场景，原生Javascript配合现有的框架足够胜任，所以我们推荐从Javascript开始学习，上手简单，边学边用。

具体该学一些什么呢？

如果你是一个彻彻底底的门外汉，花点时间学习一下基本的HTML和CSS吧。
这俩块也许不如Javascript那么有趣和吸引人，但是不管任何学习，最重要的都是需要打好坚实的基础。
HTML和CSS就是了，不仅要看懂，最好要看透。

然后才是学习Javascript。在可以看到的将来，Javascript都将会是前端的无冕之王。基本上市面上所有的框架和库都是由Javascript写成的，因此了解Javascript的每一个细节将会帮你顺利度过前端学习的整个过程，尤其是当你需要深入了解某个框架是如何实现某一特定的复杂功能的时候。

说到前端框架，React和Vue可能是目前最好的学习选择。特别是React，他是目前前端框架中最受欢迎的，并且始终保持着良好的成长曲线，不断地在完善自己的框架和更新自己的API库来适应飞速发展的网络开发需求。

图片来自 https://2019.stateofjs.com/front-end-frameworks/#front_end_frameworks_section_overview

如果从Github里现有的React教程或者Gatsby开始React之旅，你甚至能立马部署一个可以正常使用的React应用并且开始对其中的代码进行修修补补。

这里又不得不再次提到CSS，我们不仅可以调用类似Sass的CSS预处理工具，还可以使用其他各具特色的方案比如CSS-in-JS。诚然，把CSS包含在Javascript里有优势也有劣势，但是我们没有必要纠结这个问题，大多数时候我们需要基于不同的团队、不同的项目，灵活地处理CSS和Javascript的关系。因此，无论你处在什么位置，使用什么框架，了解一些CSS的基本用法总是没错的。

后端

在JAMstack里，后端一般指前端进行动态交互操作所依赖的API，比如CRUD API。CRUD就是新建Create、读取Read、更新Update和删除Delete。这些操作一般在服务器端(也就是后端)进行，之后才能把修饰过的结果发送给客户端的浏览器。

那么我们从什么语言开始后端的学习呢？
日常生活工作中，仅仅学习一种代码是不够的，但是我们往往建议从NodeJS开始你的后端之旅。不仅仅因为前端学习中的Javascript相关知识会让你觉得NodeJS有一种十分熟悉的感觉(当然如果你先从NodeJS学习后端开始，转向前端学习Javascript的时候也会有同感)，而且NodeJS十分常用，大多数云服务都会提供相关支持。

除了NodeJS，python名头也不小，尤其是在数据分析和工程建模方面。
当然还有PHP，Ruby，市面上对这俩的需求同样存在，只是他们不如NodeJS和python那么欣欣向荣。

图片来自https://madnight.github.io/githut/#/pull_requests/2019/4

当你选好一门后端语言后，第一步最好开始学习如何建立一个可以直接调用的云服务。不管是用AWS还是Netlify还是其他任何云提供商，写一个简单的Lambda程序并且试着调用，这可以给到你一个最直观的工作体验。即使你的现实工作内容并不是lambda开发相关，你也能通过这种学习路径理解最基本的后端运作原理，并且以此为原点了解其他的服务、数据库以及开发自己的版本。

具体该怎么操作呢？

正如上文写到的，如果你已经在前端部分学习了Javascript，不妨在后端继续使用它。注册一个Netlify账号，写一个基本的function，在这里你只需要负责写好代码，Netlify会负责剩下的比如编译和部署。

当你逐渐熟悉自己选择的后端语言时，不妨试着调用一些第三方的API，例如用Twitter API来发送Tweet，或者试着自己建立一个数据库，然后编写最基本的方法来实现CRUD，这两个案例基本能覆盖现实世界APP可能用到的大部分操作。

阶段小目标是写一个可以供其他人调用的服务，好消息是现在各大厂商都在推广云服务，你可以有各种各样的免费试用的选择，所以放手去学习，去尝试吧。

DevOps和云

DevOps, Developers and IT Operations, 原旨在让开发写出的代码更快更流畅地被部署到生产环境。这其中包含的操作可多可少，可以是简单的bash脚本，也可以是一整套CloudFormation模板。DevOps在一些庞大而复杂的项目中扮演着十分重要的角色。

DevOps也在经历着日新月异的发展。Serverless的爆发导致了无服务框架的流行，AWS甚至被迫开发了自己的无服务解决方案SAM，这让DevOps变得更加容易上手。以前大家会依赖Jenkins之类的工具来进行持续开发和持续集成(CI/CD)，但是现在你能看到大的代码托管平台Github和Gitlab都有自己对应的工具(CircleCI)来帮助开发者对接他们的项目和代码。

即便如此，依然有很多需要完善的地方。写CloudFormation模板是十分枯燥的，写自动化脚本也是无趣的，但是当你发现自己写的模板能正常运行，还是会有满满的成就感。
同时，随着Zeit和Netlify的出现，DevOps越来越平易近人了。一开始Netlify只能用来部署静态站点，现在已经能支持像AWS Lambda一样的Function了，并且还比AWS的配置更简单(回头可以另写一篇文章介绍Netlify的Function)。

具体该学一些什么呢？

如果你是初次接触DevOps，不妨从Netlify开始。挑一个简单的React应用或者你Github仓库里的一个静态的html文件，部署到你新注册的Netlify账户里。

当你完成这一步，也算是有一些经验了。这时可以研究一下整个部署过程背后的细节。比如Netlify首先获取了你的代码，在自己的虚拟机上运行了你预设的命令(比如yarn build)，把你的主要文件上传到S3之类的存储空间，给你配置一个类似CloudFront的CDN等等。了解了这些之后，你就可以抛开Netlify，自己动手从AWS console和CLI里进行类似的操作，并且可以试着自己写一些Circle CI的脚本来自动化这些个过程。

再升一个台阶的话，可能就是要加入一些其他的需要启动的服务。比如你的应用是包含数据库的，你就可以用bash脚本或者CloudFormation来自动初始化这个数据库。
这样整个流程下来，你就可以几乎把所有的后台配置操作变成可复用的代码，即使应用出现问题，也能很快重启所有的服务。

除了AWS，Circle CI，你可以选用其他任何一个提供CI/CD服务的供应商，你喜欢就好，这都不重要。重要的是，仔细分析你的项目需求，了解所有部署背后的逻辑，这对你后期的学习成长很有帮助。

别忘了设计

对，你需要了解设计的基础，但是你不一定要成为一个设计师。

学一些设计会在很多方便加速你的成长。我们都知道视觉效果和用户体验设计师有神奇的魔力，他们能让你的应用变得，hm，至少在直观看来，相对成功一些。

开发的最终目的就是用各种可能的方式帮用户实现某些功能，好的的设计能让人很清楚地知道你的应用是怎么使用的，是用来干嘛的，理解这些才能让你的队员团结起来把力气用在正确的地方。

举个栗子，当一个后端开发被要求设计一个管理用户信息的API，设计需求是能管理用户姓名就好。基于这个需求，后端开发可能仅仅提供一个name的字段，但是这样的疏忽可能会给前端开发造成很大的麻烦，因为他们可能有时候需要把姓和名分开展示。这就是设计不够细心的后果。

设计也是能直接影响到产品的转化的。比如你设计一个电商网站，加入购物车的按钮看起来不像是一个按钮，用户就不会去点，进而去支付，那你就丢失了这个潜在的客户和订单。让你的产品设计稍微人性化一些真的会有很大的不同的。

最后，你还得确保用户看到的是你想呈现的。不同的人接受内容的方式不一样，你可能需要确保你设计的图像颜色、声音都能正常传达，从而所有人都能get到想要的信息。

具体该学一些什么呢？

我们不期待你学完整个设计课程，但是至少需要保持对设计的认知和好奇心，当下次看到设计相关的文章时，不要跳过，瞄一下也好。

其次，当设计一个方案的时候，试着想象一下你的作品将会如何被使用。比如team里的其他开发会如何使用你设计的接口，比如用户会期待看到什么样的使用界面等等。

如果你依然还是没有头绪，可以看看其他人是怎么设计的。比如要实现同样的功能，你会怎么设计你的应用。这并不是鼓励盗版或者侵权，而是建议你从他人的设计细节中寻找学习的点。为什么添加进购物车的按钮要设计得那么大，为什么要给产品图添加放大缩小的功能，为什么产品参数表要兼顾那么多的条目等等。。。

最后，设计的成品还要顾及到所有的可能用户。越来越多的人在意识到这一点，你也能在网上找到很多的相关资源。想象一下残障人士在面对你的应用时可能会遇到的问题，看看其他优秀的设计是怎么完善他们的产品的。大多数时候，兼顾这方面的设计并不是太难，而且当你养成习惯时，以后的设计都会很自然地考虑到所有方面。

如果你是一个初学者

好好学一下Git和Terminal吧。
百分百你以后会感谢我的。
挑一个趁手的代码编辑器也是很重要的，根据不同的学习路径来选。比如NodeJS就比较适合Visual Studio Code。

如果你想更上一层楼

太多太多值得一看的东西了。。。但是要记住，一定要有重点，贪多嚼不烂。所以这里仅仅稍微列举几个：
1. 以测试为推动的开发。
2. Chrome的DevTools。
3. Http Request。
4. 各种开源软件和框架比如npm。
5. 联系 https://twitter.com/colbyfayock ：)

好了好了，足够了。
如果你看完上面列举的所有教程资源，应该可以从头到尾独自开发一个应用了。
真正有意思的部分才刚刚开始。你会享受到创造一个事物的乐趣。。。

为了巩固前面的所有学习，现在你可以试着完成下面几项作业。
1. 开发一个支持浏览器访问的前端页面。
2. 开发一个可以正常调用的后端API接口。
3. 把你的部署过程用CI/CD脚本写出来。
4. 以上的所有过程中，都要考虑到是便于用户理解和使用的！

去吧，小火龙。。。

部分链接可能要进原文查看

weixin_39688687

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html如何和后端交互_2020年如何成为一个全栈（完）

翻译自https://www.colbyfayock.com/2020/02/how-to-become-a-full-stack-web-developer-in-2020原作者Colby Fayock 【https://twitter.com/colbyfayock】喜欢的可以关注他的twitter，了解更多的技术信息。费时一周，总算翻译完了同时还顺带上手了Vercel把自己多年...
复制链接

扫一扫