React 企业级开发必备, 我来带你快速入门 !

news2024/11/15 8:59:58

目录

一、为什么我来安利你学习 React?

二、使用 React 的前置工作

三、简易 demo 学开发

3.1、jsx语法

3.2、函数式组件 demo 

3.3、简单类组件定义

3.4、复杂类组件定义

3.4.1、state

写法一：复杂式

写法二：简便式

3.4.2、props

类型限制

props简写

函数式组件props

3.4.3、refs

ref 回调函数

createRef

一、为什么我来安利你学习 React?

效率起飞！！！

以往我们都是通过原生的 js 直接去操作真实 DOM ，而真实的 DOM 相对于虚拟 DOM 更加重量，一旦对真实 DOM 的操作频繁，带来的开销是不可估量的，而 React 却是通过构建虚拟 DOM，再转化为真是 DOM 来呈现在浏览器上，无需真实 DOM 附带繁杂的属性~

二、使用 React 的前置工作

一定要注意，按照以下顺序引入到你的项目中！

1.引入 react 核心库  react.development.js

下载地址：https://unpkg.com/react@18.0.0/umd/react.development.js

2.React 渲染组件  react-dom.developmengt.js

下载地址：https://unpkg.com/react-dom@18.0.0/umd/react-dom.development.js

3.引入 babel 用于将 jsx 转为 js  babel.min.js

下载地址：https://unpkg.com/babel-standalone@6/babel.min.js

三、简易 demo 学开发

3.1、jsx语法

我们在 <script type="text/babel"><script/>中编写需要注意一下几点

  1. 定义虚拟 DOM 时，不要写引号。
  2. 标签中混入 JS 表达式时需要使用 {}。
  3. 样式的类名指定不要用 class ，要用 className。
  4. 内联样式，要用 style={{key:value}} 的形式去写。
  5. 只能有一个根标签。
  6. 标签首字母：(1)、若小写字母开头，则将标签转为 html 中的 同名元素，若 html 中无该标签对应的同名元素，则报错。(2)、若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错。

如下案例：

<!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>


<style>
    .title{
        background-color: aqua;
    }
</style>

<body>
    <!-- 准备一个容器 -->
    <div id="test"></div>

    <!-- 1.引入 react 核心库 -->
    <script type="text/javascript" src="../model/react.development.js"></script>
    <!-- 2.渲染组件到页面 -->
    <script type="text/javascript" src="../model/react-dom.developmengt.js"></script>
    <!-- 3.引入 babel 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../model/babel.min.js"></script>

    <script type="text/babel">
        //模拟数据
        const data = ['Angular', 'React', 'Vue'];
        const myId = 'tITLe';
        const myData = 'hello react';


        //1.构造虚拟 DOM 
        const VDOM = (
            <div>
                <h1>前端 js 框架列表</h1>
                <ul>
                    {
                        data.map((str, index)=>{
                            return <li key={index}>{str}</li>
                        })
                    }
                </ul>


                <div>
                    <h1 className="title" id={myId.toLowerCase()}>
                        <span style={{color:'white', fontSize:'29px'}}>
                            {myData.toLocaleLowerCase()}
                        </span>
                    </h1>
                    <h1 className="title" id={myId.toUpperCase()}>
                        <span style={{color:'white', fontSize:'29px'}}>
                            {myData.toLocaleLowerCase()}
                        </span>
                    </h1>
                    <input type="text"/>
                </div>
            </div>
        );

        //2.渲染到浏览器
        ReactDOM.render(VDOM, document.querySelector("#test"));
    </script>

</body>
</html>

执行结果如下

3.2、函数式组件 demo 

<!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>
    <!-- 准备一个容器 -->
    <div id="test"></div>

    <!-- 1.引入 react 核心库 -->
    <script type="text/javascript" src="../model/react.development.js"></script>
    <!-- 2.渲染组件到页面 -->
    <script type="text/javascript" src="../model/react-dom.developmengt.js"></script>
    <!-- 3.引入 babel 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../model/babel.min.js"></script>

    <script type="text/babel">
        function MyComponent() {
            return "这是一个 Demo 组件(首字母必须大写，才可以被 render 追踪为组件)";
        }
        ReactDOM.render(<MyComponent/>, document.querySelector("#test"));
    </script>

</body>
</html>

问题：执行了 ReactDOM,render(<Demo/>, document.querySelector("#test")) 之后，发生了什么?

            1. React 解析组件标签，找到了 MyComponent 组件。
            2. 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟 DOM 转为真是的 DOM ，随后呈现在主页面中。

3.3、简单类组件定义

类组件通过继承 React.Component ，重写 render 方法来渲染页面

<!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>
    <!-- 准备一个容器 -->
    <div id="test"></div>

    <!-- 1.引入 react 核心库 -->
    <script type="text/javascript" src="../model/react.development.js"></script>
    <!-- 2.渲染组件到页面 -->
    <script type="text/javascript" src="../model/react-dom.developmengt.js"></script>
    <!-- 3.引入 babel 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../model/babel.min.js"></script>

    <script type="text/babel">
        //创建类式组件(必须继承 React.Component，重写 render 方法)
        class MyComponent extends React.Component {
            render() {
                //render 中的 this 是 MyComponent 的实例对象
                return <h2>我是用类定义的组件（适用于复杂组件的定义）</h2>
            }
        }
        ReactDOM.render(<MyComponent/>, document.querySelector("#test"));

        /*
            执行了 ReactDOM,render(<MyComponent/>, document.querySelector("#test")) 之后，发生了什么?

            1. React 解析组件标签，找到了 MyComponent 组件。
            2. 发现组件是使用类定义的，随后 new 出来该类的实例，并通过该实例调用到原型上的 render 方法
            3.将 render 返回的虚拟 DOM 转为真实的 DOM ，随后呈现在页面中
        */
    </script>

</body>
</html>

3.4、复杂类组件定义

3.4.1、state

案例：点击“炎热”展现“凉爽”，点击“凉爽”展现“炎热”

写法一：复杂式


<!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>
    <!-- 准备一个容器 -->
    <div id="test"></div>

    <!-- 1.引入 react 核心库 -->
    <script type="text/javascript" src="../model/react.development.js"></script>
    <!-- 2.渲染组件到页面 -->
    <script type="text/javascript" src="../model/react-dom.developmengt.js"></script>
    <!-- 3.引入 babel 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../model/babel.min.js"></script>

    <script type="text/babel">
       //创建组件 
       class MyComponent extends React.Component{
            constructor(props) {
                super(props); //先别管为什么，这个必须有
                this.state = {isHot: true} //这里必须是一个对象
                //解决 changeWeather 中 this 指向问题
                this.nick = this.changeWeather.bind(this);
            }

            render() {
                return <h2 onClick={this.nick}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}!</h2>
            }

            //作为事件进行回调
            changeWeather() {
                //注意：状态不可以直接更改，需要使用内置 API 去更改
                //this.state.isHot = !isHot //这是错误写法

                //获取原来的 isHot 值
                const isHot = this.state.isHot;
                //注意：状态 state 必须通过 setState 更改，并且这里不是覆盖，而是合并 
                this.setState({isHot: !isHot});
            }

       }

       //渲染
       ReactDOM.render(<MyComponent/>, document.querySelector("#test"));

    </script>

</body>
</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>
    <!-- 准备一个容器 -->
    <div id="test"></div>

    <!-- 1.引入 react 核心库 -->
    <script type="text/javascript" src="../model/react.development.js"></script>
    <!-- 2.渲染组件到页面 -->
    <script type="text/javascript" src="../model/react-dom.developmengt.js"></script>
    <!-- 3.引入 babel 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../model/babel.min.js"></script>

    <script type="text/babel">
       //创建组件 
       class MyComponent extends React.Component{
            //初始化状态
            state = {isHot: true}

            render() {
                return <h2 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}!</h2>
            }

            //自定义方法
            //箭头函数的 this 就是外层的类(解决 this 指向问题)
            changeWeather = () => {
                const isHot = this.state.isHot;
                this.setState({isHot: !isHot});
            }

       }

       //渲染
       ReactDOM.render(<MyComponent/>, document.querySelector("#test"));

    </script>

</body>
</html>

3.4.2、props

除了类构造器可以进行构造赋值传参， React 还提供了一种方式，就是 props 属性，通过使用 ReactDOM.sender 就可以直接传入参数


<!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>
    <!-- 准备一个容器 -->
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>

    <!-- 1.引入 react 核心库 -->
    <script type="text/javascript" src="../model/react.development.js"></script>
    <!-- 2.渲染组件到页面 -->
    <script type="text/javascript" src="../model/react-dom.developmengt.js"></script>
    <!-- 3.引入 babel 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../model/babel.min.js"></script>

    <script type="text/babel">
        
        //定义组件
        class Person extends React.Component {
            render() {
                const {name, age, sex} = this.props;
                return (
                    <div>
                        <ul>
                            <li>姓名:{name}</li>    
                            <li>年龄:{age}</li>    
                            <li>性别:{sex}</li>    
                        </ul>
                    </div>
                );
            }
        }       

        //渲染
        ReactDOM.render(<Person name="tom" age="19" sex="男"/>, document.querySelector("#test1"));
        ReactDOM.render(<Person name="jerry" age="17" sex="女"/>, document.querySelector("#test2"));
        //更简单的渲染:
        //模拟前端 ajax传入
        const p = {name: "zhangsan", age: 10, sex: "男"}
        ReactDOM.render(<Person {...p}/> , document.querySelector("#test3"));

        //另外若需要修改并合并
        ReactDOM.render(<Person {...p} name="lisi"/>, document.querySelector("#test3"));


    </script>

</body>
</html>

类型限制

如果有需要，我们还可以对传入的标签属性进行类型限制或者是默认属性，首先，我们需要引入下面这个库

https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js

代码如下:

        
        //定义组件
        class Person extends React.Component {
            render() {
                const {name, age, sex} = this.props;
                return (
                    <div>
                        <ul>
                            <li>姓名:{name}</li>    
                            <li>年龄:{age}</li>    
                            <li>性别:{sex}</li>    
                        </ul>
                    </div>
                );
            }
        }       

        //对标签属性进行类型必要性的限制
        Person.propTypes = {
            // 限制 name 属性必须为 string，isRequired 表示必须是必填项
            name:PropTypes.string.isRequired,
            // 限制 sex 属性必须为 string 类型
            sex:PropTypes.string,
            // 限制 age 属性必须为 number 属性
            age:PropTypes.number,
            // 限制 speak 属性必须为 函数
            speak:PropTypes.func

        }
        //设置默认属性(如果没有参数传入)
        Person.defaultProps = {
            sex:"不男不女",
            age:18
        }

        function speak() {
            console.log("我要发言了~");
        }

        //渲染
        ReactDOM.render(<Person speak={speak} name="tom" age="19" sex="男"/>, document.querySelector("#test1"));

props简写

直接给类添加propTypes和defaultProps属性，注意：是类属性，不是实例属性，所以加上static关键字

        //定义组件
        class Person extends React.Component {
            constructor(props) {
                /*
                * 拓展
                * 构造器是否接收props，并传递给super，取决于：是否希望在构造器中使用this访问props
                * */
                super(props);
                console.log(this.props) // 通过实例使用props ，这里如果不传递props给super，this.props为undefind,可直接使用props,如下
                console.log(props) //直接使用props
            }

            static propTypes = { //这里是类属性，不是实例
                // 限制 name 属性必须为 string，isRequired 表示必须是必填项
                name:PropTypes.string.isRequired,
                // 限制 sex 属性必须为 string 类型
                sex:PropTypes.string,
                // 限制 age 属性必须为 number 属性
                age:PropTypes.number,
                // 限制 speak 属性必须为 函数
                speak:PropTypes.func
            }

            static defaultProps = {
                sex:"不男不女",
                age:18
            }

            render() {
                const {name, age, sex} = this.props;
                return (
                    <div>
                        <ul>
                            <li>姓名:{name}</li>    
                            <li>年龄:{age}</li>    
                            <li>性别:{sex}</li>    
                        </ul>
                    </div>
                );
            }
        }       

        function speak() {
            console.log("我要发言了~");
        }

        //渲染
        ReactDOM.render(<Person speak={speak} name="tom" age="19" sex="男"/>, document.querySelector("#test1"));

函数式组件props

函数式组件不支持state和refs，但是也能使用props以及限制props限制.

        function Person(props) {
            const{name, age, sex} = props
            return (
                <div>
                    <ul>
                        <li>姓名:{name}</li>    
                        <li>年龄:{age}</li>    
                        <li>性别:{sex}</li>    
                    </ul>
                </div>
            );
        }
        //对标签属性进行类型必要性的限制
        Person.propTypes = {
            // 限制 name 属性必须为 string，isRequired 表示必须是必填项
            name:PropTypes.string.isRequired,
            // 限制 sex 属性必须为 string 类型
            sex:PropTypes.string,
            // 限制 age 属性必须为 number 属性
            age:PropTypes.number,
            // 限制 speak 属性必须为 函数
            speak:PropTypes.func

        }
        //设置默认属性(如果没有参数传入)
        Person.defaultProps = {
            sex:"不男不女",
            age:18
        }

        function speak() {
            console.log("我要发言了~");
        }

        //渲染
        ReactDOM.render(<Person speak={speak} name="tom" age="19" sex="男"/>, document.querySelector("#test1"));

3.4.3、refs

在原生js中，通常使用document.getElementById、document.querySelector等这种类似的操作来获取我们需要的DOM元素

React为我们提供了一种非常特殊的属性 ref，你可以用来绑定到 render() 输出的任何组件上

下面是几个适合使用 refs 的情况：

  • 管理焦点，文本选择或媒体播放。
  • 触发强制动画。
  • 集成第三方 DOM 库。
  • 不能在函数组件上使用 ref 属性，因为他们没有实例

字符串形式的ref
给组件添加ref属性 ref="refName"，然后就能通过在示例方法中通过this.refs.refName获得DOM

class Demo extends React.Component {
    // 点击按钮时，显示左边输入框的数据
    showInputData1 = () =>{
        // 通过获取id的方式
        // const input = document.getElementById('input1')
        // alert(input.value)
        // 通过ref
        const { input1 } = this.refs
        alert(input1.value)
    }
    // 右边输入框失去焦点时，显示右边输入框的数据
    showInputData2 = () => {
        const { input2 } = this.refs
        alert(input2.value)
    }
    render() {
        return (
            <div>
                <input ref="input1" id="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
                <button onClick={this.showInputData1}>点击提示左边的数据</button>&nbsp;
                <input onBlur={this.showInputData2} ref="input2" type="text" placeholder="失去焦点提示数据"/>
            </div>
        )
    }
}

Ps：字符串形式的ref虽然方便，但是效率并不高，所以官方不建议使用，并可能会在未来的版本被移除

ref 回调函数

React 还支持另一种设置 refs 的方式，称为“回调 refs”。它能助你更精细地控制何时 refs 被设置和解除。

内联函数语法：ref={ currentNode => this.input1 = currentNode } —— 把ref当前所处的节点挂载在实例自身上，并取名为input1

回调函数语法：ref={ this.input2 } —— 把当前节点传递给回调函数input2

class Demo extends React.Component {
    // 点击按钮时，显示左边输入框的数据
    showInputData1 = () =>{
        // 通过ref
        const { input1 } = this
        alert(input1.value)

    }
    // 右边输入框失去焦点时，显示右边输入框的数据
    showInputData2 = () => {
        alert(this.input2.value)
    }
    saveInput = (currentNode) => {
        this.input2 = currentNode
    }
    /*
    *  ref={ currentNode => this.input1 = currentNode }
    *   把ref当前所处的节点挂载在实例自身上，并取名为input1
    * */
    render() {
        return (
            <div>
                <input ref={ currentNode => this.input1 = currentNode }/*内联函数*/ id="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
                <button onClick={this.showInputData1}>点击提示左边的数据</button>&nbsp;
                <input onBlur={this.showInputData2} ref={ this.saveInput /*使用类绑定的函数作为回调函数*/} type="text" placeholder="失去焦点提示数据"/>
            </div>
        )
    }
}

createRef

使用 React.createRef() 创建ref，并通过 ref 属性附加到 React 元素

React.createRef调用后会返回一个容器，该容器可以存储被ref所标识的节点

render执行的时候，发现有一个ref，而且是用createRef创建的容器，就会将当前ref所在的节点存储到这个容器里面
 

class Demo extends React.Component {
    myRef = React.createRef(); // 一个节点单独使用一个
    showInputData = () =>{
        const { current } = this.myRef;
        alert(current.value)
    }
    render() {
        return (
            <div>
                <input ref={ this.myRef } id="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
                <button onClick={this.showInputData}>点击提示左边的数据</button>
            </div>
        )
    }
}

 

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

界面干净整洁的windows桌面清单软件有哪些

界面干净整洁的windows桌面清单软件有哪些

无论是工作还是日常生活&#xff0c;我们都有各种各样的任务需要完成。然而&#xff0c;如果不进行有效的规划和管理&#xff0c;很容易导致遗漏和拖延&#xff0c;影响工作效率。而一个界面干净整洁的Windows桌面清单&#xff0c;能够帮助我们更好地规划和安排待办事项&#x…
阅读更多...
优雅编码：WebStorm引领你迈向开发巅峰

优雅编码：WebStorm引领你迈向开发巅峰

目录 引言WebStrom的优点WebStorm的缺点自用插件推荐总结&#xff1a; WebStorm 官网 引言 WebStorm 是一款功能强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;它提供了许多功能和工具&#xff0c;帮助开发人员优雅编码。 因为我是一个前端开发工程师&#xff0c;…
阅读更多...
力扣 -- 面试题 17.16. 按摩师

力扣 -- 面试题 17.16. 按摩师

题目链接&#xff1a;面试题 17.16. 按摩师 - 力扣&#xff08;LeetCode&#xff09; 下面是用动态规划的思想解决这道题的过程&#xff0c;相信各位小伙伴都能看懂并且掌握这道经典的动规题目滴。 参考代码&#xff1a; class Solution { public:int massage(vector<int…
阅读更多...
哪款恢复数据的软件好用，数据恢复成功率高吗

哪款恢复数据的软件好用，数据恢复成功率高吗

我们的日常工作中免不了出现误删或者因为系统崩溃而丢失重要的文件的情况&#xff0c;这些文件的丢失会对我们的工作生活造成或多或少的损失。其实我们可以利用一些专业的软件来恢复这些丢失的数据。 许多网友会有疑问&#xff0c;哪款恢复数据的软件好用&#xff0c;数据恢复成…
阅读更多...
2021-04-29 VSC++：吻合日。

2021-04-29 VSC++：吻合日。

缘由https://bbs.csdn.net/topics/399168383 void 吻合日() {//缘由https://bbs.csdn.net/topics/399168383int n 0, n1 0, y 0, y1 0, h 0, h1 0,z 0, j 0, x 0, t 0;std::cin >> n >> y >> h;z 自适年一月一日周一值(n) h;y1 y; t 返回月的…
阅读更多...
Devops之制品库平台实践-nexus

Devops之制品库平台实践-nexus

Devops之制品库平台实践-nexus 目录 本节实践 实战名称&#x1f498; 实践&#xff1a;配置Maven代理仓库(测试成功)-2022.6.7&#x1f498; 实践&#xff1a;创建Maven本地仓库&#xff08;依赖&#xff09;-2022.6.10(测试成功)&#x1f498; 实践&#xff1a;创建Raw本地仓…
阅读更多...
Java模拟OPC Server服务器并创建节点代码实现

Java模拟OPC Server服务器并创建节点代码实现

前言 模拟OPC Server服务器的方法除了使用KEPServerEX6软件以外&#xff0c;还可以使用java代码模拟启动一个opc server。下文详细讲解&#xff0c;如何使用java代码&#xff0c;实现模拟一个或者多个opc server服务器。 引入依赖 首先在Maven项目的pom.xml文件中引入所需的…
阅读更多...
量水堰计的作用是什么有什么特点

量水堰计的作用是什么有什么特点

水库大坝安全监测中&#xff0c;渗流监测是一个重要的组成部分。量水堰计作为一种测量流量的仪器&#xff0c;在渗流监测中起着至关重要的作用。其工作原理是&#xff0c;在进水口处设置量水堰&#xff0c;量水堰上安装有磁致伸缩液位传感器&#xff0c;可以实时记录通过量水堰…
阅读更多...
【ARM】-IRQ 和 FIQ 异常中断处理程序的返回

【ARM】-IRQ 和 FIQ 异常中断处理程序的返回

文章目录 处理流程示例代码实现 处理流程 通常处理器执行完当前指令后&#xff0c;查询 IRQ 中断引脚及 FIQ 中断引脚&#xff0c;并且查看系统是否允许 IRQ 中断及 FIQ中断。 如果有中断引脚有效&#xff0c;并且系统允许该中断产生&#xff0c;处理器将产生 IRQ 异常中断或 …
阅读更多...
自动化测试selenium篇（一）

自动化测试selenium篇（一）

一、自动化测试 1.1自动化测试介绍 自动化测试就相当于将人工测试手段进行转换&#xff0c;让代码去执行 1.2 自动化测试的分类 单元测试、接口测试、UI自动化测试 二、selenium介绍 2.1 selenium是什么 Selenium是web应用中基于UI的自动化测试框架 2.2 selenium的特点…
阅读更多...
Redis的主从复制模式

Redis的主从复制模式

主从复制就是Redis集群的策略 配从库不配主库&#xff1a;小弟可以选择谁是大哥&#xff0c;但大哥没有权利去选择小弟 读写分离&#xff1a;主机写&#xff0c;从机读 集群配置和搭建 1.将虚拟机中的CentOS(192.168.40.100)重新复制两份 2.将新复制的静态ip改一下,192.168.40.…
阅读更多...
https 证书到期，手动更新

https 证书到期，手动更新

记录一下&#xff0c;因为 3 个月后还会用到的。。 1. 验证域名所有权&#xff08;在某个目录下放置指定文件验证&#xff09; http://172.245.xxx.xxx/.well-known/pki-validation/3C42D2093F4B0237224A95xxxxxxx.txt 2. 替换下载下来的证书文件 3. 检查&#x1f9d0; 喜欢或…
阅读更多...
JMeter正则表达式提取器实践

JMeter正则表达式提取器实践

目录 前言&#xff1a; apply to&#xff1a; 要检查的响应字段&#xff1a;样本数据源 引用名称&#xff1a; 正则表达式&#xff1a; 模板&#xff1a; 匹配数字&#xff1a; 缺省值&#xff1a; 前言&#xff1a; JMeter是一个流行的性能测试工具&#xff0c;它提供…
阅读更多...
《Effective C++》 全书内容提炼总结

《Effective C++》 全书内容提炼总结

个人博客地址: https://cxx001.gitee.io 本文阅读说明 孔子云&#xff1a;“取乎其上&#xff0c;得乎其中&#xff1b;取乎其中&#xff0c;得乎其下&#xff1b;取乎其下&#xff0c;则无所得矣”。 对于读书求知而言&#xff0c;这句古训教我们去读好书&#xff0c;最好是…
阅读更多...
【基础算法】穷举法

【基础算法】穷举法

穷举法Exhaustive method是使用最广泛、设计最简单&#xff0c;同时最耗时的算法&#xff0c;也被称为暴力法、蛮力法Brute force method。 两数之和 给定一个整数数组array和一个目标值target&#xff0c;请在数组中找出和为目标值target的两个整数&#xff0c;并输出它们在数…
阅读更多...
【PHP语言】医院安全（不良）事件报告系统源码

【PHP语言】医院安全（不良）事件报告系统源码

一、系统概述&#xff1a; 医院安全&#xff08;不良&#xff09;事件报告系统是一种用于医院管理和监管的工具&#xff0c;旨在帮助医疗机构识别、跟踪、分析和解决各种医疗安全事件&#xff0c;提高医疗质量和患者安全。 医院安全&#xff08;不良&#xff09;事件报告系统采…
阅读更多...
Linux：nginx基础搭建（源码包）

Linux：nginx基础搭建（源码包）

安装基础环境 准备一个nginx源码包 yum -y install pcre-devel zlib-devel gcc-c useradd -M -s /sbin/nologin nginx tar xf nginx-1.12.0.tar.gz -C /usr/src/ cd /usr/src/nginx-1.12.0/ ./configure --prefix/usr/local/nginx --usernginx --groupnginx --with-http_st…
阅读更多...
【unity】RenderFeature的应用（生成水平面的网格线）

【unity】RenderFeature的应用（生成水平面的网格线）

【unity】RenderFeature的应用&#xff08;生成水平面的网格线&#xff09; 在URP里RenderFeature是用于后处理效果上的&#xff0c;也还可以实现一些特殊的效果&#xff0c;比如生成网格线。我们可以使用 CommandBuffer来创建地面网格&#xff0c;这样的话可以通过调整 Comman…
阅读更多...
【NOSQL】redis哨兵模式、集群搭建

【NOSQL】redis哨兵模式、集群搭建

目录 一、redis高可用一、Redis主从复制1.1主从复制的作用1.2主从复制流程 二、搭建Rdeis主从复制2.1安装redis2.1.1环境准备2.1.2安装redis2.1.3设置环境变量2.1.4定义systemd服务管理脚本 2.2修改 Redis 配置文件&#xff08;Master节点操作2.3修改 Redis 配置文件&#xff0…
阅读更多...
【SpringMVC】| 异常处理器、基于全注解配置SpringMVC

【SpringMVC】| 异常处理器、基于全注解配置SpringMVC

目录 异常处理器 1. 基于配置的异常处理 2. 基于注解的异常处理&#xff08;用类代替xml配置&#xff09; 基于全注解配置SpringMVC 1. 创建初始化类&#xff0c;代替web.xml 2. 创建SpringConfig配置类&#xff0c;代替spring的配置文件 3. 创建WebConfig配置类&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023