react库的基础学习

React介绍

React.js是前端三大新框架：Angular.js、React.js、Vue.js之一，这三大新框架的很多理念是相同的，但是也有各自的特点。

React起源于Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

React可以作为一个js库来使用，我们在页面上引用相关的js文件，就可以使用它来做一些页面效果。

React也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)应用系统。
—脚手架

快速开始

首先通过将React作为一个js库来使用，来学习React的一些基本概念，在页面上引入已经下载好的三个js文件，就可以使用React了。

<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>

其中，前两个js文件是React的核心文件，第三个js文件是一个转换编译器，它能将ES6语法及jsx语法转换成可以在浏览器中运行的代码。

编写hello world程序

<div id="root"></div>
<script type="text/babel">    ReactDOM.render(<h1>Hello world!</h1>,document.getElementById('root'))   
</script>

上面编写的，不是真正的JavaScript代码，因为上面是JavaScript代码和html的混合，所以它的类型需要写成“text/babel”，最终通过编译器编译成浏览器可以执行的js。

示例

<!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><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><!-- 以下js库负责编译es6语法和jsx语法，编译成浏览器可以识别的语法 --><script src="js/babel.min.js"></script>
</head>
<body><!-- react把生成的效果全部放到div里面 --><!-- 标签和js写一块 --><div id="root"></div><script type="text/babel">// 第一个参数jsx的对象 第二个参数是对象ReactDOM.render(<h1>hello world!</h1>,document.getElementById('root'))</script>
</body>
</html>

JSX语法

jsx语法是一种类似于html标签的语法，它的作用相当于是让我们在JavaScript代码中直接写html代码，但是jsx不完全是html，它是 JavaScrip 的一种扩展语法，它具有 JavaScript 的全部能力，我们还可在jsx代码中插入变量或者表达式，用jsx语法写出来的语句是一个对象，我们可以将它存为一个变量，这个变量作为ReactDOM对象的render方法的第一个参数。

let el = <h1>Hello world!</h1>;
ReactDOM.render(el,document.getElementById('root')
)

jsx的结构还可以写得更复杂，可以是嵌套结构，如果是嵌套结构，需要有唯一的一个外层标签。标签中如果是单个的标签，在结尾要加“/”,在jsx中可以通过“{}”插入变量，表达式或者函数调用。

<script type="text/babel">let iNum01  = 10;let sTr = 'abc123456';let ok = true;function fnRev(s){return s.split('').reverse().join('');}    let el = (<div><h3>jsx语法</h3>{/* 插入变量及运算 */}<p>{ iNum01+5 }</p>{/* 插入表达式 */}<p>{ sTr.split('').reverse().join('') }</p>{/* 插入函数调用 */}<p>{ fnRev(sTr) }</p>{/* 插入三元运算表达式 */}<p>{ ok?'YES':'NO' }</p>                </div>);ReactDOM.render(el,document.getElementById('root'))</script>

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><!-- 以下js库负责编译es6语法和jsx语法，编译成浏览器可以识别的语法 --><script src="js/babel.min.js"></script>
</head>
<body><div id="root"></div><script type="text/babel">let iNum01 = 10;let sTr = 'abcdefgh123456';let ok = false;let url = 'http://www.baidu.com';function fnRev(s){return s.split('').reverse().join('');}let el =(<div><h2>jsx语法</h2>{/* 插入变量及运算 */}<p>{ iNum01+5 }</p>{/*插入字符串*/}<p>{ sTr }</p>{/* 插入表达式 */}<p>{ sTr.split('').reverse().join('') }</p>{/* 插入函数调用 */}<p>{ fnRev(sTr) }</p>{/* 插入三元运算表达式 */}<p>{ ok?'YES':'NO' }</p></div>);ReactDOM.render(el,document.getElementById('root'));</script>
</body>
</html>

jsx中指定标签的属性值建议用双引号，不能不用引号，属性名建议用驼峰式，其中class属性需要写成className，属性值如果是可变的，也可以写成“{}”的形式，里面可以和上面写法一样。 标签如果是单个的，在结尾一定要加“/”

{/* 定义class */}
<p className="sty01">使用样式</p>
{/* 单个标签，结尾要加“/” */}
<img src={user.avatarUrl} />

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><!-- 以下js库负责编译es6语法和jsx语法，编译成浏览器可以识别的语法 --><script src="js/babel.min.js"></script><style>.sty01{font-size: 30px;color: red;}</style>
</head>
<body><div id="root"></div><script type="text/babel">let url = 'http://www.baidu.com';let el =(<div><a href={url} className="sty01">这是一个链接</a></div>);ReactDOM.render(el,document.getElementById('root'));</script>
</body>
</html>

组件和属性(props)

组件可以理解成是一个组成页面的部件或者零件，每个部件都有自己完整的结构和功能，多个部件拼装在一起就可以组成一个页面，从组件的实现来看，组件最终是要返回一个jsx对象，不过它和jsx对象的区别是，它在jsx对象的基础上，还带有自己的方法和属性，能完成它自己的交互功能。 组件有两种定义方式：一种是函数式定义，一种是类定义。

函数式定义组件

通过函数来定义一个组件，组件名称首字母要大写，函数接收一个参数props，返回一个jsx对象。其中，name属性是在渲染组件时，通过定义属性传入进来的。

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}

类方式定义组件

上面的组件可以通过下面ES6的类的方式定义，定义的类都要继承于React对象中的Component类，这个定义的组件和上面的功能是等效的。

class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;}
}

组件渲染

组件渲染和jsx对象一样，我们可以通过ReactDOM.render()方法来渲染组件。

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(element,document.getElementById('root')
);

组件组合

可以在一个组件内，拼装其他的组件，从而组合成一个更大的组件

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}function App() {return (<div><Welcome name="Sara" /><Welcome name="Cahal" /><Welcome name="Edite" /></div>);
}ReactDOM.render(<App />,document.getElementById('root')
);

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><!-- 以下js库负责编译es6语法和jsx语法，编译成浏览器可以识别的语法 --><script src="js/babel.min.js"></script>
</head>
<body><div id="root"></div><script type="text/babel">class Welcome extends React.Component{render(){return(<h1>hello, {this.props.name}</h1>);}}//定义一个大的组件，组合上面的组件class WelcomeAll extends React.Component{render(){return (<div><Welcome name = "Sara"/><Welcome name = "Tom" /><Welcome name = "Rose" /></div>);}}//this.props = {name: "Sara"}===》<Welcome name = "Sara"/> 渲染小的组件// ReactDOM.render(<Welcome name = "Sara"/>,document.getElementById('root'));//渲染大的组件ReactDOM.render(<WelcomeAll />,document.getElementById('root'));</script>
</body>
</html>

绑定事件

React绑定事件和JavaScript中的行间事件类似，事件绑定是写在标签中的，但是，React事件是在原生事件的基础上做了封装，它的事件使用驼峰命名，而不是全部小写。事件需要传递一个函数作为事件处理程序，这个函数在哪里定义呢？我们可以通过类定义组件，将这个函数作为一个方法定义在组件中。

定义一个点击能弹出名称的组件：

class Helloname extends React.Component {fnHello(){alert('Hello,Tom');}render(){return (<input type="button" value="打招呼" onClick={this.fnHello} />)}
}
ReactDOM.render(<Helloname />, document.getElementById('root'));

如果想把这个组件定义成可以传递名称参数的，可以定义如下：

class Helloname extends React.Component {fnHello(){alert(this.props.name);}render(){return (<input type="button" value="打招呼" onClick={this.fnHello.bind(this)} />)}
}ReactDOM.render(<Helloname name="Tom" />, document.getElementById('root'));

需要注意的是，按钮在调用方法时，此时的this默认会指向这个按钮，所以在绑定事件时，需要绑定this，将this指向当前对象。

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><!-- 以下js库负责编译es6语法和jsx语法，编译成浏览器可以识别的语法 --><script src="js/babel.min.js"></script>
</head>
<body><div id="root"></div><script type="text/babel">class HelloTom extends React.Component{//定义click事件的处理方式fnHello(){alert("Hello,Tom!");}render(){return(<input type="button" value="打招呼" onClick={this.fnHello} />)}}//定义有参方法class HelloName extends React.Component{fnHello(){alert("Hello,"+this.props.name);}render(){return (//在事件调用方法时，如果方法里面使用了this，在方法中需要绑定this<input type="button" value="打招呼啊" onClick={this.fnHello.bind(this)}/>)}}//如果43行显示出来，则只会显示44行// ReactDOM.render(<HelloTom />, document.getElementById('root'));ReactDOM.render(<HelloName name = "Jack"/>,document.getElementById('root'));</script>
</body>
</html>

状态

组件如果需要定义默认属性呢？而且这个默认属性还是可变的呢？这个就是组件的状态属性了，状态属性默认名称是state，这个属性需要在组件定义时初始化，所以我们需要使用类的构造函数来对这个属性进行初始化。

定义一个点击按钮数字递增的

class Increase extends React.Component {constructor(props){super(props);this.state = {iNum:10};// 也可以在组件初始化时将方法绑定thisthis.fnAdd = this.fnAdd.bind(this);}fnAdd(){// 使用setState来改变state中的值this.setState(prevState=>({iNum:prevState.iNum+1}));}render(){return (<div><p>{ this.state.iNum }</p><input type="button" onClick={this.fnAdd} value="递增" /></div>);}
}ReactDOM.render(<Increase />,document.getElementById('root')
);

state注意点
1、不能直接修改state的值，应该用setState代替

// 下面写法是不会更新组件，是错误的
this.state.iNum = 11;// 应该写成setState的形式
this.setState({iNum: 11});

2、state的值可能是异步的，如果需要在state的值的基础上修改得到新的值，可以使用函数的形式，函数的参数中传递的第一个参数是state上一个状态的值，我们可以在这个值基础上修改，下面的prevState代表state上一个状态的值。

this.setState(prevState=>({iNum:prevState.iNum+1
}));

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><!-- 以下js库负责编译es6语法和jsx语法，编译成浏览器可以识别的语法 --><script src="js/babel.min.js"></script>
</head>
<body><div id="root"></div><script type="text/babel"><div id="root"></div>class Increase extends React.Component{constructor(props) {super(props);this.state = {iNum:10};}// 要通过setState方法来改变state里面的值//setState里面可以传一个对象，也可以传一个函数，函数需要返回一个对象fnAdd(){//这样写也是可以的// this.state.iNum +=1;// this.setState({//     iNum:11// })/* this.setState({//虽然可以这样写是可以的，但是不建议这样用iNum:this.state.iNum+1})*/// prevState 指的是state最新的值// this.setState(function(prevState){//     return { iNum:prevState.iNum+1}// })//return 字典或者对象需要加()this.setState(prevState=>({iNum:prevState.iNum+1}))}render(){return (<div><p>{this.state.iNum}</p><input type="button" value="递增" onClick={this.fnAdd.bind(this)}/></div>)}}ReactDOM.render(<Increase />, document.getElementById('root'));</script>
</body>
</html>

选项卡案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.tab_con{width:500px;height:350px;margin:50px auto 0;}.tab_btns{height:50px;}.tab_btns input{width:100px;height:50px;background:#ddd;border:0px;/*去掉行间的高亮*/outline:none;}.tab_btns .active{background:gold;}.tab_cons{height:300px;background:gold;}.tab_cons div{height:300px;line-height:300px;text-align:center;display:none;font-size:30px;}.tab_cons .current{/*以块元素显示出来*/display:block;}</style><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><!-- 以下js库负责编译es6语法和jsx语法，编译成浏览器可以识别的语法 --><script src="js/babel.min.js"></script>
</head><body><div id="root"></div><script type="text/babel">class Tab extends React.Component{constructor(props) {super(props);this.state = {iNow:0}}fnChange(i){this.setState({iNow:i})}// 行内元素放在一行，就会去掉间距render(){return (<div className="tab_con"><div className="tab_btns">{/*<p>{this.state.iNow}</p>*/}<input type="button" value="按钮一" className={(this.state.iNow==0)?"active":''} onClick={this.fnChange.bind(this,0)}/><input type="button" value="按钮二" className={(this.state.iNow==1)?"active":''} onClick={this.fnChange.bind(this,1)}/><input type="button" value="按钮三" className={(this.state.iNow==2)?"active":''} onClick={this.fnChange.bind(this,2)} /></div><div className="tab_cons"><div className={(this.state.iNow==0)?"current":''}>按钮一对应的内容</div><div className={(this.state.iNow==1)?"current":''}>按钮二对应的内容</div><div className={(this.state.iNow==2)?"current":''}>按钮三对应的内容</div></div></div>);}}ReactDOM.render(<Tab />,document.getElementById("root"));</script>
</body>
</html>

列表渲染

如何拼装数组中的数据放入页面呢？可以将数组中的数据通过数组遍历渲染成一个jsx对象，在通过React渲染这个对象就可以了。

let aList = ['红海','复联3','碟中谍6','熊出没'];let el = aList.map((item,i)=><li key={i}>{ item }</li>
);ReactDOM.render(<ul>{el}</ul>, document.getElementById('root')
);

通过map方法遍历数组中的成员，map方法的第二个参数是数组中的索引值，在循环生成li结构时，需要给每个li加上一个key，这个key的值可以用数组中的成员索引值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><!-- 以下js库负责编译es6语法和jsx语法，编译成浏览器可以识别的语法 --><script src="js/babel.min.js"></script>
</head>
<body><div id="root"></div><script type="text/babel">let aList = ['红海','复联三','碟中谍6','熊出没'];let el = aList.map((item,i)=><li key={i}>{item}</li>);//第二种写法// let el = aList.map(function (item,i){//     return <li key={i}>{item}</li>;// });ReactDOM.render(<ul>{el}</ul>,document.getElementById('root'));</script>
</body>
</html>

表单数据绑定—双向数据绑定

表单元件对应着数据，而且这些数据都是变化的，所以我们会将表单元件的数据对应于组件中的state属性值，让它们之间的值实现双向数据绑定的效果，要实现这个效果，需要在表单元件上绑定onchange事件，来将state中的值改变为表单元件中的值，同时也需要将表单的value属性值，设置为等于state中的属性值。

表单数据绑定示例：

class Myform extends React.Component {constructor(props){super(props);this.state = {uname:''};}// ev指的是系统自动产生的事件对象// ev.target指的是发生事件的元素fnNameInput(ev){this.setState({uname:ev.target.value})}render(){return(<form><p>用户的名称是：{ this.state.uname }</p><input type="text" value={this.state.uname} onChange={this.fnNameInput.bind(this)} />                                        </form>);}
}ReactDOM.render(<Myform />, document.getElementById('root')
);

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><script src="js/babel.min.js"></script>
</head>
<body><div id="root"></div><script type="text/babel">class Inputxt extends React.Component{constructor(props) {super(props);this.state = {iNum:11}}// ev指的是系统自动产生的事件对象// ev.target指的是发生事件的元素fnChange(ev){this.setState({iNum: ev.target.value})}render(){return (<div><p>{ this.state.iNum }</p><input type="text" value={ this.state.iNum } onChange={this.fnChange.bind(this)}/></div>);}}ReactDOM.render(<Inputxt />,document.getElementById('root'));</script>
</body>
</html>

todolist(计划列表)—案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>todolist</title><style type="text/css">.list_con{width:600px;margin:50px auto 0;}.inputtxt{width:550px;height:30px;border:1px solid #ccc;padding:0px;text-indent:10px;}.inputbtn{width:40px;height:32px;padding:0px;border:1px solid #ccc;}.list{margin:0;padding:0;list-style:none;margin-top:20px;}.list li{height:40px;line-height:40px;border-bottom:1px solid #ccc;}.list li span{float:left;}.list li a{float:right;text-decoration:none;margin:0 10px;}</style><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><script src="js/babel.min.js"></script>
</head>
<body><div id="root"></div><script type="text/babel">class Todolist extends React.Component{constructor(props) {super(props);this.state = {aList:['学习html','学习css','学习javascript','学习go语言'],sTodo:''}}//把事件的对象给evfnChange(ev){this.setState({sTodo:ev.target.value})}fnAdd(){// this.setState(function (prevState){//     if (prevState.sTodo == ''){//         alert("请输入内容!");//         return;//     }// })this.setState(prevState =>{// 判断是否为空if (prevState.sTodo == ''){alert("请输入内容!");return;}//sTodo 输入框赋值为空return {aList: [...prevState.aList,prevState.sTodo],sTodo:''}})}fnDel(i){this.setState(prevState =>{//复制一份let list = [...prevState.aList];list.splice(i,1);return {aList:list};})}fnUp(i){this.setState(prevState =>{if (i==0){alert('到顶了!');return;}//复制一份let list = [...prevState.aList];let nowItem = list[i];list.splice(i,1); //删除list[i]数据// console.log(list);list.splice(i-1,0,nowItem); //在list[i-1]处添加数据// console.log(list);return {aList:list};})}fnDown(i){this.setState(prevState =>{if (i== prevState.aList.length-1){alert('到底了!');return;}//复制一份let list = [...prevState.aList];let nowItem = list[i];list.splice(i,1); //删除list[i]数据// console.log(list);list.splice(i+1,0,nowItem); //在list[i+1]处添加数据// console.log(list);return {aList:list};})}render(){return (<div className="list_con"><h2>To do list</h2><input type="text" value={this.state.sTodo} id="txt1" className="inputtxt" onChange={this.fnChange.bind(this)}/><input type="button" value="增加" id="btn1" className="inputbtn" onClick= {this.fnAdd.bind(this)}/><ul id="list" className="list">{this.state.aList.map((item,i)=><li key={i}><span>{item}</span><a href="javascript:;"className="up" onClick={this.fnUp.bind(this,i)}> ↑ </a><a href="javascript:;"className="down" onClick={this.fnDown.bind(this,i)}> ↓ </a> <a href="javascript:;"className="del" onClick={this.fnDel.bind(this,i)}>删除</a></li>)}</ul></div>);}}ReactDOM.render(<Todolist />, document.getElementById('root'));</script>
</body>
</html>

生命周期方法

生命周期方法，指的是在组件初始化后，以及组件销毁时，会自动执行的两个方法，我们可以在初始化方法中执行获取数据的操作，在组件销毁方法中执行一些清除操作，比如清除定时器等操作。这两个方法分别是：componentDidMount 和 componentWillUnmount。

使用示例：

class Hello extends React.Component{constructor(props){super(props);this.state = {}}// 组件初始化时自动执行的方法    componentDidMount() {console.log('componentDidMount');}// 组件销毁时自动执行的方法componentWillUnmount(){console.log('componentWillUnmount'); }render(){return (<h1>Hello world!</h1>);}
}ReactDOM.render(<Hello />,document.getElementById('root'));setTimeout(() => {ReactDOM.render(<h1>切换组件</h1>,document.getElementById('root')); 
}, 2000);

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><script src="js/babel.min.js"></script>
</head>
<body><div id="root"></div><script type="text/babel">class HelloWorld extends React.Component{componentDidMount(){console.log('componentDidMount');}componentWillUnmount(){console.log('componentWillUnmount');}render(){return (<h1>Hello World!</h1>)}}ReactDOM.render(<HelloWorld />, document.getElementById('root'));//组件销毁setTimeout(()=>{ReactDOM.render(<h1>Bye Bye!</h1>,document.getElementById('root'));},3000);</script>
</body>
</html>

数据交互

React没有集成ajax功能，要使用ajax功能，可以使用官方推荐的axios.js库来做ajax的交互。 axios库的下载地址：https://github.com/axios/axios/releases

axios使用方法

常用参数：
1、url 请求地址
2、method 请求方式，默认是’GET’，常用的还有’POST’
3、responsetype 设置返回的数据格式，常用的是’json’格式，也可以设置为’text’或者’html’
4、params 设置发送给服务器的数据
5、then 设置请求成功后的回调函数
6、catch 设置请求失败后的回调函数

axios完整写法：

axios({url: '/user/12345',method: 'get',responsetype:'json',params: {firstName: 'Fred',lastName: 'Flintstone'}
})
.then(function (response) {console.log(response);
})
.catch(function (error) {console.log(error);
});
axios请求的写法也写成get方式后post方式。

执行get请求
// 为给定 ID 的 user 创建请求
// then是请求成功时的响应，catch是请求失败时的响应

axios.get('/user?ID=12345')
.then(function (response) {console.log(response);
})
.catch(function (error) {console.log(error);
});// 可选地，上面的请求可以这样做
axios.get('/user', {params: {ID: 12345}
})
.then(function (response) {console.log(response);
})
.catch(function (error) {console.log(error);
});

执行post请求

axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'
})
.then(function (response) {console.log(response);
})
.catch(function (error) {console.log(error);
});

脚手架开发

脚手架开发指的是react提供了完整的自动化开发工具及规划好了开发一个应用的项目目录，这些工具是通过nodejs开发的，我们可以通过npm(nodejs包管理命令)来安装这些工具，同时可以通过这个工具生成一个应用的项目目录。

安装脚手架工具

脚手架工具是nodejs的一个包，安装这个工具之前需要先安装nodejs，然后在终端执行以下命令：

1、设置npm淘宝景象

npm config set registry https://registry.npm.taobao.org

2、安装

npm install -g create-react-app

生成应用项目目录

3、生成app

create-react-app my-app

4、启动

cd my-app
npm start

5、生成上线文件

npm run build

项目目录说明

在这里插入图片描述
以上是执行生成命令自动生成的项目目录，对应的文件夹作用如下：
目录一：src目录，主开发目录，里面包含所有项目的组件，开发组件都是基于此目录
目录二：public目录，项目入口文件目录，目录中的文件不用动
目录三：项目开发依赖包文件目录，项目安装的包都会自动安装在这个文件夹中
目录四：build目录，项目上线时，执行npm run build生成的目录，这里面是自动化工具生成的上线文件

安装axios模块

1、在终端的项目目录，执行如下命令

npm install axios

2、在模块文件中引入

import axios from 'axios';

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

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

相关文章

HDLbits: Edgedetect

HDLbits: Edgedetect

module top_module (input clk,input [7:0] in,output [7:0] pedge );reg [7:0] in_old;always(posedge clk)beginin_old < in; end assign pedge < in & ~in_old; endmodule 对于边缘检测而言&#xff0c;若是0→1和1→0都检测则为in^in_old&#xf…
阅读更多...
医学影像归档与通讯系统（PACS）系统源码 PACS三维图像后处理技术

医学影像归档与通讯系统（PACS）系统源码 PACS三维图像后处理技术

医学影像归档与通讯系统&#xff08;PACS&#xff09;系统源码 PACS三维图像处理 医学影像归档与通讯系统&#xff08;PACS&#xff09;系统&#xff0c;是一套适用于从单一影像设备到放射科室、到全院级别等各种应用规模的医学影像归档与通讯系统。PACS集患者登记、图像采集、…
阅读更多...
ctfshow web入门 php特性 web131-web135

ctfshow web入门 php特性 web131-web135

1.web131 和上题一样差不多&#xff0c;正则最大回溯次数绕过 import requests url"" data{f:very*250000360Dctfshow } rrequests.post(url,datadata) print(r.text)2.web132 通过扫描发现robots.txt,访问/admin发现源码 &&和||都是短路运算符 只要满足co…
阅读更多...
C++设计模式-享元（Flyweight）

C++设计模式-享元（Flyweight）

目录 C设计模式-享元&#xff08;Flyweight&#xff09; 一、意图 二、适用性 三、结构 四、参与者 五、代码 C设计模式-享元&#xff08;Flyweight&#xff09; 一、意图 运用共享技术有效地支持大量细粒度的对象。 二、适用性 一个应用程序使用了大量的对象。完全由…
阅读更多...
力扣 -- 1745. 分割回文串 IV

力扣 -- 1745. 分割回文串 IV

解题步骤&#xff1a; 参考代码&#xff1a; class Solution { public:bool checkPartitioning(string s) {int ns.size();vector<vector<bool>> dp(n,vector<bool>(n));for(int in-1;i>0;i--){for(int ji;j<n;j){if(s[i]s[j]){dp[i][j]i1<j?dp[i…
阅读更多...
卷积网络的发展历史-LeNet

卷积网络的发展历史-LeNet

简介 LeNet是CNN结构的开山鼻祖&#xff0c;第一次定义了卷积神经网络的结构。 LeNet模型包含了多个卷积层和池化层&#xff0c;以及最后的全连接层用于分类。其中&#xff0c;每个卷积层都包含了一个卷积操作和一个非线性激活函数&#xff0c;用于提取输入图像的特征。池化层…
阅读更多...
功能定义-前方交通穿行提示制动

功能定义-前方交通穿行提示制动

功能概述 前方交通穿行提示(Front Cross Traffic Alert)&#xff0c;简称FCTA&#xff0c;其功能表现为在车辆低速前进时&#xff0c;实时监测车辆前部横向接近的其他道路使用者&#xff0c;并在可能发生碰撞风险时发出警告信息 前方交通穿行制动(Front Cross Traffic Braking…
阅读更多...
iMazing 2.17.10官方中文版含2023最新激活许可证码

iMazing 2.17.10官方中文版含2023最新激活许可证码

iMazing 2.17.10官方中文版是一款iOS设备管理软件&#xff0c;该软件支持对基于iOS系统的设备进行数据传输与备份&#xff0c;用户可以将包括&#xff1a;照片、音乐、铃声、视频、电子书及通讯录等在内的众多信息在Windows/Mac电脑中传输/备份/管理。 iMazing 2.17.10官方中文…
阅读更多...
力扣第101题 c++ 递归 迭代 双方法 ＋注释 ~

力扣第101题 c++ 递归 迭代 双方法 ＋注释 ~

题目 101. 对称二叉树 简单 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,null,3] 输出&#xff1a;false提示&a…
阅读更多...
7.JavaScript-vue

7.JavaScript-vue

1 JavaScript html完成了架子&#xff0c;css做了美化&#xff0c;但是网页是死的&#xff0c;我们需要给他注入灵魂&#xff0c;所以接下来我们需要学习JavaScript&#xff0c;这门语言会让我们的页面能够和用户进行交互。 1.1 介绍 通过代码/js效果演示提供资料进行效果演…
阅读更多...
吃鸡达人专享！提高战斗力，分享干货，查询装备皮肤，保护账号安全！

吃鸡达人专享！提高战斗力，分享干货，查询装备皮肤，保护账号安全！

大家好&#xff01;作为专业吃鸡行家&#xff0c;我将为您带来一些热门话题和实用内容&#xff0c;帮助您提升游戏战斗力&#xff0c;分享顶级游戏作战干货&#xff0c;并提供便捷的作图工具和查询服务。让我们一起享受吃鸡的乐趣&#xff01; 首先&#xff0c;我要推荐一款绝地…
阅读更多...
3分钟基于Chat GPT完成工作中的小程序

3分钟基于Chat GPT完成工作中的小程序

1. 写在前面 GPT自从去年爆发以来&#xff0c;各大公司在大模型方面持续发力&#xff0c;行业大模型也如雨后春笋一般发展迅速&#xff0c;日常工作中比较多的应用场景还是问答模式&#xff0c;作为写程序的辅助也偶尔使用。今天看到一篇翻译的博客“我用 ChatGPT&#xff0c;…
阅读更多...
[笔记] Windows内核课程：保护模式《二》段寄存器介绍

[笔记] Windows内核课程：保护模式《二》段寄存器介绍

文章目录 前言1、什么是段寄存器? 有哪些 ?2. 段寄存器的结构 前言 段寄存器&#xff0c;页寄存器 1、什么是段寄存器? 有哪些 ? 当我们用汇编读写某一个地址时: mov dword ptr ds:[0x123456],eax我们真正读写的地址是: ds.base 0x123456ES、CS、SS、DS、FS、GS、LDTR…
阅读更多...
物联网系统中物模型定义的简要说明

物联网系统中物模型定义的简要说明

物模型由若干条“参数”组成,参数按描述的功能类型不同,又分为属性、方法和事件。 标准参数 为了实现设备功能的统一理解。 说的直白一些的理解&#xff0c;可以这样去理解&#xff1a; 属性&#xff0c;就是定义的由设备端规律性的定期上报的数据。 事件&#xff0c;就是定…
阅读更多...
吃鸡达人必备！提高战斗力、分享干货、查询安全！

吃鸡达人必备！提高战斗力、分享干货、查询安全！

大家好&#xff01;作为吃鸡玩家&#xff0c;想必大家都希望能够提高自己的游戏战斗力&#xff0c;分享顶级游戏作战干货&#xff0c;并且方便进行作图、查询装备皮肤库存&#xff0c;更重要的是&#xff0c;防止被骗游戏账号进入黑名单。今天&#xff0c;我就给大家介绍一家专…
阅读更多...
【推荐系统】wss课程-重排序

【推荐系统】wss课程-重排序

MMR marginal 边缘的&#xff1b; i已选中&#xff0c;j 未选中。注意&#xff01;j 是很多物品。 每一轮的 S 都会发生变化&#xff0c;所以每轮的 MRi都要重新计算。 - 每轮都从未选中的物品中与已选中的物品计算 MR&#xff0c;把分数最高的 i 从 R 中移出来。 目标&am…
阅读更多...
【计算机网络】应用层协议原理

【计算机网络】应用层协议原理

文章目录 网络应用程序体系结构客户-服务器体系结构P2P体系结构 进程通信客户和服务器进程进程与计算机网络之间的接口进程寻址 可供应用程序使用的运输服务可靠数据传输吞吐量定时安全性 因特网提供的运输服务TCP服务面向连接的服务可靠数据传输服务TCP安全 UDP服务因特网运输…
阅读更多...
JavaFX：Insets在控件中使用简例

JavaFX：Insets在控件中使用简例

Insets是矩形区域 4 边的一组内偏移量&#xff0c;矩形内的设置与边框距离。如果在周围的边框有控件&#xff0c;则是矩形与控件的距离。 package javafx8.ch10;import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import ja…
阅读更多...
互联网Java工程师面试题·Memcached 篇·第二弹

互联网Java工程师面试题·Memcached 篇·第二弹

目录 10、memcached 如何实现冗余机制&#xff1f; 11、memcached 如何处理容错的&#xff1f; 12、如何将 memcached 中 item 批量导入导出&#xff1f; 13、如果缓存数据在导出导入之间过期了&#xff0c;您又怎么处理这些数据呢&#xff1f; 14、memcached 是如何做身份…
阅读更多...
数据源报表

数据源报表

1.新建报表 2.新建数据集 3.维护数据源 支持的数据库还是蛮多哈 4.选择数据源表 5.编写sql 编码&#xff1a;SQL数据集的标识 注&#xff1a;避免特殊字符和_名称&#xff1a;SQL数据集的名称是否集合&#xff1a;否为单数据&#xff1b;是为多数据列表&#xff0c;如果多条数据…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023