小迪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/web/92095.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/92095.shtml
英文地址,請注明出處:http://en.pswp.cn/web/92095.shtml

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

相關文章

JavaScript 概述

JavaScript 是一種高級、解釋型編程語言&#xff0c;主要用于網頁開發&#xff0c;使其具備動態交互功能。它是網頁三大核心技術之一&#xff08;HTML、CSS、JavaScript&#xff09;&#xff0c;能夠直接嵌入 HTML 頁面并在瀏覽器中執行。核心特性動態弱類型語言 JavaScript 是…

Mermaid流程圖可視化系統:基于Spring Boot與Node.js的三層架構實現

什么是Mermaid?系統架構設計 三層架構 overview架構交互流程 核心組件詳解 1. Spring Boot后端2. Node.js中間層3. 前端界面 功能實現 1. 節點和關系管理2. 流程圖渲染3. 主題切換4. 導出功能 使用指南 啟動步驟頁面操作 總結與展望 什么是Mermaid? Mermaid流程圖可視化系統…

R 數據框:高效數據處理與分析的利器

R 數據框:高效數據處理與分析的利器 引言 在數據科學和統計分析領域,R語言因其強大的數據處理能力和豐富的統計模型而備受推崇。R數據框(data frame)是R語言中一種重要的數據結構,它以表格形式存儲數據,使得數據的組織、操作和分析變得簡單高效。本文將深入探討R數據框…

論文閱讀筆記:《Curriculum Coarse-to-Fine Selection for High-IPC Dataset Distillation》

論文閱讀筆記&#xff1a;《Curriculum Coarse-to-Fine Selection for High-IPC Dataset Distillation》1.背景與動機2.核心貢獻3.方法詳解4.實驗結果與貢獻主體代碼算法整體邏輯CVPR25 github 一句話總結&#xff1a; CCFS基于組合范式&#xff08;軌跡匹配選擇真實圖像&…

【Linux系統】詳解,進程控制

前言&#xff1a; 上文我們講到了Linux中的虛擬空間地址&#xff0c;知道了一個進程對應一個虛擬地址空間&#xff0c;虛擬空間地址與物理地址之間通過頁表映射....【Linux】虛擬地址空間-CSDN博客 本文我們來講一講Linux系統是如何控制進程的&#xff01; 如果喜歡本期文章&am…

Matplotlib(五)- 繪制子圖

文章目錄一、子圖概述1. 子圖介紹2. 子圖布局2.1 網格布局2.2 自由布局二、繪制等分區域子圖1. 使用 plt.subplot() 繪制子圖示例&#xff1a;繪制多個子圖示例&#xff1a;工業月度同比情況2. 使用 plt.subplots() 繪制子圖示例&#xff1a;繪制多個子圖示例&#xff1a;部分國…

C++中互斥鎖、共享鎖深度解析

一&#xff0c;互斥鎖互斥鎖&#xff08;Mutex&#xff0c;全稱 Mutual Exclusion&#xff09;是并發編程中用于保護共享資源的核心同步機制。它通過確保同一時間僅有一個線程訪問臨界區&#xff08;Critical Section&#xff09;&#xff0c;解決多線程環境下的數據競爭和不一…

Qt中的QWebSocket 和 QWebSocketServer詳解:從協議說明到實際應用解析

前言 本篇圍繞 QWebSocket 和 QWebSocketServer&#xff0c;從協議基礎、通信模式、數據傳輸特點等方面展開&#xff0c;結合具體接口應用與實戰案例進行說明。 在實時網絡通信領域&#xff0c;WebSocket 技術以其獨特的全雙工通信能力&#xff0c;成為連接客戶端與服務器的重要…

機器學習 —— 決策樹

機器學習 —— 決策樹&#xff08;Decision Tree&#xff09;詳細介紹決策樹是一種直觀且易于解釋的監督學習算法&#xff0c;廣泛應用于分類和回歸任務。它通過模擬人類決策過程&#xff0c;將復雜問題拆解為一系列簡單的判斷規則&#xff0c;最終形成類似 “樹” 狀的結構。以…

車規MCU軟錯誤防護技術的多維度分析與優化路徑

摘要&#xff1a;隨著汽車電子技術的飛速發展&#xff0c;微控制單元&#xff08;MCU&#xff09;在汽車電子系統中的應用日益廣泛。然而&#xff0c;大氣中子誘發的單粒子效應&#xff08;SEE&#xff09;對MCU的可靠性構成了嚴重威脅。本文深入探討了軟錯誤防護技術在車規MCU…

原生微信小程序實現語音轉文字搜索---同聲傳譯

效果展示 ![在這里插入圖片描述](https://i-blog.csdnimg.cn/direct/23257ce3b6c149a1bb54fd8bc2a05c68.png#pic_center 注意&#xff1a;引入同聲傳譯組件請看這篇文章 1.search.wxml <view class"search-page"><navigation-bar title"搜索" …

Wireshark安裝過程缺失vc_runtimeMinimum_x64.msi文件,安裝 Visual C++ Redistributable

一、我大意了 一開始是Npcap裝不上。 在這個網站下的&#xff1a; Wireshark (kafan58.com) 安裝程序&#xff1a; 安裝過程&#xff1a; 無語死了&#xff0c;感覺被騙了......外網下的才是最正版的。 二、外網正版 下載最新的4.4.8版本Wireshark重新安裝 2.1 vc_runtime…

高通平臺Wi-Fi Display學習-- 調試 Wi-Fi Display 問題

4.1 調試 WFD 性能 4.1.1 通過啟用調節器模式驗證 WFD 當系統設為調節器模式時,設備的運行時鐘將達到峰值。要在系統中啟用調節器模式,應 在序列中輸入以下命令: 1. adb shell stop mpdecision 2. adb shell echo 1→/sys/devices/system/cpu/cpu1/online 3. adb shell…

5G專網與SD-WAN技術融合:某飲料智能工廠網絡架構深度解析

隨著工業互聯網的快速發展&#xff0c;制造業正從傳統的生產模式向智能化、數字化方向轉型。某飲料智能工廠項目創新性地引入了5G專網與SD-WAN技術&#xff0c;形成了“連接-計算-應用-安全”的全鏈條網絡架構。本文將深入剖析這兩種技術在智能工廠中的應用場景、部署架構&…

Java項目:基于SSM框架實現的公益網站管理系統【ssm+B/S架構+源碼+數據庫+畢業論文+答辯PPT+遠程部署】

摘 要 現代經濟快節奏發展以及不斷完善升級的信息化技術&#xff0c;讓傳統數據信息的管理升級為軟件存儲&#xff0c;歸納&#xff0c;集中處理數據信息的管理方式。本公益網站就是在這樣的大環境下誕生&#xff0c;其可以幫助管理者在短時間內處理完畢龐大的數據信息&#x…

向華為學習——IPD流程體系之IPD術語

第一章 IPD體系 1.1集成產品開發IPD Integrated Product Development,IPD是一種領先的、成熟的產品開發的管理思想和管理模式。它是根據大量成功的產品開發管理實踐總結出來的,并被大量實踐證明的高效的產品開發模式。通過IPD,可建立起基于市場和客戶需求驅動的集成產品開…

落霞歸雁:從自然之道到“存內計算”——用算法思維在芯片里開一條“數據高速航道”

作者 落霞歸雁&#xff08;CSDN首發&#xff0c;轉載請注明&#xff09; 段落一 現象&#xff1a;當“摩爾”老去&#xff0c;數據卻在狂奔 過去 30 年&#xff0c;CPU 頻率翻了 60 倍&#xff0c;而 DRAM 帶寬只翻了 20 倍。算力與帶寬的剪刀差&#xff0c;讓“計算”變成“等…

StyleX:Meta推出的高性能零運行時CSS-in-JS解決方案

簡介 StyleX 是由 Meta 開發的零運行時 CSS-in-JS 解決方案&#xff0c;在構建時將樣式編譯為靜態 CSS&#xff0c;消除運行時開銷。 核心特性 零運行時開銷 – 構建時編譯為靜態 CSS類型安全 – 完整的 TypeScript 支持原子化 CSS – 自動生成原子化類名&#xff0c;最小化…

LINUX 85 SHElL if else 前瞻 實例

問題 判斷用戶是否存在 id user id $user變量判斷vsftpd軟件包被安裝 rpm -q vsftpd rpm -ql vsftpd >& null[rootweb ~]# rpm -ql vsftpd >/dev/null 2>&1 您在 /var/spool/mail/root 中有郵件yum install vsftpd 內核主版本判斷 uname -rcut -d[rootweb ~]#…

2025 年非關系型數據庫全面指南:類型、優勢

非關系型數據庫的分類與特點隨著數據量呈指數級增長和數據類型日益多樣化&#xff0c;傳統關系型數據庫在處理海量非結構化數據時面臨著嚴峻挑戰。非關系型數據庫&#xff08;NoSQL&#xff09;應運而生&#xff0c;它摒棄了傳統關系模型的約束&#xff0c;采用更靈活的數據存儲…