web全栈开发需要学什么—web全栈开发工程师是干什么的 收藏 0

如何成为优秀的WEB全栈工程师_前端设计师_网页设计师

通过WEB全栈工程师培训班的学习，学员有了一定的网页规划和搭建能力，能熟练快速完成网页界面设计、网站美工设计；能运用H5+JS进行开发前端交互设计能力，开发各种网页框架；能运用PHP等软件开发常见后台网站管理系统；通过网页网站实训模块，学生能熟练掌握门户网站，电子商务网站，企事业单位网站，垂直类网站等成套商业网站的设计流程，设计理念，设计风格等；通过软技能培训，学员对自己人生规划，口才表达，服务心态，就业技巧，沟通技巧等有了全面提升，足够应付在以后的就业工作过程中游刃有余；WEB全栈工程师培训课程学习完，学员基本上具备半年以上的工作经验。

非凡教育的网页设计培训课程包含但不局限于一下几个内容：

WEB前端HTML5/CSS3布局与样式：

HTML标签梳理

七组CSS基本样式

CSS3炫酷特效

选择器细解11大类

CSS布局四大技巧

响应式双法则

兼容性调试技巧

项目实战提经验

web前端JavaScript交互：

核心语法：

掌握JS的组成和语法,为进去代码的世界做铺垫,数据结构,不再看见代码而发愁

对象的创建方式和this详解,提前带你熟悉企业中变量的命名规则和规范

熟悉JS中的数据类型,流程控制,循环语句,轻松让你在网页上写出九九乘法表,计算器等

对象类型：

基本数据类型(number、string、boolean、undefined、null)

引用数据类型( 数组 array .. 函数 function … 对象 object)

掌握不同对象类型之间的转换

BOM与DOM操作：

DOM操作和BOM操作大全,轻松操作网页上的每一个按钮等,同时给他们加上不同的功能

利用JavaScript代码实现酷炫特效,京东首页轮播图升级版

页面布局,结合H5代码,让你的网页功能更加全面,可以1:1写出小米官网首页及功能

熟悉事件处理,让你的代码更加严谨,相同的页面效果,写的代码更少

浏览器兼容性处理,让市面上的不同浏览器品牌,打开你的网页效果不会有差别

事件编程：

Javascript的事件机制,了解底层,才能写出更严谨的代码,企业开发常见事件的使用详解

offset家族和scroll家族,了解浏览器和代码之间的关系

键盘事件及键盘码的属性,让你的键盘能和钢琴一样,按下之后有不同的声音

Web3全栈开发指南

本文将详细介绍Web3 DApp开发的架构、技术，以及使用哪些工具，并给出完整示例。我们先介绍Web3用到的技术：区块链，以以太坊（Ethereum）为主流，也包括Solana、Aptos等其他非EVM链。区块链本身是软件，需要运行在一系列节点上，这些节点组成P2P网络或者半中心化网络。节点不仅负责接收新的输入并生成新的区块，还需要存储区块链运行时产生的所有数据，并负责同步、对外提供查询等RPC服务。钱包：帮助用户管理自己在区块链上资产的软件，加密存储用户的私钥。当用户需要和区块链交互时，就需要用到私钥签名；智能合约：运行在区块链上的一段托管程序，主要用来和外部账户交互；UI：这里特指前端页面，因为直接通过RPC调用合约仅限个别高级用户，普通用户仍需要一个前端页面，并通过JavaScript脚本配合钱包签名与合约交互。因为区块链上所有数据全透明，要查询任意区块的数据，可以通过EtherScan这个网站查。其他公链，无论是与Ethereum兼容的BSC、Polygon，还是不兼容的Solana、Aptos等，也提供类似XxxScan这样的查询网站。这些Scan能提供基本的读写合约的能力，有助于开发阶段的测试。区块链本身以及钱包、EtherScan等属于基础设施，如何基础设施不在本文讨论范围之内。本文仅限定如何开发DApp。一个完整的DApp需要开发以下部分：智能合约：将逻辑写入合约，并部署在链上；UI：为用户提供一个交互式UI，配合钱包完成特定功能。此外，对后端开发有经验的同学应该知道，通常来说，App数据会存储在数据库中，前端与后端交互，离不开后端对数据的查询和修改。在DApp中，同样需要一个查询的“后端”，但这个后端通常不是数据库。有的同学会认为，既然节点本身提供了查询链上全部数据的PRC接口，那么，前端直接查询节点是否可行？答案是不行。因为节点提供的数据，是用户产生的原始日志。举个例子，假设有个NFT合约，允许用户创建NFT，那么，一段时间内，节点产生的日志如下：用户A创建了NFT-1；用户B创建了NFT-2；用户B把NFT-2转移给了用户X；用户C创建了NFT-3；…这些未经聚合处理的数据没法生成一个不断更新的数据库表：OwnerNFT ID用户A1用户X2用户C3所以，一个DApp除了前端外，还需要一个后端服务，它主要功能是不断聚合链上产生的数据，并根据DApp的业务需求设计表结构以方便查询。一个直观的想法是用Java或者Go语言等编写一个后端服务，再配上一个数据库，就可以为前端提供REST API来实现查询。只不过自己维护后端服务比较麻烦，还需要租用云端服务器、数据库等资源，费时费力。我们推荐另一种后端服务：The Graph。它本身也可看作是一个基础设置。The Graph可以让我们部署一个Graph查询服务，如何定义表结构以及如何更新则由我们提供一个预编译的WASM。整个配置、WASM代码以及查询服务都托管在The Graph中，无需自己搭建服务器，非常方便。因此，一个完整的DApp架构如下： ┌───────┐ ┌───────────│ DApp │───────────┐ │ └───────┘ │ │ read/write query │ │ contract data │ ▼ ▼┌───────┐ ┌───────┐│Wallet │ │ Graph │└───────┘ └───────┘ │ ▲ │ sign index │ │ broadcast data │ │ │ │ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ │ ┌────┐ ┌────┐ ┌────┐ │ │ └──┼▶│Node│ │Node│ … │Node│───┘ └────┘ └────┘ └────┘ │ │ Ethereum ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘我们看看开发各个组件所需的技能树需求。由于本文仅讨论ETH以及ETH兼容链的DApp开发，所以，以下技能树仅适用于ETH系：合约开发：使用Solidity语言；合约部署工具：可以选择Hardhat、Truffle或Foundry，建议使用Hardhat；数据聚合服务：选择The Graph提供的托管服务；数据聚合开发：The Graph给出的模板代码是TypeScript，因此这里使用TypeScript；前端页面：HTML+JavaScript/TypeScript，也可配合任意前端框架如Vue、React等；合约交互框架：虽然理论上使用JSON RPC就可以读写合约，但使用Ethers.js可以大大简化开发；钱包支持：如果仅支持MetaMask，则使用Ethers.js已足够，如果要支持多种钱包，尤其是需要连接手机钱包，则需要使用Web3Modal。综上所述，我们可以总结一个基本的Web3全栈开发技术需求：Solidity语言；JavaScript语言；TypeScript语言；HTML/CSS等前端技能。以及用到的服务：将所有源码托管在GitHub；使用The Graph提供的Hosted Service；使用GitHub Page实现静态页托管；可选：绑定一个域名。下面我们以一个具体的项目来演示Web3全栈开发的完整流程。该项目允许用户在Polygon上创建属于自己的NFT卡片，并可在页面查看链上铸造的所有NFT卡片：图片Polygon是兼容以太坊的PoS链，特点是Gas便宜，速度快，领测试币方便。编写合约创建Web3 DApp的第一步是编写合约。我们使用Hardhat工具，它是Node.js开发的，确保本机安装了Node.js和NPM，先安装Solidity编译器：$ npm install -g solc$ solc –versionsolc, the solidity compiler commandline interfaceVersion: 0.8.17然后创建目录web3stack并安装Hardhat：$ mkdir web3stack$ cd web3stack$ npm install –save-dev hardhat然后输入命令npx hardhat开始创建一个新的合约项目：$ npx hardhatHardhat提示选择项目类型：? What do you want to do? …❯ Create a JavaScript project Create a TypeScript project Create an empty hardhat.config.js Quit这里选择JavaScript项目。后续接着提示项目根目录、是否添加.gitignore、是否安装相关依赖等：✔ What do you want to do? · Create a JavaScript project✔ Hardhat project root: · /path/to/web3stack✔ Do you want to add a .gitignore? (Y/n) · y✔ Do you want to install this sample project\’s dependencies with npm (@nomicfoundation/hardhat-toolbox)? (Y/n) · y全部按默认值来。完成后查看package.json应该有两个dev依赖：{ \”devDependencies\”: { \”@nomicfoundation/hardhat-toolbox\”: \”^2.0.1\”, \”hardhat\”: \”^2.12.7\” }}Hardhat默认创建了一个Lock合约，以及相关配置。我们可以自己再写一个Card合约：// SPDX-License-Identifier: GPL-v3pragma solidity =0.8.17;import \”@openzeppelin/contracts/token/ERC721/ERC721.sol\”;contract Card is ERC721 { …}直接编译：$ npx hardhat compileError HH411: The library @openzeppelin/contracts, imported from contracts/Card.sol, is not installed. Try installing it using npm.编译提示找不到library报错，因为我们引用了OpenZeppelin的库，所以要先用NPM安装一下：npm install –save @openzeppelin/contracts这条命令会在package.json中添加一个新的依赖：{ … \”dependencies\”: { \”@openzeppelin/contracts\”: \”^4.8.1\” }}再次编译：npx hardhat compile生成的合约存放在artifacts/contracts/Card.sol/Card.json，它包括了ABI接口、字节码等所有信息。部署合约就是把字节码部署到链上。Hardhat提供了一个示例代码script/deploy.js用于部署Lock合约，我们可以仿照这个脚本，复制一份script/deploy-card.js来部署Card合约：const hre = require(\”hardhat\”);async function main() { // 合约工厂: const Card = await hre.ethers.getContractFactory(\”Card\”); // 部署: const card = await Card.deploy(); await card.deployed(); // 打印部署的地址: console.log(`Card deployed to ${card.address}`);}main().catch((error) => { console.error(error); process.exitCode = 1;});部署时，直接运行脚本：$ npx hardhat run scripts/deploy-card.js但是，我们并没有在本地配置任何关于链的信息，也没有配置私钥等账户信息，这个合约是不可能部署到链上的，那它部署到哪了？实际上合约默认部署到Hardhat提供的“虚拟JavaScript环境”，它可以在本地用Node执行合约代码，主要用于测试。要部署到真实的链上，我们首先要在hardhat.config.js中加一点关于链的配置：module.exports = { … // 定义所有的链: networks: { // 定义名为testnet的链: testnet: { // 配置私钥: accounts: [\’0x72b3…bd2b\’], // 配置为Polygon Testnet节点的PRC: url: \”https://matic-mumbai.chainstacklabs.com\” } }, …}这里为了方便我们把私钥直接写进配置里，实际开发可从环境变量读取。在部署前，确保私钥对应的地址有一点MATIC测试币。可以从这里领测试币。然后用带–network参数的命令部署：$ npx hardhat run scripts/deploy-card.js –network testnet如果部署成功，则显示Card合约被部署的地址：Card deployed to 0x8131aa1B766966f9F8ec3E1132D9d29D92311AB0在PolygonScan上就能查看该合约。顺便可以将合约源码在PolygonScan上验证，验证后即可在PolygonScan对合约进行基本的读写操作。开发DApp UIDApp UI就是前端页面，既可以手写HTML+JavaScript，也可以使用React、Vue等任何前端框架与Webpack等前端工具。为了简化开发流程，这里我们直接手写一个index.html页，让用户能在页面创建一个NFT。页面引入的第三方库包括jQuery、Bootstrap CSS、Vue，以及用于合约交互的Ethers.js：<script src=\”https://cdn.jsdelivr.net/npm/ethers@5.0.32/dist/ethers.umd.min.js\”></script>安装了MetaMask插件后，页面会获得一个注入的window.ethereum全局变量，通过此变量与钱包进行交互，例如，连接钱包：await window.ethereum.request({ method: \’eth_requestAccounts\’,});调用合约方法则使用Ethers.js。下面的代码创建了Card合约并调用mint()方法创建NFT：async function () { // 创建合约: let contract = new ethers.Contract( // 合约地址: \’0x8131aa1b766966f9f8ec3e1132d9d29d92311ab0\’, // 合约的ABI接口 \'[{\”inputs\”:…]\’, // 钱包签名对象: new ethers.providers.Web3Provider(window.ethereum, \”any\”).getSigner() ); // 调用mint()方法: let tx = await contract.mint(); // 等待1个确认: await tx.wait(1); // TODO: 解析tx的日志并拿到TokenID}异步调用mint()方法时，会拉起MetaMask，提示用户对交易进行签名。签名后返回tx对象代表已发送的交易。等待1个确认后，如果要获取交易信息，则需要解析tx的日志以便拿到Token ID等信息。最后注意到合约的ABI接口包含了合约完整的读写方法以及输入输出，它是一个JSON对象，这里以字符串形式传入。Card合约的ABI可以在Card.json中找到并复制出来，不过我们可以使用Hardhat的一个插件直接输出ABI文件。我们先用NPM安装插件：$ npm install –save-dev hardhat-abi-exporter然后在hardhat.config.js中添加插件配置：// 用require引入插件:require(\’hardhat-abi-exporter\’);…module.exports = { … // 使用ABI Exporter插件: abiExporter: { // 输出到abi目录: path: \”./abi\”, clear: false, flat: true, pretty: false, // 编译时输出: runOnCompile: true, }};再运行一次编译，我们就可在abi目录下看到若干.json文件。找到Card.json，整理下格式，变成一个字符串粘贴至HTML：…window.NFT_ABI = \'[{\”inputs\”:[],\”stateMutability\”:\”nonpayable\”,\”type\”:\”constructor\”}…\’;…这样，通过前端页面，就可以调用合约方法。通过mint()方法写入后，NFT已经生成，在PolygonScan查找对应的tx可查看详细信息。通过PolygonScan的Read Contract页面调用getImage()可获得NFT图片信息：图片把返回的data:image/svg…复制到浏览器的地址栏，可查看图片：图片也可在OpenSea等第三方NFT市场看到该NFT的图片。不过我们还有最后一个问题，就是如何在我们自己的页面上展示用户创建的NFT。有的同学会想到在页面调用Card合约的读方法，依次读出每个NFT的信息，这种方式会非常慢，因为需要反复多次调用读方法，且无法实现条件查询，比如根据地址查询该地址拥有的NFT，或者创建于一个月内的NFT。因此，我们还需要用到The Graph提供的数据聚合服务。创建Graph查询为了创建Graph查询，我们需要使用The Graph提供的托管服务。先注册The Graph，然后安装全局命令行工具，只需运行一次：npm install -g @graphprotocol/graph-cli安装后可使用命令graph，例如查看版本：$ graph –version0.38.0第二步是在The Graph的Hosted Service – My Dashboard – Add Subgraph创建一个项目，创建成功后The Graph显示状态为未部署（Not Deployed）。为了把Subgraph部署上去，我们在本地项目根目录创建一个subgraph目录，然后在此目录下执行命令：$ graph init –product hosted-service michaelliao/web3stack注意将登录名替换为你的GitHub用户名，将项目名替换为The Graph上创建的项目名。接下来依次输入信息：选择协议的类型：选ethereum；填写subgraph名称：用默认的名称；填写目录名：用默认目录名；选择链：选mumbai（Polygon的测试链）；填写合约地址：填入部署的地址0x8131…1ab0；尝试自动获取ABI，一般都能成功；填写从指定的块开始：查看合约部署的TX所在块填入区块高度；填写合约名字：与合约代码保持一致，此处必须为Card；是否索引事件：默认是。接下来会安装一系列依赖。如果填写的信息有问题，或者NPM运行出错，删掉subgraph目录再来一遍即可。然后按照提示，先运行graph auth输入The Graph给的一个Access Token，然后进入subgraph/web3stack目录，运行：npm run deploy几秒钟后，就可以在The Graph提供的Playground输入查询并查看结果：图片为什么我们可以直接查询transfers？首先，我们查看schema.graphql，默认有3个Entity，把Entity看作是数据库表，这3个Entity是The Graph根据合约定义的Event自动生成的：type Approval @entity(immutable: true) { …}type ApprovalForAll @entity(immutable: true) { …}type Transfer @entity(immutable: true) { …}但并不是我们的业务需要的。我们需要的是Card类型，包括owner、image等信息。因此，删掉自动生成的代码，换成我们自定义的Card：type Card @entity(immutable: false) { id: String! owner: Bytes! blockNumber: BigInt! blockTimestamp: BigInt! transactionHash: Bytes! image: String!}其中，id是唯一主键，这里用NFT的Token ID即可，但类型是String而不是BigInt。接下来，在subgraph.yaml中定义了如何处理事件，需要修改的有两处，一是entities，删除原有的3个Entity，换成我们定义的Card：dataSources: – kind: ethereum … mapping: … entities: – Card二是在eventHandlers中删除我们不关心的Approval和ApprovalForAll事件，仅保留Transfer：dataSources: – kind: ethereum … mapping: … eventHandlers: – event: Transfer(indexed address,indexed address,indexed uint256) handler: handleTransfer当The Graph的节点扫描到我们部署的合约产生了Transfer事件后，它将调用handleTransfer处理，这个函数定义在src/card.ts中，自动生成的代码如下：export function handleTransfer(event: TransferEvent): void { let entity = new Transfer( event.transaction.hash.concatI32(event.logIndex.toI32()) ) entity.from = event.params.from entity.to = event.params.to entity.tokenId = event.params.tokenId entity.blockNumber = event.block.number entity.blockTimestamp = event.block.timestamp entity.transactionHash = event.transaction.hash entity.save()}因此，每捕获到一个Transfer事件，会保存一个Transfer的Entity，这就是我们前面在The Graph的Playground中能查询transfers的原因。现在我们不需要Transfer这个Entity，改成Card，先定义Card这个Entity：export class Card extends Entity { …}再修改handleTransfer()的代码：export function handleTransfer(event: TransferEvent): void { let tokenId = event.params.tokenId; let contract = CardContract.bind(event.address); if (event.params.from.equals(Address.zero())) { // 如果from=0，表示创建了新的NFT: let nft = new Card(tokenId.toString()); nft.owner = event.params.to; nft.image = contract.getImage(tokenId); nft.blockNumber = event.block.number; nft.blockTimestamp = event.block.timestamp; nft.transactionHash = event.transaction.hash; nft.save(); } else { // from!=0，表示NFT发生了转移，需要更新owner和image: let nft = Card.load(tokenId.toString()); if (nft === null) { log.error(\’failed load NFT by token: {}\’, [tokenId.toString()]); } else { nft.owner = event.params.to; nft.image = contract.getImage(tokenId); nft.save(); } }}再次运行npm run deploy，我们可以在The Graph的Playground中查询到cards：图片这样，支持页面显示的后端查询服务就准备就绪。下一步，我们在页面中添加一点查询代码：async function query() { let query = { \”query\”:// 输入为Graph查询字符串:`{ cards(first: 20, orderBy: blockTimestamp, orderDirection: desc) { id owner image }}` }; // 调用jQuery发送POST请求并获得JSON结果: let opt = { type: \’POST\’, dataType: \’json\’, contentType: \’application/json\’, // 与Graph服务接口保持一致: url: \’https://api.thegraph.com/subgraphs/name/michaelliao/web3stack\’, data: JSON.stringify(query) }; let result = await $.ajax(opt); let cards = result.data.cards;}拿到查询结果，我们就能直接在页面展示：图片最后一步就是把页面发布到GitHub Pages，然后绑一个域名，就可以让用户访问了：https://web3stack.itranswarp.com至此，一个完整的DApp就开发完毕。FAQQ：可以不用The Graph，自己写后端服务吗？A：可以，很多需求，例如用户实名认证、发送Email是The Graph服务无法支持的，必须自己编写后端服务，配合数据库实现。Q：可以同时支持多链吗？A：可以，用户在钱包切换链时，DApp可以通过chainChanged事件拿到链ID，提前配置好链ID与不同链的合约地址，就可以正常在不同链调用不同合约。Q：可以支持多种钱包吗？A：可以，需要使用Web3Modal这个库，能简化连接多个钱包的代码。小结从本文给出的完整示例来看，Web3全栈开发，最适合前端开发人员。当年国外有个前端开发叫Hayden，在17年失业了，他决定自学Solidity并花了几个月的时间为以太坊开发了一个DeFi应用，后来这个应用火爆了，它叫Uniswap。

请收藏！2023年全栈开发人员实战进阶指南终极版

全栈工程师在过去十年中越来越受到欢迎，而且在国内的就业环境下，它是更适合从技术转管理的职位。

但究竟什么是全栈工程师？他需要哪些技术能力？如何才能成为一名优秀的全栈工程师？今天这篇文章就给大家全方位分享一下。

现代 web 应用由两层组成：前端和后端。前端，也被称为客户端，由内容、内容的展示和布局以及互动性元素组成。它包括用户在屏幕上看到的并可以与之互动的所有可见部分。后端，也被称为服务器端，包括一个运行代码的服务器，它有必要的逻辑来接收、处理以及加工请求，还有一个用于安全地存储用户数据的数据库。它包括用户不直接知道的所有幕后过程。

栈是技术的集合，指的是软件、工具、编程语言、框架和数据存储技术的组合，它们共同构建和运行 web 应用。

有许多技术栈。最流行的 JavaScript 语言的栈之一是 MERN，它代表 MongoDB、Express、React 和 NodeJs。

全栈工程师是在前端和后端 Web 开发方面都具有专业知识的专业人员，从头到尾构建一个 web 应用的工程师。他们对各种编程语言、框架和工具有深入的了解。

全栈开发是科技行业最抢手的工作之一。据 Glassdoor 称，在美国，全栈开发人员的平均年薪为114,000 美元。Indeed 列出的平均年薪为 120,749 美元。而 Stack Overflow 的开发者调查显示，全栈开发者的平均工资为 14 万美元。

成为全栈开发人员的主要优势之一是您可以同时从事 Web 应用程序的前端和后端工作。这使您更加多才多艺，成为任何团队的多面手和宝贵资产。另一个优势是 Fullstack Developers 可以更好地理解 Web 应用程序作为一个整体是如何工作的，需要批判性思维和解决问题的能力，这可以帮助他们设计和开发更好的应用程序。

要成为全栈开发人员，您需要精通 JavaScript、Python、Ruby 或 Java 等编程语言。您还需要精通 HTML、CSS 等前端和后端技术，以及 React、Angular 和 Django 等框架。对数据库、API、DevOps 和云服务的良好理解也很重要。

作为一名全栈工程师，了解互联网的工作原理并熟悉一些网络术语，如 DNS 和 IP 地址，会让你受益匪浅。要了解更多关于 DNS、IP 地址以及互联网如何运行的信息，例如：网络是如何运作的，客户端-服务器模型和 web 应用程序的结构，什么是域名系统、DNS 服务器和 IP 地址。

你还需要知道 HTTP（超文本传输协议），这是万维网的基础，因为它管理着客户（如 web 浏览器）和服务器之间的通信。例如：什么是 HTTP？HTTP 是如何工作的，为什么它很重要？掌握 HTTP 网络协议。

具体而言，你需要了解 HTTP 请求方法（如 GET、POST、PUT、PATCH 和 DELETE）和 HTTP 响应代码（如 200、404 和 500），用代码实例解释 Get、Put 和 Post。

只有三种前端 web 语言在所有现代网络浏览器中运行：HTML、CSS 和 JavaScript。

HTML（超文本标记语言的简称）定义了网页的结构和内容，如文本、链接、表单、图像、视频等。

CSS（层叠样式表的简称）对 HTML 内容设计样式，并使其具有美感——它决定了网页的外观和感觉。CSS 负责确定页面上元素的大小、显示、布局和呈现。CSS 还负责使网页在所有屏幕尺寸上都能使用。

JavaScript 是一种动态脚本编程语言，用于在浏览器中运行。它是唯一可以用于前端 web 开发的编程语言，是 web 开发的重要组成部分。它与 HTML 和 CSS 一起被用来创建交互式网页。

Git 和 GitHub 是开发工作流程的核心部分，是每个软件开发工作中使用的工具。

Git 是一个分布式的版本控制系统，它提供了一种方法来对你的项目进行修改、备份这些修改、跟踪它们，甚至在需要时回溯到它们。它还可以让你在同一时间与其他团队成员协作。

GitHub 是一个在线托管服务，让你更容易使用 Git，是你和你的团队上传和审查代码的地方。

当你理解了 JavaScript 的核心概念，你就可以继续学习 JavaScript 的前端库和框架之一。

前端库是预先写好的可重复使用的代码，包含各种函数、方法或对象，你可以在你的 JavaScript 项目中使用，以执行任务和实现特定功能。而 web 框架是一种工具，可以使创建 web 应用更容易、更快速。根据 2022 年 Stack Overflow 调查，最受欢迎和最常用的 JavaScript 库是 ReactJS。

还有其他框架你可以使用和考虑学习，如 Vue、Angular 和 Svelte。每个框架都有其组织和编写代码的方式，以及其自身的优势和局限性。

作为全栈 web 开发人员，你需要了解前端技术和后端工具，所以你还需要能够使用服务器端的脚本编程语言。有很多可供选择的语言，如 Python、Ruby 和 Java。尽管 JavaScript 被广泛用于前端开发，近年来，因为 NodeJS，它也被用于后端网络开发。

NodeJS 是一个提供后端功能的 JavaScript 运行时，旨在建立动态可扩展的 web 应用。

首先，学习如何使用 NPM，这是一个 Node 包管理器，用于安装和管理 JavaScript 包的本地依赖。它是专门为与 NodeJS 一起使用而设计的。

作为一名全栈工程师，你将与数据库打交道，因为你所开发的大多数 web 应用都有一个数据库。你将花很多时间编写数据库查询，以获取你需要的数据。

数据库是一个存储容器——一个存储项目中所有数据的地方，如用户数据。

有两种主要的数据库类型：

• SQL 或关系型数据库，也被称为 SQL 数据库，它以结构化的、有组织的、表格的形式存储数据。
• 非关系型或 NoSQL 数据库，它们不以表格形式存储数据。

一个数据库有一个叫作数据库管理系统（DBMS）的程序，它作为数据库之间的接口，允许用户或程序来检索、更新和管理数据。

为了与关系型数据库通信并操作存储的数据，你要使用查询语言，如 SQL（结构化查询语言的简称）来查询它们。如果你想开始使用 NoSQL 数据库管理系统，MongoDB 是一个不错的开始。要开始使用 MongoDB，请查看这些课程。

作为全栈开发者，还有很多其他的工具和技术需要学习，比如Git的版本控制，AWS的云计算，Docker的容器化。

A. 前端框架：前端框架是一组预先编写的代码，可帮助开发人员构建更快、更高效的用户界面。一些流行的前端框架包括 React、Angular、Vue.js 和 Bootstrap。

B. 后端框架：后端框架帮助开发人员构建 Web 应用程序的服务器端。这些框架包括 Django (Python)、Ruby on Rails (Ruby)、Express.js (JavaScript) 和 Laravel (PHP)。

C. 数据库：数据库用于存储和管理网络应用程序的数据。一些流行的数据库包括 MySQL、PostgreSQL、MongoDB 和 Oracle。

D. 云服务：云服务为开发人员提供了对运行 Web 应用程序所需的基础设施和服务的访问权限。云服务的示例包括Amazon Web Services (AWS)、Microsoft Azure和Google Cloud Platform。

E. DevOps 工具： DevOps 工具帮助开发人员简化 Web 应用程序的部署过程。一些流行的 DevOps 工具包括 Docker、Jenkins、Kubernetes 和 Git。

F. API： API（应用程序编程接口）允许开发人员集成不同的软件系统和服务。一些流行的 API 包括 Google Maps API、Facebook API 和 Twitter API。

G. 编程语言：全栈开发人员需要了解多种编程语言来构建 Web 应用程序。一些流行的编程语言包括 JavaScript、Python、Ruby、PHP 和 Java。

成为一名全栈是一项艰巨的任务，不仅要拥有坚实的编程基础、学习前端和后端技术以及掌握数据库、云计算平台和 DevOps 工具等关键工具和技术，更要要有正确的心态与决心。

请记住，无论你想从事任何一种职业，并且获得成功，充满热情并乐于接受新事物和新想法非常重要。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com