微前端和nginx(微前端和独立组件)

微前端和独立组件

web前端就是前端网络编程，也被认为是用户端编程，是为了网页或者网页应用，而编写HTML，CSS以及JS代码，所以用户能够看到并且和这些页面进行交流。

前端网络编程的挑战在于用于实现前端页面的工具以及技术变化得很快，所以工程师需要不断注意产业是如何发展的（例如ECMAScript 6）。

设计网页的目的在于确保用户打开站点的时候，信息是以容易阅读并且相互关联的形式呈现的。随之带来的问题是，现在用户实用大量的设备来访问网页，这些设备具有不同的屏幕尺寸以及清晰度。

所以设计者在设计网页的时候需要注意这些方面。他们需要确保他们的网页在不同的浏览器、不同的操作系统以及不同的设备上显示正确，这需要在工程师端进行仔细的计划。

扩展资料：

前端网络编程所使用的工具能被用于进行前端编程，理解工具最适用于什么任务，有助于产生一个高质量的、可升级的站点。

1、超文本标记语言（HTML）：

HTML是任何网页工程程序的骨架，没有它网页不会存在。超文本标记语言能提供站点总体的样子。HTML被Tim Berners-Lee所发展。随着HTML的发展，在万维网中产生了许多版本。最新版本的超文本标记语言被称为HTML5，在2014年0月28日被W3C所推出。

这一版本包含了新的并且高效的方式来传输元素，例如音频以及视频文件。H5在前端工程师中非常受欢迎。和老的版本相比，HTML5有很多特点。随着HTML的发展，在网络中产生了一场革命。

2、层叠样式列表（CSS）。

CSS控制了站点的样子，让站点有自己独有的外观。其实现形式是：保证样式列表先于其他的样式规则，由其他的输入形式所影响，例如屏幕的尺寸和分辨率。

3、JavaScript。

JavaScript（简称JS）是基于场景的命令式语言（和HTML的说明性语言不同），用于将静态的HTML界面动态化。JS的代码能使用HTML标准提供的文档对象模型（DOM），来根据事件，例如用户的输入，操纵网络页面。

JS使用一种被称为异步JavaScript和XML的技术（AJAX），JS代码也能动态的改变网页的内容（与原始的HTML页面端相独立），并且也能回应服务端的事件，让网页体验增加了真正动态的特性。

JS中有很多流行的开发框架，帮助开发者快速构建web页面，比如Vue.js、Angular、React都是很流行的框架，拥有大批忠实的用户。

微前端项目

目前最火的前端微服务框架是微软开发的Blazor。Blazor是一个开源的Web框架，它利用了WebAssembly技术，在Web浏览器中运行C#代码，将.NET应用程序带到了前端。它允许使用C#和.NET标准库编写Web应用程序，具有高性能、可维护性和扩展性。Blazor已经成为.NET生态系统中最受欢迎的框架之一。

微前端部署

以vue框架为例，在nginx.conf中监听80或443端口的server的路由配置设置为：

location ^~ /api { # url如/api/v1.0/user/info等，通过uwsgi转发到django后端项目中处理

include /etc/nginx/uwsgi_params;

uwsgi_pass 127.0.0.1:8077;

include /etc/nginx/mime.types;

}

location ^~ /static { # 后端的资源文件夹为static，前端请求后端项目包内的静态文件

root /root/backend_end_project/static/;

}

location ^~ /admin { # django的后台管理页面通过uwsgi转交给django处理

include /etc/nginx/uwsgi_params;

uwsgi_pass 127.0.0.1:8077;

include /etc/nginx/mime.types;

}

location ^~ /assets { # 前端的资源文件夹为assets，前端请求前端项目包内的静态文件

root /root/front_end_project/dist;

}

location / { # 表示其它路径都交给前端项目根目录下的index.html处理

root /root/front_end_project;

try_files $uri /index.html;

}

微前端公共组件

中后台项目一般都有较强的页面结构或者逻辑一致性，页面比如像搜索、表格、导航菜单、布局，逻辑方面比如像数据流，权限。

如果基于 Webpack 封装这些功能就需要比较大的前期工作，Umi 则以路由为基础，并以此进行功能扩展，包含微前端、组件打包、请求库、hooks 库、数据流等。基于此在公司内落地 umi 的实践。

微前端作用

1、使用 react-router-dom 中的 Link 实现页面跳转。

2、使用 react-router-redux 中的 push 进行页面跳转。

3、使用RouteComponentProps 中的history进行页面回退

4、打开一个新的tab页，并截取路径。

微前端组件复用

React因为React是一个更加灵活和可复用的框架，可以在多个平台和应用中使用。React的虚拟DOM机制可以使页面渲染更加快速，同时还有大量的优秀开源组件可以供开发者使用，极大地提高了开发效率。除此之外，React的生态圈非常庞大，有一大批的开发者在不断地为其开发新的插件和库，使其功能更加完善和强大。另外，React的学习曲线相对于Vue要略高一些，但只要有一定的JavaScript基础，上手难度也不会太大。如果你正在寻找一个灵活性强、性能优秀、很好的社区支持的框架，那么React将是一个很好的选择。