当前位置：首页 > news >正文

20230728----重返学习-跨域-模块化-webpack初步

news 文章来源：https://blog.csdn.net/seetoyou/article/details/131989815 2025/2/9 4:06:20

day-122-one-hundred-and-twenty-two-20230728-跨域-模块化-webpack初步

跨域

跨域

为什么要跨域？
- 浏览器为了安全，不能让我们的html文件可以随意引用别的服务器中的文件，只允许我们的html或js文件中，请求我们自己服务器。这个就是浏览器的同源策略。
- 因为我们的网页是一个html文件，这个html是在一个域名里的。而这个html会引用各种文件，如图片、js文件、css文件，这些文件，有时候并不在一个服务器里。
- 所以我们就需要去到其它服务器中查找这些文件。
跨域的方案有:
1. CORS-跨源资源共享方案
2. JSONP带填充的json方案

CORS

CORS 是一种官方的跨域解决方案，通过在服务器端添加一些 HTTP 头信息来告诉浏览器，允许哪些网站可以访问这些资源。

CORS针对get请求

fang/f20230728/f20230728/1.get.html 前端要写的代码。

<!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>get - http://127.0.0.1:5500/</title></head><body>请求体 - http://127.0.0.1:5500/</body><script>let xhr = new XMLHttpRequest();xhr.open("GET", "http://localhost:8080", true);xhr.onload = () => {console.log(`接收到的返回体： xhr.responseText-->`, xhr.responseText); //报错： Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.};xhr.send();</script>
</html>

fang/f20230728/f20230728/1.server.js 后端要写的代码。

const http = require('http')
http.createServer((req, res) => {res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')res.end('from: http://localhost:8080')
}).listen(8080, () => {console.log(`服务器地址为： http://localhost:8080`);
})

CORS针对post请求

fang/f20230728/f20230728/2.post.html

<!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>http://127.0.0.1:5500/</title></head><body>请求体 - http://127.0.0.1:5500/</body><script>let xhr = new XMLHttpRequest();xhr.open("POST", "http://localhost:8080/users", true);xhr.setRequestHeader("Content-Type", "application/json");xhr.onload = () => {console.log(`接收到的返回体： xhr.responseText-->`, xhr.responseText); //报错： Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.};xhr.send(JSON.stringify({ name: "zhufeng1" }));</script>
</html>

fang/f20230728/f20230728/2.server.js

const http = require('http')
http.createServer((req, res) => {res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')// res.end('from: http://localhost:8080')// Content-Type// res.setHeader('Access-Control-Allow-Headers', 'Content-Type')res.setHeader('Access-Control-Allow-Headers', 'Content-Type');//这个要在预检阶段返回。if (req.method === 'OPTIONS') {res.statusCode = 200return res.end()// return res.end('OPTIONS预检成功')}if (req.url === '/') {res.end('home')} else if (req.url === '/users') {switch (req.method) {case 'GET': res.end('users')breakcase 'POST': res.end('POST: users')breakdefault:res.end('404')break}}
}).listen(8080, () => {console.log(`服务器地址为： http://localhost:8080`);
})

CORS针对put请求

fang/f20230728/f20230728/3.put.html

<!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>http://127.0.0.1:5500/</title></head><body>请求体 - http://127.0.0.1:5500/</body><script>let xhr = new XMLHttpRequest();xhr.open("PUT", "http://localhost:8080/users", true);xhr.setRequestHeader("Content-Type", "application/json");xhr.onload = () => {console.log(`接收到的返回体： xhr.responseText-->`, xhr.responseText); //报错： Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.};xhr.send(JSON.stringify({ name: "zhufeng1" }));</script>
</html>

fang/f20230728/f20230728/3.server.js

const http = require('http')
http.createServer((req, res) => {res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')// res.end('from: http://localhost:8080')// Content-Type// res.setHeader('Access-Control-Allow-Headers', 'Content-Type')res.setHeader('Access-Control-Allow-Headers', 'Content-Type');//这个要在预检阶段返回。res.setHeader('Access-Control-Allow-Methods', 'PUT');//这个要在预检阶段返回。if (req.method === 'OPTIONS') {res.statusCode = 200return res.end()// return res.end('OPTIONS预检成功')}if (req.url === '/') {res.end('home')} else if (req.url === '/users') {switch (req.method) {case 'GET': res.end('GET: users')breakcase 'POST': res.end('POST: users')breakcase 'PUT': res.end('PUT: users')breakdefault:res.end('404')break}} else {res.statusCode = 400res.end()}
}).listen(8080, () => {console.log(`服务器地址为： http://localhost:8080`);
})

CORS针对Cookie

fang/f20230728/f20230728/4.visit.html

<!DOCTYPE html><head><title>get - http://127.0.0.1:5500/</title></head><body>请求体 - http://127.0.0.1:5500/</body><script>let xhr = new XMLHttpRequest();xhr.withCredentials='include'xhr.open("GET", "http://127.0.0.1:8080/visit", true);// xhr.open("GET", "http://localhost:8080/visit", true);xhr.onload = () => {console.log(`接收到的返回体： xhr.responseText-->`, xhr.responseText);};xhr.send();</script>
</html>

fang/f20230728/f20230728/4.server.js

const http = require('http')
http.createServer((req, res) => {res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')// res.end('from: http://localhost:8080')// Content-Type// res.setHeader('Access-Control-Allow-Headers', 'Content-Type')res.setHeader('Access-Control-Allow-Headers', 'Content-Type');//这个要在预检阶段返回。res.setHeader('Access-Control-Allow-Methods', 'PUT');//这个要在预检阶段返回。res.setHeader('Access-Control-Allow-Credentials', 'true')if (req.method === 'OPTIONS') {res.statusCode = 200return res.end()// return res.end('OPTIONS预检成功')}if (req.url === '/') {res.end('home')} else if (req.url === '/users') {switch (req.method) {case 'GET': res.end('GET: users')breakcase 'POST': res.end('POST: users')breakcase 'PUT': res.end('PUT: users')breakdefault:res.end('404')break}} else if (req.url === '/visit') {const cookies = req.headers.cookielet visit = 0if (cookies) {let items = cookies.split(/;\s+/)for (let i = 0; i < items.length; i++) {let item = items[i]let [key, value] = item.split('=')if (key === 'visit') {visit = Number(value)break}}}visit++res.setHeader('Set-Cookie', [`visit=${visit}; SameSite=None; Secure=false`])res.end(`${visit}`)} else {res.statusCode = 400res.end()}
}).listen(8080, () => {console.log(`服务器地址为： http://localhost:8080`);
})

CORS详细说明

fang/f20230728/3.cors/1.server.js

//1.引入node.js内置用来创建 http服务器的模块
const http = require('http');
//2.创建http服务器，指定请求处理函数，以后每当有客户端请求到达服务器的时候就会由此
//请求处理函数来处理请求，并返回响应
//req代表请求对象，如果 想获取请求信息比如请求行 METHOD url 请求头 请求体可以使用此对象
//res代表响应对象，如果想写入响应信息，比如状态码 响应头 响应体使用此对象 
http.createServer((req, res) => {//服务器返回一个响应头，以后如果是来自于5500的访问，则浏览器不会再进行阻止res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');//在预览的时候，需要返回响应头res.setHeader('Access-Control-Allow-Headers', 'Content-Type');//在预检的时候，需要返回响应头Allow-Methods，它的值就是允许跨域请求的方法res.setHeader('Access-Control-Allow-Methods', 'PUT');//允许跨域的时候携带cookieres.setHeader('Access-Control-Allow-Credentials', 'true')//如果客户端发送过来的是一个OPTIONS请求的话，说明客户端只是需要确认一下是否允许跨域//它需要判断是否有Access-Control-Allow-Origin就可以了，不需要响应体if (req.method === 'OPTIONS') {res.statusCode = 200;return res.end();}if (req.url === '/') {res.end('home');} else if (req.url === '/users') {switch (req.method) {case 'GET':res.end('users');break;case 'POST':res.end('POST /users');break;case 'PUT':res.end('PUT /users');break;default:break;}//当客户端访问/visit路径的时候} else if (req.url === '/visit') {//取出客户端传递过来的cookieconst cookies = req.headers.cookie;console.log('cookies', cookies);//定义一个客户端访问次数的变量let visit = 0;if (cookies) {// key1=value1;  visit=1;key3=value3//先用分割符把cookie拆成字符串的数组，然后再循环此字符串数组let items = cookies.split(/;\s+/);for (let i = 0; i < items.length; i++) {//再用=对每个cookie进行分割,会返回一个数组 1项 key 2项 valuelet [key, value] = items[i].split('=');if (key === 'visit') {visit = Number(value)break;}}}//让访问次数加1visit++;//服务器通过响应头Set-Cookie向客户端种植cookie visit=2//SameSite 是否只允许同域或者说同站点访问， 只有把它设置为None才能允许跨域读写cookie //Secure为true的话表示只允许在https站点生效res.setHeader('Set-Cookie', [`visit=${visit}; SameSite=None; Secure=false`]);//返回最新的访问次数res.end(`${visit}`);} else {res.statusCode = 404;//即使你没有向客户端写入响应体，也需要关闭响应，//不然客户端会一直在等待服务器的响应，一直在那里转圈圈 res.end();}
}).listen(8080, () => console.log('8080'));

fang/f20230728/3.cors/get.html

<!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>Document</title></head><body><script>//创建Ajax对象的实例let xhr = new XMLHttpRequest();//打开连接xhr.open("GET", "http://localhost:8080", true);//指定成功的回调， 等客户端读取完响应信息后对执行onload回调函数xhr.onload = () => {console.log(xhr.responseText);};//发送请求给服务器xhr.send();</script></body>
</html>

fang/f20230728/3.cors/post.html

<!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>Document</title></head><body><script>//创建Ajax对象的实例let xhr = new XMLHttpRequest();//打开连接xhr.open("POST", "http://localhost:8080/users", true);//如果要想发送请求体，就需要设置Content-Type请求头,指定请求体的格式//跨域的时候发送一个请求头xhr.setRequestHeader("Content-Type", "application/json");//指定成功的回调， 等客户端读取完响应信息后对执行onload回调函数xhr.onload = () => {console.log(xhr.responseText);};xhr.onerror = (onerror) => {console.error(onerror);};//发送请求给服务器xhr.send(JSON.stringify({ name: "zhufeng1" }));</script></body>
</html>

fang/f20230728/3.cors/put.html

<!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>Document</title></head><body><script>//创建Ajax对象的实例let xhr = new XMLHttpRequest();//打开连接xhr.open("PUT", "http://localhost:8080/users", true);//如果要想发送请求体，就需要设置Content-Type请求头,指定请求体的格式//跨域的时候发送一个请求头xhr.setRequestHeader("Content-Type", "application/json");//指定成功的回调， 等客户端读取完响应信息后对执行onload回调函数xhr.onload = () => {console.log(xhr.responseText);};xhr.onerror = (onerror) => {console.error(onerror);};//发送请求给服务器xhr.send(JSON.stringify({ name: "zhufeng1" }));</script></body>
</html>

fang/f20230728/3.cors/visit.html

<!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>Document</title></head><body><script>let xhr = new XMLHttpRequest();//withCredentials是XMLHttpRequest的一个属性，该属性定义了是否在请求中携带cookie//默认情况下此值为 false,这意味着不携带cookie,如果true,则携带 cookiexhr.withCredentials = "include";xhr.open("GET", "http://127.0.0.1:8080/visit", true);xhr.onload = () => {console.log(xhr.responseText);};xhr.send();</script></body>
</html>

JSONP

静态js文件-JSONP原理

fang/f20230728/f20230728/6.serve-jsonp.js

const http = require('http')
http.createServer((req, res) => {res.setHeader('Content-Type', 'application/javascript')let script = `// 这里是服务器那边动态生成的js代码。console.log('开始执行服务器返回的动态js代码。')getData({'id':100,name:'fang'});console.log('结束执行服务器返回的动态js代码。')`// res.end(`console.log('from服务器8080的打印输出main')`);res.end(script);
}).listen(8080, () => {console.log(`服务器地址为： http://localhost:8080`);
})

fang/f20230728/f20230728/6.jsonp.html

<!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>jsonp</title></head><body>静态jsonp原理<script>window.getData = function getData(data) {console.log(`data-->`, data);};</script><script src="http://localhost:8080/sugrec.js"></script></body>
</html>

有了一点动态的jsonp

fang/f20230728/f20230728/7.jsonp.html

<!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>jsonp</title></head><body>动态jsonp。<script>let callbackName = `JQuery_${Date.now()}`;window[callbackName] = function (data) {console.log(`data-->`, data);};let script = document.createElement("script");script.src = `http://localhost:8080/sugrec.js?cb=${callbackName}`;document.body.appendChild(script);</script></body>
</html>

fang/f20230728/f20230728/7.serve-jsonp.js

const http = require('http')
const url = require('url')
http.createServer((req, res) => {res.setHeader('Content-Type', 'application/javascript')const { query: { cb } } = url.parse(req.url || '', true)let script = `// 这里是服务器那边动态生成的js代码。console.log('开始执行服务器返回的动态js代码。')${cb}({'id':100,name:'这个是后端构建出来的json数据'});console.log('结束执行服务器返回的动态js代码。')`res.end(script);
}).listen(8080, () => {console.log(`服务器地址为： http://localhost:8080`);
})

动态jsonp

fang/f20230728/f20230728/8.jsonp.html

<!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>jsonp</title></head><body>动态jsonp。这里是自动生成的`Live Server`起起来的，服务器端口为5500;<script>let callbackName = `JQuery_${Date.now()}`;console.log(`动态函数变量名：callbackName-->`, callbackName);window[callbackName] = async (data) => {console.log(`后端返回的json数据：data-->`, data);await new Promise((resolve, reject) => {setTimeout(() => {resolve("");}, 300000);});// 执行结束后，移除多余代码。console.log(`执行结束后，移除多余代码。`);window[callbackName] = null;document.body.removeChild(script);};let script = document.createElement("script");script.src = `http://localhost:8080/sugrec.js?cb=${callbackName}`;console.log(`动态生成的脚本标签：script-->`, script);document.body.appendChild(script);</script></body>
</html>

fang/f20230728/f20230728/8.serve-jsonp.js

// 这里是用node起起来的，服务器端口为8080；
const http = require('http')
const url = require('url')
http.createServer((req, res) => {res.setHeader('Content-Type', 'application/javascript')const { query: { cb } } = url.parse(req.url || '', true)//这里是为了让后端拿到前端定义的那个函数的函数名。const jsonObj = { 'id': 100, name: '这个是后端构建出来的json数据' }//这个就是后端要返回的json数据。const jsonStr = JSON.stringify(jsonObj)let script = `// 这里是服务器那边动态生成的js代码。console.log('开始执行服务器返回的动态js代码。')${cb}(${jsonStr});console.log('结束执行服务器返回的动态js代码。')`res.end(script);
}).listen(8080, () => {console.log(`服务器地址为： http://localhost:8080`);
})

jsonP详细说明

fang/f20230728/3.cors/jsonp.html

<!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>Document</title></head><body><script>//动态创建方法名let callbackName = `jQuery_${Date.now()}`;//动态给window上添加一个变量，值是一个函数，并接收一个数据对象作为参数window[callbackName] = function (data) {console.log(data);};//动态创建scriptlet script = document.createElement("script");//让此动态脚本src等于服务器地址script.src = `http://localhost:8080/sugrec.js?cb=${callbackName}`;//把此动态创建的脚本对象添加到body上，浏览器如果发现html上多了一个script标签，//就会立刻向它的script.src地址发出请求,并且取回来一段JS代码，并且立刻执行document.body.appendChild(script);</script></body>
</html>

fang/f20230728/3.cors/jsonp.js

const http = require('http');
const url = require('url');
http.createServer((req, res) => {//使用url.parse方法解析url地址，并且把查询 字符串变成一个query对象//search=?cb=jQuery_130 query={cb:"jQuery_130"}const {query:{cb}} = url.parse(req.url,true);//告诉客户端我返回的是一段JS脚本res.setHeader('Content-Type','application/javascript');//创建一段JS脚本字符串let script = `${cb}({"id":100,"name":"zhufeng"})`;//作为响应体发回给客户端res.end(script);
}).listen(8080, () => console.log('8080'));

jsonp示例-百度功能初步实现

fang/f20230728/f20230728/5.baidu.html

<!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>jsonp-baidu</title></head><body><input type="text" id="search-word" /><ul id="suggestions"></ul></body><script>let $ = {ajax(options) {return new Promise((resolve, reject) => {const { url, jsonp, data } = options;let callbackName = `JQuery_${Date.now()}`;window[callbackName] = function (data) {// console.log(`前端所希望的后端数据：data-->`, data);resolve(data);};let script = document.createElement("script");script.src = `https://www.baidu.com/sugrec?prod=pc&wd=${data.wd}&cb=${callbackName}`;script.onerror = (error) => reject(error);document.body.appendChild(script);});},};let searchWord = document.getElementById("search-word");let suggestions = document.getElementById("suggestions");searchWord.addEventListener("input", (event) => {let wd = event.target.value;let callbackName = `JQuery_${Date.now()}`;console.log(`wd-->`, wd);console.log(`改：callbackName-->`, callbackName);// https://www.baidu.com/sugrec?prod=pc&wd=a&cb=jQuery_222$.ajax({url: "https://www.baidu.com/sugrec",jsonp: "cb",data: {prod: "pc",wd,},}).then((result) => {console.log(`result-->`, result);let { g } = result;if (g) {let html = ``;for (let i = 0; i < g.length; i++) {html += `<li>${g[i].q}</li>`;}suggestions.innerHTML = html;}}).catch((error) => {console.log(`error-->`, error);});});</script>
</html>

百度下拉项示例-jsonp封装

fang/f20230728/f20230728/9.baidu.html

<!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>jsonp-baidu</title></head><body><input type="text" id="search-word" /><ul id="suggestions"></ul></body><script>const jsonpFunction = (options) => {return new Promise((resolve, reject) => {const { url, jsonp, data } = options;const callbackName = `JQuery_${Date.now()}`;window[callbackName] = function (data) {resolve(data);delete window[callbackName];document.body.removeChild(script);};let queryString = url?.indexOf("?") === -1 ? "?" : "&";for (const key in data) {const value = data[key];queryString += `${key}=${value}&`;}let script = document.createElement("script");script.src = `${url}${queryString}&${jsonp}=${callbackName}`;script.onerror = (error) => {reject(error);delete window[callbackName];document.body.removeChild(script);};document.body.appendChild(script);});};let searchWord = document.getElementById("search-word");let suggestions = document.getElementById("suggestions");searchWord.addEventListener("input", (event) => {let wd = event.target.value;let callbackName = `JQuery_${Date.now()}`;console.log(`wd-->`, wd);console.log(`改一：callbackName-->`, callbackName);// https://www.baidu.com/sugrec?prod=pc&wd=a&cb=jQuery_222jsonpFunction({url: "https://www.baidu.com/sugrec",jsonp: "cb",data: {prod: "pc",wd,},}).then((result) => {console.log(`result-->`, result);let { g } = result;if (g) {let html = ``;for (let i = 0; i < g.length; i++) {html += `<li>${g[i].q}</li>`;}suggestions.innerHTML = html;}}).catch((error) => {console.log(`error-->`, error);});});</script>
</html>

纯前端的jsonp封装详细说明

<!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>Document</title></head><body><input id="search-word" /><ul id="suggestions"></ul><script>function jsonp(options) {return new Promise((resolve, reject) => {const { url, jsonp, data } = options;//1.或者创建一个临时的、唯一的方法名let callbackName = `jQuery_${Date.now()}`;//给window添加一个全局变量，变量名为方法，值是一个回调函数window[callbackName] = function (data) {//一旦此函数执行了，那么此变量则不再需要了，可以删除销毁了delete window[callbackName];//此时script脚本也不再需要，可以删除掉document.body.removeChild(script);//把data传递给了resolve函数，也就是传递给了成功的回调函数resolve(data);};//动态创建一个类型为script的对象或者说元素let script = document.createElement("script");//定义一个查询字符串变量//如果url地址里已经有问号了，则用&接着拼接其它的参数，如果没有?,那就用?开头let queryStr = url.indexOf("?") === -1 ? "?" : "&";for (let key in data) {// += `prod=pc&`// += `wd=a&`;queryStr += `${key}=${data[key]}&`;}//url=https://www.baidu.com/sugrec//queryStr=?prod=pc&wd=a&//指定script的来源或者说要访问的脚本的地址script.src = `${url}${queryStr}${jsonp}=${callbackName}`;//src=https://www.baidu.com/sugrec?prod=pc&wd=a&cb=jQuery_130script.onerror = (error) => reject(error);//向body的尾部添加一个script对象document.body.appendChild(script);});}//获取关键字输入框DOM元素let searchWord = document.getElementById("search-word");//获取联想词的下拉列表DOM元素let suggestions = document.getElementById("suggestions");//给关键字输入框绑定输入事件，当用户在输入框中输入字符串执行回调函数searchWord.addEventListener("input", (event) => {//调用https://www.baidu.com/sugrec?prod=pc&wd=a&cb=jQuery_222//获取事件源的值，也就是关键字输入框的值let wd = event.target.value;jsonp({url: "https://www.baidu.com/sugrec", //你想请求的url地址jsonp: "cb", //最终希望调用方法名是通过哪个查询参数发送给服务器的cb=jQuery_13000data: { prod: "pc", wd }, //其它要传递给服务器的数据，它们都会拼接到查询字符串中}).then((result) => {//获取结果中的g属性let { g } = result;if (g) {let html = "";for (let i = 0; i < g.length; i++) {html += `<li>${g[i].q}</li>`;}suggestions.innerHTML = html;}}).catch((error) => {console.log(error);});});</script></body>
</html>

模块化

commonJs模块规范

这个是在nodejs中使用，主要是ES6MOdule没出来之前。不过它只支持以同步的方式导入一个模块。

以对象属性的方式单个导出

fang/f20230728/f20230728/commonJs/math1.js 写模块的。

console.log(`模块内：exports-->`, exports);
exports.add = (a, b) => {return a + b
}
exports.minus = (a, b) => {return a - b
}

fang/f20230728/f20230728/commonJs/use1.js 使用模块的。

let math = require('./math1')
console.log(`使用模块：math-->`, math);
console.log(`使用模块：math.add(1,2)-->`, math.add(1, 2));
console.log(`使用模块：math.minus(1,2)-->`, math.minus(1, 2));

详细说明：

以module.exports的方式全量导出

fang/f20230728/f20230728/commonJs/math2.js

console.log(`模块内2：module-->`, module);
console.log(`模块内2：module.exports-->`, module.exports);
module.exports = {add(a, b) {return a + b;},minus(a, b) {return a - b;}
}

fang/f20230728/f20230728/commonJs/use2.js

let math = require('./math2')
console.log(`使用模块2：math-->`, math);
console.log(`使用模块2：math.add(1,2)-->`, math.add(1, 2));
console.log(`使用模块2：math.minus(1,2)-->`, math.minus(1, 2));

AMD

AMD单个引入

fang/f20230728/f20230728/AMD/index.html

<!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>Document</title></head><body><script src="https://unpkg.com/requirejs@2.3.6/require.js"></script><script>require(["math"], (math) => {console.log(`单个引入：math.add(1,2)-->`, math.add(1, 2));});</script></body>
</html>

fang/f20230728/f20230728/AMD/math.js

define(function () {//定义此模块的输出；return {add(a, b) {return a + b}, minus(a, b) {return a - b}}
});

AMD多个引入

fang/f20230728/f20230728/AMD/index.html

<!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>Document</title></head><body><script src="https://unpkg.com/requirejs@2.3.6/require.js"></script><script>// console.log(`require-->`, require);require(["math"], (math) => {console.log(`单个引入：math.add(1,2)-->`, math.add(1, 2));});require(["math", "format"], (math, format) => {console.log(`多个引入：math.add(1, 2)-->`, math.add(1, 2));console.log(`多个引入：format.print()-->`, format.print());});</script></body>
</html>

fang/f20230728/f20230728/AMD/math.js

define(function () {return {add(a, b) {return a + b}, minus(a, b) {return a - b}}
});

fang/f20230728/f20230728/AMD/format.js

define(function () {//定义此模块的输出return {async print() {console.log('模块内最初执行', Date.now())await new Promise((resolve, reject) => {setTimeout(() => {resolve('')}, 4000)})console.log('模块内最后执行', Date.now())}}
});

AMD详细说明

fang/f20230728/4.module/2.amd/index.html

<!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>Document</title>
</head>
<body><script src="https://unpkg.com/requirejs@2.3.6/require.js"></script><script>//内部会以异步的方式加载math.js文件，并获取math.js导出的对象//异步加载完成后会执行回调函数，把math.js导出的对象传进去//require方法接收2个参数，一个依赖数组，一个是回调函数//当所有依赖都加载成功后，就会调用回调函数，回调函数的参数是依赖模块的输出require(['math','format'],(math,format)=>{console.log(math.add(1,2))console.log(format.print())});</script>
</body>
</html>

fang/f20230728/4.module/2.amd/format.js

define(function () {//定义此模块的输出return {print() {console.log(Date.now())}}
});

fang/f20230728/4.module/2.amd/math.js

define(function () {//定义此模块的输出return {add(a, b) {return a + b;},minus(a, b) {return a - b;}}
});

ES6Module

fang/f20230728/f20230728/ES6Module/math.js

//单个导出一个变量age
export const age = 16;// export //这个是一个关键字，后面只能接变量名或变量声明。function add(a, b) {return a + b;
}
function minus(a, b) {return a - b;
}
const obj1 = { a: 6 }
const msg = 'hello';//批量导出add,minus多个变量，但也只算是单个导出，依旧要解构才能使用。
export {add,obj1,// obj2 : 6,//报错。// let obj2 = 6,//报错。// obj2 = 6,//报错。minus,
}// export { }//这个是一个关键字，大括号内部只能写变量名。
// 相当于语法为： export {变量名1,变量名2,... }//一个模块中的默认导出只能有一个
export default '北京'
//A module cannot have multiple default exports.
//export default   '北京'

fang/f20230728/f20230728/ES6Module/app.js

import home from './math.js';
import { age, add, minus, obj1 } from './math.js';
// import home,{age,add,minus} from './math.js';// 可以合并成一个。
console.log(`默认导入：home-->`, home);
console.log(`单个导出-导出单个变量：age-->`, age);console.log(`单个导出-导出多个变量：add-->`, add);
console.log(`单个导出-导出多个变量：minus-->`, minus);
console.log(`单个导出-导出多个变量：obj1-->`, obj1);//if(true){
//    //An import declaration can only be used at the top level of a module.
//    import home,{age,add,minus} from './math.js';
//}

fang/f20230728/f20230728/ES6Module/imdex.html

<!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>ES6Module</title></head><body>ES6Module<script src="app.js" type="module"></script></body>
</html>

ES6Module详细说明

fang/f20230728/4.module/3.esmodule/math.js

//单个导出一个变量age
export const age = 16;function add(a,b){return a+b;
}
function minus(a,b){return a-b;
}const msg = 'hello';//批量导出add,minus
export {add,minus
}
//一个模块中的默认导出只能有一个
export default   '北京'
//A module cannot have multiple default exports.
//export default   '北京'

fang/f20230728/4.module/3.esmodule/app.js

import home,{age,add,minus} from './math.js';
console.log(home)
console.log(age)
console.log(add)
console.log(minus)
//if(true){//An import declaration can only be used at the top level of a module.
//    import home,{age,add,minus} from './math.js';
//}

fang/f20230728/4.module/3.esmodule/index.html

<!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>Document</title>
</head>
<body><script src="app.js" type="module"></script>
</body>
</html>

UMD

fang/f20230728/f20230728/UMD/math.js 以UMD规范来简单写一个模块。

(function (global, factory) {if (typeof define === 'function') {//当前处于AMD运行环境define(factory);return}if (typeof module === 'object') {//当前处于node中的commonjs模块化环境module.exports = factory();//导出factory方法执行的结果 return}// 不是AMD，也不是commonjs，那么就用全局变量的方式。global.math = factory();return})(this, () => {// 这里就是我们要导出去的模块。return {add(a, b) {return a + b;},minus(a, b) {return a - b;}}
});// 浏览器环境 self=window=this 没有global
// Node环境 global=this 没有self和window

fang/f20230728/f20230728/UMD/global.html 在浏览器以全局变量的方式来导入一个UMD模块。

<!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>Document</title></head><body>浏览器中的global全局环境<script src="math.js"></script><script>console.log(window.math);</script></body>
</html>

fang/f20230728/f20230728/UMD/amd.html 在浏览器以AMD的方式的来导入一个UMD模块。

<!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>Document</title></head><body>浏览器中的AMD环境<script src="https://unpkg.com/requirejs@2.3.6/require.js"></script><script>//内部会以异步的方式加载math.js文件，并获取math.js导出的对象//异步加载完成后会执行回调函数，把math.js导出的对象传进去//require方法接收2个参数，一个依赖数组，一个是回调函数//当所有依赖都加载成功后，就会调用回调函数，回调函数的参数是依赖模块的输出require(["math"], (math) => {console.log(math.add(1, 2));});</script></body>
</html>

fang/f20230728/f20230728/UMD/commonJs.js 在node中以commonJs方式来导入一个UMD模块。

let math = require('./math');
console.log(`node中的commonJs环境：math-->`, math);
console.log(`node中的commonJs环境：math-->`, math);

UMD详细说明

fang/f20230728/4.module/4.umd/math.js

(function (global, factory) {if(typeof define === 'function'){//当前处于AMD运行环境define(factory);}else if(typeof module === 'object'){//当前处于COMMONJS模块化环境module.exports = factory();//导出factory方法执行的结果 }else{global.math = factory();}
})(this, () => {return {add(a, b) { return a + b; },minus(a, b) { return a - b; }}
});
// 浏览器环境 self=window=this 没有global
// Node环境 global=this 没有self和window

fang/f20230728/4.module/4.umd/use.js

let math = require('./math');
console.log(math)

fang/f20230728/4.module/4.umd/amd.html

<!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>Document</title>
</head>
<body><script src="https://unpkg.com/requirejs@2.3.6/require.js"></script><script>//内部会以异步的方式加载math.js文件，并获取math.js导出的对象//异步加载完成后会执行回调函数，把math.js导出的对象传进去//require方法接收2个参数，一个依赖数组，一个是回调函数//当所有依赖都加载成功后，就会调用回调函数，回调函数的参数是依赖模块的输出require(['math'],(math)=>{console.log(math.add(1,2))});</script>
</body>
</html>

fang/f20230728/4.module/4.umd/global.html

<!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>Document</title>
</head>
<body><script src="math.js"></script><script>console.log(window.math)</script>
</body>
</html>

不同环境下的this

浏览器环境 self=window=this 没有global
- 浏览器控制台中
```
console.log(this===window)
console.log(this===self)
```
Node环境 global=this 没有self和window
- fang/f20230728/4.module/4.umd/this.js 主js文件中
```
console.log(this===global)
console.log(this===exports)
```

对象的函数写法

let $ = {ajax: function () {console.log(`ajax-->`, ajax);},
}

这两种写法等价

let $ = {ajax(){console.log(`ajax-->`, ajax);},
}

webpack初步

webpack是一个强大的模块打包器。
- 它可以把一个Web网站所需的资源，像JS、CSS、图片、图标等等任意的文件都打包在一起。
- 它的作用是可以从一个入口文件的出发，识别出每个文件之间的依赖关系，然后将这些资源全部打包成浏览器可以识别和处理的静态资源，即打包成一堆js文件或一个html文件。

初步创建一个webpack项目

生成package.json文件。
```
npm init -y
```
安装webpack所需的依赖。
```
npm install webpack webpack-cli --save
```
创建一个js文件。
- fang/f20230728/5.webpack/src/index.js 得到一个js文件。
```
npm install webpack webpack-cli --save
```

写一个简单的webpack打包脚本

{"scripts": {"build": "webpack --mode=development"},
}

执行打包命令。
```
npm run build
```

一个简单的webpack示例

fang/f20230728/5.webpack/src/index.js 一个普通的js文件，默认的入口文件。
```
console.log('main')
```

fang/f20230728/5.webpack/package.json 关于整个webpack项目的配置信息。

{"name": "5.webpack","version": "1.0.0","description": "","main": "index.js","scripts": {"build": "webpack --mode=development"},"keywords": [],"author": "","license": "ISC","dependencies": {"webpack": "^5.88.2","webpack-cli": "^5.1.4"}
}

fang/f20230728/5.webpack/dist/main.js 执行打包命令后出现

/** 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
/******/  var __webpack_modules__ = ({/***/ "./src/index.js":
/*!**********************!*\!*** ./src/index.js ***!\**********************/
/***/ (() => {eval("console.log('main')\n\n//# sourceURL=webpack://5.webpack/./src/index.js?");/***/ })/******/  });
/************************************************************************/
/******/  
/******/  // startup
/******/  // Load entry module and return exports
/******/  // This entry module can't be inlined because the eval devtool is used.
/******/  var __webpack_exports__ = {};
/******/  __webpack_modules__["./src/index.js"]();
/******/  
/******/ })()
;

切换npm源

安装nrm源切换工具
```
npm i nrm -g
```
测试不同的源的速度
```
nrm test 
```
切换成淘宝源
```
nrm use taobao
```

进阶参考

20230728----重返学习-跨域-模块化-webpack初步

day-122-one-hundred-and-twenty-two-20230728-跨域-模块化-webpack初步跨域跨域为什么要跨域？ 浏览器为了安全，不能让我们的html文件可以随意引用别的服务器中的文件，只允许我们的html或js文件中，请求我们自己服务器。这个…...

编程日记 2023/7/30 19:39:51

[SQL挖掘机] - 多表连接: union all

介绍: sql中的union all是用于合并两个或多个select语句的结果集的操作符。与union不同的是，union all不会自动去除重复的行，它会简单地将多个查询的结果集合并在一起，包括重复的行。用法: union all的基本语法如下： select_…...

编程日记 2023/7/30 19:38:50

TypeError: run() got an unexpected keyword argument ‘hide_label‘ yolov5最新版本报错

报错展示解决方法把detect.py中的如上部分的 --hide-label改为 --hide-labels，成功解决....

编程日记 2023/7/30 19:37:49

什么是Java中的集成测试？

Java中的集成测试（Integration Test）是一种测试方法，用于测试多个模块或组件之间的交互和集成。在Java中，集成测试通常使用单元测试框架（如JUnit）编写和运行。对于初学者来说，集成测试可能有些…...

编程日记 2023/7/30 19:36:48

打卡力扣题目二

#左耳听风 ARST 打卡活动重启# 目录一、问题二、解题方法一三、enumerate函数介绍关于 ARTS 的释义 —— 每周完成一个 ARTS： ● Algorithm: 每周至少做一个 LeetCode 的算法题 ● Review: 阅读并点评至少一篇英文技术文章 ● Tips: 学习至少一个技术技巧 …...

编程日记 2023/7/30 19:35:45

1、先看demo QtCreator自动生成的工程是使用QQmlApplicationEngine来加载qml文件，下面的demo将使用QQuickView来加载qml文件 #include <QGuiApplication> #include <QtQuick/QQuickView>int main(int argc, char *argv[]) {QGuiApplication app(argc,…...

编程日记 2023/7/30 19:34:43

【IDEA】idea不自动生成target

文章目录 1. 不生成target2. 仅部分文件不生成target2.1. 一般原因就是资源没有设置2.2. 配置编译src/main/java文件夹下的资源文件2.3. 清理缓存（王炸） 3. 参考资料本文描述idea不生成target的几种情况以及处理方法 1. 不生成target 像下图这样根本就…...

编程日记 2023/7/30 19:33:40

从官网认识 JDK，JRE，JVM 三者的关系

点击下方关注我，然后右上角点击...“设为星标”，就能第一时间收到更新推送啦~~~ JVM 是一些大厂面试必问点，要想解决 OOM、性能调优方面的问题，掌握 JVM 知识必不可少，从今天开始，将为大家介绍 JVM 的常用知…...

编程日记 2023/7/30 19:32:39

python 将pdf文件转图片

有小伙伴问了怎么将 pdf文件转图片的问题，我百度了一波儿，搞了以下python代码给他封装成exe工具了。中途打包踩了个坑，python进程池的问题，本地运行没啥问题，打包好的exe文件双击就会使电脑内存爆破卡死，…...

编程日记 2023/7/30 19:31:37

js原型以及原型链

目录原型隐式原型显式原型constructornew操作符重写原型对象原型链继承原型链继承借用构造函数继承组合构造继承原型继承寄生继承组合寄生继承原型继承关系原型在JavaScript中，每个对象都有一个内置属性[[prototype]]，这个属性指向一个另一个对象…...

编程日记 2023/7/30 19:30:36

Java面向对象编程实战详解（图书管理系统示例）

文章目录面向编程概念图书管理系统示例需求分析设计阶段编码实现创建目录结构Book类的编码BookList类的编码User类的编码AdminUser类的编码NormalUser类的编码启动类的编写具体的操作实现IOperation接口新增图书的实现借阅图书的实现删除图书的实现显示图书的实现查找图书的实…...

编程日记 2023/7/30 19:29:32

ubuntu设置主机ip

ubuntu 设置ip sudo dhclient -r enp67s0 # 是你的网卡，可以通过ifconfig 查，比如enp0 sudo ifconfig enp67s0 192.168.1.114 netmask 255.255.255.0 Ubuntu显示有线网已连接但无法上网，已经确认网口、交换机（路由器&#xff…...

编程日记 2023/7/30 19:28:31

CleanMyMac X4.14.1中文版如何清理 Mac系统？CleanMyMac 真的能断网激活吗？

CleanMyMac X4.14.1中文版如何清理 Mac系统？Mac系统在使用过程中都会产生大量系统垃圾，如不需要的系统语言安装包，视频网站缓存文件，mac软件卸载残留的注册表等。随着时间推移，mac系统垃圾就会越来越多，电…...

编程日记 2023/7/30 19:27:30

详细介绍 React 中如何使用 redux

在使用之前要先了解它的配套插件： 在React中使用redux，官方要求安装其他插件 Redux Toolkit 和 react-redux Redux Toolkit：它是一个官方推荐的工具集，旨在简化 Redux 的使用和管理。Redux Toolkit 提供了一些提高开发效率的工具…...

编程日记 2023/7/30 19:26:29

VLOOKUP多条件查询

LOOKUP(1,0/((A3:A15A18)*(C3:C15C18)),F3:F15)...

编程日记 2023/7/30 19:25:27

分页插件Mybatis

<plugins><plugin interceptor"com.github.pagehelper.PageInterceptor"><property name"helperDialect" value"…...

编程日记 2023/7/30 19:24:27

AXI协议之AXILite开发设计（四）—Block Design使用

微信公众号上线，搜索公众号小灰灰的FPGA,关注可获取相关源码，定期更新有关FPGA的项目以及开源项目源码，包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 2、AXI interconnect互联组件的使用…...

编程日记 2023/7/30 19:23:24

音视频——帧内预测

H264编码(帧内预测) 在帧内预测模式中，预测块P是基于已编码重建块和当前块形成的。对亮度像素而言，P块用于44子块或者1616宏块的相关操作。44亮度子块有9种可选预测模式，独立预测每一个44亮度子块，适用于带有大量细节的图像编码&…...

编程日记 2023/7/30 19:22:23

2.uni-app项目文件

uni-app像是vue与微信小程序的合体，使用 uni-ui项目模板创建的项目文件如下目录 1 pages 2 pages.json 3 App.vue 4 index.html 5 static 6 uni_modules 7 manifest.json 8 main.js 9 uni.scss 1 pages 这个是放页面的，默认里面有…...

编程日记 2023/7/30 19:21:22

JavaScript学习 -- 对称加密算法DES

在现代的互联网时代，数据安全性备受关注。为了保护敏感数据的机密性，对称加密算法是一种常用的方法。在JavaScript中，DES（Data Encryption Standard）是一种常用的对称加密算法。本篇博客将为您展示如何在JavaScript中使…...

编程日记 2023/7/30 19:20:20

【Python数据分析】Python常用内置函数（二）

🎉欢迎来到Python专栏~Python常用内置函数（二） ☆* o(≧▽≦)o *☆嗨~我是小夏与酒🍹 ✨博客主页：小夏与酒的博客 🎈该系列文章专栏：Python学习专栏文章作者技术和水平有限，如果文…...

编程日记 2023/7/30 19:19:19

Api接口出现Required request body is missing的解决方法

目录 1.问题所示2.原理分析3.解决方法1.问题所示在使用PostMan 测试接口的时候，出现如下问题： {"code": 400,"success": false,"data": {},"msg":...

编程日记 2023/7/30 19:18:16

【Kaggle】Kaggle数据集如何使用命令语句下载？

一、Kaggle数据集如何下载 1.1 问题的起因最近看到了 Google 组织的 Kaggle 比赛，想自己试一下，但是数据集太大了，将近有370G的数据。直接下载的话，网速太慢，可能要下载3-4天，所以萌生了用命令语句下载的…...

编程日记 2023/7/30 19:17:15

android pdf框架,编译mupdf

因为mupdf编译的体积不小,之前也发过编译的文章,现在更新一下. 建一个mupdf_c目录,名字自己取,在里面git下载mupdf源码,把目录修改为libmupdf mupdf_c目录下建build.gradle文件,内容如下 apply plugin: com.android.library apply plugin: maven-publishgroup com.artifex.…...

编程日记 2023/7/30 19:16:12

线性表详细讲解

2.1 线性表的定义和特点2.2 案例引入2.3 线程表的类型定义2.4 线性表的顺序表示和实现2.4.1 线性表的顺序存储表示2.4.2 线性表的结构类型定义2.4.3 顺序表基本操作的实现2.4.4 顺序表总结 2.5 线性表的链式表示和实现2.5.1 线性表的链式存储表示2.5.2 单链表的实现&#xff08…...

编程日记 2023/7/30 19:15:09

代码随想录算法训练营day45

文章目录 Day45爬楼梯题目思路代码零钱兑换题目思路代码完全平方数题目思路代码 Day45 爬楼梯 70. 爬楼梯 - 力扣（LeetCode） 题目假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢…...

编程日记 2023/7/30 19:14:08

机器学习深度学习——softmax回归（上）

👨‍🎓作者简介：一位即将上大四，正专攻机器学习的保研er 🌌上期文章：机器学习&&深度学习——线性回归的简洁实现 📚订阅专栏：机器学习&&深度学习希望文章对你们有所…...

编程日记 2023/7/30 19:13:07

基于express调用chatgpt文字流输出和有道智云语音合成

express是基于node.js的一个web框架，可以更加简洁的去创建一个后台服务，由于项目的需要，引入和typescript，经过几天的努力实现了chatgpt文字流输出有道智云语音合成的结合（略有遗憾），下面我记载…...

编程日记 2023/7/30 19:12:06

（学习笔记-内存管理）内存分段、分页、管理与布局

内存分段程序是由若干个逻辑分段组成的，比如可由代码分段、数据分段、栈段、堆段组成。不同的段是有不同的属性的，所以就用分段的形式把这些分段分离出来。分段机制下，虚拟地址和物理地址是如何映射的？ 分段机制下的虚拟地址由…...

编程日记 2023/7/30 19:11:05

PHP使用Redis实战实录1：宝塔环境搭建、6379端口配置、Redis服务启动失败解决方案

宝塔环境搭建、6379端口配置、Redis服务启动失败解决方案前言一、Redis安装部署1.安装Redis2.php安装Redis扩展3.启动Redis 二、避坑指南1.6379端口配置2.Redis服务启动（1）Redis服务启动失败（2）Redis启动日志排查（3&a…...

编程日记 2023/7/30 19:10:03

wordpress 新建栏目/关键词优化哪家好

1.论述 1.1.获取计算机系统所有实际可用物理区域信息计算机系统的物理区域并不是连续的，且有的物理区域映射到特定硬件内部区域以便实现特定功能。对计算机系统的物理区域进行分页管理，首先，要获取所有离散的物理区域信息。 INT 15h, AXE…...

编程日记 2025/2/9 3:57:02

扬州政府门户网站建设的调查报告/全球搜索

一直在转载和收藏别人博客里好的文章，自己没怎么写过。最近觉得特乱，工作和生活。管理方面不能和部门的人员走的太近，不然项目出现什么问题不好说，或者项目紧急的情况下，人员出现情绪化也不好说。自己日常工作中不…...

编程日记 2025/2/9 0:34:52

门户网站模板图片/百度云搜索引擎官方入口

环境：windows7，MyEclipse10，maven3.3 相信有很多朋友在MyEclipse10中使用maven时会遇到添加中央仓库中无法找到的jar包，或者是添加自己打包好的jar包，这里就不在聒噪如何在MyEclipse10中配置自己的maven了，…...

编程日记 2025/2/8 20:54:15

做课件可赚钱的网站/品牌推广公司

简单地说，那些被virtual关键字修饰的成员函数，就是虚函数。首先：强调一个概念定义一个函数为虚函数，不代表函数为不被实现的函数。定义他为虚函数是为了允许用基类的指针来调用子类的这个函数。定义一个函数为纯虚函数&#xff0…...

编程日记 2025/2/8 14:13:50

商城网站模板源码/网络视频营销的案例

本文由5t5发表于TesterHome社区网站，点击原文链接可与作者直接交流。本次帖子单刀直入，直接说点，谨慎查阅。兼容性存在的意义很简单，就是为了把覆盖普及大众的机型上项目暴露出来的问题全部扼杀掉，有效的改善/避免…...

编程日记 2025/2/8 13:59:38

wordpress 文章关联/广告推广费用一般多少

[JLOI2011]飞行路线二维spfa，不过需要优化，用优先队列比较快，手打普通队列应该也可以 #include<iostream> #include<cstdio> #include<cstring> #include<queue> #define maxn 10005 using namespace std; int n,m,…...

编程日记 2025/2/8 13:22:58