第三十二章 React路由组件的简单使用

news2024/9/21 10:23:45

1、NavLink的使用

一个特殊版本的 Link，当它与当前 URL 匹配时，为其渲染元素添加样式属性

<NavLink className="list-group-item" to="/home">Home</NavLink>
<NavLink className="list-group-item" to="/about">About</NavLink>

以上代码有一个默认的特殊效果，就是当你选中该路由时会有一个默认的激活样式，默认的类名：active。

如果你要修改该激活样式，可以自定义样式：

.active1{
    background-color: orange !important;
    color: white !important;
}

添加一个属性activeClassName将类名active1填进去：

<NavLink className="list-group-item" activeClassName="active1" to="/home">Home</NavLink> <NavLink className="list-group-item" activeClassName="active1" to="/about">About</NavLink>

在这里插入图片描述

由于这里代码有些冗长，我们简单封装一下：

封装组件MyNavLink

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
export default class MyNavLink extends Component {
  render() {
    return (
      <NavLink className="list-group-item" activeClassName="active1" {...this.props}/>
    )
  }
}

导入组件MyNavLink

import MyNavLink from './components/MyNavLink'

使用组件MyNavLink

<MyNavLink to="/home"  children="Home"/> 
<MyNavLink to="/about" children="About"/>

将标签属性to和children传入组件，其中to属性的内容就是路由路径，children就是标签体内容。

小总结

  • NavLink可以实现路由链接的高亮，通过activeClassName指定样式类名
  • 标签体内容是一个特殊的标签属性
  • 通过this.props.children可以获取标签体内容

2、Switch的使用

渲染与该地址匹配的第一个子节点<Route>或者<Redirect>。

import { Switch, Route } from 'react-router'

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

  • 通常情况下path与component是一一对应的关系

  • Switch可以提高路由匹配的效率（单一匹配）

解决多级路径刷新样式丢失的问题

  • public/index.html 中 引入样式时不写./写 / （常用）
  • public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
  • 使用HashRouter

路由的严格匹配与模糊匹配

  • 默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
  • 开启严格匹配：<Route exact={true} path="/about" component={About}/>
  • 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

3、Redirect组件的使用

页面重定向：一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由

<Switch>
	<Route path="/about" component={About}/>
	<Route path="/home" component={Home}/>
	<Redirect to="/about"/>
</Switch>

详情参见：React路由之Redirect

4、路由嵌套

News组件：

import React, { Component } from 'react'

export default class News extends Component {
  render() {
    return (
      <ul>
        <li>news001</li>
        <li>news002</li>
        <li>news003</li>
      </ul>
    )
  }
}

Message组件：

import React, { Component } from 'react'

export default class Message extends Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            <a href="/message1">message001</a>&nbsp;&nbsp;
          </li>
          <li>
            <a href="/message2">message002</a>&nbsp;&nbsp;
          </li>
          <li>
            <a href="/message/3">message003</a>&nbsp;&nbsp;
          </li>
        </ul>
      </div>
    )
  }
}

Home组件：

import React, { Component } from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'
import MyNavLink from '../MyNavLink'
import News from './News'
import Message from './Message'

export default class Home extends Component {
  render() {
    // console.log('这是Home组件的Props',this.props)
    return (
      <div>
        <h3>我是Home的内容</h3>
        <div>
          <ul className="nav nav-tabs">
            <li>
              {/* 注册子路由时要写上父路由的path值 */}
              <MyNavLink to="/home/news">News</MyNavLink>
            </li>
            <li>
              <MyNavLink to="/home/message">Message</MyNavLink>
            </li>
          </ul>
          {/* 注册路由 */}
          <Switch>
            {/* 注册子路由时要写上父路由的path值 */}
            <Route path="/home/news" component={News} />
            <Route path="/home/message" component={Message} />
            <Redirect to="/home/news" />
          </Switch>
        </div>
      </div>
    )
  }
}

整体效果：

在这里插入图片描述

注意点：

1.注册子路由时要写上父路由的path值

2.路由的匹配是按照注册路由的顺序进行的

5、向路由组件传递params参数

组件目录结构

src
|--components
|        |--Home
|             |--News
|             |--Message
|             		|--Detail
|        |--About
|        |--Header
|--App.jsx
|--index.js

主要组件Message

import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Detail from './Detail'

export default class Message extends Component {
  state = {
    msgArr: [
      { id: '01', title: 'msg-01' },
      { id: '02', title: 'msg-02' },
      { id: '03', title: 'msg-03' },
    ],
  }
  render() {
    const { msgArr } = this.state
    return (
      <div>
        <ul>
          {msgArr.map((msgObj) => {
            return (
              <li key={msgObj.id}>
                <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>&nbsp;&nbsp;
              </li>
            )
          })}
        </ul>
        <hr />
        <Route path="/home/message/detail/:id/:title" component={Detail}/>
      </div>
    )
  }
}

URL匹配路径/home/message/:id/:title时渲染的组件。:id是一个参数，可以通过props.match.params.id访问。:title也是一样。

主要组件Detail

import React, { Component } from 'react'

export default class Detail extends Component {
  state = {
    info:[
      {id:'01',content:'你好我是信息1'},
      {id:'02',content:'你好我是信息2'},
      {id:'03',content:'你好我是信息3'},
    ]
  }
  render() {
    console.log(this.props)
    const {info} = this.state
    const {id,title} = this.props.match.params
    const res = info.find(infoObj=>{
      return infoObj.id === id
    })
    return (
      <ul>
        <li>ID:{id}</li> 
        <li>TITLE:{title}</li> 
        <li>CONTENT:{res.content}</li> 
      </ul>
    )
  }
}

在这里我们通过解构this.props.match.params获得参数id和title。以下是我们打印的标签属性：

history: Object { length: 44, action: "PUSH", location: {…}, … }

location: Object { pathname: "/home/message/detail/01/msg-01", search: "", key: "5ugqcd", … }

match: 
    isExact: true
    params: Object { id: "01", title: "msg-01" }
    id: "01"
    title: "msg-01"
    path: "/home/message/:id/:title"
    url: "/home/message/01/msg-01"

从以上打印结果中，我们可以清晰的看到我们的参数位置：match.params

整体效果

在这里插入图片描述

小总结

  • 路由链接（携带参数）：<link to='/demo/test/tom/19'>详情</Link>
  • 注册路由（声明接收）：<Route path='/demo/test/:name/:age' component={Test} />
  • 接收参数：const {name,age} = this.props.match.params

6、向路由组件传递search参数

修改Message组件

import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Detail from './Detail'

export default class Message extends Component {
  state = {
    msgArr: [
      { id: '01', title: 'msg-01' },
      { id: '02', title: 'msg-02' },
      { id: '03', title: 'msg-03' },
    ],
  }
  render() {
    const { msgArr } = this.state
    return (
      <div>
        <ul>
          {msgArr.map((msgObj) => {
            return (
              <li key={msgObj.id}>
                {/* 传递params参数 */}
                {/* <Link to={`/home/message/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>&nbsp;&nbsp; */}

                {/* 传递search参数 */}
                <Link to={`/home/message/detail?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>&nbsp;&nbsp;
              </li>
            )
          })}
        </ul>
        <hr />
        <Route path="/home/message/detail" component={Detail}/>
      </div>
    )
  }
}

这里的路由链接的参数需要使用?key=value&key=value的格式，也叫urlencode格式。路由注册照常即可，不需要声明参数。

修改Detail组件

import React, { Component } from 'react'
import qs from 'qs'
export default class Detail extends Component {
  state = {
    info:[
      {id:'01',content:'你好我是信息1'},
      {id:'02',content:'你好我是信息2'},
      {id:'03',content:'你好我是信息3'},
    ]
  }
  render() {
    console.log(this.props)
    const {info} = this.state
    const {search} = this.props.location
    const {id,title} = qs.parse(search.slice(1))
    const res = info.find(infoObj=>{
      return infoObj.id === id
    })
    return (
      <ul>
        <li>ID:{id}</li> 
        <li>TITLE:{title}</li> 
        <li>CONTENT:{res.content}</li> 
      </ul>
    )
  }
}

这里引入了一个库qs，无需安装，直接引入即可，它有两个方法可以使得urlencode格式的数据与object格式的数据进行转换。

  • qs.stringify(): 将{a:'1',b:2}转换>a=1&b=2
  • qs.parse(): 将a=1&b=2转换>{a:"1",b:"2"}

查看标签属性：

history: Object { length: 7, action: "PUSH", location: {…}, … }
location: 
        hash: ""
        key: "0wurd0"
        pathname: "/home/message/detail"
        search: "?id=01&title=msg-01"
        state: undefined

match: Object { path: "/home/message/detail", url: "/home/message/detail/", isExact: true, … }

我们可以看到search参数是一个字符串在location对象里面，所以我们只需要将它解构取出值，即可进行后续操作。

小总结

  • 路由链接（携带参数）：<link to='/demo/test?name=tom&age=19'>详情</Link>
  • 注册路由（无需声明，正常注册即可）：<Route path='/demo/test' component={Test} />
  • 接收参数：const {search} = this.props.location
  • 解析参数：获取到的search是urlencode编码字符串，需要借助qs解析。

7、向路由组件传递state参数

修改Message组件

import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Detail from './Detail'

export default class Message extends Component {
  state = {
    msgArr: [
      { id: '01', title: 'msg-01' },
      { id: '02', title: 'msg-02' },
      { id: '03', title: 'msg-03' },
    ],
  }
  render() {
    const { msgArr } = this.state
    return (
      <div>
        <ul>
          {msgArr.map((msgObj) => {
            return (
              <li key={msgObj.id}>
                {/* 传递params参数 */}
                {/* <Link to={`/home/message/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>&nbsp;&nbsp; */}

                {/* 传递search参数 */}
                {/* <Link to={`/home/message/detail?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>&nbsp;&nbsp; */}
               
                {/* 传递state参数 */}
                <Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>&nbsp;&nbsp;
              </li>
            )
          })}
        </ul>
        <hr />
        <Route path="/home/message/detail" component={Detail}/>
      </div>
    )
  }
}

以对象的形式将state参数放在路由链接里面。

修改的Detail组件

import React, { Component } from 'react'
// import qs from 'qs'
export default class Detail extends Component {
  state = {
    info:[
      {id:'01',content:'你好我是信息1'},
      {id:'02',content:'你好我是信息2'},
      {id:'03',content:'你好我是信息3'},
    ]
  }
  render() {
    console.log(this.props)
    const {info} = this.state
    const {id,title} = this.props.location.state || {}
    // const {id,title} = qs.parse(search.slice(1))
    const res = info.find(infoObj=>{
      return infoObj.id === id
    }) || {}
    return (
      <ul>
        <li>ID:{id}</li> 
        <li>TITLE:{title}</li> 
        <li>CONTENT:{res.content}</li> 
      </ul>
    )
  }
}

获取state参数也是在location里面获取，我们可以看看标签属性的结构：

history: Object { length: 11, action: "REPLACE", location: {…}, … }
location: 
        hash: ""
        key: "o47hxa"
        pathname: "/home/message/detail"
        search: ""
        state: Object { id: "01", title: "msg-01" }

match: Object { path: "/home/message/detail", url: "/home/message/detail", isExact: true, … }

我们可以从打印结果里面清晰的看到state的参数

小总结

  • 路由链接（携带参数）：<link to={{pathname:'/demo/test',state:{name:'tom',age:19}}}>详情</Link>
  • 注册路由（无需声明，正常注册即可）：<Route path='/demo/test' component={Test} />
  • 接收参数：const {state} = this.props.location
  • 解析参数：刷新也可以保留住参数。

8、编程式路由导航

传递params参数

  1. 注册事件
<button onClick={() => this.pushRoute(msgObj.id, msgObj.title)}>push路由</button>
<button onClick={() => this.replaceRoute(msgObj.id, msgObj.title)}>replace路由</button>
  1. 事件逻辑
  pushRoute = (id, title) => {
    // push路由跳转===>params参数
    this.props.history.push(`/home/message/detail/${id}/${title}`)
  }

  replaceRoute = (id, title) => {
    // replace路由跳转===>params参数
    this.props.history.replace(`/home/message/detail/${id}/${title}`)
  }
  1. 注册路由
<Route path="/home/message/detail/:id/:title" component={Detail} />
  1. 接收参数
 const {id,title} = this.props.match.params

传递search参数

  1. 注册事件
<button onClick={() => this.pushRoute(msgObj.id, msgObj.title)}>push路由</button>
<button onClick={() => this.replaceRoute(msgObj.id, msgObj.title)}>replace路由</button>
  1. 事件逻辑
  pushRoute = (id, title) => {
    // push路由跳转===>search参数
    this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)
  }

  replaceRoute = (id, title) => {
    // replace路由跳转===>search参数
    this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)
  }
  1. 注册路由
<Route path="/home/message/detail" component={Detail} />
  1. 接收参数
const {search} = this.props.location
const {id,title} = qs.parse(search.slice(1))

传递state参数

  1. 注册事件
<button onClick={() => this.pushRoute(msgObj.id, msgObj.title)}>push路由</button>
<button onClick={() => this.replaceRoute(msgObj.id, msgObj.title)}>replace路由</button>
  1. 事件逻辑
  pushRoute = (id, title) => {
    // push路由跳转===>state参数
    this.props.history.push('/home/message/detail', { id, title })
  }

  replaceRoute = (id, title) => {
    // replace路由跳转
    this.props.history.replace('/home/message/detail', { id, title })
  }
  1. 注册路由
<Route path="/home/message/detail" component={Detail} />
  1. 接收参数
const {id,title} = this.props.location.state || {}

小总结

编程式路由导航就是借助this.props.history身上的几个API进行路由的前进、后退、跳转、替换。

  • this.props.history.go()
  • this.props.history.goBack()
  • this.props.history.goForward()
  • this.props.history.push()
  • this.props.history.replace()

9、withRouter的使用

我们知道一般组件，如果不传标签属性，接收的props是一个空对象，是没有那些路由属性和API的，那么一般组件里面如何使用路由进行跳转呢？那就要使用withRouter对一般组件进行改造了。

import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'
 class Header extends Component {
  back = () => {
    this.props.history.goBack()
  }
  forward = () => {
    this.props.history.goForward()
  }
  go1 = () => {
    this.props.history.go(-2)
  }
  render() {
    console.log('这是Header组件的Props',this.props)
    return (
      <div className="col-xs-offset-2 col-xs-8">
        <div className="page-header"><h2>React Router Demo</h2></div>
        <button onClick={this.back}>后退</button>
        <button onClick={this.forward}>前进</button>
        <button onClick={this.go1}>go</button>
      </div>
    )
  }
}

export default withRouter(Header)

以上是对一般组件Header进行改造，使得它拥有路由的属性和API，这样我们就可以使用路由的前进、后退、跳转等API操作路由了。

小总结

  • withRouter可以加工一般组件，使得它拥有路由组件的属性和API
  • withRouter的返回值是一个新的组件

10、BrowserRouter与HashRouter的区别

1、底层原理不一样

​ BrowserRouter使用的是H5的history API，不兼容IE9及以下版本

​ HashRouter使用的是URL的哈希值

2、path表现形式不一样

​ BrowserRouter的路径中没有#，例如：localhost:3000/demo/test

​ HashRouter的路径包含#，例如：localhost:3000/#/demo/test

3、刷新后对路由state参数的影响

​ （1）BrowserRouter没有任何影响，因为state保存在history对象中

​ （2）HashRouter刷新后会导致路由state参数的丢失

4、备注：HashRouter可以用于解决一些路径错误相关的问题

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

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

相关文章

Python 密码破解指南：0~4

Python 密码破解指南：0~4

协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 本文来自【OpenDocCN 饱和式翻译计划】&#xff0c;采用译后编辑&#xff08;MTPE&#xff09;流程来尽可能提升效率。 收割 SB 的人会被 SB 们封神&#xff0c;试图唤醒 SB 的人是 SB 眼中的 SB。——SB 第三定律 零、简…
阅读更多...
stream笔记

stream笔记

1、 创建流stream 1.1、 Stream 的操作三个步骤 1.2、 stream中间操作 1.2.1 、 limit、skip、distinct 1.2.2、 map and flatMap 1.2.3、 sort 自然排序和定制排序 1.3、 add and andAll difference: 1.4、 终止操作 1.4.1、 allmatch、anyMatch、noneMatch、max、min…
阅读更多...
JavaScript通过js的方式来判断一个数奇偶性的代码

JavaScript通过js的方式来判断一个数奇偶性的代码

以下为通过js的方式来判断一个数奇偶性的程序代码和运行截图 目录 前言 一、通过js的方式来判断一个数奇偶性&#xff08;html部分&#xff09; 1.1 运行流程及思想 1.2 代码段 二、通过js的方式来判断一个数奇偶性&#xff08;js部分&#xff09; 2.1 运行流程及思想 2…
阅读更多...
美国新的 AI 研究基金将专注于 6 个领域

美国新的 AI 研究基金将专注于 6 个领域

美国白宫周四宣布&#xff0c;在 1.4 亿美元的联邦资金支持下&#xff0c;拜登政府将开设七个新的人工智能实验室。 国家科学基金会将在其他政府机构的支持下掌舵运营。这些研究所将专注于六个研究课题&#xff1a; 1. 值得信赖的人工智能&#xff0c;隶属于马里兰大学领导的…
阅读更多...
JustFE团队前端代码规范，降本增效，敏感肌可用

JustFE团队前端代码规范，降本增效，敏感肌可用

背景 &#x1f30f; 近年来&#xff0c;接手各个前端的代码&#xff0c;看着前人屎山&#xff0c;深恶痛绝 为了避免自己或者团队&#xff0c;继续添粪&#xff0c;因此经验总结一番~ 规范化优点&#xff1a; 容易理解&#xff0c;维护性强容易编写&#xff0c;扩展性强精准定…
阅读更多...
优化营商环境：打造政策精准服务平台，提高惠政策落实落地时效性

优化营商环境：打造政策精准服务平台，提高惠政策落实落地时效性

近年来&#xff0c;各级政府部门及产业园区不断加强对于惠企政策的宣传和落实&#xff0c;努力打造优质的营商环境&#xff0c;加大助企纾困力度&#xff0c;以推动经济高质量发展。为了更好地实现这一目标&#xff0c;搭建惠企政策精准服务平台成为了一个非常重要的举措。 搭建…
阅读更多...
Apache Zeppelin系列教程第四篇——Interpreter原理分析

Apache Zeppelin系列教程第四篇——Interpreter原理分析

Interpreter 其实就是整个项目的核心&#xff0c;代码运行都是在里面进行执行的&#xff0c;首先来看下Interpreter的抽象类 以jdbc-Interpreter为例&#xff0c;可以参考下测试代码(这个代码里面可以直接测试jdbc的sql执行过程和数据返回过程) 参数和介绍可以参考官方文档&am…
阅读更多...
CH9329双头线使用说明

CH9329双头线使用说明

1.介绍说明 CH9329双头线是集成了CH9329CH340芯片的成品线&#xff0c;主要作用是使用主控电脑发送串口指令数据来控制被控电脑的键盘以及鼠标的功能。主控电脑和被控电脑可以是同一台电脑&#xff0c;就是能够自己控制自己。支持自定义修改USB的硬件信息&#xff0c;如PID、V…
阅读更多...
FTP-HTTP-HTTPS的学习总结

FTP-HTTP-HTTPS的学习总结

FTP协议的学习 一&#xff0c;学习的要点 ftp的掌握总体架构、了解状态机 请求响应的格式、常用操作码及响应的含义 PORT与PASV的区别、断点续传 上传、下载文件的基本流程 1&#xff0c;FTP的架构主要有两种形式 UserPI&#xff08;用户解释器&#xff09;和ServerPI&…
阅读更多...
『面试篇』之网络知识串联（一）：DNS域名解析、TCP的建立与关闭

『面试篇』之网络知识串联（一）：DNS域名解析、TCP的建立与关闭

趁着马上就要面试的这个机会&#xff0c;将网络相关的知识进行一个串联复习。前端网络会在面试中遇到的问题其实并不是很多&#xff0c;核心的内容主要是TCP建立的的三次握手、TCP断开的四次挥手、DNS解析的过程、以及前端跨域等。话不多说&#xff0c;我们直接进入正题。 一、…
阅读更多...
【STL十八】算法——不修改序列的操作（for_each、count、find、equal、search）

【STL十八】算法——不修改序列的操作（for_each、count、find、equal、search）

【STL十八】算法——不修改序列的操作&#xff08;for_each、count、find、equal、search&#xff09; 一、简介二、头文件三、分类四、不修改序列的操作1、for_each2、count、count_if3、find、find_if4、euqal5、search 前言&#xff1a;在前面我们讲解容器和函数对象时&…
阅读更多...
X.25，帧中继（FR），ATM三种分组交换系统

X.25，帧中继（FR），ATM三种分组交换系统

X.25、帧中继&#xff08;FR&#xff09;、ATM 是流行的三种分组交换系统&#xff0c;它们具有不同的特点。 两个术语&#xff1a; DTE(Data Terminal Equipment) &#xff0c;数据终端设备&#xff0c;如我们的个人电脑、手机。 DCE(Data Circuit Equipment) &#xff0c;数据…
阅读更多...
【STM32】基础知识 第十二课 GPIO

【STM32】基础知识 第十二课 GPIO

【STM32】基础知识 第十二课 GPIO 概述GPIO 简介GPIO 模式GPIO 特点GPIO 配置GPIO 操作施密特触发器案例 概述 本文小白我将来介绍通用输入与输出, GPIO (General-Purpose Input/Output) 在单片机中的应用, 以及如何配合和食用 GPIO 来实现各种功能. GPIO 简介 GPIO 是单片机…
阅读更多...
十三、共享内存

十三、共享内存

文章目录 一、什么是共享内存&#xff08;一&#xff09;共享内存的定义&#xff08;二&#xff09;共享内存的原理&#xff08;三&#xff09;共享内存的理解 二、为什么要有共享内存三、共享内存怎么进行&#xff08;一&#xff09; 共享内存的数据结构&#xff08;二&#x…
阅读更多...
【Redis系列】Redis布隆过滤之8亿大数据集实战

【Redis系列】Redis布隆过滤之8亿大数据集实战

序言 即便平凡的日子仿佛毫无波澜&#xff0c;但在某个特定的时刻&#xff0c;执着的努力便会显现出它的价值和意义。 文章标记颜色说明&#xff1a; 黄色&#xff1a;重要标题红色&#xff1a;用来标记结论绿色&#xff1a;用来标记一级重要蓝色&#xff1a;用来标记二级重要 …
阅读更多...
SPC Control Chart Tools for WPF 3.1 Crack

SPC Control Chart Tools for WPF 3.1 Crack

使用 WPF 的 SPC 控制图工具&#xff0c;将变量控制图&#xff08;X-Bar R、X-Bar Sigma、单个范围、中值范围、EWMA、MA、MAMR、MAMS 和 CuSum 控制图&#xff09;、属性控制图&#xff08;p、np、c、u 和 DPMO 控制图&#xff09;、频率直方图和帕累托图添加到 WPF 和 WPF We…
阅读更多...
物理机：显卡3080 环境Centos7.9 如何检查及安装显卡驱动

物理机：显卡3080 环境Centos7.9 如何检查及安装显卡驱动

环境&#xff1a; 硬件服务器&#xff1a;I5处理器&#xff0c; 显卡&#xff1a;3080 12G 等。 目标&#xff1a; 测试是否安装显卡。 如何找到正确的驱动版本。 安装显卡正确的显卡驱动。 一、检查是否正确安装显卡&#xff1a; # 检查使用什么型号的显卡&#xff1a; yum…
阅读更多...
淄博烧烤，怎么就“出圈”了-也是机器视觉行业职场中的态度：少一点套路，多一些真诚，少一点计较，多一些宽容

淄博烧烤，怎么就“出圈”了-也是机器视觉行业职场中的态度：少一点套路，多一些真诚，少一点计较，多一些宽容

我认为淄博烧烤之所以火爆&#xff0c;是因为它代表了一种淄博人的态度&#xff0c;一种对生活的热爱和对客人的真诚。 我认为淄博烧烤之所以火爆&#xff0c;是因为它代表了一种淄博人的态度&#xff0c;一种对生活的热爱和对客人的真诚。 我想更重要的一点&#xff0c;淄博烧…
阅读更多...
使用NineData定制企业级数据库规范

使用NineData定制企业级数据库规范

1. 为什么需要数据库规范&#xff1f; 在企业级应用中&#xff0c;数据库是非常重要的一部分&#xff0c;它们存储着公司的核心数据&#xff0c;包括客户信息、订单、产品信息等等。如果这些数据没有得到妥善的管理&#xff0c;那么就会导致数据不一致、数据丢失、数据泄露等问…
阅读更多...
涨知识！细数银行卡三要素 API 的 N 种验证方法

涨知识！细数银行卡三要素 API 的 N 种验证方法

引言 银行卡三要素验证 API 是一种基于姓名、身份证号码和银行卡号等三种信息的验证服务&#xff0c;主要用于绑定银行卡时校验银行卡是否为该身份信息所有、手机号是否为银行卡绑定手机号。 银行卡三要素 API 的验证方法 银行卡三要素 API 的验证原理是通过与银行或银联网络…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023