前端的几种网络请求方式

网络请求

node编写接口

这里用到的几个包的作用

  • express：基于 Node.js 平台，快速、开放、极简的 Web 开发框架，官网：https://www.expressjs.com.cn/
  • cors：用来解决跨域问题
  • body-parser：可以通过 req.body 获取post请求传递过来的json数据
  • multer：用于文件上传
const express = require('express');
const fs = require("fs");
const path = require("path")
const app = express()
const multer = require("multer");
const cors = require("cors")
const bodyParser = require("body-parser")
app.use(cors())
app.use(bodyParser.json())
// 设置上传目录和文件名
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/')
    },
    filename: function (req, file, cb) {
        console.log(file)
        cb(null, Date.now() + path.extname(file.originalname))
    }
})

const upload = multer({ storage: storage });


app.get("/name",(req,res)=>{
    res.send({
        code:200,
        msg:"成功"
    })
})


app.post("/add",(req,res)=>{
    console.log(req.body)
    // 使用req.body接收前端传递过来的post参数
    let data = req.body
    res.send({
        code:200,
        data:data
    })
})

app.post("/upload", upload.single("file"), (req, res) => {
    if (!req.file) {
        return res.status(400).send('No file uploaded.');
    }
    // 输出文件信息
    console.log('Uploaded: ' + req.file.filename);
    res.send({
        code:200,
        data:'文件上传成功'
    })
});

app.get("/sse", (req, res) => {
    // 声明链接方式是sse
    res.writeHead(200,{
        "Content-Type":"text/event-stream"
    })
    const text = fs.readFileSync("./read.txt","utf8")
    const arr = text.split("")
    let current = 0
    // 设置每隔20毫秒主动发送一次数据
    let timer = setInterval(()=>{
        if(current >= arr.length){
            clearInterval(timer)
        }else{
            // 发送消息必须是 data: 开头，\n\n 结尾。中间是发送的内容，内容必须是一个字符串
            res.write(`data:${arr[current]}\n\n`)
            current++
        }
    },20)
})

app.listen(10086, () =>{
    console.log("启动成功： http://localhost:10086")
})

Ajax请求

发送GET请求

let xhr = new XMLHttpRequest()
function sendGet(){
  xhr.open("GET","http://127.0.0.1:10086/name")
  // 当接口相应数据后会触发onload回调
  xhr.onload = function (){
    if(xhr.status === 200){
        console.log(JSON.parse(xhr.responseText))
    }
  }
  xhr.send()
}

发送POST请求

let xhr = new XMLHttpRequest()
function sendPost(){
    xhr.open("POST","http://127.0.0.1:10086/add")
    xhr.setRequestHeader("Content-Type","application/json")
    xhr.onload = function (){
        if(xhr.status === 200){
            console.log(JSON.parse(xhr.responseText))
        }
    }
    // 定义发送给后端的数据
    let data = {
        name:"张三",
        age:18
    }
    // 把数据放在send中进行发送，需要使用JSON.stringify进行序列化
    xhr.send(JSON.stringify(data))
}

image-20231104170332434

上传文件

var fileEl = document.getElementById("file");
fileEl.addEventListener("change",event=>{
    let file = event.target.files[0]
    xhr.open("POST","http://127.0.0.1:10086/upload")
    xhr.onload = function (){
        if(xhr.status === 200){
            console.log(JSON.parse(xhr.responseText))
        }
    }
    let data = new FormData()
    data.append("file",file)
    xhr.send(data)
})

image-20231104172140646

image-20231104172206960

设置超时时间

function sendGet() {
    xhr.open("GET", "http://127.0.0.1:10086/name")
    xhr.setRequestHeader("Content-Type", "application/json")
    // 设置超时时间1000毫秒
    xhr.timeout = 1000
    xhr.addEventListener("timeout", function () {
        console.log("请求超时")
    })
    xhr.onload = function () {
        if (xhr.status === 200) {
            console.log(JSON.parse(xhr.responseText))
        }
    }
    xhr.send()
}

请求中断

xhr.abort()
// 请求中断回调
xhr.addEventListener("abort",function (){
    console.log("请求中断")
})

监听上传进度

// 监听上传进度
xhr.addEventListener("progress",function (event){
    console.log(`${(event.loaded / event.total * 100).toFixed(2)}%`)
})

Axios使用

Axios 是对 Ajax 的封装，可以帮助我们更好的发送请求，官方文档：http://www.axios-js.com/zh-cn/docs/

下面是分别发送get和post的示例

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

function axiosGet(){
    axios.get("http://127.0.0.1:10086/name").then(res=>{
        console.log(res.data)
    })
}

function axiosPost(){
    axios.post("http://127.0.0.1:10086/add",{name:"张三"}).then(res=>{
        console.log(res.data)
    })
}

fetch请求

Fetch是一种网络通信协议，用于在客户端和服务器之间传输数据。该协议使用HTTP请求和响应进行通信，与传统的AJAX方式相比，Fetch更加简单易用，并提供了许多现代化的功能。

使用Fetch可以方便地向服务器发送请求，并将响应返回给客户端。你可以使用Fetch获取文本、JSON、图像和文件等数据，并进行各种处理。Fetch还支持流式传输和取消请求等高级功能，使得处理大型数据集和长时间运行的操作变得更加简单和可靠。

Fetch API也是Javascript中常用的API之一，它提供了一组方法和属性，可以在浏览器端与服务器进行通信。通过Fetch API，你可以轻松地使用Fetch协议进行数据传输，并对请求和响应进行操作和处理。

fetch 对比 xhr

fetch 和 XMLHttpRequest（XHR）都是前端与服务器进行数据交互的常用方式，它们各有优缺点，下面是它们的比较：

  1. API 设计和使用方式

fetch 的 API 设计更加现代化、简洁和易于使用，使用起来更加直观和方便。相比之下，XHR 的 API 设计比较繁琐，需要进行多个参数的配置和回调函数的处理。

  1. 支持的请求方法

fetch API 默认只支持 GET 和 POST 请求方法，而 XHR 则支持所有标准的 HTTP 请求方法。

  1. 请求头部

在 fetch 中设置请求头部的方式更加清晰和直接，可以通过 Headers 对象进行设置，而 XHR 的方式相对较为繁琐。

  1. 请求体

在发送 POST 请求时，fetch API 要求将请求体数据作为参数传递给 fetch 方法中的 options 对象，而 XHR 可以直接在 send() 方法中设置请求体数据。

  1. 支持的数据类型

在解析响应数据时，fetch API 提供了多种方法，包括 .json(), .blob(), .arrayBuffer() 等，而 XHR 只支持文本和二进制数据两种数据类型。

  1. 跨域请求

在进行跨域请求时，fetch API 提供了一种简单而强大的解决方案——使用 CORS（跨域资源共享）头部实现跨域请求，而 XHR 则使用了一个叫做 XMLHttpRequest Level 2 的规范，在代码编写上相对较为繁琐。

总的来说，fetch API 与 XHR 各有优缺点，具体选择哪种方式还需要根据具体情况进行考虑。平时开发中使用较多的是 fetch ，因为它使用方便、API 简洁、语法清晰，同时也支持了大多数常用的功能，可以有效地简化前端开发流程。

fetch 返回格式

  1. text(): 将响应体解析为纯文本字符串并返回。
  2. json(): 将响应体解析为JSON格式并返回一个JavaScript对象。
  3. blob(): 将响应体解析为二进制数据并返回一个Blob对象。
  4. arrayBuffer(): 将响应体解析为二进制数据并返回一个ArrayBuffer对象。
  5. formData(): 将响应体解析为FormData对象。

发送GET请求

function fetchGet() {
    fetch("http://localhost:10086/name").then(res => res.json()).then(res => {
        console.log(res)
    })
}

发送POST请求

function fetchPost() {
    fetch("http://localhost:10086/add", {
        method: "post",
        headers:{
            'Content-Type':'application/json'
        },
        body: JSON.stringify({
            name: "张三",
            age: 18
        })
    }).then(res => res.json()).then(res => {
        console.log(res)
    })
}

终止请求

需要使用 AbortController 构造器

<button onclick="fetchGet()">get请求</button>
<button onclick="stop()">终止请求</button>

发送请求

const abort = new AbortController()
function fetchGet() {
    fetch("http://localhost:10086/name",{
        signal:abort.signal
    }).then(res => res.json()).then(res => {
        console.log(res)
    })
}

调用终止方法

function stop(){
    abort.abort()
}

请求超时

fetch 本身没有超时定义，需要我们自己封装一个计时器，到时间后调用 abort.abort() 方法

const abort = new AbortController()
function fetchGet() {
    setTimeOutFn()
    fetch("http://localhost:10086/name",{
        signal:abort.signal
    }).then(res => res.json()).then(res => {
        console.log(res)
    })
}

function setTimeOutFn(time = 2000){
    setTimeout(()=>{
        abort.abort()
    },time)
}

SSE

概述

SSE（Server-Sent Events）是一种用于实现服务器主动向客户端推送数据的技术，也被称为“事件流”（Event Stream）。它基于 HTTP 协议，利用了其长连接特性，在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送。

SSE 和 Socket 区别

SSE（Server-Sent Events）和 WebSocket 都是实现服务器向客户端实时推送数据的技术，但它们在某些方面还是有一定的区别。

  1. 技术实现

SSE 基于 HTTP 协议，利用了其长连接特性，通过浏览器向服务器发送一个 HTTP 请求，建立一条持久化的连接。而 WebSocket 则是通过特殊的升级协议（HTTP/1.1 Upgrade 或者 HTTP/2）建立新的 TCP 连接，与传统 HTTP 连接不同。

  1. 数据格式

SSE 可以传输文本和二进制格式的数据，但只支持单向数据流，即只能由服务器向客户端推送数据。WebSocket 支持双向数据流，客户端和服务器可以互相发送消息，并且没有消息大小限制。

  1. 连接状态

SSE 的连接状态仅有三种：已连接、连接中、已断开。连接状态是由浏览器自动维护的，客户端无法手动关闭或重新打开连接。而 WebSocket 连接的状态更灵活，可以手动打开、关闭、重连等。

  1. 兼容性

SSE 是标准的 Web API，可以在大部分现代浏览器和移动设备上使用。但如果需要兼容老版本的浏览器（如 IE6/7/8），则需要使用 polyfill 库进行兼容。而 WebSocket 在一些老版本 Android 手机上可能存在兼容性问题，需要使用一些特殊的 API 进行处理。

  1. 安全性

SSE 的实现比较简单，都是基于 HTTP 协议的，与普通的 Web 应用没有太大差异，因此风险相对较低。WebSocket 则需要通过额外的安全措施（如 SSL/TLS 加密）来确保数据传输的安全性，避免被窃听和篡改，否则可能会带来安全隐患。

总体来说，SSE 和 WebSocket 都有各自的优缺点，适用于不同的场景和需求。如果只需要服务器向客户端单向推送数据，并且应用在前端的浏览器环境中，则 SSE 是一个更加轻量级、易于实现和维护的选择。而如果需要双向传输数据、支持自定义协议、或者在更加复杂的网络环境中应用，则 WebSocket 可能更加适合。

适用于场景

chatGPT 返回的数据 就是使用的SSE 技术

实时数据大屏 如果只是需要展示 实时的数据可以使用SSE技术 而不是非要使用webSocket

使用

调用node端写好的 sse 接口，这个接口会每隔20毫秒主动向前端发送一次数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .content{
        width: 400px;
        height: 400px;
        border: 1px solid #ddd;
    }
</style>
<body>
    <div class="content" id="message"></div>
    <button onclick="start()">开始</button>
    <button onclick="close()">关闭</button>
</body>
<script>
    let sse = null
    function start(){
        sse = new EventSource("http://localhost:10086/ssh")
        // 链接成功回调
        sse.onopen = ()=>{
            console.log("open")
        }

        // 监听消息
        sse.onmessage = (event)=>{
            console.log(event)
            // 默认监听message，这个可以定义
            // 默认数据也是在event的data属性中返回
            document.getElementById("message").innerHTML += event.data
        }

        // 链接失败回调
        sse.onerror = ()=>{
            console.log("onerror")
        }
    }

    function close(){
        console.log("关闭")
        sse.close()
    }
</script>
</html>

WebSocket

WebSocket是双向通信，客户端可以随时向服务端发送消息，反过来服务端也可以随时向客户端发送消息

双向通信

使用node定义接口

安装

npm install ws

编写接口

const ws = require("ws")

// 创建服务
const wss = new ws.Server({port:8888},()=>{
    console.log("socket服务启动成功")
})

// 监听链接成功提示
wss.on("connection",(socket)=>{
    console.log("客户端链接成功")
    socket.on("message",e=>{
        // 通过e.toString()获取前端传递过来的东西
        socket.send("我是服务器，我收到你的消息了，内容是："+ e.toString())
    })
})

调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="msg"/>
<button onclick="send()">发送</button>
<ul id="ul"></ul>
</body>
<script>
    let msg = document.querySelector("#msg")
    let ul = document.querySelector("#ul")
    // 链接
    let wss = new WebSocket("ws://localhost:8888")
    // 监听消息
    wss.addEventListener("message", e => {
        console.log(e.data)
        let li = document.createElement("li")
        li.innerText = e.data
        ul.appendChild(li)
    })

    function send() {
        // 发送消息
        wss.send(msg.value)
        msg.value = ""
    }
</script>
</html>

消息广播

默认一个链接只会收到自己与服务器之间的消息，不能收到其他链接接收的消息，我们通过如下方式来实现

// 监听链接成功提示
wss.on("connection",(socket)=>{
    console.log("客户端链接成功")
    socket.on("message",e=>{
        // 广播消息 wss.clients 存放了所有链接信息，遍历这个链接信息，给所有链接者发送消息
        wss.clients.forEach(client=>{
            // 通过e.toString()获取前端传递过来的东西
            client.send("我是服务器，我收到你的消息了，内容是："+ e.toString())
        })
    })
})

心跳检测

在长时间没有发送消息交互，或者网络不好的情况下，websocket 会出现断掉的情况，我们可以通过心跳检测的机制，定时发送一次消息，实现链接保活

const ws = require("ws")

// 创建服务
const wss = new ws.Server({port: 8888}, () => {
    console.log("socket服务启动成功")
})

// 消息类型
const STATE = {
    HEART:1,
    MESSAGE:2
}

// 监听链接成功提示
wss.on("connection", (socket) => {
    console.log("客户端链接成功")
    socket.on("message", e => {
        // 广播消息
        wss.clients.forEach(client => {
            // 通过e.toString()获取前端传递过来的东西
            client.send(JSON.stringify({
                type:STATE.MESSAGE,
                data:"我是服务器，我收到你的消息了，内容是：" + e.toString()
            }))
        })
    })
    // 添加心跳检测
    let headInterval = null
    let headCheck = () => {
        if(socket.readyState === ws.OPEN){
            socket.send(JSON.stringify({
                type:STATE.HEART,
                data:"我是心跳包"
            }))
        }else{
            clearInterval(headInterval)
        }
    }
    // 每隔500毫秒检测一次
    setInterval(headCheck,500)
})

同时前端需要区分不同的消息类型

// 监听消息
wss.addEventListener("message", e => {
    let li = document.createElement("li")
    let data = JSON.parse(e.data)
    if(data.type === 2){
        li.innerText = data.data
        ul.appendChild(li)
    }
})

navigator.sendBeacon

使用 navigator.sendBeacon 实现高效的数据上报

在 web 开发中，我们经常需要将用户行为或性能数据上报到服务器。为了不影响用户体验，开发者通常会在页面卸载时进行数据上报。然而，传统的数据上报方式，如 XMLHttpRequest 或 Fetch API，容易受到页面卸载过程中的阻塞，导致数据丢失。为了解决这个问题，navigator.sendBeacon API 被引入，它可以在页面卸载时安全、可靠地发送数据。

navigator.sendBeacon 对比 Ajax fetch

优点

  1. 不受页面卸载过程的影响，确保数据可靠发送。
  2. 异步执行，不阻塞页面关闭或跳转。
  3. 能够发送跨域请求。

缺点

  1. fetch 和 ajax 都可以发送任意请求 而 sendBeacon 只能发送POST
  2. fetch 和 ajax 可以传输任意字节数据 而 sendBeacon 只能传送少量数据（64KB 以内）
  3. fetch 和 ajax 可以定义任意请求头 而 sendBeacon 无法自定义请求头
  4. sendBeacon 只能传输 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据
  5. 如果处于危险的网络环境，或者开启了广告屏蔽插件 此请求将无效

navigator.sendBeacon 应用场景

  1. 发送心跳包：可以使用 navigator.sendBeacon 发送心跳包，以保持与服务器的长连接，避免因为长时间没有网络请求而导致连接被关闭。
  2. 埋点：可以使用 navigator.sendBeacon 在页面关闭或卸载时记录用户在线时间，pv uv，以及错误日志上报 按钮点击次数。
  3. 发送用户反馈：可以使用 navigator.sendBeacon 发送用户反馈信息，如用户意见、bug 报告等，以便进行产品优化和改进

其他注意事项 type

ping请求 是html5 新增的 并且是sendBeacon 特有的 ping 请求 只能携带少量数据，并且不需要等待服务端响应，因此非常适合做埋点统计，以及日志统计相关功能。

使用方法

编写一个接口

const multer = require("multer");

app.post("/ping",multer().none(),(req,res)=>{
    console.log(req.body.data)
    res.send("ok")
})

前端发送 navigation.sendBeacon 请求

function send() {
    let data = new FormData()
    data.append("data", JSON.stringify({
        name: "张三",
        age: 1
    }))
    navigator.sendBeacon("http://localhost:10086/ping", data)
}

后端接收到文件

image-20231105115637566

浏览器相应数据

image-20231105115647565

JWT鉴权

首先安装相关依赖

npm install jsonwebtoken express cors
  • jsonwebtoken：用于生成token和验证token
  • cors：处理跨域问题

接口编写

const express = require("express")
const cors = require("cors")
const jwt = require("jsonwebtoken")
const app = express()

// 处理跨域问题
app.use(cors())
// 可以使用 req.body 获取post请求传递的json数据
app.use(express.json())
// token加盐
const KEY = "123456"


// 白名单，包含不需要验证token的路径
const whitelist = ['/login'];
// 验证token的中间件
app.use((req, res, next) => {
    // 检查路径是否在白名单中
    if (whitelist.includes(req.path)) {
        console.log("3333")
        // 在白名单中，直接进入下一个中间件或请求处理函数
        next();
    } else {
        // 不在白名单中，需要验证token
        const token = req.headers['authorization'];
        jwt.verify(token, KEY, (err, decode) =>{
            if(err){
                res.status(401).send('无效的token')
            }else{
                next()
            }
        })
    }
});


// 登录接口
app.post("/login", (req, res) => {
    let data = req.body
    console.log(data)

    if(data.name === "admin" && data.pwd === "123456"){
        res.send({
            id:1,
            // 生成token,第一个参数是token携带的内容，第二是KEY，第三个是过期时间
            token:jwt.sign({id:1,name:data.name}, KEY, {expiresIn: "1h"})
        })
    }else{
        res.send({
            code:500,
            msg:"用户名或密码错误"
        })
    }
})

// 获取集合信息
app.get("/list",(req,res)=>{
    res.send([
        {name:"lisi",age:1},
        {name:"wangwu",age:2},
    ])
})


app.listen(3000, () => {
    console.log("服务启动成功：http://localhost:3000")
})

前端调用

前端在发送请求时需要在请求头中携带token

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div>
    用户名: <input placeholder="用户名" id="name"/>
    密码: <input placeholder="密码" id="pwd"/>
    <button onclick="login()">登录</button>
</div>
<script>
    function login() {
        let name = document.getElementById("name").value;
        let pwd = document.getElementById("pwd").value;
        axios.post("http://localhost:3000/login",{
            name,
            pwd
        }).then(res=>{
            if(res.data.token){
                alert("登录成功")
                localStorage.setItem("token",res.data.token)
                location.href = "./list.html"
            }else{
                alert("登录失败")
                localStorage.removeItem("token")
            }
        })
    }
</script>
</body>
</html>

list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<button onclick="list()">获取list</button>
</body>
<script>
  function list(){
    axios.get("http://localhost:3000/list",{
      headers: {
        'authorization': localStorage.getItem("token"),
      }
    }).then(res=>{
      console.log(res.data)
    })
  }
</script>
</html>

判断网络状态

获取是否联网

// 是否联网,返回true或者false，true表示已经联网，false表示没有联网
console.log(navigator.onLine)

获取网络环境

前端还可以判断用户当前所在网络的好坏

// 获取网络环境
console.log(navigator.connection)

返回的是一个 NetworkInformation 对象

image-20231105203133568

image-20231105203142070

XSS跨站脚本攻击

随着互联网的快速普及，越来越多的敏感信息被存储在网络上，例如个人身份信息、财务信息等。在当前数字化时代，这些安全问题变得更加突出。作为开发者，我们必须采取适当的防范措施，以确保用户数据的安全性。本文将着重探讨跨站脚本攻击（Cross-site scripting，XSS）这一常见的网络攻击方式，包括其定义、原理、危害、分类和防范措施，以帮助大家更好地预防此类安全风险。

概述

**定义：**跨站点脚本攻击，简称XSS，是指攻击者利用网站存在的漏洞，通过在网站中注入恶意脚本代码，从而使得用户在访问该网站时受到攻击。这些恶意脚本代码通常是JavaScript 代码，它们可以窃取用户的敏感信息，如用户名、密码等，并将这些信息发送到攻击者的服务器。

原理

XSS攻击的本质是利用Web应用程序中的漏洞，向网页注入恶意脚本代码，然后将这些代码嵌入到网页中，当其他用户访问这个网页时，恶意脚本将会被执行。

攻击者通常会在Web应用程序的输入框、评论框、搜索框等可输入内容的地方输入特定的脚本代码，这些代码可以被Web应用程序直接插入到网页中，导致网页上的所有用户都会受到攻击。

XSS攻击的原理包括以下几个步骤：

1、攻击者在Web应用程序的输入框、评论框等可输入内容的地方输入包含script标签的恶意脚本代码，例如：

<script>
// 在这里插入恶意脚本代码
</script>

2、Web应用程序将恶意脚本代码保存到数据库中或直接将其插入到网页的HTML代码中。

3、当其他用户访问这个网页时，浏览器会执行其中的恶意脚本代码。恶意脚本可以窃取用户的敏感信息，如登录凭证、浏览器历史记录、Cookie等，或者通过控制用户的浏览器来进行更多的攻击。

例如，以下是一段可以窃取用户Cookie的恶意脚本代码：

<script>
let cookieValue = document.cookie;
// 将cookieValue发送到攻击者的服务器
</script>

4、攻击者获取到用户的敏感信息后，可以进行更进一步的攻击，例如重定向到恶意网站、发起钓鱼攻击等。

预防工具

使用第三方库来预防，这里使用 xss，官网文档：https://www.npmjs.com/package/xss

<script src="https://rawgit.com/leizongmin/js-xss/master/dist/xss.js"></script>
<script>
  // apply function filterXSS in the same way
  var html = filterXSS('<script>alert("xss");</scr' + "ipt>");
  alert(html);
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/117888.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Leetcode48旋转图像

Leetcode48旋转图像

思路&#xff1a;找规律 方法一、一般辅助数组解法 行列转换&#xff0c;第一行变到第三列&#xff0c;第二行变到第二列&#xff0c;第三行变到第一列 matrix[row][col] matrix[col][n-row-1] 然后复制回原数组 class Solution {public void rotate(int[][] matrix) {in…
阅读更多...
Spring cloud负载均衡 @LoadBalanced注解原理

Spring cloud负载均衡 @LoadBalanced注解原理

接上一篇文章&#xff0c;案例代码也在上一篇文章的基础上。 在上一篇文章的案例中&#xff0c;我们创建了作为Eureka server的Eureka注册中心服务、作为Eureka client的userservice、orderservice。 orderservice引入RestTemplate&#xff0c;加入了LoadBalanced注解&#x…
阅读更多...
线性【SVM】数学原理和算法实现

线性【SVM】数学原理和算法实现

一. 数学原理 SVM是一类有监督的分类算法&#xff0c;它的大致思想是&#xff1a;假设样本空间上有两类点&#xff0c;如下图所示&#xff0c;我们希望找到一个划分超平面&#xff0c;将这两类样本分开&#xff0c;我们希望这个间隔能够最大化来使得模型泛化能力最强。 如上图所…
阅读更多...
谷歌浏览器默认https 怎么关闭

谷歌浏览器默认https 怎么关闭

#然后把网址从 https 改成http 回车即可
阅读更多...
用于3D Visual Grounding的多模态场景图

用于3D Visual Grounding的多模态场景图

文章目录 引言方法1. Language Scene Graph Module Paper&#xff1a;《Free-form Description Guided 3D Visual Graph Network for Object Grounding in Point Cloud》【ICCV’2021】 Code&#xff1a;https://github.com/PNXD/FFL-3DOG 引言 3DVG任务有以下三个挑战&#x…
阅读更多...
c语言 简单认识 指针和结构体

c语言 简单认识 指针和结构体

指针 代码 #include <stdio.h>int main(){int a 10;//指针类型需要与变量的类型相同&#xff0c;且后面需要添加一个*符号&#xff08;注意这里不是乘法运算&#xff09;表示是对于类型的指针int * p &a; //这里的&并不是进行按位与运算&#xff0c;而是取…
阅读更多...
迅为iTOP-i.MX8M开发板使用 make 工具

迅为iTOP-i.MX8M开发板使用 make 工具

make 工具是编译辅助工具&#xff0c;用来解决使用命令编译工程非常繁琐的问题。 调用这个命令工具&#xff1a;我们在 windows 上编程使用 ide &#xff0c;我们有图形界面&#xff0c;有相应的按钮&#xff0c;比如说 build 或者 run 来编译。其实 make 这个编译辅助工具使…
阅读更多...
【Python基础】IF、Else判断以及Whlie、for循环介绍符实例

【Python基础】IF、Else判断以及Whlie、for循环介绍符实例

运算符 1. if 语句体验2.逻辑运算3. if 语句进阶4.While循环4.1基本语法 5.break 和 continue6. for循环 1. if 语句体验 if 判断语句基本语法 在 Python 中&#xff0c;if 语句 就是用来进行判断的&#xff0c;格式如下&#xff1a; if 要判断的条件: 条件成立时&#xff0c;…
阅读更多...
如何使用腾讯云+Picgo搭建图床

如何使用腾讯云+Picgo搭建图床

目录 一、进入腾讯云进行实名认证 二、领取免费存储额度 2.1新用户界面概览就可以领取 三、开始创建远端图床并生成秘钥等信息 3.1创建存储桶 3.2配置基本信息 3.3配置高级选项 3.4确认配置页面点击创建即可 3.5创建访问秘钥 3.6查看秘钥等信息 3.7查看桶名称 四、图…
阅读更多...
lv9 嵌入式开发 数据库sqlite

lv9 嵌入式开发 数据库sqlite

1 数据库基本概念 数据&#xff08;Data&#xff09; 能够输入计算机并能被计算机程序识别和处理的信息集合 数据库 &#xff08;Database&#xff09; 数据库是在数据库管理系统管理和控制之下&#xff0c;存放在存储介质上的数据集合 2 常用的数据库 大型数据库…
阅读更多...
【实践篇】一次Paas化热部署实践分享 | 京东云技术团队

【实践篇】一次Paas化热部署实践分享 | 京东云技术团队

前言 本文是早些年&#xff0c;Paas化刚刚提出不久时&#xff0c;基于部门内第一次Paas化热部署落地经验所写&#xff0c;主要内容是如何构建一些热部署代码以及一些避雷经验。 一、设计-领域模型设计 1.首先&#xff0c;确定领域服务所属的领域 2.其次&#xff0c;确定垂直…
阅读更多...
前端基础之BOM和DOM

前端基础之BOM和DOM

1、BOM和DOM简述 BOM&#xff1a;指浏览器对象模型&#xff0c;它使JavaScript有能力与浏览器进行对话 DOM&#xff1a;指文档对象模型&#xff0c;通过它&#xff0c;可以访问HTML文档的所有元素 2、Window对象 所有浏览器都支持window对象&#xff0c;他表示浏览器窗口。 如果…
阅读更多...
5.3 连接和分离线程

5.3 连接和分离线程

方法 pthread_join(thread, status) pthread_detach(thread) pthread_attr_setdetachstate(attr, detachstate) pthread_attr_getdetachstate(attr) 连接 连接&#xff08;joining&#xff09;是一种线程之间完成同步的方法&#xff0c;举例如下。 pthread_join()方法会阻…
阅读更多...
无代码平台哪家好，盘点最新国内十大无代码零代码平台排名

无代码平台哪家好，盘点最新国内十大无代码零代码平台排名

无代码&#xff08;No Code&#xff09;是一种通过使用可视化界面和预构建的模块来创建应用程序、网站或其他数字化解决方案的方法&#xff0c;不需要编写大量的手动代码。 无代码平台通常包括一些基本的构建块&#xff0c;如表单、按钮、文本框等&#xff0c;用户可以通过拖拽…
阅读更多...
Android Studio(对话框AlertDialog)

Android Studio(对话框AlertDialog)

前言 前面介绍了常用控件的相关属性&#xff0c;那些控件的使用起来也很容易。在本节及后面的章节介绍的控件将是相比于前面使用起来较为复杂的&#xff08;不过使用多了&#xff0c;也很容易上手&#xff09;。 这些控件常常需要配合java代码来使用&#xff0c;比如说对话框、…
阅读更多...
zookeeper本地部署和集群搭建

zookeeper本地部署和集群搭建

zookeeper&#xff08;动物园管理员&#xff09;是一个广泛应用于分布式服务提供协调服务Apache的开源框架 Zookeeper从设计模式角度来理解&#xff1a;是一个基于观察者模式设计的分布式服务管理框架&#xff0c;它 负责存储和管理大家都关心的数据 &#xff0c;然 后 接受观察…
阅读更多...
最短路径—Dijkstra算法及 变式题（一个人的旅行）

最短路径—Dijkstra算法及 变式题（一个人的旅行）

Dijkstra(迪杰斯特拉)算法是 典型的单源最短路径算法&#xff0c;用于计算一个节点到其他所有节点的最短路径 无向图为以下&#xff08;对称&#xff09; &#xff1a; 算法本质&#xff1a; 第一个最短点 &#xff08;直接与0.源点连接&#xff09; 第二个次短点 &#…
阅读更多...
修改docker 版本的mysql 8.0 本机Navicat 连不上的问题

修改docker 版本的mysql 8.0 本机Navicat 连不上的问题

1.进入容器 docker exec -it xxxx bash 2.使用root账号登录mysql mysql -u root -p 3.查看当前加密方式 use mysql; SELECT Host, User, plugin from user; 我这是改过了&#xff0c;应该都是caching_sha2_password 4. 修改加密方式 ALTER USER root% IDENTIFIED WITH m…
阅读更多...
性能测试 —— Jmeter 常用三种定时器

性能测试 —— Jmeter 常用三种定时器

1、同步定时器 位置&#xff1a;HTTP请求->定时器->Synchronizing Timer 当需要进行大量用户的并发测试时&#xff0c;为了让用户能真正的同时执行&#xff0c;添加同步定时器&#xff0c;用户阻塞线程&#xff0c;知道线程数达到预先配置的数值&#xff0c;才开始执行…
阅读更多...
3、Python基础语法：解释器、标识符、关键字、缩进

3、Python基础语法：解释器、标识符、关键字、缩进

文章目录 Python解释器标识符关键字缩进代码示例与运行结果Python是一种高级编程语言，以其简洁明了的语法和强大的功能而受到广泛欢迎。本文将介绍Python的一些基础语法元素，包括解释器、标识符、关键字和缩进，并提供相应的代码示例和运行结果。 Python解释器 Python是一种…
阅读更多...
最新文章

Copyright @ 2022~2023