黑马智数Day10

项目背景说明

  1. 后台管理部分使用的技术栈是Vue2，前台可视化部分使用的技术栈是Vue3

  2. 前台可视化项目不是独立存在，而是和后台管理项目共享同一个登录页面

微前端的好处

微前端是一种前端架构模式，它将大型单体应用程序分解为小的、松散耦合的部分，每个部分都可以独立开发、测试和部署。微前端的好处如下：

  1. 增强团队独立性

  2. 提高可维护性

  3. 提高性能

总之，微前端使开发人员可以更容易地构建、维护和扩展大型单体应用程序，从而提高了应用程序的质量和可靠性

乾坤方案改造

qiankun - qiankun

主应用改造（后台管理）

安装乾坤

npm i qiankun

新增配置文件

import { registerMicroApps, start } from 'qiankun'

registerMicroApps([
  {
    name: 'hmzs-big-screen', // 子应用名称
    entry: '//localhost:5173', // 子应用运行服务地址（就是npm run dev时的那个地址）
    container: '#container', // 挂载容器（id=container）
    activeRule: '/big-screen' // 激活路由(在哪个路由下加载子应用,需要和子应用的路由名称对应)
  }
])

start()

入口文件启动

// 启动微前端配置
import './registerMicroApp'

配置子应用渲染的位置

<template>
  <div id="app">
    <router-view />
    <!-- 子应用挂载节点 -->
    <div id="container" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

子应用改造（前台可视化）

说明: qiankun默认不支持vite项目作为子应用，需要借助 vite-qiankun 插件进行支持

配置vite-qiankun插件

npm i vite-plugin-qiankun -D
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'


export default defineConfig({
  base: '/',
  plugins: [
    vue(), 
    // 这里的名称要和主应用改造是配置项中的name保持一致
    qiankun('hmzs-big-screen', {
      useDevMode: true
    })
  ],
  server: {
    // 防止开发阶段的assets 静态资源加载问题
    origin: '//localhost:5173'
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    }
  }
})

2- 入口文件改造

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'

import './styles/common.scss'


// 使用乾坤渲染
renderWithQiankun({
  // 挂载时
  mount (props) {
    console.log('mount')
    render(props)
  },
  bootstrap () {
    console.log('bootstrap')
  },
  unmount (props) {
    console.log('unmount', props)
  },
})

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({})
}

function render (props = {}) {
  const { container } = props
  const app = createApp(App)
  app.use(router)
  app.mount(container ? container.querySelector("#app") : "#app")
}

大屏按钮跳转

<div class="avatar-wrapper">
  <el-button size="small" plain 
    @click="$router.push('/big-screen')">可视化大屏</el-button>
  <!-- 用户名称 -->
  <span class="name">黑马管理员</span>
</div>

微前端配置易错点

1. 保证子应用已经运行

  1. 测试时需要保证子应用项目已经run了起来，因为主应用需要从子应用的服务拉取资源

  2. 子应用run的服务地址要和主应用中的 entry 选项要严格保持一致（注意端口号）

2. 准备好挂载容器

作为子应用的挂载节点 也就是 container 容器要准备好，否则没有挂载的位置

3. 开发环境修复静态资源的路径

子应用里需要配置一下server选项的origin选项，否则加载assets文件夹中的资源会默认寻找主应用下的assets文件夹

server: {
    // 防止开发阶段的assets 静态资源加载问题
    origin: '//localhost:5173'
}

 

乾坤基础原理说明（直接观看拓展视频）

1. 基础运行原理

  1. 监听路由变化

  2. 匹配子应用

  3. 加载子应用

  4. 渲染子应用

2. 核心代码实现

// 用来加载子应用html并解析
import importHTML from 'import-html-entry'

// 重新路由
function rewriteRouter () {
  // 针对 go/back
  window.addEventListener('popstate', () => {
    loadMicroApp()
  })
  // 针对pushState
  const rawPushState = window.history.pushState
  window.history.pushState = async (...rest) => {
    rawPushState.apply(window.history, rest)
    console.log('监听到 pushState 方法')
    // 加载子应用
    loadMicroApp()
  }
}


// 加载子应用资源
let _activeMicroApp = null
function loadMicroApp () {
  // 1. 匹配激活路由 并加载子应用html
  const path = window.location.pathname
  const microApps = getMicroApp()
  const microAppConfig = microApps.find(app => app.activeRule === path)
  _activeMicroApp = _activeMicroApp || microAppConfig
  console.log('当前配置', microAppConfig)
  if (microAppConfig) {
    // 挂载
    importHTML(microAppConfig.entry).then(async res => {
      // 2. 获取模版
      const template = res.template
      const container = document.querySelector(microAppConfig.container)
      container.innerHTML = template
      // 2. 获取脚本并执行
      await res.execScripts()
      window.__qiankunMount()
    })
  } else {
    // 卸载
    const container = document.querySelector(_activeMicroApp.container)
    container.innerHTML = ''
    _activeMicroApp = null
    window.__qiankunUnMount()
  }
}


// 注册子应用配置
let microApps = []
function registerMicroApp (configArr) {
  microApps = configArr
}
function getMicroApp () {
  return microApps
}


// 启动方法
function start () {
  rewriteRouter()
}

// 导出通用方法
export {
  registerMicroApp,
  start
}

3. 测试使用

主应用配置

// 注册微应用配置
registerMicroApp([
  {
    name: 'big-screen',
    entry: '//127.0.0.1:5500/',
    container: '#container',
    activeRule: '/big-screen'
  }
])

start()

子应用配置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我是子应用</title>
  <style>
    #root {
      width: 500px;
      height: 400px;
      background-color: royalblue;
      color: #fff;
    }
  </style>

</head>

<body>
  <div id="root">
    <button id="btn">toggleColor</button>
  </div>
  <script>
    const btn = document.querySelector('#btn')
    const root = document.querySelector('#root')
    btn.addEventListener('click', () => {
      root.style.backgroundColor = 'red'
    })

    // 模拟生命周期函数
    function mount () {
      console.log('mount by 乾坤')
    }

    function unMount () {
      console.log('unMount by 乾坤')
    }

    window.__qiankunMount = mount
    window.__qiankunUnMount = unMount
  </script>
</body>

</html>

实际上线的流程说明

说明：前端需要做的事情就是配合发布

  1. 确保提交的分支正确，分支代码里没有非常明显的错误，如代码冲突

  2. 因为部署平台要执行打包命令，这个打包命令是前端提供的，这里要对接好，并且打包时的优化要前端自己做

配置环境变量

认识环境变量

概念：同一个“变量”的值可以根据不同的环境自动切换与环境相对应的值，这样的变量就称之为环境变量

场景：项目上线时，我们的接口基地址发生了变化：由(https://api-hmzs.itheima.net/v1)变成了(https://api-hmzs.itheima.net/api) 如果适配开发阶段和上线之后的不同的接口基地址呢？答案就是使用环境变量，它可以做到在开发环境时接口走接口A，在上线之后走接口B。

环境变量的定义和使用

定义位置和运行机制

对应环境文件说明
开发环境.env.development当运行vue-cli-service serve
的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量
生产环境.env.production当运行vue-cli-service build
的时候会以此文件为配置文件，这个文件中可以定义针对生产环境的环境变量

定义环境变量

定义环境变量采用 key = value  的语法进行定义，其中key表示环境变量名称   value表示环境变量值

# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = 'https://api-hmzs.itheima.net/v1'

使用环境变量

使用环境变量采用固定的前缀 process.env.环境变量名，环境变量名要与定义时的保持一致

process.env.VUE_APP_BASE_API

配置开发和生产环境下的baseURL

# just a flag
ENV = 'development'
​
VUE_APP_BASE_URL = 'https://api-hmzs.itheima.net/v1'
# just a flag
ENV = 'production'
​
# base api
VUE_APP_BASE_URL= 'https://api-hmzs.itheima.net/api'

客户端环境变量的注意事项

  1. 客户端代码其实就是我们的src目录，如果在这个目录下使用环境变量，只能识别 NODE_ENV  BASE_URL 和以 VUE_APP_  打头的环境变量，其它变量不可识别，非客户端代码没有此要求。其中NODE_ENV  可以自定义覆盖， BASE_URL 覆盖不了

  2. 为避免记忆负担，在业务中自定义环境变量的时候，推荐采用严格的 VUE_APP变量前缀打头

 

微前端项目部署（了解）

服务器环境准备

我们在本地使用Node准备好了两台服务器：

  1. serverforadmin为服务器A，是后台管理项目部署的位置，服务地址为 http://localhost:8086

  2. serverforbigscreen为服务B，是前台可视化项目部署位置, 服务地址为http://localhost:8089

  3. 每一个服务中都有一个public文件夹，它是静态服务文件夹，是放置我们打包之后的代码的

  4. 对俩个项目分别进行打包，然后把生成的dist目录下的文件放到对应的服务器的public文件夹中

根据环境切换加载子应用的地址

子应用大屏项目在开发时的服务地址为 http://localhost:5173/big-screen，在上线之后变成了http://localhost:5173/big-screen，为了适配上线之后的解析路径，我们根据当年所处的环境适配一下加载子应用的地址 process.env.NODE_ENV 可以拿到当前运行的环境，是生产还是开发 development为开发环境。

import { registerMicroApps, start } from 'qiankun'
​
const isDev = process.env.NODE_ENV === 'development'
​
registerMicroApps([
  {
    name: 'hmzs-big-screen',
    entry: `${isDev ? '//localhost:5173' : '//localhost:8089'}`,
    container: '#container',
    activeRule: '/big-screen'
  }
])
​
start()

更改子应用的base配置

vite.config.js中的配置项里有一个base配置，它决定了项目启动时的静态资源，比如js，css从哪个服务器下去获取，因为上线之后，子应用大屏项目的服务器地址变成了 http://localhost:8089 ，所以把base配置为 http://localhost:8089。

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'
​
​
export default defineConfig({
  base: 'http://localhost:8089/',
  plugins: [vue(), qiankun('hmzs-big-screen', {
    useDevMode: true
  })],
  server: {
    // 解决开发环境下的静态资源访问问题
    origin: '//127.0.0.1:5173'
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    }
  }
})

更改子应用的路由

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
​
const router = createRouter({
  history: createWebHistory()
})
​
export default router

打包独立部署到服务器

在俩个项目中分别执行打包命令，生成打包文件之后，把打包文件手动拷贝到对应的服务器的public文件夹里 执行 node app.js 启动对应的服务器。

Ngnix配置

image.png

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/918536.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

A3超级计算机虚拟机，为大型语言模型LLM和AIGC提供强大算力支持

A3超级计算机虚拟机，为大型语言模型LLM和AIGC提供强大算力支持

热门大语言模型项目地址&#xff1a;www.suanjiayun.com/mirrorDetails?id66ac7d478099315577961758 近几个月来&#xff0c;我们目睹了大型语言模型&#xff08;LLMs&#xff09;和生成式人工智能强势闯入我们的视野&#xff0c;显然&#xff0c;这些模型在训练和运行时需要…
阅读更多...
乐维网管平台（七）：网络稳定与高效的“安全锦囊”

乐维网管平台（七）：网络稳定与高效的“安全锦囊”

试想一下&#xff0c;你给电脑升级了一个软件&#xff0c;升级完成后发现有BUG&#xff0c;经常无故卡死&#xff0c;这时候想回退或重新安装旧版本…相对地&#xff0c;一家企业的网络管理员&#xff0c;在对公司的核心交换机进行复杂的配置调整时&#xff0c;一个小小的疏忽&…
阅读更多...
基于Python的图片信息推荐系统

基于Python的图片信息推荐系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…
阅读更多...
没钱买KEGG怎么办？REACTOME开源通路更强大

没钱买KEGG怎么办？REACTOME开源通路更强大

之前搜集免费生物AI插图时简单提到了通路数据库Reactome&#xff08;https://reactome.org/&#xff09;&#xff0c; 那些精美的生物插图只能算是该数据库附赠的小礼品&#xff0c;他的主要功能还是作为一个开源的通路数据库&#xff0c;为相关领域的研究者提供直观的可视化生…
阅读更多...
spi 回环

spi 回环

///tx 极性0 &#xff08;sclk信号线空闲时为低电平&#xff09; /// 相位0 (在sclk信号线第一个跳变沿进行采样) timescale 1ns / 1ps//两个从机 8d01 8d02 module top(input clk ,input rst_n,input [7:0] addr ,input …
阅读更多...
Lc70--319.两个数组的交集（二分查找）---Java版

Lc70--319.两个数组的交集（二分查找）---Java版

1.题目描述 2.思路 用集合求交集&#xff0c;因为集合里面的元素要满足不重复、无序、唯一。使得集合在去重、查找和集合操作&#xff08;如交集、并集、差集等&#xff09;中非常高效和方便。 3.代码实现 class Solution {public int[] intersection(int[] nums1, int[] nu…
阅读更多...
项目2：简易随机数生成器 --- 《跟着小王学Python·新手》

项目2：简易随机数生成器 --- 《跟着小王学Python·新手》

项目2&#xff1a;简易随机数生成器 — 《跟着小王学Python新手》 《跟着小王学Python》 是一套精心设计的Python学习教程&#xff0c;适合各个层次的学习者。本教程从基础语法入手&#xff0c;逐步深入到高级应用&#xff0c;以实例驱动的方式&#xff0c;帮助学习者逐步掌握P…
阅读更多...
qml绘制折线图

qml绘制折线图

参考链接 qml绘制折线图 在QML&#xff08;Qt Modeling Language&#xff09;中绘制折线图可以通过使用Canvas元素或ChartView元素来实现。以下是两种方法的示例&#xff1a; 方法一&#xff1a;使用Canvas元素 Canvas元素允许你在QML中绘制自定义图形。你可以通过JavaScrip…
阅读更多...
MODBUS TCP转CANOpen网关

MODBUS TCP转CANOpen网关

Modbus TCP转CANopen网关 型号&#xff1a;SG-TCP-COE-210 产品用途 本网关可以实现将CANOpen接口设备连接到MODBUS TCP网络中&#xff1b;并且用户不需要了解具体的CANOpen和Modbus TCP 协议即可实现将CANOpen设备挂载到MODBUS TCP接口的 PLC上&#xff0c;并和CANOpen设备…
阅读更多...
Spring Cloud Alibaba [Gateway]网关。

Spring Cloud Alibaba [Gateway]网关。

1 简介 网关作为流量的入口&#xff0c;常用功能包括路由转发、权限校验、限流控制等。而springcloudgateway 作为SpringCloud 官方推出的第二代网关框架&#xff0c;取代了Zuul网关。 1.1 SpringCloudGateway特点: &#xff08;1&#xff09;基于Spring5&#xff0c;支持响应…
阅读更多...
delphi fmx android 离线人脸识别

delphi fmx android 离线人脸识别

搜遍全网都没有找到delphi android 能用的 离线人脸识别，无需注册什么开发者 有这方面需求的可以用fsdk 这边用的luxand.FSDK8.0 android下的注册号要自己找下 1，用老猫的工具将android 下的sdk，FSDK.java 编译成FSDK.jar 老猫的工具 2，用上面的工具将FSDK.jar 生成de…
阅读更多...
小试银河麒麟系统OCR软件

小试银河麒麟系统OCR软件

0 前言 今天在国产电脑上办公&#xff0c;需要从一些PDF文件中复制文字内容&#xff0c;但是这些PDF文件是图片转换生成的&#xff0c;不支持文字选择和复制&#xff0c;除了手工输入&#xff0c;我们还可以使用OCR。 1 什么是OCR OCR &#xff08;Optical Character Recogni…
阅读更多...
小程序租赁系统打造便捷租赁体验助力共享经济发展

小程序租赁系统打造便捷租赁体验助力共享经济发展

内容概要 小程序租赁系统是一个极具创新性的解决方案&#xff0c;它通过简化租赁过程&#xff0c;让物品的共享变得便捷流畅。对于那些有闲置物品的用户来说&#xff0c;他们可以轻松发布自己的物品&#xff0c;让其他需要的人快速找到并租借。而对于找东西的人来说&#xff0…
阅读更多...
Spring Boot汽车资讯：科技与汽车的新篇章

Spring Boot汽车资讯：科技与汽车的新篇章

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了汽车资讯网站的开发全过程。通过分析汽车资讯网站管理的不足&#xff0c;创建了一个计算机管理汽车资讯网站的方案。文章介绍了汽车资讯网站的系统分析部分&…
阅读更多...
【Python绘图】两种绘制混淆矩阵的方式 (ConfusionMatrixDisplay(), imshow()) 以及两种好看的colorbar

【Python绘图】两种绘制混淆矩阵的方式 (ConfusionMatrixDisplay(), imshow()) 以及两种好看的colorbar

在机器学习领域&#xff0c;混淆矩阵是一个评估分类模型性能的重要工具。它不仅展示了模型预测的准确性&#xff0c;还揭示了模型在不同类别上的表现。本文介绍两种在Python中绘制混淆矩阵的方法&#xff1a;ConfusionMatrixDisplay() 和 imshow()&#xff0c;以及两种好看的co…
阅读更多...
【Nginx从入门到精通】03 、安装部署-让虚拟机可以联网

【Nginx从入门到精通】03 、安装部署-让虚拟机可以联网

文章目录 总结一、配置联网【Minimal 精简版】1.1、查看网络配置1.2、配置ip地址 : 修改配置文件 <font colororange>ifcfg-ens33Stage 1&#xff1a;输入指令Stage 2&#xff1a;修改参数Stage 3&#xff1a;重启网络Stage 4&#xff1a;测试上网 二、配置联网【Everyth…
阅读更多...
android studio无法下载，Could not GET xxx, Received status code 400

android studio无法下载，Could not GET xxx, Received status code 400

-- 1. 使用下面的地址代替 原地址: distributionUrlhttps\://services.gradle.org/distributions/gradle-6.5-all.zip 镜像地址: distributionUrlhttps\://downloads.gradle-dn.com/distributions/gradle-6.5-all.zips 上面的已经不好用了 https\://mirrors.cloud.tencent.c…
阅读更多...
Cursor安装Windows / Ubuntu

Cursor安装Windows / Ubuntu

一、安装 1、下载软件 2、安装依赖 #安装fuse sudo apt-get install fuse3、将cursor添加到应用程序列表 sudo mv cursor-0.42.5x86_64.AppImage /opt/cursor.appimage #使用自己版本号替换 sudo chmod x /opt/cursor.appimage #给予可执行权限 sudo nano /usr/share/applic…
阅读更多...
2、计算机网络七层封包和解包的过程

2、计算机网络七层封包和解包的过程

计算机网络osi七层模型 1、网络模型总体预览2、数据链路层4、传输层5.应用层 1、网络模型总体预览 图片均来源B站&#xff1a;网络安全收藏家&#xff0c;没有本人作图 2、数据链路层 案例描述&#xff1a;主机A发出一条信息&#xff0c;到路由器A&#xff0c;这里封装目标MAC…
阅读更多...
Elastic 和 Red Hat：加速公共部门 AI 和机器学习计划

Elastic 和 Red Hat：加速公共部门 AI 和机器学习计划

作者&#xff1a;来自 Elastic Michael Smith 随着公共部门组织适应数据的指数级增长&#xff0c;迫切需要强大、适应性强的解决方案来管理和处理大型复杂数据集。人工智能 (Artificial intelligence - AI) 和机器学习 (machine learning - ML) 已成为政府机构将数据转化为可操…
阅读更多...
最新文章

Copyright @ 2022~2023