微前端 ---- wujie-vue3 原理

目錄

?前言

設置子應用?

預加載?

啟動子應用?

封裝?

1.創建文件

2.安裝依賴

3.編寫組件

4.配置打包規則

5.執行打包命令?

?swc技術

SWC

Babel

?Babel VS SWC

更改使用 swc 解析?

?使用swc 完成 esm 模式? （export--import）

發布到npm

更改package.json

創建npm賬戶

登錄npm

切換npm源

發布到npm

?前言

這個包其實是作者根據wujie 自行封裝的我們也可以自己去封裝一下

設置子應用?

非必須，由于preloadApp和startApp參數重復，為了避免重復輸入，可以通過setupApp來設置默認參數。

  • name: "唯一id",
  • url: "子應用地址",
  • ?el: "容器",?
setupApp({ name: "唯一id", url: "子應用地址", exec: true, el: "容器", sync: true })

預加載?

javascript

preloadApp({ name: "唯一id"});

啟動子應用?

javascript

startApp({ name: "唯一id" });

?知道以上幾個API的用法就可以簡單封裝一個無界的組件我們使用vue3?+?webpack?+?swc?封裝

封裝?

1.創建文件

  • index.ts?入口文件
  • type.ts類型文件
  • index.d.ts 類型聲明文件
pnpm init  生成package.json
tsc --init 生成tsconfig.json
創建webpack.config.js

2.安裝依賴

pnpm i wujie   
pnpm i vue -D   
pnpm i webpack-cli -D
pnpm i typescript -D 
pnpm i ts-loader  -D 
pnpm i webpack -D

3.編寫組件

聲明文件

// import { bus, preloadApp, destroyApp, setupApp } from "wujie";
import type { App } from 'vue';declare const WujieVue: {// bus: typeof bus;// setupApp: typeof setupApp;// preloadApp: typeof preloadApp;// destroyApp: typeof destroyApp;install: (app: App) => void
};export default WujieVue;

?

類型文件

import type { plugin } from 'wujie'
type lifecycle = (appWindow: Window) => any;
interface Props {/** 唯一性用戶必須保證 */name: string;/** 需要渲染的url */url: string;/** 需要渲染的html, 如果用戶已有則無需從url請求 */html?: string;/** 渲染的容器 */loading?: HTMLElement;/** 路由同步開關， false刷新無效，但是前進后退依然有效 */sync?: boolean;/** 子應用短路徑替換，路由同步時生效 */prefix?: { [key: string]: string };/** 子應用保活模式，state不會丟失 */alive?: boolean;/** 注入給子應用的數據 */props?: { [key: string]: any };/** js采用fiber模式執行 */fiber?: boolean;/** 子應用采用降級iframe方案 */degrade?: boolean;/** 自定義運行iframe的屬性 */attrs?: { [key: string]: any };/** 自定義降級渲染iframe的屬性 */degradeAttrs?: { [key: string]: any };/** 代碼替換鉤子 */replace?: (codeText: string) => string;/** 自定義fetch，資源和接口 */fetch?: (input: RequestInfo, init?: RequestInit) => Promise<Response>;/** 子應插件 */plugins: Array<plugin>;/** 子應用生命周期 */beforeLoad?: lifecycle;/** 沒有做生命周期改造的子應用不會調用 */beforeMount?: lifecycle;afterMount?: lifecycle;beforeUnmount?: lifecycle;afterUnmount?: lifecycle;/** 非保活應用不會調用 */activated?: lifecycle;deactivated?: lifecycle;
};export { Props }

組件封裝

這段代碼是一個Vue組件的封裝，它使用了Vue 3的Composition API來定義組件。讓我來解釋一下它的功能和結構

首先，我們需要了解一下這個組件的功能。這個組件是一個封裝了微前端框架wujie的Vue組件，它可以在Vue應用中加載其他獨立的微前端應用。它接受一些props作為配置參數，包括組件的寬度、高度、名稱、URL等。它還提供了一些生命周期鉤子函數，用于在組件加載、卸載和切換時執行一些操作。

接下來，讓我們來看一下這個組件的代碼結構。

首先，我們引入了Vue的一些函數和類型，包括defineComponent、h、getCurrentInstance等。這些函數和類型將在后面的代碼中使用。

然后，我們定義了一個名為wujie的組件，使用defineComponent函數來創建組件。在props選項中，我們定義了組件的props，包括寬度、高度、名稱、URL等。其中，一些props的類型是復雜的，我們使用PropType來進行強制類型轉換，以確保傳入的props符合預期的類型。

在setup函數中，我們定義了組件的邏輯。首先，我們定義了一個init函數，用于初始化微前端應用。在這個函數中，我們使用startApp函數來啟動微前端應用，傳入一些配置參數，包括應用的名稱、URL、加載元素等。

接下來，我們定義了一個handleEmit函數，用于處理事件的觸發和參數的傳遞。在這個函數中，我們使用emit函數來觸發事件，并將參數傳遞給事件的監聽函數。

然后，我們使用onMounted鉤子函數，在組件掛載后執行一些操作。在這個鉤子函數中，我們使用bus.$onAll函數來監聽所有事件的觸發，并將事件和參數傳遞給handleEmit函數。然后，我們調用init函數來初始化微前端應用。

接下來，我們使用watch函數來監聽props.name和props.url的變化。當這兩個props發生變化時，我們重新調用init函數來重新初始化微前端應用。

最后，我們使用onBeforeMount鉤子函數，在組件卸載前執行一些操作。在這個鉤子函數中，我們使用bus.$offAll函數來取消所有事件的監聽。

最后，我們返回一個渲染函數，使用h函數來創建一個div元素，并將寬度和高度設置為props中的值。我們還將這個div元素的引用設置為wujie，以便以后可以訪問它。

最后，我們通過wujie.install方法將這個組件注冊為Vue插件，以便在Vue應用中使用。

import { defineComponent, h, getCurrentInstance, onMounted, watch, onBeforeMount } from 'vue'
//子組件的props類型是復雜的類型的時候，可以用propType進行強制類型轉換（eg 復雜函數，對象數組，對象的類型檢查）import type { PropType } from 'vue'
import { startApp, bus } from 'wujie'
import { Props } from './type'
// 聲明組件
const wujie = defineComponent({props: {width: { type: String, default: "" },height: { type: String, default: "" },name: { type: String, default: "", required: true },loading: { type: HTMLElement, default: undefined },url: { type: String, default: "", required: true },sync: { type: Boolean, default: undefined },prefix: { type: Object, default: undefined },alive: { type: Boolean, default: undefined },props: { type: Object, default: undefined },attrs: { type: Object, default: undefined },replace: { type: Function as PropType<Props['replace']>, default: undefined },fetch: { type: Function as PropType<Props['fetch']>, default: undefined },fiber: { type: Boolean, default: undefined },degrade: { type: Boolean, default: undefined },plugins: { type: Array as PropType<Props['plugins']>, default: null },beforeLoad: { type: Function as PropType<Props['beforeLoad']>, default: null },beforeMount: { type: Function as PropType<Props['beforeMount']>, default: null },afterMount: { type: Function as PropType<Props['afterMount']>, default: null },beforeUnmount: { type: Function as PropType<Props['beforeUnmount']>, default: null },afterUnmount: { type: Function as PropType<Props['afterUnmount']>, default: null },activated: { type: Function as PropType<Props['activated']>, default: null },deactivated: { type: Function as PropType<Props['deactivated']>, default: null },},setup(props, { emit }) {const init = () => {// 獲取當前組件實例const instance = getCurrentInstance()// 微前端初始化方法startApp({name: props.name,url: props.url,el: instance?.refs.wujie as HTMLElement,loading: props.loading,alive: props.alive,fetch: props.fetch,props: props.props,attrs: props.attrs,replace: props.replace,sync: props.sync,prefix: props.prefix,fiber: props.fiber,degrade: props.degrade,plugins: props.plugins,beforeLoad: props.beforeLoad,beforeMount: props.beforeMount,afterMount: props.afterMount,beforeUnmount: props.beforeUnmount,afterUnmount: props.afterUnmount,activated: props.activated,deactivated: props.deactivated,})}// 監聽事件觸發傳遞參數const handleEmit = (event: string, ...args: any) => {emit(event, ...args)}// 要獲取el 所以采用onMountedonMounted(() => {// 任何$emit都會導致監聽函數觸發，第一個參數為事件名，后續的參數為$emit的參數bus.$onAll(handleEmit)init()})// name 跟url可能是動態變化的，所以要watch后重新初始化watch([props.name, props.url], () => {init()})// 銷毀時要取消監聽onBeforeMount(() => {bus.$offAll(handleEmit)})// 返回渲染函數return () => h('div', {style: {width: props.width,height: props.height,},// 當作el傳遞給startAppref: 'wujie', //方便以后讀取})}})
// 提供app.use使用的方法 會自動調用install
wujie.install = function (app: any) {app.component('WujieVue', wujie)
}
export default wujie

4.配置打包規則

  1. 引入所需的模塊：

    • Configuration：Webpack 的配置類型。
    • path：Node.js 的內置模塊，用于處理文件路徑。

  2. 創建一個配置對象?config，用于配置 Webpack。

  3. 設置入口文件：

    • entry?屬性指定了入口文件的路徑，這里是?./src/index.ts。

  4. 設置出口文件：

    • output?屬性指定了打包后的文件的輸出配置。
    • filename?屬性指定了輸出文件的名稱，這里是?wujie.js。
    • path?屬性指定了輸出文件目的錄，這里使用了?path.resolve?方法來獲取絕對路徑，__dirname?表示當前文件所在的目錄，./lib?表示輸出到當前目錄下的?lib?文件夾。

  5. 配置打包忽略的文件：

    • externals?屬性指定了需要忽略打包的模塊。
    • 這里忽略了?vue?和?wujie?模塊，意味著在打包時不會將這兩個模塊打包進最終的輸出文件中，而是通過外部引入的方式使用它們。

  6. 設置打包模式：

    • mode?屬性指定了打包的模式，這里是?"none"，表示不使用任何內置優化。

  7. 配置模塊規則：

    • module?屬性用于配置模塊的加載規則。
    • rules?屬性是一個數組，包含了各種規則對象。
    • 這里只有一個規則對象，用于解析 TypeScript 文件。
    • test?屬性指定了需要匹配的文件類型，這里是以?.ts?結尾的文件。
    • loader?屬性指定了用于處理匹配到的文件的加載器，這里是?ts-loader，用于將 TypeScript 轉換為 JavaScript。

  8. 導出配置對象?config，使其可以被 Webpack 使用。

const { Configuration } = require("webpack");
const path = require("path");
/*** @type {Configuration} //配置智能提示*/
const config = {entry: "./src/index.ts", //入口文件//出口output: {//   文件名filename: "wujie.js",//   出口文件目錄path: path.resolve(__dirname, "./lib"),},//配置打包忽略的文件externals: {vue: "vue",wujie: "wujie",},// 模式源碼的方式mode: "none",module: {// 打包規則rules: [{test: /\.ts$/, //解析tsloader: "ts-loader",},],},
};module.exports = config;

5.執行打包命令?

pnpm run lib?

  "scripts": {"test": "echo \"Error: no test specified\" && exit 1","lib": "webpack",},

?swc技術

SWC

SWC（Super-fast WebAssembly Compiler）是一個基于Rust語言開發的高性能JavaScript和TypeScript編譯器。它旨在提供快速且可靠的代碼轉換和優化，以改善JavaScript和TypeScript應用程序的性能。

SWC的主要特點和優勢包括：

  1. 高性能：SWC通過使用Rust語言和優化的算法，實現了比傳統的JavaScript編譯器更快的編譯速度。它能夠處理大型代碼庫，并在短時間內生成高效的輸出代碼。

  2. 完整的語法支持：SWC支持最新的JavaScript和TypeScript語法，包括ES2015+、JSX、Decorators等。它可以將這些新語法轉換為向后兼容的代碼，以便在不同的JavaScript環境中運行。

  3. 模塊化支持：SWC支持處理模塊化的代碼，包括CommonJS、ES modules和AMD等。它可以處理模塊之間的依賴關系，并生成適合目標環境的模塊化代碼。

  4. 優化和壓縮：SWC可以進行代碼優化和壓縮，以減小輸出文件的大小并提高運行時性能。它可以消除未使用的代碼、進行常量折疊和內聯等優化操作。

  5. 插件系統：SWC提供了靈活的插件系統，允許開發人員根據自己的需求擴展和定制編譯過程。開發人員可以編寫自定義的插件來處理特定的轉換或優化操作。

總的來說，SWC是一個強大且高性能的JavaScript和TypeScript編譯器，適用于需要快速編譯和優化代碼的項目。它可以幫助開發人員提高應用程序的性能，并提供豐富的語法支持和靈活的插件系統。

Babel

Babel是一個廣泛使用的JavaScript編譯器工具，用于將新版本的JavaScript代碼轉換為向后兼容的舊版本，以便在不支持新語法和特性的環境中運行。

JavaScript是一門不斷發展的語言，每年都會推出新的語法和特性，但是不同的瀏覽器和JavaScript運行時環境對這些新特性的支持程度各不相同。這就導致開發人員在編寫代碼時需要考慮到目標環境的兼容性問題。

Babel的作用就是解決這個問題。它可以將使用了最新語法和特性的JavaScript代碼轉換為向后兼容的代碼，以便在舊版本的瀏覽器環和境中運行。它可以將ES6、ES7、ES8等新版本的JavaScript代碼轉換為ES5或更早版本的代碼，同時還可以處理一些其他的轉換，如JSX轉換、TypeScript轉換等。

Babel的工作原理是通過解析源代碼，構建抽象語法樹（AST），然后根據配置文件中的規則進行轉換。開發人員可以根據自己的需求配置Babel，選擇需要的轉換插件和預設，以及指定目標環境的兼容性要求。

總的來說，Babel是一個非常強大的工具，可以幫助開發人員在不同的JavaScript環境中編寫兼容性更好的代碼，提高開發效率和代碼質量

?Babel VS SWC

Babel和SWC都是用于轉換JavaScript代碼的工具，但它們有一些區別和特點。

  1. 性能：SWC在性能方面通常比Babel更快。SWC是用Rust編寫的，它使用了更高效的算法和數據結構，因此在轉換大型代碼庫時可能會比Babel更快。

  2. 兼容性：Babel是非常成熟和廣泛使用的工具，它支持廣泛的JavaScript語法和特性轉換，并且有大量的插件和預設可供選擇。SWC相對較新，盡管它也支持許多常見的語法和特性轉換，但可能沒有像Babel那樣廣泛的生態系統。

  3. 生態系統：Babel擁有龐大的生態系統，有許多插件和預設可供選擇，可以滿足各種不同的需求。SWC的生態系統相對較小，但隨著其不斷發展，預計會有更多的插件和工具出現。

  4. 配置和使用：Babel的配置相對較復雜，需要使用.babelrc或babel.config.js等文件來指定轉換規則和插件。SWC的配置相對簡單，可以通過命令行參數或配置文件來指定轉換規則。

綜上所述，Babel是一個成熟且廣泛使用的工具，適用于大多數JavaScript項目，具有豐富的插件和預設。SWC則是一個性能更高的新興工具，適用于對性能要求較高的項目，但其生態系統

更改使用 swc 解析?

?pnpm add -D swc-loader ?@swc/core??@swc/cli

  1. library：這個配置項用于指定庫的名稱。它可以是一個字符串，也可以是一個對象。如果是一個字符串，那么這個字符串將作為全局變量暴露給瀏覽器環境，可以通過這個全局變量來訪問庫的功能。如果是一個對象，那么可以通過對象的屬性來訪問庫的功能。

  2. libraryTarget：這個配置項用于指定庫的打包方式。它可以是以下幾種值之一：

    • "var"：將庫作為一個變量聲明，可以通過變量來訪問庫的功能。
    • "this"：將庫作為?this?對象的一個屬性，可以通過?this?對象來訪問庫的功能。
    • "window"：將庫作為?window?對象的一個屬性，可以通過?window?對象來訪問庫的功能。
    • "global"：將庫作為?global?對象的一個屬性，可以通過?global?對象來訪問庫的功能。
    • "commonjs"：將庫作為一個 CommonJS 模塊導出，可以通過?require?函數來引入庫的功能。
    • "commonjs2"：將庫作為一個 CommonJS2 模塊導出，可以通過?require?函數來引入庫的功能。
    • "amd"：將庫作為一個 AMD 模塊導出，可以通過 AMD 的模塊加載器來引入庫的功能。
    • "umd"：將庫作為一個 UMD 模塊導出，可以在各種環境下使用不同的模塊器加載來引入庫的功能。

  3. umdNamedDefine：這個配置項用于指定是否為 UMD 模塊導出的庫提供一個命名的模塊定義。如果設置為?true，那么在 AMD 或者 CommonJS 環境下引入庫時，會使用一個命名的模塊定義；如果設置為?false，那么會使用匿名的模塊定義。

修改webpack.config.js?

不支持 export import 使用 swc 完成

const { Configuration } = require("webpack");
const path = require("path");
/*** @type {Configuration} //配置智能提示*/
const config = {entry: "./src/index.ts", //入口文件//出口output: {//   文件名filename: "wujie.js",//   出口文件目錄path: path.resolve(__dirname, "./lib"),},//配置打包忽略的文件externals: {vue: "vue",wujie: "wujie",library: "Wujie",libraryTarget: "umd",umdNamedDefine: true,},// 模式源碼的方式mode: "none",module: {// 打包規則rules: [{test: /\.ts$/, //解析tsloader: "swc-loader",},],},
};module.exports = config;

?使用swc 完成 esm 模式? （export--import）

配置 esm 命令

{"name": "wujie-vue3","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","lib": "webpack","esm": " swc src/index.ts -d esm"},"keywords": [],"author": "","license": "ISC","dependencies": {"wujie": "^1.0.21"},"devDependencies": {"@swc/cli": "^0.1.63","@swc/core": "^1.3.100","swc-loader": "^0.2.3","ts-loader": "^9.5.1","typescript": "^5.3.2","vue": "^3.3.10","webpack": "^5.89.0","webpack-cli": "^5.1.4"}
}

生成?.swcrc文件

{"$schema": "https://json.schemastore.org/swcrc","jsc": {"parser": {"syntax": "typescript",},"target": "es5","loose": false,"externalHelpers": false,// Requires v1.2.50 or upper and requires target to be es2016 or upper."keepClassNames": false},"minify": false
}

執行命令?

pnpm run esm

發布到npm

更改package.json

version：發布的版本

main：配置 main 入口文件地址

module ：配置import 入口地址

files：發布的文件

{"name": "wujie-vue3-setups","version": "0.0.1","description": "","main": "lib/wujie.js","module": "esm/wujie.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","lib": "webpack","esm": " swc src/index.ts -d esm"},"files": ["lib","esm","index.d.ts"],"keywords": [],"author": "","license": "ISC","dependencies": {"wujie": "^1.0.21"},"devDependencies": {"@swc/cli": "^0.1.63","@swc/core": "^1.3.100","swc-loader": "^0.2.3","ts-loader": "^9.5.1","typescript": "^5.3.2","vue": "^3.3.10","webpack": "^5.89.0","webpack-cli": "^5.1.4"}
}

創建npm賬戶


如果你還沒有npm賬戶，你需要先創建一個。前往npm官方網站注冊一個賬戶。

注意：記住你填寫的用戶名、郵箱、密碼，等下你在本地是需要用這些信息登錄的。

登錄npm


在本地登錄你剛剛注冊的賬號

如果是npm，最后還會給你的郵箱發個驗證碼，填上之后再回車，才算真正登錄成功。

執行 npm login，輸入用戶名、密碼以及你注冊時的郵箱。

使用以下命令在終端中登錄到你的npm賬戶：

npm login


?這將提示你輸入你的npm用戶名、密碼和郵箱地址。

切換npm源


因為我們要發布到官方源上面，所以要確保源地址為官方地址 http://registry.npmjs.org 或 https://registry.npmjs.com，

可以通過 npm config get registry 命令查看當前 registry 源。

推薦使用nrm管理本地npm源。

全局安裝 nrm： ?npm install -g nrm

查看npm源：nrm ls
會把所有的源都列出來，其中帶*的是當前使用的源

添加npm源：nrm add xxx http://xxxnpm.cn/
xxx 是你給這個源起的名字，后面跟上源的URL?

?

?刪除源：nrm del xxx
xxx 是你給這個源起的名字

發布到npm


最后，運行以下命令來發布你的Vue 3組件到npm：

npm publish

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/210414.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/210414.shtml
英文地址，請注明出處：http://en.pswp.cn/news/210414.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

【SpringBoot】解析Springboot事件機制，事件發布和監聽

【SpringBoot】解析Springboot事件機制，事件發布和監聽

解析Springboot事件機制&#xff0c;事件發布和監聽 一、Spring的事件是什么二、使用步驟2.1 依賴處理2.2 定義事件實體類2.3 定義事件監聽類2.4 事件發布 三、異步調用3.1 啟用異步調用3.2 監聽器方法上添加 Async 注解 一、Spring的事件是什么 Spring的事件監聽&#xff08;…
閱讀更多...
持續集成交付CICD：使用Jenkins插件上傳Nexus制品

持續集成交付CICD：使用Jenkins插件上傳Nexus制品

目錄 一、實驗 1.使用Jenkins插件上傳Nexus制品 一、實驗 1.使用Jenkins插件上傳Nexus制品 &#xff08;1&#xff09;Jenkins安裝插件Nexus Artifact Uploader &#xff08;2&#xff09;添加憑據 &#xff08;3&#xff09;使用片段生成器生成DSL &#xff08;4&#xf…
閱讀更多...
基于Java物業管理系統

基于Java物業管理系統

基于Java物業管理系統 功能需求 1、房產信息管理&#xff1a;系統需要提供房產信息管理功能&#xff0c;包括房產的基本信息、租賃狀態、業主信息等。 2、報修管理&#xff1a;系統需要提供報修管理功能&#xff0c;業主可以通過系統提交報修申請&#xff0c;物業管理人員可…
閱讀更多...
docke網絡之bridge、host、none

docke網絡之bridge、host、none

一、bridge網絡 1.創建一個測試容器 [rootlocalhost ~]# docker run -d -it --name busybox_1 busybox /bin/sh -c "while true;do sleep 3600;done" 03b308c847edd23f21ba69afb825d92f7aaeb05b1ff4431dd47ccee439a0361a 2.查看當前機器docker有哪些網絡 [rootlocal…
閱讀更多...
C++ 訪問限定符

C++ 訪問限定符

目錄 訪問修飾符概述 protected在類的內部和派生類中訪問調用 private在類的內部訪問和調用 訪問修飾符概述 在C中&#xff0c;有三個主要的訪問修飾符&#xff1a;public、private和protected。這些修飾符用于控制類的成員&#xff08;變量和函數&#xff09;的訪問權限。…
閱讀更多...
2023年9月8日 Go生態洞察：gopls的擴展與Go生態系統的成長

2023年9月8日 Go生態洞察：gopls的擴展與Go生態系統的成長

&#x1f337;&#x1f341; 博主貓頭虎&#xff08;&#x1f405;&#x1f43e;&#xff09;帶您 Go to New World?&#x1f341; &#x1f984; 博客首頁——&#x1f405;&#x1f43e;貓頭虎的博客&#x1f390; &#x1f433; 《面試題大全專欄》 &#x1f995; 文章圖文…
閱讀更多...
AI材料專題報告：AI革命催生新需求國產替代推動新方向

AI材料專題報告：AI革命催生新需求國產替代推動新方向

今天分享的AI系列深度研究報告&#xff1a;《AI材料專題報告&#xff1a;AI革命催生新需求國產替代推動新方向》。 &#xff08;報告出品方&#xff1a;光大證券&#xff09; 報告共計&#xff1a;25頁 1、算力需求增長催生 800G 光模塊需求 算力是數字經濟時代新生產力&…
閱讀更多...
2023年10月9日 Go生態洞察：深入了解類型推斷及其更多細節

2023年10月9日 Go生態洞察：深入了解類型推斷及其更多細節

&#x1f337;&#x1f341; 博主貓頭虎&#xff08;&#x1f405;&#x1f43e;&#xff09;帶您 Go to New World?&#x1f341; &#x1f984; 博客首頁——&#x1f405;&#x1f43e;貓頭虎的博客&#x1f390; &#x1f433; 《面試題大全專欄》 &#x1f995; 文章圖文…
閱讀更多...
【C++ Primer Plus學習記錄】if語句

【C++ Primer Plus學習記錄】if語句

目錄 一、if語句 二、if else語句 三、格式化if else語句 四、if else if else結構 一、if語句 if語句讓程序能夠決定是否應執行特定的語句。 if有兩種格式&#xff1a;if和if else。 if語句的語法與while相似&#xff1a; if(test-condition)statement; 如果test-con…
閱讀更多...
Android 從assets讀取文件裝載成Bitmap，Kotlin

Android 從assets讀取文件裝載成Bitmap，Kotlin

Android 從assets讀取文件裝載成Bitmap&#xff0c;Kotlin /*** fileName assets里面圖片文件名*/fun readBitmapFromAssets(ctx: Context, fileName: String): Bitmap? {val assetManager: AssetManager ctx.assetsvar bitmap: Bitmap? nulltry {val inputStream assetMa…
閱讀更多...
Java預科知識

Java預科知識

以下內容是根據狂神的Java說、chatgpt和csdn相關博客&#xff0c;結合自己的理解完成的。 Java了解 基于Java 開發了巨多的平臺&#xff0c;系統&#xff0c;工具 構建工具&#xff1a; Ant, Maven, Jekins應用服務器&#xff1a;Tomcat, Jetty, Jboss, Websphere, weblogic…
閱讀更多...
程序員入門：打造抖音同城外賣小程序的技術解析

程序員入門：打造抖音同城外賣小程序的技術解析

在當今數字化時代&#xff0c;外賣平臺已經成為人們生活中不可或缺的一部分&#xff0c;而抖音作為一款社交媒體平臺&#xff0c;也開始涉足同城外賣服務。本文將為初學者提供一份關于如何打造抖音同城外賣平臺的技術解析&#xff0c;探討其中的關鍵技術和步驟。 一、項目規劃…
閱讀更多...
【C++】輸入輸出流 ⑤ ( cin 輸入流對象 | cin.ignore() 函數 | cin.peek() 函數 | cin.putback() 函數 )

【C++】輸入輸出流 ⑤ ( cin 輸入流對象 | cin.ignore() 函數 | cin.peek() 函數 | cin.putback() 函數 )

文章目錄 一、cin.ignore() 函數1、cin.ignore() 函數簡介2、cin.ignore() 函數原型3、代碼示例 - cin.ignore() 函數 二、cin.peek() 函數1、cin.peek() 函數簡介2、代碼示例 - cin.peek() 三、cin.putback() 函數1、cin.putback() 函數簡介2、代碼示例 - cin.putback() 一、c…
閱讀更多...
if語句和switch語句來確定金額之下的優惠折扣

if語句和switch語句來確定金額之下的優惠折扣

一、優惠規則 輸入相應的金額&#xff0c;可以獲得規則之下&#xff0c;金額相應的享受的折扣&#xff0c;需要先定義金額&#xff0c;然后就是使用if語句進行判斷&#xff0c;使用switch語句選擇判斷規則之下對應的優惠折扣。 二、相關代碼 public class DiscountPrice {p…
閱讀更多...
＜DB2＞《DB2使用期間一些注意事項》

＜DB2＞《DB2使用期間一些注意事項》

1 建存儲過程時 Create 后不能使用 TAB 鍵 create procedure create 后只能用空格&#xff0c;而不可用 tab 健&#xff0c;否則編譯會通不過。 2 查看語句執行計劃 dynexpln -d testdb -f test.sql -o test.out -g -z ; sql 語句放在 test.sql 中&#xff0c;結果輸出到 te…
閱讀更多...
git 拉取項目指定目錄或者指定文件

git 拉取項目指定目錄或者指定文件

因為要做數據庫自動更新&#xff0c;需要拉取Gitlab項目中/bm-server-biz/docs目錄下的表更新sql文件&#xff0c;其他的都不需要&#xff0c;這時候可以利用git的“sparse checkout”方法&#xff08;設置稀疏檢出&#xff09;來實現。 1、在項目目錄下git 初始化 [rootxcc-…
閱讀更多...
開源軟件：JumpServer、DataEase、MeterSphere

開源軟件：JumpServer、DataEase、MeterSphere

FIT2CLOUD 認識開源軟件之前&#xff0c;先了解一下開發團隊FIT2CLOUD。FIT2CLOUD&#xff08;飛致云&#xff09;是一家中國領先的開源軟件公司&#xff0c;成立于2014年。公司專注于提供工業操作系統技術平臺與解決方案&#xff0c;是中國工業互聯網行業的領軍企業&#xff…
閱讀更多...
矩陣處理—Zigzag矩陣打印

矩陣處理—Zigzag矩陣打印

與其明天開始&#xff0c;不如現在行動&#xff01; 文章目錄 Zigzag矩陣打印1.1 題目描述1.2 解決思路1.3 代碼實現 &#x1f48e;總結 Zigzag矩陣打印 1.1 題目描述 有一個n行m列的矩陣&#xff0c;要求按照Z字形打印出數據&#xff0c;如圖&#xff1a; 1.2 解決思路 用一…
閱讀更多...
Weblogic T3協議反序列化漏洞

Weblogic T3協議反序列化漏洞

文章目錄 1. Weblogic T3協議反序列化漏洞1.1 漏洞描述1.2 基本原理1.3 漏洞復現1.4 修復建議 1. Weblogic T3協議反序列化漏洞 1.1 漏洞描述 說明內容漏洞編號CVE-2018-2628漏洞名稱Weblogic T3協議反序列化漏洞漏洞評級高危影響范圍Weblogic 10.3.6.0Weblogic 12.1.3.0Webl…
閱讀更多...
基于JavaWeb+SSM+Vue居住證申報系統小程序的設計和實現

基于JavaWeb+SSM+Vue居住證申報系統小程序的設計和實現

基于JavaWebSSMVue居住證申報系統小程序的設計和實現 源碼獲取入口KaiTi 報告Lun文目錄前言主要技術系統設計功能截圖訂閱經典源碼專欄Java項目精品實戰案例《500套》 源碼獲取 源碼獲取入口 KaiTi 報告 1.1題目背景 隨著時代的發展&#xff0c;人口流動越來越頻繁&#xff0…
閱讀更多...
最新文章

Copyright @ 2022~2023