最近，越来越多的人开始关注复杂的现代 web 开发所必需的整体架构和组织结构。特别地，我们看到了一些模式出现，它们将前端巨石应用分解成更小、更简单的块，这些块可以独立开发、测试和部署，同时在客户看来仍然是一个单一的内聚产品。我们将这种技术称为微前端。有很多方案都可以被称为微前端。接下来，我们将会介绍这些方法的利弊。这些方案通常都有一个共同之处：应用程序的每一个界面都是一个微应用，并且有一个容器应用
转载
2024-04-29 21:51:31
54阅读
qiankun文档点击跳转
首先创建两个项目qiankun-base 基座qiankun-vue 子应用基座基础配置App.vue 建立一个element-ui的菜单用来跳转
<template>
<div>
<el-menu router mode='horizontal'>
<!-- 基座中可以放自己的路由 --&g
转载
2024-03-15 21:27:29
76阅读
首先，什么是微前端微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。简单来讲就是当我们项目越来越大，越来越复杂，新的技术和老的技术相互纠缠，开发的人员越来越多，代码量也随之水涨船高的时候，我们就需要用微前端，将互不关联的需求，新老不
转载
2023-08-02 21:17:28
172阅读
微前端的消息总线,主要的功能是搭建模块与模块之间通讯的桥梁.黑盒子问题1:应用微服务化之后,每一个单独的模块都是一个黑盒子, 里面发生了什么,状态改变了什么,外面的模块是无从得知的. 比如模块A想要根据模块B的某一个内部状态进行下一步行为的时候,黑盒子之间没有办法通信.这是一个大麻烦.问题2每一个模块之间都是有生命周期的.当模块被卸载的时候,如何才能保持后续的正常的通信?ps. 我们必须要解决这些
转载
2024-05-13 22:24:33
49阅读
前言上文记录了如何在项目中接入 micro-app，本文主要记录下微前端基座应用和子应用之间的数据通信。一、 基座应用向子应用发送数据方式1：通过 data 属性发送数据<template>
<micro-app
name='appname-vue3'
:url='url'
baseroute='/app-vue3'
:data='microA
转载
2024-04-19 09:41:09
243阅读
设想一个场景，你需要使用微服务构建电子商务应用程序。你可以为客户、订单、产品、购物车等提供微服务，微服务暴露 API 给前端使用。但是，微服务提供给前端的数据可能不会按照前端需要的方式进行编排或过滤。这种情况下，前端需要一些逻辑来重新处理这些数据，同时在用户端使用这样的逻辑会占用更多的浏览器资源。在这样的情况下，我们可以使用 BFF 将一些前端逻辑转移到中间层，中间层就是 BFF。当前端请求一些数
转载
2024-05-11 20:36:17
21阅读
版本：CamdenSR1SpringCloud特点:约定优于配置、开箱即用，快速启动、适用于各种环境、轻量级组件、组件的支持很丰富，功能齐全（配置中心，注册中心，智能路由）、选型中立（EuraKa、Zookeeper、consul）。把maven项目转换成gradle项目 在文件夹立打开命令行窗口，输入： fradle init --type pom 即可会生成一个build.gra
转载
2024-07-10 11:55:11
78阅读
# 微服务架构中前端如何调用服务
## 引言
随着互联网的不断发展，越来越多的企业选择使用微服务架构来构建他们的应用程序。微服务架构将一个大型的单块应用程序拆分成多个小的、独立的服务，每个服务都有自己的数据库和业务逻辑。这种架构的优势在于，可以实现高度的可扩展性、灵活性和可维护性。
然而，在微服务架构中，前端如何调用服务却是一个需要解决的实际问题。本文将探讨前端如何与后端微服务进行通信，并提供
原创
2023-11-08 11:31:07
233阅读
浅析微前端框架 single-spa一、应用场景将一个单体大型应用，转化为多个可以独立运行、独立开发、独立部署、独立维护的应用的聚合。 解决的问题： 1、随着项目迭代应用越来越庞大，难以维护。 2、跨团队或跨部门协作开发项目导致效率低下的问题。二、基于 single-spa 二次开发的微前端解决方案（蚂蚁金服的 qiankun）(qinkun 文档地址)：https://qiankun.umijs
转载
2024-03-26 07:50:50
295阅读
在前端javascript代码中直接调用webService服务，可以将后台调用webService的业务代码转移到前台，这样做的好处是：1)减少了后台编码量；2)在特定的情况下有助于减轻服务器压力，节省服务器资源；3)有效提高服务器端的资源利用率；但是也存在一定的弊端：1)前端javascript编码的稳定性一直以来备受诟病；2)并且对不同浏览器的编码调试比较麻烦；对于JavaScriptSOA
继续学习最近一直在使用Asp.Net Core SignalR(下面成SignalR Core)为小程序提供websocket支持,前端时间也发了一个学习笔记，在使用过程中稍微看了下它的源码,不得不说微软现在真的强大,很多事情都帮你考虑到了,比如使用Redis,使用Redis后,你的websocket就支持横向扩展了,使用的方式也特别简单,只需要在services.AddSignalR的后面再加上
1.前端调用后台:建议用你熟悉的一门服务端程序，例如ASP,PHP,JSP,C#这些都可以，然后把需要的数据从数据库中获得，回传给客户端浏览器(其实一般就是写到HTML中，或者生成XML文件)然后在用JS获得。2.js只是前端的语言，它还没有访问数据库的能力。不过它可以向某个URL发送请求，并获得返回的数据。这个会用到Ajax技术。用AJAX，页面不刷新，只提交字符串到后台导入数据库通过纯Angu
转载
2023-10-16 22:00:09
272阅读
微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。由此带来的变化是，这些前端应用可以独立运行、独立开发、独立部署。以及，它们应该可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Tag、Git Submodule 来管理。注意：这里的前端应用指的是前后端分离的单应用页面，在这基础
转载
2024-05-06 10:21:21
56阅读
目录一.须知二.主应用配置2.1 main.js2.2 app.vue三.微应用配置3.1 注册3.1.1 vue.config.js配置3.1.2 新增文件 publicPath.js3.1.3 不同微应用vue版本的main.jsvue2vue33.1.4 命名空间要保证唯一性四.参考文章[强烈推荐]如何创建Vue3项目 一.须知本文基于同一服务器不同端口进行配置主应用: 支持任意技术栈,无
转载
2024-04-26 18:15:35
85阅读
最近看了字节跳动技术团队写的《前端微服务在字节跳动的打磨与应用》这一篇文章，对其中的服务注册和动态加载模块比较感兴趣，再加上之前做过一些类似的东西，所以就花了点时间做了一些简单的实践。希望可以帮助到大家。我对微服务的理解我理解的微服务，本质上就是把一个大型的应用拆分为很多个独立的模块，每一个模块的可以单独的开发、调试并上线。这样的好处我理解主要有以下几个：每个模块都是一个独立的个体，如果有某个模块
转载
2024-03-15 08:34:25
3阅读
一个前端应用能够单独跑，也能被作为一个模块集成到另一个应用里，这种架构方式就叫做微前端。它在前端领域能解决一些特定的问题：中后台系统中，有一些别的技术栈开发的历史模块，但是希望能够在另一个应用集成进来saas 类的前端应用，业务比较复杂，可能模块很多，希望能拆分成多个应用独立维护，也能够集成到一起跨技术栈的应用集成、大的项目拆分成独立的小项目，这些是微前端解决的典型问题。微前端的实现方案有很多，比
转载
2024-04-22 21:09:38
89阅读
前言说起微前端框架，很多人第一反应就是 single-spa。但是再问深入一点：它是干嘛的，它有什么用，可能就回答不出来了。一方面没多少人研究和使用微前端。可能还没来得及用微前端扩展项目，公司就已经倒闭了。另一方面是中文博客对微前端的研究少之又少，很多文章只是简单翻译一下官方文档，读几个API，放个官方的 Demo 就完事了。很少有深入研究到底 single-spa 是怎么一回事的。还有一方面是
最近公司搞前端微服务，用了qiankun这个库，不得不说背靠轮子好乘凉啊~。 下面进入正题：我的项目，技术栈都是vue，主应用拥有自己的公共模块，同时需要以微应用方式嵌入业务模块。大概如下图所示 因为我主应用用的哈希路由，微应用参考官方demo用的都是history方式的路由，就导致路由变化比较蛋疼，比如现在有专门的路由#/micrApp来展示微应用，同时注册了微应用dev，通
转载
2024-05-06 17:36:00
64阅读
一、微前端简介微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用可以独立运行、独立开发、独立部署。微前端的好处
应用自治。只需要遵循统一的接口规范或者框架，以便于系统集成到一起，相互之间是不存在依赖关系的。
单一职责。每个前端应用可以只关注于自己所需要完成的功能。
技术栈无关。你可以使用 Angula
转载
2024-03-15 10:43:04
59阅读
作为开发者来讲，要想写webservice接口或者调用别人的webservice接口，首先需要了解什么是webservice。简单说, WebService就是一些站点开放一些服务出来, 也可以是你自己开发的Service, 也就是一些方法, 通过URL,指定某一个方法名,发出请求,站点里的这个服务(方法),接到你的请求,根据传过来的参数,做一些处理,然后把处理后的结果以XML形式返回来给你,你的
