关于javascript:微服务与微前端区别在哪里

48次阅读

共计 4483 个字符，预计需要花费 12 分钟才能阅读完成。

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 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

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

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

让咱们从施行 ” 用户 ” 服务开始。关上 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);
});

在这个步骤中，咱们将应用 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);
});

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

对于 ” 用户 ” 服务：

cd users

node index.js

对于 ” 订单 ” 服务：

cd orders

node index.js

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

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

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

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

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

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

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

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

mkdir microfrontend-example

cd microfrontend-example

npm init -y

装置所需的依赖项：

npm install express

npm install express-http-proxy

创立两个微前端：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>

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

// server.js
const express = require('express');
const {createProxyMiddleware} = require('http-proxy-middleware');

const app = express();

// Serve frontend1
app.use('/frontend1', express.static('frontend1'));

// Serve frontend2
app.use('/frontend2', express.static('frontend2'));

// Proxy requests to the appropriate microfrontend
app.use('/microfrontend1', createProxyMiddleware({ target: 'http://localhost:3000/frontend1', changeOrigin: true}));
app.use('/microfrontend2', createProxyMiddleware({ target: 'http://localhost:3000/frontend2', changeOrigin: true}));

// Start the server
app.listen(3000, () => {console.log('Microfrontend server started on port 3000');
});

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

node server.js

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

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

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

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

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

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

正文完

javascript

发表至： javascript

2023-08-22

0

关于javascript:英雄联盟拉丁美洲LLAAPI数据接口

关于javascript:从输入URL到渲染的过程中到底发生了什么

简洁的 React 状态管理库 – Stamen

关于javascript:重学-JavaScript-作用域和闭包

关于java:开源Java诊断工具Arthas开篇之watch实战

关于javascript:微服务与微前端区别在哪里

什么是微服务？

微服务教程

步骤一：设定我的项目

步骤二：装置依赖项

步骤 3：创立微服务

步骤 4：施行微服务

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

步骤 6：运行微服务

步骤 7：测试微服务

什么是微前端？

微前端教程

步骤一：设置微前端架构

步骤二：装置依赖项

步骤 3：创立微前端

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

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

步骤 6：拜访微前端

交换

Just My Socks（注册教程内含优惠码）

关于javascript:微服务与微前端区别在哪里

什么是微服务？

微服务教程

步骤一：设定我的项目

步骤二：装置依赖项

步骤 3：创立微服务

步骤 4：施行微服务

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

步骤 6：运行微服务

步骤 7：测试微服务

什么是微前端？

微前端教程

步骤一：设置微前端架构

步骤二：装置依赖项

步骤 3：创立微前端

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

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

步骤 6：拜访微前端

交换

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）