后端程序员入门react笔记（一）

  • 相关参考

react

首先，我们先大概了解一下什么是react以及react可以干什么。
React 是 Facebook 开源的一个用于构建用户界面的一款 JavaScript 库，主要用于构建 UI。

react的特点

  • 声明式编程
    react使用jsx进行渲染，这是一种类似html的语法，可以通过定义属性来描述要呈现的内容。
  • 组件化
  • react将应用程序分解为组件，每个组件都是一个独立的模块，可以独立的开发和测试，组件可以包含状态、属性、事件处理等程序。并且可以互相通信和交互。
  • 状态管理
    react提供了一个状态管理库Redux,用于管理应用程序的装填。Redux将应用程序的状态存储在单个状态树种，并提供了各种操作来修改状态
  • 虚拟dom
    react使用虚拟dom来跟踪应用程序状态，而不是实际DOM,这使得react能够快速响应用户输入，并且可以更高效的渲染
  • 社区支持
    react拥有庞大的社区支持，有许多可用的插件、库和工具，快速帮助开发人员构建和优化应用程序

基于组件：页面中部分内容
学习一次 随处使用
react-native

  • 安装react 创建功能
  • react 核心库 react-dom dom相关功能渲染功能

常见组件

以下是常见的React组件：

  • ReactDOM.render()：用于将React组件渲染到DOM中。
  • ReactDOM.createPortal()：用于创建一个将子组件渲染到指定容器中的React组件。
  • ReactDOM.Fragment()：用于将多个React元素包装在一个不可展开的元素中。
  • ReactDOM.StrictMode()：用于启用React的严格模式，使React在渲染过程中更严格地检查组件的依赖关系。
  • ReactDOM.createContext()：用于创建一个上下文（Context）对象，可以在组件中使用该上下文对象来获取共享的状态和数据。
  • ReactDOM.useContext()：用于在组件中使用上下文对象来获取共享的状态和数据。
  • ReactDOM.useState()：用于在组件中定义状态（state）并更新状态。
  • ReactDOM.useEffect()：用于在组件中定义副作用（side effects）并更新状态。
  • ReactDOM.useReducer()：用于在组件中定义一个reducer函数，该函数将处理状态更新的逻辑。
  • ReactDOM.useCallback()：用于在组件中定义一个回调函数，该函数将在组件第一次渲染时被调用，并返回一个缓存的函数，以避免每次渲染时都重新计算。
  • ReactDOM.useMemo()：用于在组件中定义一个memoized函数，该函数将在第一次调用时计算结果，并在之后的调用中缓存结果，以避免重复计算。
  • ReactDOM.useDebugValue()：用于在调试时向React堆栈中添加调试信息。
  • ReactDOM.createRef()：用于创建一个引用（ref），可以在组件中使用该引用来访问其DOM元素或子组件。
  • ReactDOM.forwardRef()：用于将一个React组件转发给另一个React组件，以使其可以访问父组件的props和refs。
  • ReactDOM.memo()：用于创建一个memoized函数，该函数将在第一次调用时计算结果，并在之后的调用中缓存结果，以避免重复计算。

箭头函数

在es6之后，出现了一种函数，叫箭头函数，它比普通函数更加简洁方便。我们来举一个简单的例子

//普通函数
const add=function (a,b){
    return a+b
}

//箭头函数
const addNew=(a,b)=>{
    return a+b
}

箭头函数的特性

那么箭头函数和普通函数相比有哪些特性呢，我们来看看

  • 箭头函数没有this，当访问this的时候，会获取外部的this
  • 箭头函数没有自己的 arguments 对象
  • 箭头函数不能用作构造函数，当使用 new 调用时会出错。它们也没有 prototype 属性。
  • 箭头函数作为表达式的时候，=> 的优先级低于大多数运算符

npm

在了解react之前，我们还需要了解一些基础工具，比如npm，npm 全称是 node package manager,其实就是一个管理js编写的软件包的管理工具，可以下载，安装，升级，上传js软件包。
node.js内置了npm，所以只要安装了node.js，就可以使用npm。node.js的安装非常简单，官方地址下载就可以安装了。安装完毕后，使用npm install npm@latest -g命令将npm升级到最新版本。

npm镜像源配置

为了在国内尽快的下载js库，我们需要配置一下npm的镜像源，即从哪个源下载，这里我指定了华为，其他的还有腾讯，淘宝等镜像源。

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

npm配置解读

我们可以通过npm config list查看npm的相关配置项

$ npm config list
; "builtin" config from /usr/local/lib/node_modules/npm/npmrc
prefix = "/usr/local" 
; "user" config from /Users/zhangguofu/.npmrc
registry = "https://mirrors.huaweicloud.com/repository/npm/"
; node bin location = /usr/local/Cellar/node/21.5.0/bin/node
; node version = v21.5.0
; npm local prefix = /Users/zhangguofu/website/react
; npm version = 10.2.4
; Run `npm config ls -l` to show all defaults.
  1. prefix：指定npm的安装路径。
  2. registry：设置JavaScript库的镜像源。在这个例子中，设置为"https://mirrors.huaweicloud.com/repository/npm/"。
  3. node bin location：指定Node.js二进制文件的位置。
  4. node version：表示已安装的Node.js版本。
  5. npm local prefix：指定npm的本地安装路径。即我下载的js组件的位置
  6. npm version：表示已安装的npm版本。

react的安装

接下来我们就开始讲react的安装

npm安装

我们前面安装了npm，下面我们通过npm来下载react，我执行命令npm i react react-dom，那么在我的npm local prefix路径下，就会生成一个node_modules的目录。注意这里面，react.js可以说是我们的核心文件，用来执行业务逻辑和数据，但是数据完成之后还是要需要渲染成dom才能被用户看到，那么这些数据怎么样才能转换成真正的domn呢，这就用到了react-dom。
在这里插入图片描述
在这里插入图片描述

  • hello react
    接下来我用一段简单的代码先来演示一下react
<body>
<div id="root"></div>
</body>
<!--引入react.js-->
<script src="../node_modules/react/umd/react.development.js"></script>
<!--引入react-dom.js-->
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script>
                    //这个方法需要三个参数 type prop  children
  const title=  React.createElement('div',null,'hello world')
  // 渲染到root里面
    ReactDOM.render(title,document.getElementById("root"));
</script>

脚手架安装

我们知道，脚手架是开发现代web应用的必备，比如webpack babel eslint等工具辅助项目开发，为了让我们更专注的开发业务，减少配置项目，我们使用脚手架来安装和使用react

  • 执行命令npx create-react-app my-app即可创建一个my-app的目录，其中npx是npm5.2版本中的一个命令，create-react-app是脚手架的名字。my-app 就是我们的项目了。
$ ls
README.md         node_modules      package-lock.json package.json      public            src
  • 我们进入项目目录并执行npm start即可启动项目，默认是3000端口,接下来我们只需使用三行代码就可以实现一个hello react
//导入文件
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<div>hello react </div>,document.getElementById('root'))

JSX

我们在上面代码可以看到，在js里面我们竟然可以直接写html，而且还不报错，其实这个有趣的标签语法既不是字符串也不是 HTML，而是JSX，它是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言，但它具有 JavaScript 的全部功能。
那我们可能会很奇怪，为什么js里面的写JSX不会报错呢？其实这就是脚手架的功劳，脚手架已经帮我们下载安装了三个包

  • @babel/cli
  • @babel/core
  • @babel/preset-react
    这个babel包负责将JSX编译为react可执行的文本，举个例子const h1 = <h1>this is a H1 Tag</h1>经过编译后会变成const h1 = React.createElement("h1", null, "this is a H1 Tag");，接下来我们看看JSX的功能。

一般使用

//导入文件
import React from 'react'
import ReactDOM from 'react-dom'
// 注意 dom的属性命名必须是小驼峰  整个jsx推荐用小括号包裹  dom如果没有子节点,可以省略闭合标签
const content=(<div className='content'>hello react <span/> </div>)
ReactDOM.render(content,document.getElementById('root'))

我们来对比一下渲染后的dom

<div id="root"><div class="content">hello react <span></span> </div></div>

js变量的嵌入

const myName='张三'
const content=(<div className='content'>{myName}</div>)

三元表达式

const age=19
const content=(
    <div className='content'>
        <li>是否成年:{age>18?'成年':'未成年'}</li>
    </div>
)

函数表达式

const func=()=>{
    return <div>i am a function</div>
}
const content=<h1>{func()}</h1>

条件和逻辑运算符

const age=20
const func=()=>{
    //逻辑运算
    return age >18 && <div>i am a function</div>
}

const func2=()=>{
    if (age>18){
        return <div>i am {age}</div>
    }
}
const content=<h1>{func()}{func2()}</h1>

列表渲染

const heros=[
    {
        name:'batman',
        id:20
    },
    {
        name:'x-police',
        id:21
    },
]
const content=<h1>{heros.map(item=><li key={item.id}>{item.name}</li>)}</h1>

引入css文件

可以通过类名或者行内样式写样式

import './css/index.css'
const content=<div>
    <h1 style={{color:"red"}}>i am h1</h1>
    <h2 className='tag2'>i am h2</h2>
</div>

react的组件

组件是react的一等公民，你的每一个业务，可能都是多个组件拼装起来的。每个组件可能代表一个功能。组件实现了代码之间的独立性，复用性和耦合性。
组件有两种实现方式，一种是以函数形式实现，一种是以class的形式实现。

函数创建组件

接下来我们看一下函数实现的组件长什么样子,其中我们要注意，函数的名称必须大写，为什么？我们写普通的jsx，可能会有div ul 这些，那么babel如何知道你写的这个是普通的jsx还是组件？就是看第一个字母是否大写，另一方面，组件必须有返回值，也可以返回null

function GetName() {
    return <div>i am x</div>
}
const content=<GetName/>
  • 箭头函数创建组件
    这里遇到一个小插曲，浏览器一直报Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17,这里我们一下改一下rendder的方式
//导入文件
import React from 'react'
import ReactDOM from 'react-dom/client'
import './css/index.css'
const GetName=()=> {
    return <div>i am x</div>
}
const content=<GetName/>
const root= ReactDOM.createRoot(document.getElementById('root'))
root.render(content)

类创建组件

其实对于一个后端人员来说，class对我们来说实在太熟西了。但是这里需要有两个地方注意，一个是class必须继承自父类React.Component,第二是必须提供render方法，且该方法必须有返回值，我们举例看一下

class Hello extends React.Component{
    render() {
        return <div>i am class hello</div>
    }
}
const content=<Hello/>

那么我们也看到了，既然可以使用class创建组件，那么我们不可能将很多个class堆在一个js文件中，下面我们看怎么组件抽离

组件抽离

组件抽离其实很简单，就是注意两点，一是js文件中导入react库，第二是导出即可export，我们新建一个hello.js的文件,

import React  from "react";
class Hello extends React.Component {
    render(){
        return <div>i am hello </div>
    }
}
//导出组件
export default Hello;
  • 文件中引入
import Hello from './Hello'
const content=<Hello/>

react事件处理

我们知道，在js里面有很多事件
在这里插入图片描述
那么react里面是怎么绑定事件的呢？其实和js很像，就是这样的形式on+事件名称={()=>{}}，但是注意一点，事件名称必须是驼峰命名，比如我们绑定一个点击事件

class Hello extends React.Component {
    Haha(){
        alert("haha");
    }
    render(){
        return <button onClick={this.Haha}>i am hello </button>
    }
}

合成事件

事件可以通过合成事件进行实例传递，比如我们想调用浏览器原生事件，因为原生事件对所有浏览器都是兼容的。那么我们怎么使用这些原生事件呢，我们举个例子

class Hello extends React.Component {
    Haha(e){
       //禁止跳转
        e.preventDefault();
    }
    render(){
        return <a href='https://www.acurd.com' onClick={this.Haha}>i am hello </a>
    }
}

state

我们前面说过，react是有状态管理的，通过state和setState来配合完成，但是函数组件是没有状态的。而类组件才有状态，为什么？很简单，因为class里面可以定义自己的属性，修改状态是通过this指向。函数明显不能实现这些功能。比如我们现在来定义一个

class Hello extends React.Component {
    //利用构造函数完成state初始化
    // constructor(props){
    //     super(props);
    //     this.state={
    //         name:'x',
    //         age:18
    //     }
    // }
    //简洁化state初始化
    state={
        name:'x',
        age:18
    }
    render() {
        return (
            <ul>
                <li>name:{this.state.name}</li>
                <li>age:{this.state.age}</li>
            </ul>
        )
    }
}
}
  • 我们怎么让数据动起来呢，这里就用到了setState方法,注意，setState里面是一个对象，想要修改哪个属性就修改哪个属性。
    render() {
        return (
            <ul>
                <li>name:{this.state.name}</li>
                <li>age:{this.state.age}</li>
                <button onClick={()=>{this.setState({age:this.state.age+1})}}>点我加一岁</button>
            </ul>
        )
    }
  • 那么我们能否把 onClick方法提出来呢，这个当然是可以的，我们前面就做过了，如果我们做一写业务，逻辑处理自然是没有问题，但是如果想要改state，就得先绑定state,我们来看看
    ChangeAge(){
        this.setState({age:this.state.age+1})
    }
    render() {
        return (
            <ul>
                <li>name:{this.state.name}</li>
                <li>age:{this.state.age}</li>
                <button onClick={this.ChangeAge}>点我加一岁</button>
            </ul>
        )
    }
  • 呃，报错了Uncaught TypeError: Cannot read properties of undefined (reading 'setState')，这个this可不是onClick的this，而是 this.setState的this,为啥函数内部的this是undefined，其实这是babel编译后的结果，babel是在use strict模式下编译的，不允许this指向函数以外的对象，那么this只能指向undefined。

this的指向问题

好了，我们说了函数内部的this是undefined，也解释了原因，那么我们怎么使用到外部的this呢。

  • 利用箭头函数去找外面的this
    render() {
        return (
            <ul>
                <li>name:{this.state.name}</li>
                <li>age:{this.state.age}</li>
                <button onClick={()=>this.ChangeAge()}>点我加一岁</button>
            </ul>
        )
    }

或者我们直接把函数定义为箭头函数

    ChangeAge=()=>{
        this.setState({age:this.state.age+1})
    }
  • 第二种方法就是在构造函数中将class的this绑定到函数的this上面
    //利用构造函数完成state初始化
    constructor(props){
        super(props);
        this.state={
            name:'x',
            age:18
        }
        this.ChangeAge=this.ChangeAge.bind(this)
    }

props

props是什么东西？它类似于你在声明对象的时候，给对象添加的属性,它具有以下特性

  • 传递数据，props可以用于向子组件传递数据，这些数据可能是父组件的状态也可能是其他兄弟组件的状态。子组件获取到数据更新自己的状态
  • 外部控制，通过props,父组件可以对子组件进行控制，例如设置初始状态，或者传递回调函数，这种控制方式让react组件之间可以具有更好的互动性和协作性。
  • 属性约束：props是只读的，子组件不能修改父组件传过来的数据。

我们举个例子看一下

const content=<Hello name='张三' age='18' />
  • 那么我们在使用的使用只需要读取到就行了
		   <ul>
                <li>name:{this.props.name}</li>
                <li>age:{this.props.age}</li>
            </ul>
  • 或者一次性从props里面取出来
 render() {
        const {name,age} = this.props
        return (
            <ul>
                <li>name:{name}</li>
                <li>age:{age}</li>
            </ul>
        )
    }
  • 展开运算符的用法
//展开符
const arr=[1,2,3,4,5,6,7,8,9,10]
const arr2=[11,21,13]
console.log(...arr);
//合并数组
let arr3=[...arr,...arr2]
console.log(arr3);
//展开对象
let obj={
    name:'张三',
    age:18,
    sex:'男'
}
//展开对象需要用花括号表示对象
console.log({...obj});
//给对象添加属性
let obj2={...obj,addr:"xxxx"}
console.log(obj2);
  • 既然对象可以展开，那么我们就可以利用展开符批量添加props
let p={
    name:'张三1',
    age:'182',
    sex:'男'
}
const content=<Hello {...p} ></Hello>
  • props限制
    我们还可以对props进行限制，比如类型，是否必填等，追忆，这种方式对class 和函数都是适用的
//对类型进行限制
Hello.propTypes={
    name:PropTypes.string.isRequired,
    sex:PropTypes.string.isRequired,
    age:PropTypes.number.isRequired,
    speak:PropTypes.func.isRequired
}
//初始默认值
Hello.defaultProps={
    name:'张三',
    sex:'男',
    age:18
}
  • props的简写方式
    我们也可以以对象的属性的形式来限制，比如下面这种，写在类的里面，这对我们后端程序员来说就熟悉的多了
    static propTypes = {
        name:PropTypes.string,
        age:PropTypes.number,
        sex:PropTypes.string
    }
    
    static defaultProps={
        name:'李四',
        sex:'女',
        age:20
    }
  • 函数中怎么使用props
function Speak(props){
    let {age, name, sex}=props
    return (<div>
        <ul>
            <li>age:{age}</li>
            <li>name:{name}</li>
            <li>sex:{sex}</li>
        </ul>
    </div>)
}
Speak.propTypes={
    age:PropTypes.number,
    name:PropTypes.string,
    sex:PropTypes.string
}

const content=<Speak {...p}  ></Speak>

refs与事件处理

  • 组件内的标签可以通过ref打标识，react就是通过ref识别到对应的元素，来完成对元素的操作。
class Hello extends React.Component {
    Msg=()=>{
        //input1 就是ref=input1指定的那个dom
        let msg=this.refs.input2.value;
        alert(msg);
    }
    render() {
        return (
            <ul>
                <li><input type="text" ref='input1' placeholder='输入数据'/></li>
                <li><input type="text" ref='input2' placeholder='输入数据'/></li>
                <button onClick={this.Msg} >点击提示数据</button>
            </ul>
        )
    }
}
  • 但是上面的ref的值其实是一个字符串，字符串效率不高，第二方面不方便识别，可能在使用中不小心使用错误。接下来我们看使用回调怎么使用，这种写法相当于通过回调函数给class赋值了一个属性。
    Msg=()=>{
        alert(this.input1.value)
    }
    render() {
        return (
            <ul>
                <li><input type="text" ref={(dom)=>{this.input1=dom}} placeholder='输入数据'/></li>
                <button onClick={this.Msg} >点击提示数据</button>
            </ul>
        )
    }
  • 当然了，能用箭头函数内嵌的，我们肯定可以提到外面来使用，e就是当前dom对象
    setInput=(e)=>{
        this.input1=e
    }
  • 但是，这种回调似乎没有字符串写起来方便啊，怎么办？react又做了更新，既然原来你是在直接声明了字符串，容易出问题，那么这样，我先让你声明ref,让后你只需要像使用字符串一样，把你声明的ref赋值给ref就可以了。比如下面
    input1=React.createRef()
    Msg=()=>{
        alert(this.input1.current.value)
    }
  • 如果发生事件的元素恰好就是我们要操作的元素，我们就可以使用对象e作为参数来处理，比如下面
class Hello extends React.Component {
    Msg = (e) => {
        alert(e.target.value)
    }

    render() {
        return (
            <li><input onBlur={this.Msg} type="text" ref={this.input1} placeholder='输入数据'/></li>
        )
    }
}

class中的constructor函数的使用场景

  • 通过this.state初始化内部的state
  • 为时间处理函数绑定实例

事件处理

  • 通过on属性指定事件处理函数，合成事件是为了更好的兼容
  • 委托给了最外层的元素，比如div 为了高效
  • 通过event.target活得到dom对象。

收集表单数据

  • 非受控组件
    所有输入类的dom ，如果是现用现取，则属于非受控组件。主动获取值
  • 受控组件
    由事件去驱动修改状态或者数据，这些就是受控组件

高阶函数

  • 高阶函数：如果函数接收或者返回值有一个是函数类型，那么该函数是高阶函数。
    比如这种用户名: <input onChange={this.setData} type="text"/>,其实就是onChange这个事件执行了setData()的这个方法，返回了一个操作指令，所以，如果你传了参数，必须返回一个函数给onChange
    setData=(dataType)=>{
        return (e)=>{
             this.setState(
                {
                    [dataType]:e.target.value
                }
            )
        }
    }
    getData=(e)=>{
        e.preventDefault()
        let {name,pwd}=this.state
        console.log(name,pwd)
    }
    render() {
        return (
            <form onSubmit={this.getData}>
                用户名: <input onChange={this.setData("name")} type="text"/>
                pwd: <input  onChange={this.setData("pwd")} type="text"/>
                <button>提交</button>
            </form>
        )
    }
  • 函数的柯里化：继续通过调用高阶函数的返回的函数，实现多次接收参数最后统一处理函数的编码方式。其实就是一次调用多个函数，将一组数据通过多个函数的处理而得到结果
let sum = (a) => {
    return (b) => {
        return (c) => {
            return a + b + c
        }
    }
}
console.log(sum(1)(2)(3));

相关参考

官方文档
技术栈为：React + Hook + React-router-v6 + Mobx + AntD

尚硅谷react分章

尚硅谷React
源码地址：https://gitee.com/react-cp/react-pc-code
React基础讲义: https://www.yuque.com/fechaichai/qeamqf/xbai87
React和Mobx讲义: https://www.yuque.com/fechaichai/qeamqf/apomum
ReactPc项目讲义: https://www.yuque.com/fechaichai/tzzlh1

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

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

相关文章

（5）【Python/机器学习/深度学习】Machine-Learning模型与算法应用—12种聚类算法说明与归纳

（5）【Python/机器学习/深度学习】Machine-Learning模型与算法应用—12种聚类算法说明与归纳

目录 一、12种聚类(无监督学习)算法说明和区分比较 聚类算法的类型（一） ​编辑导入函数库 加载数据集 ​编辑 (1)K-Means --Centroid models (2)Mini-Batch K-Means -- Centroid models (3)AffinityPropagation (Hierarchical) -- Connectivity models (4)Mean Shift…
阅读更多...
靶机实战bwapp亲测xxe漏洞攻击及自动化XXE注射工具分析利用

靶机实战bwapp亲测xxe漏洞攻击及自动化XXE注射工具分析利用

靶机实战bwapp亲测xxe漏洞攻击及自动化XXE注射工具分析利用。 1|0介绍 xxe漏洞主要针对webservice危险的引用的外部实体并且未对外部实体进行敏感字符的过滤，从而可以造成命令执行，目录遍历等．首先存在漏洞的web服务一定是存在xml传输数据的，可以在http头的content-type中查…
阅读更多...
前后端数据校验

前后端数据校验

前端校验内容 前端开发中的必要校验&#xff0c;可以保证用户输入的数据的准确性、合法性和安全性。同时&#xff0c;这些校验也有助于提供良好的用户体验和防止不必要的错误提交到后端。 1、必填字段校验&#xff1a; 对于必填的字段&#xff0c;需确保用户输入了有效的数据…
阅读更多...
PyTorch 2.2 中文官方教程（二十）

PyTorch 2.2 中文官方教程（二十）

移动设备 在 iOS 上进行图像分割 DeepLabV3 原文&#xff1a;pytorch.org/tutorials/beginner/deeplabv3_on_ios.html 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 作者&#xff1a;Jeff Tang 审阅者&#xff1a;Jeremiah Chung 介绍 语义图像分割是一种计算机视…
阅读更多...
InnoDB 锁系统（小白入门）

InnoDB 锁系统（小白入门）

1995年 &#xff0c;MySQL 1.0发布&#xff0c;仅供内部使用&#xff01; 开发多用户、数据库驱动的应用时&#xff0c;最大的一个难点是&#xff1a;一方面要最大程度地利用数据库的并发访问&#xff0c;另一方面还要确保每个用户能以一致性的方式读取和修改数据。 MVCC 并发…
阅读更多...
zabbix配置监控脚本

zabbix配置监控脚本

zabbix配置监控脚本 1.修改agent配置文件 [rootchang ~]# vim /etc/zabbix/zabbix_agentd.conf 333行 原# UnsafeUserParameters0 修改成 UnsafeUserParameters12.创建脚本与脚本存放目录 [rootchang ~]# mkdir /etc/zabbix/zabbix_scripts [rootchang zabbix_scripts]# vi…
阅读更多...
电路分析2

电路分析2

7 等效电路的思想&#xff0c;简化不是目的&#xff0c;这个电路说明一切&#xff01;_哔哩哔哩_bilibili 高中知识&#xff0c;翻笔记 8 什么时候用Y型&#xff1f;看到有有相同数字的时候&#xff0c;就可以考虑用 9 10 输入电阻还有没学完的 ok 11
阅读更多...
Django的web框架Django Rest_Framework精讲（四）

Django的web框架Django Rest_Framework精讲（四）

文章目录 1.DRF认证组件Authentication2.权限Permissions3.限流Throttling4.过滤Filtering5.排序6.分页Pagination7.异常处理 Exceptions8.自动生成接口文档 大家好&#xff0c;我是景天&#xff0c;今天我们继续DRF的最后一讲&#xff0c;Django的web框架Django Rest_Framewor…
阅读更多...
SpringBoot异步任务

SpringBoot异步任务

一、注解实现 EnableAsync注解 创建一个配置类&#xff0c;并在类上添加EnableAsync注解&#xff0c;用来启用异步支持。 Configuration EnableAsync public class AsyncConfig { }或者&#xff0c;在启动类上添加EnableAsync注解&#xff0c;用来启用异步支持。 EnableAsy…
阅读更多...
Linux（二）

Linux（二）

远程登录 Linux大多应用于服务器&#xff0c;而服务器不可能像PC一样放在办公室&#xff0c;它们是放在IDC机房的&#xff0c;所以我平时登录linux系统都是通过远程登录的。 Linux系统中是通过ssh服务实现的远程登录功能。默认ssh服务开启了22端口&#xff0c;而且当我们安装…
阅读更多...
docker elasticsearch8启动失败

docker elasticsearch8启动失败

docker elasticsearch8.12.0启动后提示这个&#xff0c;并且始终无法访问localhost:9200 received plaintext http traffic on an https channel, closing connection Netty4HttpChannel 解决方案&#xff1a;重新创建 elasticsearch容器&#xff0c;加上 -e xpack.security.…
阅读更多...
scikit-learn 1.3.X 版本 bug - F1 分数计算错误

scikit-learn 1.3.X 版本 bug - F1 分数计算错误

如果您正在使用 scikit-learn 1.3.X 版本&#xff0c;在使用 f1_score() 或 classification_report() 函数时&#xff0c;如果参数设置为 zero_division1.0 或 zero_divisionnp.nan&#xff0c;那么函数的输出结果可能会出错。错误的范围可能高达 100%&#xff0c;具体取决于数…
阅读更多...
ArcGIS学习（三）数据可视化

ArcGIS学习（三）数据可视化

ArcGIS学习（三）数据可视化 1.矢量数据可视化 需要提前说明的是，在ArcGIS中，所有的可视化选项设置都是在“图层属性”对话框里面的“符号系统”中实现的。 对于矢量数据的可视化，主要有四种可视化方式： 按“要素”可视化按“类别”可视化按“数量”可视化按“图表”可视…
阅读更多...
Leetcode—38. 外观数列【中等】

Leetcode—38. 外观数列【中等】

2024每日刷题&#xff08;111&#xff09; Leetcode—38. 外观数列 实现代码 class Solution { public:string countAndSay(int n) {string ans "1";while(--n) {string next;for(int i 0; i < ans.size(); i) {int cnt 1;char c ans[i];while(i 1 < an…
阅读更多...
PyTorch 2.2 中文官方教程（十七）

PyTorch 2.2 中文官方教程（十七）

&#xff08;Beta&#xff09;使用缩放点积注意力&#xff08;SDPA&#xff09;实现高性能 Transformer 原文&#xff1a;pytorch.org/tutorials/intermediate/scaled_dot_product_attention_tutorial.html 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 注意 点击这…
阅读更多...
动态颗粒背景，适合VUE、HTML前端显示

动态颗粒背景，适合VUE、HTML前端显示

动态颗粒背景&#xff0c;适合做背景使用&#xff0c;VUE、HTML前端显示直接看效果 废话不多说直接上代码&#xff1b; 一、html 代码部分 <template><div id"login"><div class"container"><div class"login-form"&g…
阅读更多...
QXlsx Qt操作excel(1)

QXlsx Qt操作excel(1)

QXlsx 是一个用于处理Excel文件的开源C库。它允许你在你的C应用程序中读取和写入Microsoft Excel文件&#xff08;.xlsx格式&#xff09;。该库支持多种操作&#xff0c;包括创建新的工作簿、读取和写入单元格数据、格式化单元格、以及其他与Excel文件相关的功能。 关于QXlsx的…
阅读更多...
Open CASCADE学习|拉伸

Open CASCADE学习|拉伸

目录 1、沿方向拉伸 2、沿路径拉伸 3、变形拉伸 1、沿方向拉伸 #include <Geom_CylindricalSurface.hxx> #include <gp_Ax3.hxx> #include <GeomAPI_Interpolate.hxx> #include <BRepAdaptor_Curve.hxx> #include <BRepBuilderAPI_MakeEdge.hxx&…
阅读更多...
Kubernetes基础(十一)-CNI网络插件用法和对比

Kubernetes基础(十一)-CNI网络插件用法和对比

1 CNI概述 1.1 什么是CNI&#xff1f; Kubernetes 本身并没有实现自己的容器网络&#xff0c;而是借助 CNI 标准&#xff0c;通过插件化的方式来集成各种网络插件&#xff0c;实现集群内部网络相互通信。 CNI&#xff08;Container Network Interface&#xff0c;容器网络的…
阅读更多...
Docker 可视化工具

Docker 可视化工具

1、Portainer 概念介绍 Portainer是一款轻量级的应用&#xff0c;它提供了图形化界面&#xff0c;用于方便地管理Docker环境&#xff0c;包括单机环境和集群环境。 Portainer分为开源社区版&#xff08;CE版&#xff09;和商用版&#xff08;BE版/EE版&#xff09;。 Porta…
阅读更多...
最新文章

Copyright @ 2022~2023