微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验ChatGpt plus版本的，咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home

在一直倒退的软件开发畛域，两种开创性的架构格调，微服务和微前端，曾经成为了变革性的范例。这些办法曾经从新定义了古代应用程序的构建和部署形式。微服务和微前端都秉承了模块化、可扩展性和灵活性的准则，曾经成为了寰球开发团队的首选。

什么是微服务？

微服务是一种架构格调，其中单体利用被划分为若干个小型、涣散耦合且独立的服务。所有这些微服务独特工作，造成一个更大的零碎。在微服务架构中，每个服务代表一个特定的业务能力，并作为一个领有本人的数据库和逻辑的独立单元运行。

微服务教程

步骤一：设定我的项目

为我的项目创立一个新的文件夹，并初始化一个新的 Node.js 我的项目。关上终端并运行以下命令：

mkdir microservices-tutorial
cd microservices-tutorial
npm init -y

步骤二：装置依赖项

npm install express axios

步骤3：创立微服务

对于这个教程，咱们将创立两个微服务："用户"服务和"订单"服务。"用户"服务将解决与用户相干的操作，而"订单"服务将解决与订单相干的操作。

在主我的项目文件夹内创立两个文件夹，名为“users”和“orders”。在每个文件夹内，创立一个 index.js 文件。

步骤4：施行微服务

让咱们从施行"用户"服务开始。关上users/index.js文件，并增加以下代码：

const express = require('express');const app = express();const port = 3000;app.get('/users', (req, res) => {  const users = [    { id: 1, name: 'John Doe' },    { id: 2, name: 'Jane Smith' },    { id: 3, name: 'Bob Johnson' },  ];  res.json(users);});app.listen(port, () => {  console.log('Users service is running on port ' + port);});

当初，实现"订单"服务。关上 orders/index.js 文件，并增加以下代码：

const express = require('express');const app = express();const port = 4000;app.get('/orders', (req, res) => {  const orders = [    { id: 1, product: 'Product A' },    { id: 2, product: 'Product B' },    { id: 3, product: 'Product C' },  ];  res.json(orders);});app.listen(port, () => {  console.log('Orders service is running on port ' + port);});

步骤5：微服务之间的通信

在这个步骤中，咱们将应用Axios从一个微服务向另一个微服务发送HTTP申请。咱们将批改"用户"服务，以从"订单"服务中获取订单。

请再次关上 users/index.js 文件，并增加以下代码：

const express = require('express');const axios = require('axios');const app = express();const port = 3000;const ordersServiceURL = 'http://localhost:4000';app.get('/users', async (req, res) => {  try {    const response = await axios.get(`${ordersServiceURL}/orders`);    const orders = response.data;    const users = [      { id: 1, name: 'John Doe', orders: orders.slice(0, 2) },      { id: 2, name: 'Jane Smith', orders: orders.slice(1, 3) },      { id: 3, name: 'Bob Johnson', orders: orders.slice(0, 1) },    ];    res.json(users);  } catch (error) {    res.status(500).json({ error: 'Internal server error' });  }});app.listen(port, () => {  console.log('Users service is running on port ' + port);});

步骤6：运行微服务

要运行微服务，请关上两个独自的终端，导航至我的项目文件夹，而后运行以下命令：

对于"用户"服务：

cd users
node index.js

对于"订单"服务：

cd orders
node index.js

步骤7：测试微服务

请关上您的网络浏览器，或者应用像Postman这样的工具来测试微服务。

要测试"用户"服务，请导航至 http://localhost:3000/users。它应返回用户列表及其关联的订单。

要测试"订单"服务，请导航至 http://localhost:4000/orders。它应返回一个订单列表。

当初已胜利地应用Node.js，Express.js和Axios创立了一个根底的微服务架构，其中两个微服务互相通信以满足用户申请。

什么是微前端？

微前端是一种网络开发架构模式，将微服务的准则扩大到网络应用的前端。它波及将网络应用的用户界面合成为更小的、涣散耦合的、能够独立部署的前端模块。每个模块代表利用的一个独特性能或个性，能够独立开发、测试和部署。

微前端教程

咱们通过一个简略的教程，理论理解一下微前端是如何运作的。

在这个例子中，咱们将应用 Express.js 来创立一个服务器，该服务器将各个微前端作为动态文件提供服务。咱们还应用 http-proxy-middleware 库依据URL门路将申请代理到适当的微前端。

步骤一：设置微前端架构

创立一个新的目录，并初始化一个新的Node.js我的项目：

mkdir microfrontend-examplecd microfrontend-examplenpm init -y

步骤二：装置依赖项

装置所需的依赖项：

npm install expressnpm install express-http-proxy

步骤3：创立微前端

创立两个微前端： frontend1 和 frontend2 。在我的项目目录内，创立一个 frontend1 目录并在其中创立一个 index.html 文件：

<!-- frontend1/index.html --><!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Frontend 1</title></head><body>  <h1>Frontend 1</h1></body></html>

同样地，创立一个蕴含index.html文件的 frontend2 目录：

<!-- frontend2/index.html --><!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Frontend 2</title></head><body>  <h1>Frontend 2</h1></body></html>

步骤4：创立微前端服务器

在我的项目根目录中创立一个名为 server.js 的新文件：

// server.jsconst express = require('express');const { createProxyMiddleware } = require('http-proxy-middleware');const app = express();// Serve frontend1app.use('/frontend1', express.static('frontend1'));// Serve frontend2app.use('/frontend2', express.static('frontend2'));// Proxy requests to the appropriate microfrontendapp.use('/microfrontend1', createProxyMiddleware({ target: 'http://localhost:3000/frontend1', changeOrigin: true }));app.use('/microfrontend2', createProxyMiddleware({ target: 'http://localhost:3000/frontend2', changeOrigin: true }));// Start the serverapp.listen(3000, () => {  console.log('Microfrontend server started on port 3000');});

步骤5：启动微前端服务器

在终端中，运行以下命令以启动微前端服务器：

node server.js

步骤6：拜访微前端

微前端和微服务是用于构建可扩大和模块化应用程序的架构模式，但它们解决的问题不同，实用的场景也有所不同。

  • 微前端在你领有一个简单的网络应用程序，须要多个团队独立地在用户界面的不同局部工作时会被应用。通过将前端合成为更小、自蕴含的模块，每个团队都能够独立开发和部署他们的性能，从而实现更快的开发周期和更容易的保护。这种办法在大型组织中特地有用，尤其是在有多个前端团队或须要逐渐现代化的遗留代码库的状况下。
  • 另一方面，微服务在设计应用程序的后端架构时被采纳。应用微服务，后端被划分为小型的，自治的服务，每个服务负责特定的业务能力。这促成了更好的可扩展性，故障隔离，以及服务的独立部署。对于具备简单业务逻辑，须要技术抉择的灵活性，以及可能独立扩大不同组件的应用程序，微服务是更好的抉择。

以下是一张图表，展现了微服务和微前端之间的差别。

总而言之，在解决前端复杂性和多个开发团队时应用微前端，在须要创立可扩大的模块化后端架构时抉择微服务。这两种模式在构建全面、解耦和灵便的零碎方面能够互相补充。

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。