小迪23-28~31-js簡單回顧

前端-js開發

課堂完結后欲復習鞏固也方便后續-重游-故寫此篇
從實現功能過渡到涉及的相關知識點

知識點

1、 JS 是前端語言，是可以被瀏覽器“看到”的，當然也可以被修改啊，被瀏覽器禁用網頁的 JS 功能啊之類的。所以一般都是前后端分離開發，前端只負責顯示與提醒用戶。

2、 JS 是可以在瀏覽器里調試的，斷點之類的都行，瀏覽器里也有控制臺可以執行命令。

3、 瀏覽器不可能看到所有的 JS 文件，但是斷點也帶來了其他可能，只要斷在你想知道參數的地方，那么沒有顯示的 JS 文件也不行影響到你，畢竟你只需要它們運行而非一定得拿到源碼。

登錄驗證

簡單流程：（最初實驗版）前端 js 發送用戶名和密碼給后端，后端判斷是否正確后返回參數，js依據參數決定是否進行頁面跳轉與彈窗

分析問題：

1、 前端語言是可以看到的，是可以被改變的，所以不能給前端跳轉頁面的權力，只能做提醒，不然會導致安全問題。

前端語言應只供展示與簡單提醒

Code:
前端 js 部分代碼如下：

<!-- 采用js傳輸，php驗證-->
<body><h3>用戶登錄</h3><div><label for="username">用戶名：</label><input type="text" class="username" name="username" required></div><br><div><label for="password">密碼：</label><input type="password" class="password" name="password" required></div><br><button>登錄</button>
</body><!-- //導入jquery --><script src="./js/js/jquery-3.7.1.js"></script>
<!-- 都是鍵值對！！！ -->
<script>$('button').click(function(){$.ajax({url: "check_login.php",data: {user:$('.username').val(),passwd:$('.password').val()},type: "POST",dataType: "json",success: function(data) {console.log(data);if(data.info==1){alert('登陸成功！');// location.href="index.php";/*** 安全漏洞出現，原因：前端代碼不可進行操作，只需要提示就可以了* * 小寫，哦~*/}else{console.log('登陸失敗！');}},error: function(text) {alert('登陸失敗！');}});});</script>

文件上傳

簡單流程：前端 js 判斷文件格式等是否正確，然后發送給后端 php 進一步處理文件。
簡單模擬了已下前端部分，并沒有寫后端 php。

分析問題：

1、 前端先做第一步判斷減輕服務器壓力，但是也容易被繞過，所以后端還是得判斷一次（也許可以優化法子？）

2、 但是并沒有賦予前端任何權利并沒有安全問題，壓力給到后端。

Code：
前端部分 js 代碼如下：

<body><div class="upload-container"><h2>上傳文件</h2><form action="upload.php" method="post" enctype="multipart/form-data"><input type="file" name="fileToUpload" id="file"  onchange="check_upload(this.value)"><button type="submit">上傳文件</button></form></div>
</body><!-- 使用js來實現前端的文件格式過濾 -->
<script>//文件后綴白名單let list_write=['jpg','png','gif','jpeg','webp'];//文件上傳時發生改變觸發方法function check_upload(file_name){//取出后綴let idx=file_name.lastIndexOf('.');let val=file_name.substring(idx+1,file_name.length);if(list_write.indexOf(val)!=-1){console.log('文件格式無誤');//將文件發送后端……}else{//刷新網頁取消文件輸入location.reload(true);alert('文件格式有誤');    }}
</script>

打包器webpack

基本的目錄結構如下：

D:\VSCODE\WEBPACK-DEMO
│ package.json（版本控制及腳本配置）
│ webpack.config.js（配置文件）
│
├─dist（打包后的成品code）
├─node_modules（依賴包）
└─src（存自己寫的code）
???├─index.html
???└─index.js

接下來通過簡單使用來復習功能，并引入其作用。

開始之前先復習一下其概念：
Webpack 是一個現代 JavaScript 應用程序的靜態模塊打包工具。它分析項目結構，找到 JavaScript 模塊以及其他一些瀏覽器不能直接運行的擴展語言（如 Scss，TypeScript 等），并將其轉換和打包為合適的格式供瀏覽器使用。

然后使其使用與感悟：
就舉個最簡單的 js 方面的例子：一個html頁面可能需要引入非常多的 js 文件，不但太多了不好維護，也會導致訪問的速度變慢，為了解決這一問題，可以用打包器 webpack 將任意多個 js 文件打包成一個或幾個 js 文件。流程大致如下：
1、打包器分析 js 文件之間的依賴關系（通過import/require語句）
2、構建依賴圖
3、打包、優化、合并成一/幾個 JS 文件

一、 新建文件夾 ‘js’，存放兩個 js 文件
代碼分別如下:

function divide(a,b){return a-b;
}
export default divide;

export default function add(a,b){return a+b;
}

二、 在 src 目錄下新建一個 JS 文件用于聯系多個 JS 文件（上面兩）

import one from '../js/_1';
import two from '../js/_2';console.log(one(1,2))
console.log(two(1,2))

三、 配置 webpack.config.js 文件如下

const path = require('path');module.exports = {mode:"development",//開發模式// mode:"production" 生產模式entry: './src/index.js',//入口文件output: {filename: 'bundle.js',//結果文件path: path.resolve(__dirname, 'dist')//結果文件的位置},
}
知識點

1、 上面配置 code 中的 mode
????開發模式用于網站開發過程中，生產模式用于網站部署后。至于弄混會咋樣，如圖，源碼漏泄給瀏覽器

在這里插入圖片描述

四、 執行打包命令

首先在 package.json文件里添加下面代碼，然后移動終端的路徑到webpack根目錄下，運行命令npm run build

  "scripts":{"build":"webpack"}

這里也貼上兩種模式產生的結果 JS 文件代價量的區別

生產模式code：

(()=>{"use strict";console.log(1-2),console.log(3)})();

開發模式code：
是的，1行和100行的區別

/** ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").* This devtool is neither made for production nor for readable output files.* It uses "eval()" calls to create a separate source file in the browser devtools.* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)* or disable the default devtool with "devtool: false".* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).*/
/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({/***/ "./js/_1.js":
/*!******************!*\!*** ./js/_1.js ***!\******************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction divide(a,b){\r\n    return a-b;\r\n}\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (divide);\n\n//# sourceURL=webpack:///./js/_1.js?\n}");/***/ }),/***/ "./js/_2.js":
/*!******************!*\!*** ./js/_2.js ***!\******************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ add)\n/* harmony export */ });\nfunction add(a,b){\r\n    return a+b;\r\n}\n\n//# sourceURL=webpack:///./js/_2.js?\n}");/***/ }),/***/ "./src/index.js":
/*!**********************!*\!*** ./src/index.js ***!\**********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _js_1__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../js/_1 */ \"./js/_1.js\");\n/* harmony import */ var _js_2__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../js/_2 */ \"./js/_2.js\");\n\r\n\r\n\r\nconsole.log((0,_js_1__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(1,2))\r\nconsole.log((0,_js_2__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(1,2))\n\n//# sourceURL=webpack:///./src/index.js?\n}");/***/ })/******/ 	});
/************************************************************************/
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/ 		// Check if module is in cache
/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
/******/ 		if (cachedModule !== undefined) {
/******/ 			return cachedModule.exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = __webpack_module_cache__[moduleId] = {
/******/ 			// no module.id needed
/******/ 			// no module.loaded needed
/******/ 			exports: {}
/******/ 		};
/******/ 	
/******/ 		// Execute the module function
/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ 	
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/ 	
/************************************************************************/
/******/ 	/* webpack/runtime/define property getters */
/******/ 	(() => {
/******/ 		// define getter functions for harmony exports
/******/ 		__webpack_require__.d = (exports, definition) => {
/******/ 			for(var key in definition) {
/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ 				}
/******/ 			}
/******/ 		};
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
/******/ 	(() => {
/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/make namespace object */
/******/ 	(() => {
/******/ 		// define __esModule on exports
/******/ 		__webpack_require__.r = (exports) => {
/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 			}
/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
/******/ 		};
/******/ 	})();
/******/ 	
/************************************************************************/
/******/ 	
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	// This entry module can't be inlined because the eval devtool is used.
/******/ 	var __webpack_exports__ = __webpack_require__("./src/index.js");
/******/ 	
/******/ })()
;

express實現服務端

服務器，也就是訪問特定ip與端口會返回特定數據
由此
1、模擬網頁刷新（渲染特定網頁）
2、模擬網頁傳輸用戶名密碼需要連接數據庫并返回結果
3、依據get、post方式不同返回不同（路由）

由于是簡單模擬，所以都集合在了一個server.js里，還有一個返回/渲染網頁用的html文件。

html 文件為渲染用登錄頁面，code：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>登錄頁面</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;font-family: sans-serif;}.login-form {padding: 20px;border: 1px solid #ccc;border-radius: 8px;width: 300px;}.error-message {color: red;display: none;}</style>
</head>
<body><form action="http://127.0.0.1:3001/login" method="POST" ><h3>用戶登錄</h3><div><label for="username">用戶名：</label><input type="text" id="username" name="username" required></div><div><label for="password">密碼：</label><input type="password" id="password" name="password" required></div><input type="submit" value="登錄"></form>
</body>
</html>

server.js文件code：

// 引入模塊
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
// 創建一個express應用
const app = express();
// 定義端口號
const port = 3001;
// 提供靜態文件服務
// app.use(express.static('public'));// 解析 application/x-www-form-urlencoded 數據
app.use(bodyParser.urlencoded({ extended: false }));// 初始頁面
app.get('/',(req, res) => {// res.send('GET請求成功！');//還可以渲染（返回）html文件！！res.sendFile(__dirname+"/html/login.html");
});// 1、get 方式傳輸表單數據
app.get('/login',(req, res) => {//參數獲取const u=req.query.username;const p=req.query.password;//連接數據庫……//判斷if(u=="admin" && p=="123456"){res.send("歡迎管理員！get");}else{res.send("閑雜人等不得入內！get");}
});
// 2、post 方式傳輸表單數據
app.post('/login',(req, res) => {//參數獲取const u=req.body.username;const p=req.body.password;//數據庫設置const connection = mysql.createConnection({host     : 'localhost',user     : 'root',password : 'password',database : 'user_all',port     :'3307'});//連接數據庫connection.connect((error)=>{if(error){console.log("連接失敗");}else{console.log("連接成功");}})//語句let sentence='SELECT * FROM admin where username="'+u+'" and password="'+p+'"';console.log(sentence);connection.query(sentence, (error, results, fields)=>{if(error){console.log("數據庫連接失敗")}console.log(results);try{//判斷if(u==results[0]["username"] && p==results[0]["password"]){res.send("歡迎管理員！post");}else{res.send("閑雜人等不得入內！post");}}catch{console.log("語句有誤！");}});// //判斷// if(u=="admin" && p=="123456"){//     res.send("歡迎管理員！post");// }else{//     res.send("閑雜人等不得入內！post");// }
});// 啟動服務器并監聽指定端口
app.listen(port, () => {console.log(`Server is running on http://localhost:${port}`);
});

（如有不恰當的地方歡迎指正哦 ~o(●’?’●)o）

參考blogs：

【webpack超詳細教程，學webpack看這一篇就夠了！（上）】

【【Webpack】三種模式詳解】

【Webpack三種打包方式：（以下所有命令都是windows下執行的）】

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

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

相關文章

vue項目預覽pdf隱藏工具欄和側邊欄

vue項目預覽pdf隱藏工具欄和側邊欄

1.在預覽PDF時&#xff0c;PDF查看器通常會顯示工具欄、側邊欄等控件。如果想隱藏這些控件&#xff0c;可以通過在PDF文件的URL中添加參數來實現。可以使用#toolbar0和#navpanes0等參數來隱藏工具欄和側邊欄。解釋&#xff1a; #toolbar0&#xff1a;隱藏工具欄。#navpanes0&am…
閱讀更多...
ERP、CRM、OA整合工具哪家好？2025年最新推薦

ERP、CRM、OA整合工具哪家好？2025年最新推薦

當前&#xff0c;大多數中大型企業已部署了ERP&#xff08;企業資源計劃&#xff09;、CRM&#xff08;客戶關系管理&#xff09;、OA&#xff08;辦公自動化&#xff09;等核心業務系統。這些系統在各自職能領域內發揮著關鍵作用&#xff1a;ERP管理財務、供應鏈與生產&#x…
閱讀更多...
設計模式：命令模式 Command

設計模式：命令模式 Command

目錄前言問題解決方案結構代碼前言 命令是一種行為設計模式&#xff0c;它可將請求轉換為一個包含與請求相關的所有信息的獨立對象。該轉換讓你能根據不同的請求將方法參數化、延遲請求執行或將其放入隊列中&#xff0c;且能實現可撤銷操作。 問題 假如你正在開發一款新的文字…
閱讀更多...
4-verilog簡單狀態機

4-verilog簡單狀態機

verilog簡單狀態機 1. always (posedge clk or negedge rst_n) beginif (!rst_n)cnt_1ms < 20b0;else if (cnt_1ms_en)cnt_1ms < cnt_1ms 1b1;elsecnt_1ms < 20d0; endalways (posedge clk or negedge rst_n) beginif(!rst_n)cur_state < s1_power_init;else i…
閱讀更多...
ICCV2025 | 對抗樣本智能安全方向論文匯總 | 持續更新中~

ICCV2025 | 對抗樣本智能安全方向論文匯總 | 持續更新中~

匯總結果來源&#xff1a;ICCV 2025 Accepted Papers 若文中出現的 論文鏈接 和 GitHub鏈接 點不開&#xff0c;則說明還未公布&#xff0c;在公布后筆者會及時添加. 若筆者未及時添加&#xff0c;歡迎讀者告知. 文章根據題目關鍵詞搜索&#xff0c;可能會有遺漏. 若筆者出現…
閱讀更多...
SPI通信中CS片選的兩種實現方案：硬件片選與軟件片選

SPI通信中CS片選的兩種實現方案：硬件片選與軟件片選

一. 簡介本文簡單熟悉一下SPI通信中的片選信號&#xff08;CS&#xff09;的兩種實現方案&#xff1a;硬件片選和軟件片選&#xff0c;以及兩種方案的區別&#xff0c;如何選擇。在SPI&#xff08;Serial Peripheral Interface&#xff09;通信中&#xff0c;片選信號&#xff…
閱讀更多...
IBM 報告稱除美國外，全球數據泄露成本下降

IBM 報告稱除美國外，全球數據泄露成本下降

IBM 發布的一份針對 113,620 起數據泄露事件的年度全球分析報告發現&#xff0c;平均數據泄露成本同比下降了 9%&#xff0c;這主要歸功于更快的發現和遏制速度。 該報告與波耐蒙研究所 (Ponemon Institute) 合作完成&#xff0c;發現全球平均數據泄露成本從 2024 年的 488 萬美…
閱讀更多...
Docker Compose 部署 Dify + Ollama 全棧指南：從裸奔到安全可觀測的 AI 應用實戰

Docker Compose 部署 Dify + Ollama 全棧指南：從裸奔到安全可觀測的 AI 應用實戰

&#x1f4cc; 摘要 本文以中國開發者視角出發&#xff0c;手把手教你用 Docker Compose 在本地或輕量云主機上部署 Dify Ollama 組合棧&#xff0c;實現“安全、可觀測、可擴展”的私有化 AI 應用平臺。全文約 8 000 字&#xff0c;包含&#xff1a; 架構圖、流程圖、甘特圖…
閱讀更多...
「源力覺醒 創作者計劃」_全方面實測文心ERNIE-4.5-VL-28B-A3B開源大模型

「源力覺醒 創作者計劃」_全方面實測文心ERNIE-4.5-VL-28B-A3B開源大模型

「源力覺醒 創作者計劃」_全方面實測文心ERNIE-4.5-VL-28B-A3B開源大模型1. 文心大模型4.5-28B概述2. 部署ERNIE-4.5-VL-28B-A3B文心大模型2.1. 創建GPU云主機2.2. ERNIE-4.5-VL-28B-A3B部署2.3. 創建大模型API交互接口3. 文心大模型4.5-28B多方面性能評測3.1. 語言理解方面3.2…
閱讀更多...
數據庫學習------數據庫事務的特性

數據庫學習------數據庫事務的特性

在數據庫操作中&#xff0c;事務是保證數據一致性和完整性的核心機制。無論是簡單的單表更新&#xff0c;還是復雜的多表關聯操作&#xff0c;事務都扮演著至關重要的角色。那么什么是數據庫事務&#xff1f;數據庫事務是一個不可分割的操作序列&#xff0c;它包含一個或多個數…
閱讀更多...
18-C語言：第19天筆記

18-C語言：第19天筆記

C語言&#xff1a;第19天筆記 內容提要 構造類型 結構體共用體/聯合體構造類型 數據類型 基本類型/基礎類型/簡單類型 整型 短整型&#xff1a;short – 2字節基本整型&#xff1a;int – 4字節長整型&#xff1a;long – 32位系統4字節/ 64位系統8字節長長整型&…
閱讀更多...
centos下安裝anaconda

centos下安裝anaconda

下載 anaconda 安裝包 wget https://repo.anaconda.com/archive/Anaconda3-2022.05-Linux-x86_64.sh 2. 授權 chmod x Anaconda3-2022.05-Linux-x86_64.sh 3. 安裝 ./Anaconda3-2022.05-Linux-x86_64.sh 此時顯示Anaconda的信息&#xff0c;并且會出現More&#xff0c;繼續…
閱讀更多...
MySQL(172)如何進行MySQL的全局變量設置？

MySQL(172)如何進行MySQL的全局變量設置？

MySQL的全局變量是影響整個服務器設置和行為的參數。可以在服務器啟動時通過配置文件設置這些變量&#xff0c;也可以在服務器運行時通過SQL命令動態調整。以下是關于如何設置和管理MySQL全局變量的詳細說明和示例代碼。 一、通過配置文件設置全局變量 在MySQL服務器啟動時&…
閱讀更多...
【最后203篇系列】030 強化學習探索

【最后203篇系列】030 強化學習探索

前言 我發現在csdn寫完一篇文章越來越難了&#xff0c;有n篇寫了一半沒往下寫。原來我覺得補完203篇&#xff0c;湊到一千篇是個很簡單的事&#xff0c;沒想到還挺難的。 我回想了一下&#xff0c;過去一年大模型領域繼續發生這很劇烈的變化&#xff0c;這是一種新的模式 &…
閱讀更多...
fastGEO v1.7.0 大更新，支持PCA、差異分析、火山圖、熱圖、差異箱線圖、去批次等分析

fastGEO v1.7.0 大更新，支持PCA、差異分析、火山圖、熱圖、差異箱線圖、去批次等分析

前言 之前一篇文章【fastGEO V1.6.1 這個版本強的可怕&#xff0c;GEO數據自動下載、探針注釋、Shiny App】介紹了fastGEO用于GEO數據下載和探針注釋的核心功能。 雖然是付費50獲取安裝包&#xff08;剛開始是20&#xff09;&#xff0c;但也深受歡迎&#xff0c;說明這個R包…
閱讀更多...
LLM 典型模型技術特性及項目落地全流程實踐

LLM 典型模型技術特性及項目落地全流程實踐

在大語言模型（LLM）技術快速迭代的當下，開發者面臨的核心挑戰已從 “是否使用” 轉變為 “如何正確選型并高效落地”。本文將系統剖析當前主流 LLM 的技術特性，結合實際項目架構，提供從模型選型、接口集成到性能優化的全流程技術方案，并附關鍵代碼實現，為工業級 LLM 應用…
閱讀更多...
機器學習消融實驗：方法論演進、跨領域應用與前沿趨勢

機器學習消融實驗：方法論演進、跨領域應用與前沿趨勢

一、定義與起源 消融實驗&#xff08;Ablation Study&#xff09;是一種系統性移除或修改模型關鍵組件以評估其對整體性能貢獻的實驗方法論。其術語源于神經科學和實驗心理學&#xff08;20世紀60-70年代&#xff09;&#xff0c;指通過切除動物腦區研究行為變化的實驗范式。2…
閱讀更多...
北京-4年功能測試2年空窗-報培訓班學測開-今天來聊聊我的痛苦

北京-4年功能測試2年空窗-報培訓班學測開-今天來聊聊我的痛苦

最近狀態很不對勁&#xff0c;因為我很少花時間好好思考&#xff0c;只是處于執行狀態&#xff0c;甚至也不太寫筆記了&#xff0c;我原以為這樣會更高效&#xff0c;現在想想&#xff0c;開始不愿花時間深思才是斷弦的開始吧而且從結課后我有了隱瞞&#xff0c;我不想過多透露…
閱讀更多...
深度解析 ｜ AI 幻覺的形成和應對路徑

深度解析 ｜ AI 幻覺的形成和應對路徑

寫這一篇的緣由一是因為我也在摸索如何降低 AI 幻覺提升 AI 工具使用效率&#xff0c;二是因為前兩周在MIT學習時老師講的一節課&#xff0c;剛好也解釋了這個問題&#xff0c;所以一并做個總結&#xff0c;分享給大家。 近幾年&#xff0c;大型語言模型&#xff08;LLM&#…
閱讀更多...
Java把word轉HTML格式

Java把word轉HTML格式

Java把word轉HTML格式&#xff0c;兩種方式方式一&#xff1a;maven引入依賴,pom.xml<dependency><groupId>e-iceblue</groupId><artifactId>spire.office.free</artifactId><version>5.3.1</version> </dependency>然后代碼讀…
閱讀更多...
最新文章

Copyright @ 2022~2023