React基础

目录

 

TODO1

React概述

React的使用

React脚手架的使用

全局安装

npx安装

 在脚手架中使用React

 JSX

1. JSX的基本使用

1.1 为什么用JSX

1.2 JSX简介

1.3 使用步骤

1.4 脚手架中能用JSX

1.5 注意点

2. 在JSX中使用JavaScript表达式

2.1 嵌入js表达式

2.2 注意点

3.JSX的条件渲染

 4.JSX的列表渲染

5.JSX的样式处理

5.1 行内样式 style

5.2 类名 className

TODO2

组件

1.组件介绍

2.组件的两种创建方式

2.1 使用函数创建组件

2.2 使用类创建组件

 2.3 将组件抽离为单独的js文件

 

事件处理

1.事件绑定

2.事件对象

 3.有状态组件和无状态组件

4.state和setState（）

4.1 state的基本使用

4.2 setState修改状态

 4.3 从JSX中抽离事件处理程序

this指向

1.箭头函数

2.Function.prototype.bind()

3.class的实例方法

4.总结

表单处理

1.受控组件

2.非受控组件

TODO3

组件通讯

1.组件通讯的定义

2.组件通讯的三种方式

props

props深入

Context

 

TODO1

React概述

1.是用于构建用户界面的JavaScript库

2.特点： 声明式 基于组件 学习一次随处使用

  ①声明式 只需要描述UI看起来是什么样 react负责渲染并在数据变化时更新

  ②组件 表示页面中的部门内容  组合复用多个组件可以实现完整的页面功能 （最重要）

  ③学习一次，随处使用 web应用  移动端原生应用 虚拟现实应用均可使用

3.推荐使用脚手架使用react

React的使用

//引入react和react-dom两个js文件
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script> //创建react元素//参数一 元素名称 参数二 元素属性 参数三 元素的子节点const title = React.createElement('h1',null,'hello react')//  const title = React.createElement(//     'p',//     { title: '我是标题',id:'p1'},//      'hello react'//      React.createElement('span',null,'我是span节点')//      )//渲染react元素  （仅针对web开发）//参数一 要渲染的react元素 参数二 挂载点-》页面中指定的位置ReactDOM.render(title,document.getElementById('root'))

 

React脚手架的使用

全局安装脚手架和npx安装脚手架的区别

 

全局安装

React脚手架的使用

npm start：执行开发模式，运行该项目

npm run build：执行生产模式，打包该项目

npm test：执行测试模式，测试该项目

npm run eject：将webpack相关文件暴露出来(React设置webpack文件隐藏

633d1364aad842f79f7aefe542639aa9.png

npx安装

npx create-react-app 是固定命令，create-react-app是React脚手架的名称

npx 命令会帮助我们临时安装create-react-app包，然后初始化项目完成之后会自自动删掉

不需要进行全局安装（但是我已经安装完了··

初始化项目

npx create-react-app my-app

启动项目

在项目的根目录下执行**  先cd项目

npm start

 在脚手架中使用React

脚手架能够帮助我们自动刷新页面

//1.导入react和react-dom两个包（非script标签导入）使用es6中的模块化语法
import React from 'react'
import ReactDOM from 'react-dom'//2. 调用React.createElement()方法创建react元素
const title = React.createElement('p',null,'hello react')//3. 调用ReactDOM.render()方法渲染react元素到页面中
ReactDOM.render(title,document.getElementById('')  //挂载点

脚手架文件介绍 

脚手架文件介绍

 JSX

1. JSX的基本使用

1.1 为什么用JSX

React.createElement（）过于繁琐不简洁  -》和用模板字符串一样

1.2 JSX简介

1.JavaScript XML 表示在JavaScript中写HTML格式的代码 

2.声明式语法更加直观 开发效率高 学习成本低

3.是React的核心内容 完全利用js语言自身的能力来编写UI 

1.3 使用步骤

//1.使用JSX语法创建 React元素
const title =<h1> hello jsx</h1>//2.使用ReactDOM.render()方法渲染react元素到页面中
ReactDOM.render(title,root)

1.4 脚手架中能用JSX

1.JSX是ECMAScript的扩展

2.需要使用babel编译处理才能在浏览器环境中使用 （脚手架中已有相关配置）

3.编译JSX语法的包为：@babel/preset-react

1.5 注意点

1.元素的属性名用驼峰命名法

2.特殊属性名 class->className  for->htmlFor tabindex->tabIndex

3.没有子节点的React元素可以用/>结束

<span>hello react</span>hello react</span>

4.使用（）包裹JSX （结构清晰 避免JS自动插入分号陷阱） 

const div=(
<div>hello jsx</div>
)

2. 在JSX中使用JavaScript表达式

2.1 嵌入js表达式

1.数据存储在js中

2.语法：{JavaScript}表达式

const name ='cc'
const div ={<div>hello {name}</div>
}

2.2 注意点

1.单大括号中可以使用任意的JavaScript表达式

2.JSX自身也是JavaScript表达式

const sayHi=() => 'Hi'const title =(<h1>可以使用任意的函数表达式</h1><span>{1}</span><span>{'a'}</span><span>{1+2}</span><span>{3>5?1:0}</span><span>{sayHi()}</span>
)const h1=<h1>cc</h1>
const div=(<div> JSX自身也是js表达式 {h1} </div>
)

3.js中的对象一般只会出现在style属性

4.{}中不能出现语句

3.JSX的条件渲染

1.场景：loading效果

2.条件渲染 根据条件渲染特定的jsx结构

3.可以使用if/else或三元运算符或逻辑与运算符实现

//if elseconst loadData=() =>{if(isLoading){return <div>数据加载中 请稍后 </div>}return (<div>数据加载完成，这里显示的是数据</div>)}const div=(<div>{loadData()}</div>)//三元表达式
const loadData =() =>{
return isLoading ?(<div>数据加载中</div>) :(<div>数据加载完成，这里显示的是数据</div>)
}//逻辑与运算符 --适合要么展示 要么隐藏
const loadData=() =>{return isLoading &&( <div> loading</div>)
}
const div=(<div>{loadData()}</div>)

 4.JSX的列表渲染

1.要渲染一组数据  应该使用map（）方法

2.渲染列表时要加key属性 key属性的值要保证唯一-id

3.map（）遍历谁  就给谁加key属性

4.避免使用索引号（索引号会发生改变）

const targets =[{id:1,name:'react基础'}，{id:2,name:'react进阶'},{id:3,name:'git+移动端开发+模块化'},
]const list =(<ul>{targets.map(item=> <li key={item.id>{item.name}</div>)}</ul>
)

5.JSX的样式处理

5.1 行内样式 style

//看起来像双括号 但实际上不是 外侧的表示嵌入对象 
<h1 style={{color:'red',backgroundColor: 'skyblue'}}>jsx样式处理
</h1>

5.2 类名 className

<h1 className="title">jsx样式处理
</h1>//要注意引入css文件
import 'index.css'

TODO2

组件

1.组件介绍

  1. 使用react就是在使用组件
  2. 组件表示页面中的部分功能
  3. 组合多个租金按能实现完整的页面
  4. 特点：可复用、独立、可组合

2.组件的两种创建方式

2.1 使用函数创建组件

函数组件：使用js的函数（或箭头函数）创建的组件

//函数名称必须以大写字母开头
function Hello() {return (<div>函数组件是必须有返回值的，表示该组件的结构，返回值为null表示不渲染任何结构</div>
)
}//渲染函数组件 -》用函数名作为组件标签名 
//组件名要大写的原因是 react据此区分普通组件和 react元素
//组件标签名 可以是单标签 也可以是双标签 //箭头函数创建组件 
const Hello =() => (<div>函数组件</div>)ReactDOM.render(<Hello />,root)

2.2 使用类创建组件

类组件：使用ES6的class创建的组件

  • 类名称也必须以大写字母开头
  • 类组件应该继承 React.Component父类，从而可以使用父类提供的方法或属性
  • 类组件必须提供render（）方法
  • render（）方法必须有返回值 表示该组件的结构
//类名必须用大写字母开头
//继承React.Component父类
class Hello extends React.Component{
//必须提供render()方法render() {
//必须有返回值 表示该组件的结构return (<div>类组件</div>)}
}
ReactDOM.render(</Hello>,root)

 2.3 将组件抽离为单独的js文件

每个组件放到单独的js文件中

  • 创建Cc.js（组件的js文件）
  • 在Cc.js中导入React
  • 创建组件（函数或类）
  • 在Cc.js中导出该组件
  • 在index.js（要使用这个组件的文件）中导入组件
  • 渲染组件
//Cc.js
import React from 'react'
class Cc extends React.Component{render() {return (<div> 啊啊啊啊</div>)}
}
//导出组件
export default Cc//index.js
//导入组件
import Cc from '路径'
//渲染导入的组件
ReactDOM.render(<Cc />, document.getElementById('root'))

事件处理

1.事件绑定

  • 与DOM事件绑定语法类似
  • on+事件名称={事件处理程序} //驼峰命名法
  • 如果是类组件绑定 用this. 如果是函数组件绑定 直接写函数名字即可
//类创建
class App extends React.Component{handleClick(){console.log('类组件中的事件绑定')}render(){return(<button  onClick={this.handleClick}> 点了会发生啥？</button>)}
}//函数
function App() {function handleClick(){console.log('函数组件中的事件绑定')
}return(<button onClick={handleClick}>点</button>
)
}//渲染组件
ReactDOM.render(<App />,document.getElementById('root'))

 

2.事件对象

通过事件处理程序的参数获取到事件对象

React中的事件对象叫合成事件（对象）

合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题（了解即可）

class App extends React.Component{
handleClick(e){
e.preventDefault()
}
render(){return(<a href="" onClick={this.handleClick}>我没加链接</a>)
}
}
//渲染组件
ReactDOM.render(<App/>,document.getElementById('root'))

 3.有状态组件和无状态组件

状态 state即数据

  • 函数组件叫做无状态组件 只负责数据展示（静态）
  • 类组件叫做有状态组件 负责更新UI （动态）

4.state和setState（）

4.1 state的基本使用

  • state是组件内部的私有数据，只能在组件内部使用
  • state的值是对象 表示一个组件中可以有多个数据

如何使用state

class Cc extends React.Component {//es6 class语法constructor(){super() //必须有 是es6的要求//初始化statethis.state ={count :0}
}//简洁版 实验性的public class fields语法
state = {count :0}render(){return (<div>有组件状态</div>
)
}
}

①super()函数用于访问和调用一个对象上的父对象上的函数

②在构造函数中使用时，super关键字将单独出现，并且必须在使用this关键字之前使用。
super关键字也可以调用父对象上的函数。

③ES6 class语法拯救世界了吗 为什么要用它（？）

4.2 setState修改状态

  • 状态可以改变
  • this.setState({要修改的数据})
  • 不要直接修改state中的值
  • setState（） 作用 1.修改state 2.更新UI -》数据驱动视图
this.setState({count:this.state.count + 1
})//错误的
this.state.count += 1

 4.3 从JSX中抽离事件处理程序

如果JSX中有过多的js逻辑代码 会显得很混乱 

   将逻辑抽离到单独的方法中，保证结构的清晰 

但是会出现事件处理程序中的this的值为undefined的情况

  希望this指向组件实例（render方法中的this即为组件实例）

       组件实例本质上就是一个状态集合（或一个对象）

 

this指向

1.箭头函数

①箭头函数自身不绑定this

②render方法中的this为组件实例，可以获取到setState（）

箭头函数中的this指向

class Cc extends React.Component{onIncrement(){this.setState({ })
}
render(){
//箭头函数中的this指向外部环境，此处为：render（） 方法return (<button onClick={() => this.onIncrement()}></button>
)
}
}

2.Function.prototype.bind()

class Cc extends React.Component{constructor() {super()this.onIncrement = this.onIncrement.bind(this)
}
//省略onIncrement
render(){return (<button onClick={this.onIncrement()}></button>
)
}
}

3.class的实例方法

①利用箭头函数形式的class实例方法

②该语法是实验性语法 但是由于babel的存在可以直接用（编译JSX的语法包）

class Cc extends React.Component{onIncrement =() =>{this.setState({...})
}
render(){return (<button onClick={this.onIncrement()}></button>
)
}
}

4.总结

推荐使用的顺序  class的实例方法>箭头函数>bind 

表单处理

1.受控组件

推荐使用受控组件来处理表单

值受到React控制的表单元素

  • HTML的表单元素是可输入的 有自己的可变状态
  • React中的可变状态通常保存在State中，并且只能通过setState（）方法获取

二者冲突  所以 React把state与表单元素值value绑定  由state的值来控制表单元素的值

//1.在state中添加一个状态 作为表单元素的value值（控制表单元素值的来源）
state={txt:''}
//2.给表单元素绑定change事件，将表单元素的值设置为state的值（控制表单元素值的变化）
<input type="text" value={this.state.txt}onChange ={e => this.setState({ txt : e.target.value })}
/>

多表单元素优化步骤

1.给表单元素加name属性，名称与state相同

2.根据表单元素类型，获取对应的值

3.在change事件处理程序中，通过[name]修改对应的state

<inputtype="text"name="txt"  //区分其他表单元素 名称与state相同value={this.state.txt}onChange={this.handleForm}
/>//根据表单元素类型获取值
const value=target.type === 'checkbox'?target.checked:target.value//根据name设置对应的state
this.setState({
//es6的属性表达式[name]:value
})

2.非受控组件

1.借助ref 使用原生DONM方式来获取表单元素的值

        ref的作用：获取DOM组件

2.使用步骤

①调用React.createRef()方法创建一个ref对象

②将创建好的ref对象添加到文本框中

③通过ref对象获取到文本框的值

3.大多数情况下 用受控组件 

//1.调用
constructor() {super()this.txtRef = React.createRef()
}//2.将ref添加到文本框
<input type="text" ref={this.txtRef} />//3.通过ref对象获取到文本框的值
console.log{this.txtRef.current.value}//实践
class App extends React.Component{constructor() {super()this.txtRef = React.createRef()
}
//获取文本框的值
getTxt =() =>{console.log('文本框的值为：', this.txtRef.current)
}
render(){return(<div><input type="text" ref={this.txtRef} /><button onClick={this.getTxt}获取文本框的值</button></div>
)
}
}

完全利用js语言的能力创建组件，这是React的思想 

TODO3

组件通讯

1.组件通讯的定义

因为组件时独立且封闭的单元，默认情况下，只能使用组件自己的数据，在组件化的过程中，我们要将完整的功能拆分为多个组件，这里需要共享一些数据，所以应该让组件与外界进行“通讯”

2.组件通讯的三种方式

2.1 父组件 ->子组件

①父组件提供要传递的state数据

②给子组件标签添加属性，值为state中的数据

③子组件通过props接收父组件传递的数据

2.2 子组件 ->父组件

思路：利用回调函数，父组件提供回调，子组件调用。将要传递的数据作为回调函数的参数。

①父组件提供一个回调函数（用于接收数据）

②将该函数作为属性的值，传递给子组件。

③子组件通过props调用回调函数。

④将子组件的数据作为参数传递给回调函数。

2.3兄弟组件

将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态

思想：状态提升

公共父组件职责 1.提供共享状态 2.提供操作共享状态的方法

要通讯的子组件只需要通过props接收状态或操作状态的方法

props

  • 组件要接受外部的数据应该通过props来实现
  • props的作用：接受传递给组件的数据
  • 传递数据：给组件标签添加属性
  • 接收数据：函数组件通过参数props接收数据，类组件通过this.props接收数据
  • <Hello name="jack" age={19} />
function Hello(props){
return (<div> 接收到的数据：{props.name} </div>
)
}
  • props特点 可以给组件传递任意类型的数据 
    <Hello  name="rose"age={19}colors={['red','green','blue']}fn={() => console.log('传的是函数')}tag={<p>这是一个p标签</p>}
/>

                         props是只读的对象 只能读取值 但是无法修改对象

                         使用类组件时，如果写了构造函数，应该将props传递给super() 否则无法在构造函数中获取到props 

constructor(props) {super(props)
}

props深入

children属性

1.表示组件标签的子节点，当组件标签有子节点时，props就会有该属性、

2.children属性与普通的props一样，值可以是任意值（文本，React元素，组件，函数）

function Hello {props}{return {<div>组件的子节点：{props.children}</div>}
}
<Hello> 我是子节点 </Hello>

props校验

1.因为对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据

2.如果传入数据不对，会导致组件内部报错，且组件的使用者不知道明确的错误原因。

3.添加props校验，允许在创建组件的时候，就指定props的格式和类型。捕获使用组件时因为props导致的错误，增加组件的健壮性。

步骤

1.安装prop-types包

2.导入prop-type是包

3.使用组件名.propTypes={}给组件的props添加校验规则

4.校验规则通过PropTypes对象来指定

约束规则

1.常见类型：array bool func number object string

2.React元素类型 ：element

3.必填项：isRequired

4.特定结构的对象： shape（{}）

//添加props校验
App.propTypes={a:propTypes.number,
fn:propTypes.func.isRequired,
tag:PropTypes.element,
filter:PropTypes.shape({
area:PropTypes.string,
price:PropTypes,number
})
}

props默认值

场景：分页组件-》每页显示条数

作用：给props设置默认值，在未传入props时生效

App.defaultProps ={pageSize:10
}

 

Context

跨多个组件传递数据 （eg 主题  语言） 

Context提供了两个组件  Provider -》用来提供数据和Consumer-》用来消费数据

//1.调用React.creatContext() 创建Provider 和Consumer 两个组件
const { Provider,Consumer} = React.createContext()
//2.使用Provider组件作为父节点
<Provider><div className="App"><Child1 /></div>
</Provider>
//3.设置value属性，表示要传递的数据
<Provider value="pink">
//4.调用Consumer 组件接收数据
<Consumer>{data => <span>data 参数表示接收到的数据 --{data}</span>
</Consumer>

React 官方中文文档        

 

 

 

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

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

相关文章

小节3：数据类型

小节3：数据类型

Python的数据类型包括&#xff1a;字符串&#xff08;str&#xff09;、整数&#xff08;int&#xff09;、浮点数&#xff08;float&#xff09;、布尔类型&#xff08;bool&#xff09;、空值类型&#xff08;NoneType&#xff09;、列表&#xff08;list&#xff09;、字典&…
阅读更多...
JUC P8 ThreadLocal 基础+代码

JUC P8 ThreadLocal 基础+代码

JUC P8 ThreadLocal 基础代码 教程&#xff1a;https://www.bilibili.com/video/BV1ar4y1x727?p100 引出问题 ThreadLocal 和 TreadLocalMap 数据结构关系&#xff1f; ThreadLocal 中的 key 是弱引用&#xff0c;为什么&#xff1f; ThreadLocal 内存泄漏问题是什么&#x…
阅读更多...
协程 VS 线程，Kotlin技术精讲

协程 VS 线程，Kotlin技术精讲

协程(coroutines)是一种并发设计模式&#xff0c;您可以在Android 平台上使用它来简化异步执行的代码。协程是在版本 1.3 中添加到 Kotlin 的&#xff0c;它基于来自其他语言的既定概念。 在 Android 上&#xff0c;协程有助于管理长时间运行的任务&#xff0c;如果管理不当&a…
阅读更多...
创邻科技图数据库课程走进一流高校

创邻科技图数据库课程走进一流高校

《图数据库原理和实践》 正式开课&#xff01; 最近&#xff0c;浙江大学计算机学院新开了一门名为 《图数据库原理和实践》 的新课程&#xff0c;该课程由创邻科技和浙江大学联合推出&#xff0c;吸引了许多学生踊跃参与&#xff01; 曾为浙大学子的创邻科技CTO周研博士作为…
阅读更多...
51单片机-直流电机学习

51单片机-直流电机学习

简介 51单片机采用的是5V的直流电机 轴长&#xff1a;8mm 轴径&#xff1a;2mm 电压&#xff1a;1-6V 参考电流&#xff1a;0.35-0.4A 3V 转速&#xff1a;17000-18000 转每分钟 他的组成&#xff1a; 直流电机的结构应由 定子 和 转子 两大部分组成。 直流电机运行时静止…
阅读更多...
如何在 Ubuntu 上安装 Nagios？

如何在 Ubuntu 上安装 Nagios？

Nagios 的功能 Nagios 的一些关键功能包括&#xff1a; 主机和服务监控&#xff1a; Nagios 允许您使用提供实时状态数据的插件来监控主机&#xff08;可以是物理机或虚拟机&#xff09;以及 HTTP、SSH 和 SMTP 等服务。此功能使您能够全面了解整个基础设施的运行状况和可用性…
阅读更多...
Java（一）安装并使用 java（Windows）

Java（一）安装并使用 java（Windows）

安装并使用java 前言一、初识Java1.Java的安装1.1下载JDK1.2JDK安装与使用1.2.1安装1.2.2 IDEA&#xff08;编译器&#xff09;使用 2.Java运行编程逻辑&#xff08;重要后面要用&#xff09;总结 前言 学习很重要&#xff0c;复习也很重要&#xff0c;对于编程语言的复习更为…
阅读更多...
开源|HDR-ISP开源项目介绍

开源|HDR-ISP开源项目介绍

引言 拖更很久了&#xff0c;本着出品必精的原则&#xff0c;我们更新就来点干货。想起刚入行时&#xff0c;网上并没有很多以及系统的ISP的学习资料&#xff0c;都是边工作、边搜集资料然后边学习&#xff0c;一路坎坎坷坷走到今天算是刚入了ISP的大门。 为了解决新人入门的…
阅读更多...
JetBrains出品的IDE自动补全和提示文档设置

JetBrains出品的IDE自动补全和提示文档设置

如题下图设置前景色和背景色&#xff1a; 效果如下图&#xff0c;标识1是Completion&#xff0c;标识2是Documentation&#xff1a;
阅读更多...
1.8 工程相关解析(各种文件，资源访问

1.8 工程相关解析(各种文件，资源访问

目录 1.8 工程相关解析(各种文件&#xff0c;资源访问) 分类 Android 基础入门教程 本节引言&#xff1a; 1.工程项目结构解析&#xff1a; 1.res资源文件夹介绍&#xff1a; 2.如何去使用这些资源 2.深入了解三个文件&#xff1a; MainActivity.java&#xff1a; 布局…
阅读更多...
将 Qt Designer 的 ui 文件转换为 PySide2 使用的.py 文件

将 Qt Designer 的 ui 文件转换为 PySide2 使用的.py 文件

20201206 修订&#xff1a;在 Pyside2 的 5.15.2 版本中&#xff0c;从 ui 生成 py 文件过程&#xff0c;命令从 “uic” 变为 “pyside2-uic” Qt Designer 设计的 ui 文件&#xff0c;就是一个 xml 文件&#xff0c;通过 pyside-uic 可以转换成标准的.py 文件 。通过 QtDesi…
阅读更多...
电商（淘宝1688京东拼多多等）API接口服务：提升商业效率和用户体验的关键

电商（淘宝1688京东拼多多等）API接口服务：提升商业效率和用户体验的关键

电商API接口服务&#xff1a;提升商业效率和用户体验的关键 随着电子商务的飞速发展&#xff0c;电商企业需要不断提升自身的业务能力和服务质量&#xff0c;以应对日益激烈的市场竞争。为了更好地满足商家和消费者的需求&#xff0c;电商API接口服务应运而生。本文将探讨电商…
阅读更多...
Flink--2、Flink部署（Yarn集群搭建下的会话模式部署、单作业模式部署、应用模式部署）

Flink--2、Flink部署（Yarn集群搭建下的会话模式部署、单作业模式部署、应用模式部署）

星光下的赶路人star的个人主页 你必须赢过&#xff0c;才可以说不在乎输赢 文章目录 1、Flink部署1.1 集群角色1.2 Flink集群搭建1.2.1 集群启动1.2.2 向集群提交作业 1.3 部署模式1.3.1 会话模式&#xff08;Session Mode&#xff09;1.3.2 单作业模式&#xff08;Per-Job Mod…
阅读更多...
华为云云耀云服务器L实例评测｜使用Linux系统与Docker部署.net/c#项目

华为云云耀云服务器L实例评测｜使用Linux系统与Docker部署.net/c#项目

目录 前言 如何在CentOS运行项目 登录CentOS 使用Rider打包 使用Visual Studio打包 项目运行 后台运行 开放端口 如何在Docker中运行项目 项目运行 前言 本章详细介绍&#xff0c;.net Core项目从打包到部署上华为云云耀云服务器L实例的过程与一些细节问题。在这里…
阅读更多...
Outlook无需API开发连接钉钉群机器人，实现新增会议日程自动发送群消息通知

Outlook无需API开发连接钉钉群机器人，实现新增会议日程自动发送群消息通知

Outlook用户使用场景&#xff1a; 在企业中&#xff0c;会议和活动的顺利举行对于业务运转和团队协作至关重要。然而&#xff0c;计划的变动总是无法避免&#xff0c;这可能会导致其他人的计划受到影响&#xff0c;打乱原有的安排。为了解决这个问题&#xff0c;许多企业开始使…
阅读更多...
快速构建基于Paddle Serving部署的Paddle Detection目标检测Docker镜像

快速构建基于Paddle Serving部署的Paddle Detection目标检测Docker镜像

快速构建基于Paddle Serving部署的Paddle Detection目标检测Docker镜像 项目介绍需要重点关注的几个文件构建cpu版本的docker构建gpu版本的docker&#xff08;cuda11.2cudnn8&#xff09; 阅读提示&#xff1a; &#xff08;1&#xff09;Paddle的Serving项目中&#xff0c;在t…
阅读更多...
【autodl/linux配环境心得：conda/本地配cuda，cudnn及pytorch心得】-未完成

【autodl/linux配环境心得：conda/本地配cuda，cudnn及pytorch心得】-未完成

linux配环境心得&#xff1a;conda/本地配cuda&#xff0c;cudnn及pytorch心得 我们服务器遇到的大多数找不到包的问题一&#xff0c;服务器安装cuda和cudnn使用conda在线安装cuda和cudnn使用conda进行本地安装检查conda安装的cuda和cudnn本地直接安装cuda和cudnn方法一&#x…
阅读更多...
Linux Debian12将本地项目上传到码云(gitee)远程仓库

Linux Debian12将本地项目上传到码云(gitee)远程仓库

一、注册码云gitee账号 这个可以参考其他教程&#xff0c;本文不做介绍。 gitee官网&#xff1a;https://gitee.com/ 二、Linux Debian12安装git 如果Linux系统没有安装git&#xff0c;可以使用下面命令安装git sudo apt install git 三、gitee新建仓库 我这只做测试&…
阅读更多...
69、配置AWS服务，接收来自RTSP流的推送

69、配置AWS服务，接收来自RTSP流的推送

基本思想：在上一篇的基础和视频教程之后，进行简单的aws服务，进行RTSP流的接收 第一步： 第二步：配置video_stream,记得选择香港节点 同时记录这个信息，后面的策略需要填充 第三步：进行策略设置 第四步：策略设置，选中右上角的创建策略 第五步、进行json填充 第六步：填…
阅读更多...
精益创业的三个测量方法

精益创业的三个测量方法

精益创业三个测量工具【安志强趣讲282期】 趣讲大白话&#xff1a;没法度量就没法改进 **************************** 工具1&#xff1a;AB对比测试 就是产品有两个或多个版本 然后通过外部客户或内部人员评测 可以组织天使用户群&#xff1a;愿意参与的专业人士 工具2&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023