前端-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