【React系列】react-router

news2024/11/27 2:49:53

本文来自#React系列教程：https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg5MDAzNzkwNA==&action=getalbum&album_id=1566025152667107329)

一. 认识react-router

1.2. 前端路由原理

前端路由是如何做到URL和内容进行映射呢？监听URL的改变。

URL 的 hash

  • URL的hash也就是锚点(#), 本质上是改变window.location的href属性；
  • 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新；
<div id="app">
  <a href="#/home">home</a>
  <a href="#/about">about</a>
  <div class="router-view"></div>
</div>

<script>
  // 1.获取router-view
  const routerViewEl = document.querySelector(".router-view");

  // 2.监听hashchange
  window.addEventListener("hashchange", () => {
    switch(location.hash) {
      case "#/home":
        routerViewEl.innerHTML = "home";
        break;
      case "#/about":
        routerViewEl.innerHTML = "about";
        break;
      default:
        routerViewEl.innerHTML = "default";
    }
  })
</script>

hash的优势就是兼容性更好，在老版IE中都可以运行，但是缺陷是有一个#，显得不像一个真实的路径。

HTML5 的 History

history接口是 HTML5 新增的, 它有六种模式改变URL而不刷新页面：

  • replaceState：替换原来的路径；
  • pushState：使用新的路径；
  • popState：路径的回退；
  • go：向前或向后改变路径；
  • forword：向前改变路径；
  • back：向后改变路径；

我们这里来简单演示几个方法：

<div id="app">
  <a href="/home">home</a>
  <a href="/about">about</a>
  <div class="router-view"></div>
</div>

<script>
  // 1.获取router-view
  const routerViewEl = document.querySelector(".router-view");

  // 2.监听所有的a元素
  const aEls = document.getElementsByTagName("a");
  for (let aEl of aEls) {
    aEl.addEventListener("click", (e) => {
      e.preventDefault();
      const href = aEl.getAttribute("href");
      console.log(href);
      history.pushState({}, "", href);
      historyChange();
    })
  }

  // 3.监听popstate和go操作
  window.addEventListener("popstate", historyChange);
  window.addEventListener("go", historyChange);

  // 4.执行设置页面操作
  function historyChange() {
    switch(location.pathname) {
      case "/home":
        routerViewEl.innerHTML = "home";
        break;
      case "/about":
        routerViewEl.innerHTML = "about";
        break;
      default:
        routerViewEl.innerHTML = "default";
    }
  }

</script>

1.3. react-router

目前前端流行的三大框架, 都有自己的路由实现:

  • Angular的ngRouter
  • React的ReactRouter
  • Vue的vue-router

React Router的版本4开始，路由不再集中在一个包中进行管理了：

  • react-router是router的核心部分代码；
  • react-router-dom是用于浏览器的；
  • react-router-native是用于原生应用的；

目前我们使用最新的React Router版本是v5的版本：

  • 实际上v4的版本和v5的版本差异并不大；

安装react-router：

yarn add react-router-dom
  • 安装react-router-dom会自动帮助我们安装react-router的依赖；

二. react-router基本使用

2.1. Router基本使用

react-router最主要的API是给我们提供的一些组件：

  • BrowserRouter或HashRouter
    • Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件；
    • BrowserRouter使用history模式；
    • HashRouter使用hash模式；
  • Link和NavLink：
    • 通常路径的跳转是使用Link组件，最终会被渲染成a元素；
    • NavLink是在Link基础之上增加了一些样式属性（后续学习）；
    • to属性：Link中最重要的属性，用于设置跳转到的路径；
  • Route：
    • Route用于路径的匹配；
    • path属性：用于设置匹配到的路径；
    • component属性：设置匹配到路径后，渲染的组件；
    • exact：精准匹配，只有精准匹配到完全一致的路径，才会渲染对应的组件；

在App中进行如下演练：

import React, { PureComponent } from 'react';

import { BrowserRouter, Route, Link } from 'react-router-dom';

import Home from './pages/home';
import About from './pages/about';
import Profile from './pages/profile';

export default class App extends PureComponent {
  render() {
    return (
      <BrowserRouter>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <Link to="/profile">我的</Link>

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/profile" component={Profile} />
      </BrowserRouter>
    )
  }
}

在这里插入图片描述

2.2. NavLink的使用

路径选中时，对应的a元素变为红色

这个时候，我们要使用NavLink组件来替代Link组件：

  • activeStyle：活跃时（匹配时）的样式；
  • activeClassName：活跃时添加的class；
  • exact：是否精准匹配；

先演示activeStyle：

<NavLink to="/" activeStyle={{color: "red"}}>首页</NavLink>
<NavLink to="/about" activeStyle={{color: "red"}}>关于</NavLink>
<NavLink to="/profile" activeStyle={{color: "red"}}>我的</NavLink>

但是，我们会发现在选中about或profile时，第一个也会变成红色：

  • 原因是/路径也匹配到了/about或/profile；
  • 这个时候，我们可以在第一个NavLink中添加上exact属性；
<NavLink exact to="/" activeStyle={{color: "red"}}>首页</NavLink>

默认的activeClassName：

  • 事实上在默认匹配成功时，NavLink就会添加上一个动态的active class；
  • 所以我们也可以直接编写样式
a.active {
  color: red;
}

当然，如果你担心这个class在其他地方被使用了，出现样式的层叠，也可以自定义class

<NavLink exact to="/" activeClassName="link-active">首页</NavLink>
<NavLink to="/about" activeClassName="link-active">关于</NavLink>
<NavLink to="/profile" activeClassName="link-active">我的</NavLink>

在这里插入图片描述

2.3. Switch的作用

我们来看下面的路由规则：

<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/profile" component={Profile} />
<Route path="/:userid" component={User}/>
<Route component={NoMatch}/>
  • 当我们匹配到某一个路径时，我们会发现有一些问题；
  • 比如/about路径匹配到的同时，/:userid也被匹配到了，并且最后的一个NoMatch组件总是被匹配到；
    在这里插入图片描述

原因是什么呢？默认情况下，react-router中只要是路径被匹配到的Route对应的组件都会被渲染；

但是实际开发中，我们往往希望有一种排他的思想：

  • 只要匹配到了第一个，那么后面的就不应该继续匹配了；
  • 这个时候我们可以使用Switch来将所有的Route进行包裹即可；
<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/profile" component={Profile} />
  <Route path="/:userid" component={User} />
  <Route component={NoMatch} />
</Switch>

2.3. Redirect的使用

Redirect用于路由的重定向，当这个组件出现时，就会执行跳转到对应的to路径中：

我们这里使用这个的一个案例：

  • 用户跳转到User界面；
  • 但是在User界面有一个isLogin用于记录用户是否登录：
    • true：那么显示用户的名称；
    • false：直接重定向到登录界面；

App.js中提前定义好Login页面对应的Route：

<Switch>
  ...其他Route
  <Route path="/login" component={Login} />
  <Route component={NoMatch} />
</Switch>

在User.js中写上对应的逻辑代码：

import React, { PureComponent } from 'react'
import { Redirect } from 'react-router-dom';

export default class User extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      isLogin: false
    }
  }

  render() {
    return this.state.isLogin ? (
      <div>
        <h2>User</h2>
        <h2>用户名: coderwhy</h2>
      </div>
    ): <Redirect to="/login"/>
  }
}

三. react-router高级使用

3.1. 路由嵌套

在开发中，路由之间是存在嵌套关系的。

这里我们假设about页面中有两个页面内容：

  • 商品列表和消息列表；
  • 点击不同的链接可以跳转到不同的地方，显示不同的内容；
import React, { PureComponent } from 'react';

import { Route, Switch, Link } from 'react-router-dom';

function AboutProduct(props) {
  return (
    <ul>
      <li>商品列表1</li>
      <li>商品列表2</li>
      <li>商品列表3</li>
    </ul>
  )
}

function AboutMessage(props) {
  return (
    <ul>
      <li>消息列表1</li>
      <li>消息列表2</li>
      <li>消息列表3</li>
    </ul>
  )
}

export default class About extends PureComponent {
  render() {
    return (
      <div>
        <Link to="/about">商品</Link>
        <Link to="/about/message">消息</Link>

        <Switch>
          <Route exact path="/about" component={AboutProduct} />
          <Route path="/about/message" component={AboutMessage} />
        </Switch>
      </div>
    )
  }
}

3.2. 手动跳转

目前我们实现的跳转主要是通过Link或者NavLink进行跳转的，实际上我们也可以通过JavaScript代码进行跳转。

但是通过JavaScript代码进行跳转有一个前提：必须获取到history对象。

如何可以获取到history的对象呢？两种方式

  • 方式一：如果该组件是通过路由直接跳转过来的，那么可以直接获取history、location、match对象；
  • 方式二：如果该组件是一个普通渲染的组件，那么不可以直接获取history、location、match对象；

那么如果普通的组件也希望获取对应的对象属性应该怎么做呢？

  • 前面我们学习过高阶组件，可以在组件中添加想要的属性；
  • react-router也是通过高阶组件为我们的组件添加相关的属性的；

如果我们希望在App组件中获取到history对象，必须满足以下两个条件：

  • App组件必须包裹在Router组件之内；
  • App组件使用withRouter高阶组件包裹；

index.js代码修改如下：

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

App.js代码修改如下：

import { Route, Switch, NavLink, withRouter } from 'react-router-dom';
...省略其他的导入代码

class App extends PureComponent {
  render() {
    console.log(this.props.history);

    return (
      <div>
        ...其他代码
        <button onClick={e => this.pushToProfile()}>我的</button>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/profile" component={Profile} />
          <Route path="/:userid" component={User} />
          <Route component={NoMatch} />
        </Switch>
      </div>
    )
  }

  pushToProfile() {
    this.props.history.push("/profile");
  }
}

export default withRouter(App);

源码选读：这里的 history 来自哪里呢？是否和之前使用的 window.history 一样呢？

我们发现withRouter的高阶函数来自react-router-dom：

实际上来自react-router的包；

在这里插入图片描述

withRouter函数：

在这里插入图片描述

history对象来自哪里呢？

  • 实际来自上面代码的context；
    在这里插入图片描述

这个context的值来自哪里呢？

  • 来自于context.Consumer的value中；

在这里插入图片描述

this.props.history来自哪里呢？

  • 来自BrowserRouter或者HashRouter在创建时，传入的值；
  • 又传递给了Router，Router的子组件可以通过该context获取到这个值；

在这里插入图片描述

createBrowserHistory来自哪里呢？

在这里插入图片描述

执行push操作的本质：

在这里插入图片描述

3.3 传递参数

传递参数有三种方式：

  • 动态路由的方式；
  • search传递参数；
  • to传入对象；

动态路由的方式

动态路由的概念指的是路由中的路径并不会固定：

  • 比如/detail的path对应一个组件Detail；
  • 如果我们将path在Route匹配时写成/detail/:id，那么 /detail/abc、/detail/123都可以匹配到该Route，并且进行显示；
  • 这个匹配规则，我们就称之为动态路由；

通常情况下，使用动态路由可以为路由传递参数。

<div>
 ...其他Link
  <NavLink to="/detail/abc123">详情</NavLink>

  <Switch>
    ... 其他Route
    <Route path="/detail/:id" component={Detail}/>
    <Route component={NoMatch} />
  </Switch>
</div>

detail.js的代码如下：

import React, { PureComponent } from 'react'

export default class Detail extends PureComponent {
  render() {
    console.log(this.props.match.params.id);

    return (
      <div>
        <h2>Detail: {this.props.match.params.id}</h2>
      </div>
    )
  }
}
  • 我们可以直接通过match对象中获取id；
  • 这里我们没有使用withRouter，原因是因为Detail本身就是通过路由进行的跳转；

search传递参数

NavLink写法：

<NavLink to="/detail2?name=why&age=18">详情2</NavLink>

<Switch>
  <Route path="/detail2" component={Detail2}/>
</Switch>
  • 我们在跳转的路径中添加了一些query参数；

Detail2中如何获取呢？

  • Detail2中是需要在location中获取search的；
  • 注意：这个search没有被解析，需要我们自己来解析；
import React, { PureComponent } from 'react'

export default class Detail2 extends PureComponent {
  render() {
    console.log(this.props.location.search); // ?name=why&age=18

    return (
      <div>
        <h2>Detail2:</h2>
      </div>
    )
  }
}

to传入对象

to可以直接传入一个对象

<NavLink to={{
    pathname: "/detail2", 
    query: {name: "kobe", age: 30},
    state: {height: 1.98, address: "洛杉矶"},
    search: "?apikey=123"
  }}>
  详情2
</NavLink>

获取参数：

import React, { PureComponent } from 'react'

export default class Detail2 extends PureComponent {
  render() {
    console.log(this.props.location);

    return (
      <div>
        <h2>Detail2:</h2>
      </div>
    )
  }
}

在这里插入图片描述

补充：使用 history.push 如何传递参数

在React中如何使用history.push传递参数主要有三种方式：

第一种如下：

this.props.history.push{
  pathname:'/router/url/send',
  query:{
    'oneFlag':one,
    }
  }

接收情况如下：

this.props.location.query.oneFlag

其路由路径显示：

'#/router/url/send?oneFlag=one'

第二种情况如下：

this.props.history.push{
 pathname:'/router/url/send',
 state:{
  'oneFlag':one,
  }
}

接收情况如下：

this.props.location.state.oneFlag // one

其路由显示:

'#/router/url/send'

第三种情况需要在配置路由时，将路由配置为rest格式路由，

  {
    path: '/device/detail/:id',
    component: DeviceDetail,
    pageConfig: {
      title: '设备详情',
      auth: ['admin'],
    },
  },

传递参数时：

<Button text type="primary" 
	onClick={() => history.push({ pathname: `/device/detail/${record.id}` })}>
   详情
</Button>

参数接收时：

 const { id } = props.match.params;

第一种和第三种，在目标路由刷新后，参数还可以取到，但是第二种页面刷新后，参数就取不到了，第二种适合开发winform类的应用。

第一种和三种在使用时要注意监听参数的变化，不然路由回退，再次进图另外参数的页面，组件不会重新渲染，用hook组件开发的话，需要用useEffect来监听参数变化。

四. react-router-config

目前我们所有的路由定义都是直接使用Route组件，并且添加属性来完成的。

但是这样的方式会让路由变得非常混乱，我们希望将所有的路由配置放到一个地方进行集中管理：

  • 这个时候可以使用react-router-config来完成；

安装react-router-config：

yarn add react-router-config

常见router/index.js文件：

import Home from "../pages/home";
import About, { AboutMessage, AboutProduct } from "../pages/about";
import Profile from "../pages/profile";
import Login from "../pages/login";
import User from "../pages/user";
import Detail from "../pages/detail";
import Detail2 from "../pages/detail2";
import NoMatch from "../pages/nomatch";

const routes = [
  {
    path: "/",
    exact: true,
    component: Home
  },
  {
    path: "/about",
    component: About,
    routes: [
      {
        path: "/about",
        exact: true,
        component: AboutProduct
      },
      {
        path: "/about/message",
        component: AboutMessage
      },
    ]
  },
  {
    path: "/profile",
    component: Profile
  },
  {
    path: "/login",
    component: Login
  },
  {
    path: "/user",
    component: User
  },
  {
    path: "/detail/:id",
    component: Detail
  },
  {
    path: "/detail2",
    component: Detail2
  },
  {
    component: NoMatch
  }
];

export default routes;

将之前的Switch配置，换成react-router-config中提供的renderRoutes函数：

{renderRoutes(routes)}

{/* <Switch>
     <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/profile" component={Profile} />
      <Route path="/user" component={User} />
      <Route path="/login" component={Login} />
      <Route path="/detail/:id" component={Detail}/>
      <Route path="/detail2" component={Detail2}/>
      <Route component={NoMatch} />
 </Switch> */}

如果是子组件中，需要路由跳转，那么需要在子组件中使用renderRoutes函数：

  • 在跳转到的路由组件中会多一个 this.props.route 属性；
  • 该route属性代表当前跳转到的路由对象，可以通过该属性获取到 routes；
export default class About extends PureComponent {
  render() {
    return (
      <div>
        <Link to="/about">商品</Link>
        <Link to="/about/message">消息</Link>

        {renderRoutes(this.props.route.routes)}
      </div>
    )
  }
}

实际上react-router-config中还提供了一个matchRoutes辅助函数：

  • matchRoutes(routes, pathname)传入一个路由对象数组，获取所有匹配的路径；
const routes = matchRoutes(this.props.route.routes, "/about");
console.log(routes);

查看renderRoutes的源码也是非常简单的：

在这里插入图片描述

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

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

相关文章

Halcon粘连木材图像的目标分割计数

Halcon粘连木材图像的目标分割计数

Halcon粘连木材图像的目标分割计数 文章目录 Halcon粘连木材图像的目标分割计数1. 提取面积较小区域2. 分割较大区域3. 区域合并与计数 本文以一个实际场景图片为例&#xff0c;介绍阈值处理与形态学计算的应用。案例图像如图所示,图&#xff08;a&#xff09;为输入的原始图像…
阅读更多...
uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -小程序端TabBar搭建

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -小程序端TabBar搭建

锋哥原创的uniapp微信小程序投票系统实战&#xff1a; uniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )共计21条视频…
阅读更多...
突破技术边界：R与jsonlite库探秘www.snapchat.com的数据之旅

突破技术边界：R与jsonlite库探秘www.snapchat.com的数据之旅

概述 Snapchat是一款流行的社交媒体应用&#xff0c;它允许用户发送和接收带有滤镜和贴纸的照片和视频&#xff0c;以及创建和观看故事和发现内容。Snapchat的数据是非常有价值的&#xff0c;因为它可以反映用户的行为、偏好和趋势。然而&#xff0c;Snapchat的数据并不容易获…
阅读更多...
从0开始python学习-40.通过正则表达式/json进行接口关联

从0开始python学习-40.通过正则表达式/json进行接口关联

目录 1. 正则表达式&#xff1a;使用re库&#xff08;需安装-pip install re&#xff09;&#xff0c;只能提取字符串的数据。 1.1 re.seach&#xff1a;提取一个值&#xff0c;得到的是一个对象&#xff0c;通过下标group(1)取值&#xff0c;如果没有匹配到值则返回None 1.…
阅读更多...
优化企业运营，深入探索SAP库存管理解决方案

优化企业运营，深入探索SAP库存管理解决方案

SAP库存管理是SAP提供的一款领先的企业库存管理解决方案。它致力于帮助企业实现对库存的全面掌控&#xff0c;优化供应链管理&#xff0c;降低库存成本&#xff0c;提高客户满意度。这个功能强大的系统为企业提供了丰富的仓储管理功能&#xff0c;如库存盘点、物料追踪、供应商…
阅读更多...
WPF DatePicker与Calendar的使用和样式修改

WPF DatePicker与Calendar的使用和样式修改

什么是DatePicker&#xff0c;Calendar Calendar&#xff1a;日历&#xff08;显示年月日视图控件&#xff09;DatePicker&#xff1a;日期选择器&#xff08;是一个更小的控件&#xff0c;点击控件时才会弹出一个日历&#xff09; Calendar使用 常用属性 DisplayMode&#…
阅读更多...
MacOS - 苹果电脑程序还能正常启动，但图标消失不见了~

MacOS - 苹果电脑程序还能正常启动，但图标消失不见了~

问题描述 网上有一些解决方案说是 killall Finder 命令&#xff0c;重置 Docker 等等&#xff0c;但是发现还是不行&#xff0c;于是必杀技…… 解决方案 方案一、删除该 App&#xff0c;重装即可方案二、如果懒得重装&#xff0c;可以在 Finder 中找到对应的应用程序&#xf…
阅读更多...
FPGA高端项目：纯verilog的 10G-UDP 高速协议栈，提供7套工程源码和技术支持

FPGA高端项目：纯verilog的 10G-UDP 高速协议栈，提供7套工程源码和技术支持

目录 1、前言免责声明更新说明 2、相关方案推荐我这里已有的以太网方案本协议栈的千兆网UDP版本1G 千兆网 TCP-->服务器 方案1G 千兆网 TCP-->客户端 方案10G 万兆网 TCP-->服务器客户端 方案 3、该UDP协议栈性能4、详细设计方案设计架构框图网络调试助手GT资源使用GT…
阅读更多...
1.3 金融数据可视化

1.3 金融数据可视化

跳转到根目录&#xff1a;知行合一&#xff1a;投资篇 已完成&#xff1a; 1.1 编程基础   1.1.1 投资-编程基础-numpy   1.1.2 投资-编程基础-pandas 1.2 金融数据处理 1.3 金融数据可视化 文章目录 1. 金融数据可视化1.1. matplotlib1.1.1. 沪深300走势图1.1.2. 日线均线…
阅读更多...
06-微服务-SpringAMQP

06-微服务-SpringAMQP

SpringAMQP SpringAMQP是基于RabbitMQ封装的一套模板&#xff0c;并且还利用SpringBoot对其实现了自动装配&#xff0c;使用起来非常方便。 SpringAmqp的官方地址&#xff1a;https://spring.io/projects/spring-amqp SpringAMQP提供了三个功能&#xff1a; 自动声明队列、交…
阅读更多...
力扣刷题-二叉树-验证二叉搜索树

力扣刷题-二叉树-验证二叉搜索树

98.验证二叉搜索树 给定一个二叉树&#xff0c;判断其是否是一个有效的二叉搜索树。 假设一个二叉搜索树具有如下特征&#xff1a; 节点的左子树只包含小于当前节点的数。节点的右子树只包含大于当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。 思路 中序遍历下&…
阅读更多...
【中小型企业网络实战案例 八】配置映射内网服务器和公网多出口、业务测试和保存配置

【中小型企业网络实战案例 八】配置映射内网服务器和公网多出口、业务测试和保存配置

相关学习文章&#xff1a; 【中小型企业网络实战案例 一】规划、需求和基本配置 【中小型企业网络实战案例 二】配置网络互连互通【中小型企业网络实战案例 三】配置DHCP动态分配地址 【中小型企业网络实战案例 四】配置OSPF动态路由协议【中小型企业网络实战案例 五】配置可…
阅读更多...
Python重温笔记番外篇

Python重温笔记番外篇

1. 写在前面 今天这篇文章是python重温笔记的番外&#xff0c;整理一些面试中的问题以及遇到过的一些坑&#xff0c; 正好借着这个机会把前面的知识进行一个串联&#xff0c; 要不然这些知识很容易就会遗忘&#xff0c; 毕竟知识多而又不太容易常用到。 涉及到的知识包括列表推…
阅读更多...
单片机快速入门

单片机快速入门

参考连接&#xff1a; 安装MinGW-64&#xff08;在win10上搭建C/C开发环境&#xff09;https://zhuanlan.zhihu.com/p/85429160MinGW-64; 链接&#xff1a;https://pan.baidu.com/s/1oE1FmjyK7aJPnDC8vASmCg?pwdy1mz 提取码&#xff1a;y1mz --来自百度网盘超级会员V7的分享C…
阅读更多...
Python打印Python环境、PyTorch和CUDA版本、GPU数量名称等信息

Python打印Python环境、PyTorch和CUDA版本、GPU数量名称等信息

代码&#xff1a; import torch import platformgpu_num torch.cuda.device_count() torch_version torch.__version__ python_version platform.python_version()print("Python Version: Python %s" % python_version) print("PyTorch Version: %s" %…
阅读更多...
[Javaweb/LayUI/上机考试作业/开源]学生/图书/课程/仓库等管理系统六合一基础功能通用模板

[Javaweb/LayUI/上机考试作业/开源]学生/图书/课程/仓库等管理系统六合一基础功能通用模板

展示 考试要求 给定用户表和六张图书/教师/顾客/仓库....的表&#xff08;随机给每人抽选&#xff09;&#xff0c;要求实现用户登录注册&#xff0c;异步更新&#xff0c;对物品增删改查&#xff0c;精确/模糊查询等。 环境 tomcat 9 mysql 8 java 17 项目结构 项目类图 写前…
阅读更多...
分布式【zookeeper面试题23连问】

分布式【zookeeper面试题23连问】

1. ZooKeeper是什么&#xff1f; ZooKeeper是一个分布式的&#xff0c;开放源码的分布式应用程序协调服务&#xff0c;是Google的Chubby一个开源的实现&#xff0c;它是集群的管理者&#xff0c;监视着集群中各个节点的状态根据节点提交的反馈进行下一步合理操作。最终&#x…
阅读更多...
Prometheus二进制安装包部署

Prometheus二进制安装包部署

Prometheus安装部署 一&#xff0c;下载安装包并解压 **下载地址&#xff1a;**https://github.com/prometheus/prometheus/releases 因为服务器上下载速度太慢&#xff0c;所以可以提前在物理机上下载上传到服务器&#xff0c;本次安装使用的版本为&#xff1a;prometheus-…
阅读更多...
深度神经网络中的混合精度训练

深度神经网络中的混合精度训练

Mixed-Precision Training of Deep Neural Networks | NVIDIA Technical Blog 目录 混合精度成功训练的技术 FP32 累加 损失缩放 loss scaling FP32 Master Copy of Weights 混合精度训练迭代过程 AMP混合精度训练介绍 FP16和FP32的区别 FP16的优势 FP16的问题 解决P…
阅读更多...
shell sshpass 主机交互 在另外一台主机上执行某个命令 批量管理主机 以及一些案例

shell sshpass 主机交互 在另外一台主机上执行某个命令 批量管理主机 以及一些案例

目录 作用安装 sshpasssshpass 用法在远程主机执行某个命令 案例批量传输密匙批量拷贝文件批量修改密码 作用 就是用一台主机 控制另外一台主机免交互任务管理工具方便批量管理主机使用方法就是在ssh 前边加一个 sshpass 安装 sshpass # 安装 sshpass yum -y install sshpas…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023