React基础知识（组件实例三大核心属性state、props、refs）（二）

news2024/9/23 9:36:40

系列文章目录

第一章：React基础知识（React基本使用、JSX语法、React模块化与组件化）（一）

文章目录

  • 系列文章目录
    • 一、State
      • 1.1. state基本使用
      • 1.2 state的简写形式
    • 二、Props
      • 2.1 props的基本使用
      • 2.2 props属性值限制
      • 2.3 props的简写方式
      • 2.4 函数组件使用props并进行类型限制
    • 三、Refs
      • 3.1 字符串形式的ref
      • 3.2 回调形式的ref
      • 3.3 createRef创建ref容器

一、State

1.1. state基本使用

1.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
代码片段：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>state</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//1.创建组件
		class Weather extends React.Component{
			
			//构造器调用几次？ ———— 1次
			constructor(props){
				console.log('constructor');
				super(props)
				//初始化状态
				this.state = {isHot:false,wind:'微风'}
				//解决changeWeather中this指向问题
				this.changeWeather = this.changeWeather.bind(this)
			}

			//render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数
			render(){
				console.log('render');
				//读取状态
				const {isHot,wind} = this.state
				return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
			}

			//changeWeather调用几次？ ———— 点几次调几次
			changeWeather(){
				//changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
				//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
				//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
				
				console.log('changeWeather');
				//获取原来的isHot值
				const isHot = this.state.isHot
				//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
				this.setState({isHot:!isHot})
				//如果不更改this的指向，this会指向undefined
				console.log(this);//更改后，this指向Weather的实例

				//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
				//this.state.isHot = !isHot //这是错误的写法
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(<Weather/>,document.getElementById('test'))
				
	</script>
</body>
</html>

运行结果：
在这里插入图片描述
在这里插入图片描述

1.2 state的简写形式

代码片段：

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//1.创建组件
		class Weather extends React.Component{
			//初始化状态
			//此处定义state等同于在constructor中定义state
			state = {isHot:false,wind:'微风'}

			render(){
				const {isHot,wind} = this.state
				return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
			}

			//自定义方法————要用赋值语句的形式+箭头函数
			changeWeather = ()=>{
			//箭头函数，内部this指向Weather实例
				const isHot = this.state.isHot
				this.setState({isHot:!isHot})
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(<Weather/>,document.getElementById('test'))
				
	</script>
</body>
</html>

运行结果：
在这里插入图片描述

注意
1.组件中render方法中的this为组件实例对象

2.组件自定义的方法中this为undefined，如何解决？

  • 强制绑定this: 通过函数对象的bind()
  • 箭头函数

3.状态数据，不能直接修改或更新，需要通过this.setState方法

二、Props

2.1 props的基本使用

1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中

代码片段：

<body>
  <div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    class Person extends React.Component {

      render() {
        console.log(this);
        let { name, age, sex } = this.props;
        return (
          <ul>
            <li>姓名：{name}</li>
            <li>性别：{sex}</li>
            <li>年龄：{age + 1}</li>
          </ul>
        )
      }

    }
    
    // 传数值类型要用{}，使用'',传的是字符串
    ReactDOM.render(<Person name='zs' age={14} sex='男' />, document.getElementById("test1"));

    ReactDOM.render(<Person name='lz' age='19' sex='女' />, document.getElementById("test2"))

    const p = { name: 'ls', age: 19, sex: '男' }
    ReactDOM.render(<Person {...p} />, document.getElementById("test3"))
  </script>
</body>

</html>

运行结果：
在这里插入图片描述

props的作用：
1.通过标签属性从组件外向组件内传递变化的数据
2.注意: 组件内部不要修改props数据

2.2 props属性值限制

1.使用prop-types库进限制（需要引入prop-types库）

Person.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number. 
}

2.扩展属性: 将对象的所有属性通过props传递

<Person {...person}/>

3.默认属性值：

erson.defaultProps = {
  age: 18,
  sex:'男'
}

代码片段：

<body>
  <!-- 准备好一个“容器” -->
  <div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>

  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <!-- 引入prop-types，用于对组件标签属性进行限制 -->
  <script type="text/javascript" src="../js/prop-types.js"></script>

  <script type="text/babel">
    //创建组件
    class Person extends React.Component {
      render() {
        // console.log(this);
        const { name, age, sex } = this.props
        //props是只读的
        //this.props.name = 'jack' //此行代码会报错，因为props是只读的
        return (
          <ul>
            <li>姓名：{name}</li>
            <li>性别：{sex}</li>
            <li>年龄：{age + 1}</li>
          </ul>
        )
      }
    }
    //对标签属性进行类型、必要性的限制
    Person.propTypes = {
      name: PropTypes.string.isRequired, //限制name必传，且为字符串
      sex: PropTypes.string,//限制sex为字符串
      age: PropTypes.number,//限制age为数值
      speak: PropTypes.func,//限制speak为函数
    }
    //指定默认标签属性值
    Person.defaultProps = {
      sex: '男',//sex默认值为男
      age: 18 //age默认值为18
    }
    //渲染组件到页面
    ReactDOM.render(<Person name={100} speak={speak} />, document.getElementById('test1'))
    ReactDOM.render(<Person name="tom" age={18} sex="女" />, document.getElementById('test2'))

    const p = { name: '老刘', age: 18, sex: '女' }
    // console.log('@',...p);
    // ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))
    ReactDOM.render(<Person {...p} />, document.getElementById('test3'))

    function speak() {
      console.log('我说话了');
    }
  </script>
</body>

</html>

运行结果：

2.3 props的简写方式

将类型限制的属性定义为类的静态属性

代码片段：

<body>
	<!-- 准备好一个“容器” -->
	<div id="test1"></div>
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<!-- 引入prop-types，用于对组件标签属性进行限制 -->
	<script type="text/javascript" src="../js/prop-types.js"></script>

	<script type="text/babel">
		//创建组件
		class Person extends React.Component{

			constructor(props){
				//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
				// console.log(props);
				super(props)
				console.log('constructor',this.props);
			}

			//对标签属性进行类型、必要性的限制
			static propTypes = {
				name:PropTypes.string.isRequired, //限制name必传，且为字符串
				sex:PropTypes.string,//限制sex为字符串
				age:PropTypes.number,//限制age为数值
			}

			//指定默认标签属性值
			static defaultProps = {
				sex:'男',//sex默认值为男
				age:18 //age默认值为18
			}
			
			render(){
				// console.log(this);
				const {name,age,sex} = this.props
				//props是只读的
				//this.props.name = 'jack' //此行代码会报错，因为props是只读的
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age+1}</li>
					</ul>
				)
			}
		}

		//渲染组件到页面
		ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
	</script>
</body>
</html>

运行结果：
在这里插入图片描述

2.4 函数组件使用props并进行类型限制

代码片段：

<body>
	<!-- 准备好一个“容器” -->
	<div id="test1"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<!-- 引入prop-types，用于对组件标签属性进行限制 -->
	<script type="text/javascript" src="../js/prop-types.js"></script>

	<script type="text/babel">
		//创建组件
		function Person (props){
			const {name,age,sex} = props
			return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age}</li>
					</ul>
				)
		}
		Person.propTypes = {
			name:PropTypes.string.isRequired, //限制name必传，且为字符串
			sex:PropTypes.string,//限制sex为字符串
			age:PropTypes.number,//限制age为数值
		}

		//指定默认标签属性值
		Person.defaultProps = {
			sex:'男',//sex默认值为男
			age:18 //age默认值为18
		}
		//渲染组件到页面
		ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
	</script>
</body>
</html>

运行结果：
在这里插入图片描述

三、Refs

组件内的标签可以定义ref属性来标识自己，类似于id一样的属性，ref可以用三种形式来标识

3.1 字符串形式的ref

编码格式：<input ref="input1"/>
代码片段：

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//创建组件
		class Demo extends React.Component{
			//展示左侧输入框的数据
			showData = ()=>{
				const {input1} = this.refs
				alert(input1.value)
			}
			//展示右侧输入框的数据
			showData2 = ()=>{
				const {input2} = this.refs
				alert(input2.value)
			}
			render(){
				console.log(this)
				return(
					<div>
						<input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
						<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
						<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
					</div>
				)
			}
		}
		//渲染组件到页面
		ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
	</script>
</body>
</html>

运行结果：
在这里插入图片描述在这里插入图片描述

3.2 回调形式的ref

编码格式：<input ref={(c)=>{this.input1 = c}}/>
代码片段：

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//创建组件
		class Demo extends React.Component{
			//展示左侧输入框的数据
			showData = ()=>{
				const {input1} = this
				alert(input1.value)
			}
			//展示右侧输入框的数据
			showData2 = ()=>{
				const {input2} = this
				alert(input2.value)
			}
			render(){
				return(
					<div>
						<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>&nbsp;
						<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
						<input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>&nbsp;
					</div>
				)
			}
		}
		//渲染组件到页面
		ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
	</script>
</body>
</html>

运行结果：
在这里插入图片描述
在这里插入图片描述

3.3 createRef创建ref容器

编码格式：

myRef = React.createRef() 
<input ref={this.myRef}/>

代码片段：

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//创建组件
		class Demo extends React.Component{
			/* 
				React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
			 */
			myRef = React.createRef()
			myRef2 = React.createRef()
			//展示左侧输入框的数据
			showData = ()=>{
				alert(this.myRef.current.value);
			}
			//展示右侧输入框的数据
			showData2 = ()=>{
				alert(this.myRef2.current.value);
			}
			render(){
				return(
					<div>
						<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
						<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
						<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>&nbsp;
					</div>
				)
			}
		}
		//渲染组件到页面
		ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
	</script>
</body>
</html>

运行结果：
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

精品基于SSM的小学生课程资源网络云平台

精品基于SSM的小学生课程资源网络云平台

《基于SSM的小学生课程资源网络云平台》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 使用技术&#xff1a; 开发语言&#xff1a;Java 框架&#xff1a;ssm 技术&#xff1a;JSP JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据…
阅读更多...
redux

redux

文章目录redux是什么redux使用情况redux工作原理redux安装redux的3个核心概念Action——形成动作Reducers——操作状态store——存储状态APIredux的响应式redux实现加减案例不使用ActionCreators实现使用ActionCreators实现异步Actionreact-redux使用容器组件创建修改App.jsx在…
阅读更多...
干电池升压IC3.3V的电源芯片fs2111/FS2112

干电池升压IC3.3V的电源芯片fs2111/FS2112

干电池升压3.3V的电源芯片FS2111/FS2112 FS2111/FS2112适用于一节干电池升压到3.3V&#xff0c;两节干电池升压3.3V的升压电路&#xff0c;FS2111/FS2112干电池升压IC。 FS2111/FS2112 干电池1.5V和两节干电池3V升压到3.3V的测试数据 两节干电池输出500MA测试&#xff1a; F…
阅读更多...
CubeMax添加Rtthread操作系统 组件STM32F103

CubeMax添加Rtthread操作系统 组件STM32F103

CubeMax添加Rtthread操作系统 组件STM32F103 本篇主要介绍&#xff0c;怎么使用STM32CubeMx工具&#xff0c;添加RT-Thread操作系统组件&#xff0c;码代码的IDE是keil。快速移植RT-Thread实时操作系统&#xff0c;所用的IDE可自行官网下载最新版。 CubeMax官网下载链接 RTthre…
阅读更多...
Ajax(六)

Ajax(六)

1. XMLHttpRequest的基本使用——URL编码与解码 1.1 什么是URL编码 1.2 如何对URL进行编码与解码 <body><script>var str 黑马程序员//对str编码var str2 encodeURI(str)console.log(str2)//一个汉字对应三个百分号&#xff0c;反解码从console里头复制console.…
阅读更多...
js解决单线程之路 - worker的使用分析

js解决单线程之路 - worker的使用分析

写在前面 今天写一个关于实现多线程的东西&#xff0c;都知道js是一个单线程的语言&#xff0c;所谓的单线程就是一次只能做一件事&#xff0c;多线程就是一次可以做很多件事&#xff0c;当然目前我们的电脑等设备很少会有单线程了&#xff0c;比如我们的电脑一般都是标的6核12…
阅读更多...
stm32f103zet6的GPIO基础知识

stm32f103zet6的GPIO基础知识

IO数量 16*7112个&#xff0c;GPIOA~GPIOG7组,共144个引脚 IO模式 很多IO口既可以做为输入&#xff0c;也可以做为输出 输入模式 VSS指的是地&#xff0c;VDD是高电平&#xff0c; MOS英文全称为Metal-Oxide-Semiconductor。 意思为金属-氧化物-半导体&#xff0c;而拥有这…
阅读更多...
Python画一棵茂盛的分形树

Python画一棵茂盛的分形树

文章目录前情回顾添加分岔茂盛的分形树前情回顾 上次画了一棵分形树&#xff1a;用Python画一棵分形树&#xff0c;得到的图如下 发现看的人还是挺多的&#xff0c;但没什么人点赞&#xff0c;这说明我能给大家画分形树&#xff0c;大家很高兴&#xff0c;但这棵树太秃了&…
阅读更多...
[附源码]Python计算机毕业设计调查问卷及调查数据统计系统Django（程序+LW）

[附源码]Python计算机毕业设计调查问卷及调查数据统计系统Django（程序+LW）

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等…
阅读更多...
在Ubuntu上搭建Nexus服务

在Ubuntu上搭建Nexus服务

介绍 Nexus&#xff1a;Nexus 是一个强大的 Maven 仓库管理器&#xff0c;它极大地简化了自己内部仓库的维护和外部仓库的访问。如Android远程仓库依赖&#xff0c;Java服务端应用程序依赖等&#xff0c;都很方便。 Docker方式 准备 ubuntu上已经安装docker&#xff0c;docker安…
阅读更多...
20221218解决在Ubuntu18.04下编译Firefly的Core-3588J出现lz4的问题

20221218解决在Ubuntu18.04下编译Firefly的Core-3588J出现lz4的问题

20221218解决在Ubuntu18.04下编译Firefly的Core-3588J出现lz4的问题 2022/12/18 15:37 解决方法&#xff1a;编译最新的lz4的dev分支&#xff01; https://wiki.t-firefly.com/zh_CN/Core-3588J/android_compile_android12.0_firmware.html Core-3588J产品规格书 3. 编译 Andro…
阅读更多...
Bootstrap5 小工具

Bootstrap5 小工具

Bootstrap 5 提供了很多有用的类来帮组我们快速实现效果&#xff0c;不需要重复写一些 CSS 代码。 背景颜色 设置不同元素的背景颜色时&#xff0c;需要通过 .text-* 类来设置匹配的文本颜色&#xff1a; 实例 <div class"p-3 mb-2 bg-primary text-white">.…
阅读更多...
跟老韩学JAVA——IDEA基本使用和快捷键

跟老韩学JAVA——IDEA基本使用和快捷键

1. IDEA介绍 2.IDEA下载和安装 这个博主的下载安装介绍的很详细了&#xff0c;我就不过多介绍了 3.IDEA的基本使用 1&#xff09;修改字体大小 File -> Settings -> Editor -> Font -> Size 2)修改字体变粗 3)修改背景颜色 4) 修改菜单栏字体大小 5&#xff…
阅读更多...
滑动窗口思想练习题

滑动窗口思想练习题

文章目录1. 找到字符串中所有字母异位词做法一&#xff1a;采用两个数组分别记录字符出现频次做法二&#xff1a;采用diff记录s和p字符串中字符的频次差2. 串联所有单词的子串个人理解&#xff0c;如有异议&#xff0c;欢迎指正&#xff01;1. 找到字符串中所有字母异位词 题目…
阅读更多...
XiaoMi手机MIX 2S线刷固件和刷入Recovery

XiaoMi手机MIX 2S线刷固件和刷入Recovery

mix 2s 固件下载地址 https://web.vip.miui.com/page/info/mio/mio/detail?postId4865868&app_versiondev.20051 miflash线刷工具下载地址 https://miuiver.com/miflash/ 安装miflash线刷工具 点击安装驱动 打开miflash 手机关机按音量下加开机键进入bootloader&#xf…
阅读更多...
Spring boot整合rocketmq(windows)

Spring boot整合rocketmq(windows)

目录 1.环境搭建 2.命名服务器和业务服务器的启动 3.名词说明 4.执行步骤 5.示例 1.导入依赖 2.配置(至少指定下面两个) 3.代码 6.常见问题 1.环境搭建 下载地址&#xff1a;https://rocketmq.apache.org/解压缩进行安装&#xff0c;默认服务端口&#xff1a;9876 环…
阅读更多...
执行 select ... for update 语句，如果查询条件没有索引字段的话，是加行锁还是加表锁？

执行 select ... for update 语句，如果查询条件没有索引字段的话，是加行锁还是加表锁？

大家好&#xff0c;我是小林。 昨天在群里看到大家在讨论一个 MySQL 锁的问题&#xff0c;就是执行 select … for update 语句&#xff0c;如果查询条件没有索引字段的话&#xff0c;是加「行锁」还是加「表锁」&#xff1f; 如果你做过这个实验的话&#xff0c;你会发现执行…
阅读更多...
数据结构刷题训练营1

数据结构刷题训练营1

开启蓝桥杯备战计划&#xff0c;每日练习算法一题&#xff01;&#xff01;坚持下去&#xff0c;想必下一年的蓝桥杯将会有你&#xff01;&#xff01; 笔者是在力扣上面进行的刷题&#xff01;&#xff01;由于是第一次刷题&#xff01;找到的题目也不咋样&#xff01;所以&a…
阅读更多...
SPRING-了解3-注解

SPRING-了解3-注解

IOC容器操作Bean 注解格式&#xff1a;注解名称(属性名称属性值,属性名称属性值) 放在类&#xff0c;方法&#xff0c;属性都可以 目的&#xff1a;简化XML配置 对象创建四大注解 1&#xff09;用的位置不是强制的 Component 最普通 Service 用在service层 Controlle…
阅读更多...
接口测试（十）—— telnet和python代码测试dubbo接口

接口测试（十）—— telnet和python代码测试dubbo接口

目录 一、传智健康项目介绍 1、项目描述 2、目标用户群体 3、项目模块 4、系统框架 二、Dubbo接口测试 1、RPC 2、Dubbo 3、查阅API文档 三、Telnet工具远程调用 1、启用telnet 2、telnet远程连接服务 3、telnet调用服务接口 四、python借助dubbo远程调用 1、安…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023