[尚硅谷React笔记]——第9章 ReactRouter6

目录：

  1. 课程说明
  2. 一级路由
  3. 重定向
  4. NavLink高亮
  5. useRoutes路由表
  6. 嵌套路由
  7. 路由的params参数
  8. 路由的search参数
  9. 路由的state参数
  10. 编程式路由导航
  11. useRouterContext
  12. useNavigationType
  13. useOutlet
  14. useResolvedPath()
  15. 总结
  16. 项目地址

1.课程说明

概述

  • React Router以三个不同的包发布到npm 上，它们分别为:
    • 1.react-router:路由的核心库，提供了很多的:组件、钩子。
    • 2.react-router-dom:包含react-router所有内容，并添加一些专门用于DOM的组件，例如<BrowserRouter>等。
    • 3. react-router-native:包括react-router所有内容，并添加一些专门用于ReactNative的API例如:<NativeRouter>等。
  • 2.与React Router 5.x版本相比，改变了什么?
    • 1.内置组件的变化:移除<Switch/>，新增<Routes/>等。
    • ⒉.语法的变化: component={About]变为element={<About/>}等。
    • 3.新增多个hook: useParams 、useNavigate 、useMatch 等。
    • 4.官方明确推荐函数式组件了!!!

2.一级路由 

About.jsx

import React from 'react';function About(props) {return (<div><h3>我是About的内容</h3></div>);
}export default About;

Home.jsx

import React from 'react';function Home(props) {return (<div><h3>我是Home的内容</h3></div>);
}export default Home;

 App.js

import React from 'react';
import {NavLink, Routes, Route} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";function App(props) {return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group"><NavLink className="list-group-item" to="/about">About</NavLink><NavLink className="list-group-item" to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><Routes><Route path="/about" element={<About></About>}></Route><Route path="/home" element={<Home></Home>}></Route></Routes></div></div></div></div></div>);
}export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {BrowserRouter} from "react-router-dom";const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<BrowserRouter><App/></BrowserRouter>
);

3.重定向

App.js

import React from 'react';
import {NavLink, Routes, Route, Navigate} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";function App(props) {return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group"><NavLink className="list-group-item" to="/about">About</NavLink><NavLink className="list-group-item" to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><Routes><Route path="/ABOUT" caseSensitive element={<About></About>}></Route><Route path="/home" element={<Home></Home>}></Route><Route path="/" element={<Navigate to="/about"/>}></Route></Routes></div></div></div></div></div>);
}export default App;

 Home.jsx

import React, {useState} from 'react';
import {Navigate} from "react-router-dom";function Home(props) {const [sum, setSum] = useState(1)return (<div><h3>我是Home的内容</h3>{sum === 2 ? <Navigate to="/about/" replace={true}/> : <h4>当前sum的值是：{sum}</h4>}<button onClick={() => setSum(2)}>点我将sum变为2</button></div>);
}export default Home;

4.NavLink高亮

App.js

import React from 'react';
import {NavLink, Routes, Route, Navigate} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";function App(props) {function computedClassName({isActive}) {return isActive ? 'list-group-item atguigu' : 'list-group-item'}return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group"><NavLink className={computedClassName} to="/about">About</NavLink><NavLink className={computedClassName} to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><Routes><Route path="/about" element={<About></About>}></Route><Route path="/home" element={<Home></Home>}></Route><Route path="/" element={<Navigate to="/about"/>}></Route></Routes></div></div></div></div></div>);
}export default App;

 About.jsx

import React from 'react';function About(props) {return (<div><h3>我是About的内容</h3></div>);
}export default About;

Home.jsx

import React from 'react';function Home(props) {return (<div><h3>我是Home的内容</h3></div>);
}export default Home;

5.useRoutes路由表

route/index.js

import About from "../pages/About";
import Home from "../pages/Home";
import {Navigate} from "react-router-dom";export default [{path: '/about',element: <About></About>},{path: '/home',element: <Home></Home>},{path: '/',element: <Navigate to="/about"></Navigate>},
]

 App.js

import React from 'react';
import {NavLink, useRoutes} from "react-router-dom";
import routes from "./routes";function App(props) {const element = useRoutes(routes)return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group"><NavLink className="list-group-item" to="/about">About</NavLink><NavLink className="list-group-item" to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body">{/*<Routes>*/}{/*    <Route path="/about" element={<About></About>}></Route>*/}{/*    <Route path="/home" element={<Home></Home>}></Route>*/}{/*    <Route path="/" element={<Navigate to="/about"/>}></Route>*/}{/*</Routes>*/}{element}</div></div></div></div></div>);
}export default App;

 6.嵌套路由

 App.js

import React from 'react';
import {NavLink, useRoutes} from "react-router-dom";
import routes from "./routes";function App(props) {const element = useRoutes(routes)return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group"><NavLink className="list-group-item" to="/about">About</NavLink><NavLink className="list-group-item" end to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body">{/*<Routes>*/}{/*    <Route path="/about" element={<About></About>}></Route>*/}{/*    <Route path="/home" element={<Home></Home>}></Route>*/}{/*    <Route path="/" element={<Navigate to="/about"/>}></Route>*/}{/*</Routes>*/}{element}</div></div></div></div></div>);
}export default App;

route/index.js

import About from "../pages/About";
import Home from "../pages/Home";
import {Navigate} from "react-router-dom";
import News from "../pages/News";
import Message from "../pages/Message";export default [{path: '/about',element: <About></About>},{path: '/home',element: <Home></Home>,children: [{path: 'news',element: <News></News>},{path: 'message',element: <Message></Message>}]},{path: '/',element: <Navigate to="/about"></Navigate>},
]

News.jsx

import React from 'react';function News(props) {return (<div><ul><li>news001</li><li>news002</li><li>news003</li></ul></div>);
}export default News;

Message.jsx

import React from 'react';function Message(props) {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>);
}export default Message;

Home.jsx

import React from 'react';
import {NavLink, Outlet} from "react-router-dom";function Home(props) {return (<div><h2>Home组件内容</h2><div><ul className="nav nav-tabs"><li><NavLink className="list-group-item" to="news">News</NavLink>{/*<NavLink className="list-group-item" to="./news">News</NavLink>*/}{/*<NavLink className="list-group-item" to="/home/news">News</NavLink>*/}</li><li><NavLink className="list-group-item " to="message">Message</NavLink>{/*<NavLink className="list-group-item " to="./message">Message</NavLink>*/}{/*<NavLink className="list-group-item " to="/home/message">Message</NavLink>*/}</li></ul><Outlet></Outlet></div></div>);
}export default Home;

About.jsx

import React from 'react';function About(props) {return (<div><h3>我是About的内容</h3></div>);
}export default About;

7.路由的params参数

Detail.jsx

import React from 'react';
import {useMatch, useParams} from "react-router-dom";function Detail(props) {const {id, title, content} = useParams()const x = useMatch('/home/message/detail/:id/:title/:content')console.log(x)return (<div><ul><li>消息编号：{id}</li><li>消息标题：{title}</li><li>消息内容:{content}</li></ul></div>);
}export default Detail;

Message.jsx

import React, {useState} from 'react';
import {Link, Outlet} from "react-router-dom";function Message(props) {const [messages] = useState([{id: '001', title: '消息1', content: '锄禾日当午'},{id: '002', title: '消息2', content: '汗滴禾下土'},{id: '003', title: '消息3', content: '谁知盘中餐'},{id: '004', title: '消息4', content: '粒粒皆辛苦'},])return (<div><ul>{messages.map((m) => {return (<li key={m.id}><Link to={`detail/${m.id}/${m.title}/${m.content}`}>{m.title}</Link>&nbsp;&nbsp;</li>)})}</ul><hr></hr><Outlet></Outlet></div>);
}export default Message;

routes/index.js

import About from "../pages/About";
import Home from "../pages/Home";
import {Navigate} from "react-router-dom";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";export default [{path: '/about',element: <About></About>},{path: '/home',element: <Home></Home>,children: [{path: 'news',element: <News></News>},{path: 'message',element: <Message></Message>,children: [{path: 'detail/:id/:title/:content',element: <Detail></Detail>}]}]},{path: '/',element: <Navigate to="/about"></Navigate>},
]

8.路由的search参数

Detail.jsx

import React from 'react';
import {useLocation, useSearchParams} from "react-router-dom";function Detail(props) {const [search, setSearch] = useSearchParams()const id = search.get('id')const title = search.get('title')const content = search.get('content')const x = useLocation()console.log(x)return (<div><ul><li><button onClick={() => setSearch('id=008&title=哈哈&content=嘻嘻')}>点我更新一下收到的search参数</button></li><li>消息编号：{id}</li><li>消息标题：{title}</li><li>消息内容：{content}</li></ul></div>);
}export default Detail;

Message.jsx

import React, {useState} from 'react';
import {Link, Outlet} from "react-router-dom";function Message(props) {const [messages] = useState([{id: '001', title: '消息1', content: '锄禾日当午'},{id: '002', title: '消息2', content: '汗滴禾下土'},{id: '003', title: '消息3', content: '谁知盘中餐'},{id: '004', title: '消息4', content: '粒粒皆辛苦'},])return (<div><ul>{messages.map((m) => {return (<li key={m.id}>{/*<Link to={`detail/${m.id}/${m.title}/${m.content}`}>{m.title}</Link>&nbsp;&nbsp;*/}<Link to={`detail?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link>&nbsp;&nbsp;</li>)})}</ul><hr></hr><Outlet></Outlet></div>);
}export default Message;

index.js

import About from "../pages/About";
import Home from "../pages/Home";
import {Navigate} from "react-router-dom";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";export default [{path: '/about',element: <About></About>},{path: '/home',element: <Home></Home>,children: [{path: 'news',element: <News></News>},{path: 'message',element: <Message></Message>,children: [{path: 'detail',element: <Detail></Detail>}]}]},{path: '/',element: <Navigate to="/about"></Navigate>},
]

9.路由的state参数

Detail.jsx

import React from 'react';
import {useLocation} from "react-router-dom";function Detail(props) {const {state: {id, title, content}} = useLocation()return (<div><ul><li>消息编号：{id}</li><li>消息标题：{title}</li><li>消息内容：{content}</li></ul></div>);
}export default Detail;

Message.jsx

import React, {useState} from 'react';
import {Link, Outlet} from "react-router-dom";function Message(props) {const [messages] = useState([{id: '001', title: '消息1', content: '锄禾日当午'},{id: '002', title: '消息2', content: '汗滴禾下土'},{id: '003', title: '消息3', content: '谁知盘中餐'},{id: '004', title: '消息4', content: '粒粒皆辛苦'},])return (<div><ul>{messages.map((m) => {return (<li key={m.id}>{/*<Link to={`detail/${m.id}/${m.title}/${m.content}`}>{m.title}</Link>&nbsp;&nbsp;*/}{/*<Link to={`detail?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link>*/}<Link to="detail"state={{id: m.id, title: m.title, content: m.content}}>{m.title}</Link>&nbsp;&nbsp;</li>)})}</ul><hr></hr><Outlet></Outlet></div>);
}export default Message;

routes/index.js

import About from "../pages/About";
import Home from "../pages/Home";
import {Navigate} from "react-router-dom";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";export default [{path: '/about',element: <About></About>},{path: '/home',element: <Home></Home>,children: [{path: 'news',element: <News></News>},{path: 'message',element: <Message></Message>,children: [{path: 'detail',element: <Detail></Detail>}]}]},{path: '/',element: <Navigate to="/about"></Navigate>},
]

10.编程式路由导航

Header.jsx

import React from 'react';
import {useNavigate} from "react-router-dom";function Header(props) {const navigate = useNavigate()function back() {navigate(-1)}function forward() {navigate(1)}return (<div><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2><button onClick={back}>后退</button><button onClick={forward}>前进</button></div></div></div>);
}export default Header;

Message.jsx

import React, {useState} from 'react';
import {Link, Outlet, useNavigate} from "react-router-dom";function Message(props) {const [messages] = useState([{id: '001', title: '消息1', content: '锄禾日当午'},{id: '002', title: '消息2', content: '汗滴禾下土'},{id: '003', title: '消息3', content: '谁知盘中餐'},{id: '004', title: '消息4', content: '粒粒皆辛苦'},])const navigate = useNavigate()function showDetail(m) {navigate('detail', {replace: false, state: {id: m.id, title: m.title, content: m.content}})}return (<div><ul>{messages.map((m) => {return (<li key={m.id}>{/*<Link to={`detail/${m.id}/${m.title}/${m.content}`}>{m.title}</Link>&nbsp;&nbsp;*/}{/*<Link to={`detail?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link>*/}<Link to="detail"state={{id: m.id, title: m.title, content: m.content}}>{m.title}</Link><button onClick={() => showDetail(m)}>查看详情</button></li>)})}</ul><hr></hr><Outlet></Outlet></div>);
}export default Message;

App.js

import React from 'react';
import {NavLink, useRoutes} from "react-router-dom";
import routes from "./routes";
import Header from "./components/Header";function App(props) {const element = useRoutes(routes)return (<div><div className="row"><Header></Header></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group"><NavLink className="list-group-item" to="/about">About</NavLink><NavLink className="list-group-item" to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body">{/*<Routes>*/}{/*    <Route path="/about" element={<About></About>}></Route>*/}{/*    <Route path="/home" element={<Home></Home>}></Route>*/}{/*    <Route path="/" element={<Navigate to="/about"/>}></Route>*/}{/*</Routes>*/}{element}</div></div></div></div></div>);
}export default App;

11.useRouterContext

  • uselnRouterContext()
  • 作用:如果组件在<Router>的上下文中呈现，则useInRouterContext钩子返回true，否则返回false。

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {BrowserRouter} from "react-router-dom";
import Demo from "./components/Demo";const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<Demo></Demo>,<BrowserRouter><App/></BrowserRouter>
);

 App.js

import React from 'react';
import {NavLink, useInRouterContext, useRoutes} from "react-router-dom";
import routes from "./routes";
import Header from "./components/Header";function App(props) {const element = useRoutes(routes)console.log('@',useInRouterContext())return (<div><div className="row"><Header></Header></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group"><NavLink className="list-group-item" to="/about">About</NavLink><NavLink className="list-group-item" to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body">{/*<Routes>*/}{/*    <Route path="/about" element={<About></About>}></Route>*/}{/*    <Route path="/home" element={<Home></Home>}></Route>*/}{/*    <Route path="/" element={<Navigate to="/about"/>}></Route>*/}{/*</Routes>*/}{element}</div></div></div></div></div>);
}export default App;

Demo.jsx

import React from 'react';
import {useInRouterContext} from "react-router-dom";function Demo(props) {console.log(useInRouterContext())return (<div>demo</div>);
}export default Demo;

 Header.jsx

import React from 'react';
import {useInRouterContext, useNavigate} from "react-router-dom";function Header(props) {const navigate = useNavigate()console.log(useInRouterContext())function back() {navigate(-1)}function forward() {navigate(1)}return (<div><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2><button onClick={back}>后退</button><button onClick={forward}>前进</button></div></div></div>);
}export default Header;

12.useNavigationType

  • useNavigationType()
  • 作用:返回当前的导航类型（(用户是如何来到当前页面的)。
  • 返回值:POP、PUSH、REPLACE]。
  • 备注:PoP是指在浏览器中直接打开了这个路由组件（刷新页面)。

 News.jsx

import React from 'react';
import {useNavigationType} from "react-router-dom";function News(props) {console.log(useNavigationType())return (<div><ul><li>news001</li><li>news002</li><li>news003</li></ul></div>);
}export default News;

 

13.useOutlet

  • useOutlet()
  • 作用:用来呈现当前组件中要渲染的嵌套路由。
  • 示例代码:
const result = useoutlet( )
console.log( result)
//如果嵌套路由没有挂载,则result为null
//如果嵌套路由已经挂载,则展示嵌套的路由对象

Home.jsx

import React from 'react';
import {NavLink, Outlet, useOutlet} from "react-router-dom";function Home(props) {console.log(useOutlet())return (<div><h2>Home组件内容</h2><div><ul className="nav nav-tabs"><li><NavLink className="list-group-item" to="news">News</NavLink></li><li><NavLink className="list-group-item " to="message">Message</NavLink></li></ul><Outlet></Outlet></div></div>);
}export default Home;

 

14.useResolvedPath()

  • useResolvedPath()
  • 作用:给定一个URL值，解析其中的: path、search、hash值。 

News.jsx

import React from 'react';
import {useResolvedPath} from "react-router-dom";function News(props) {console.log(useResolvedPath('/user?id=001&name=tom#qwe'))return (<div><ul><li>news001</li><li>news002</li><li>news003</li></ul></div>);
}export default News;

15.总结：

2.Component

1. <BrowserRouter>

  • 说明:<BrowserRouter>用于包裹整个应用。
  • 示例代码:
  • import React from "react";
import ReactDOM from "react-dom" ;
import { BrowserRouter } from "react-router-dom" ;ReactDOM.render(
<BrowserRouter>
{/*整体结构（通常为App组件）*/}
</BrowserRouter> ,root
);

2.<HashRouter>

  • 说明:作用与<BrowserRouter>一样，但<HashRouter>修改的是地址栏的hash值。
  • 备注:6.x版本中<HashRouter>、<BrowserRouter>的用法与5.x相同。

3.<Routes/> 与<Route/>

  1. v6版本中移出了先前的<Switch>，引入了新的替代者:<Routes>。
  2. <Routes>和<Route>要配合使用，且必须要用<Routes>包裹<Route>。
  3. <Route>相当于一个if语句，如果其路径与当前URL匹配，则呈现其对应的组件。 
  4. <Route caseSensitive>属性用于指定:匹配时是否区分大小写(默认为false)。
  5. 当URL发生变化时，<Routes>都会查看其所有子<Route>元素以找到最佳匹配并呈现组件。
  6. <cRoute也可以嵌套使用，且可配合useRoutes()配置“路由表”，但需要通过<outlet>组件来渲染其子路由。
  7. 示例代码:

4.<Link>

  • 作用:修改URL，且不发送网络请求(路由链接)。

5.<NavLink>

  • 作用:与<Link>组件类似，且可实现导航的“高亮"效果。
  • 示例代码: 

 

6.<Navigate>

  • 作用:只要<Navigate>组件被渲染，就会修改路径，切换视图。
  • replace属性用于控制跳转模式(push或 replace，默认是push) 。
  • 示例代码: 

 

7. <outlet>

  • 当<Route>产生嵌套时，渲染其对应的后续子路由。
3.Hooks

1.useRoutes()

  • 作用:根据路由表，动态创建<Routes>和<Route> 。

2.useNavigate

  • 作用:返回一个函数用来实现编程式导航。
  • 示例代码: 

 

3. useParams()

  • 作用:回当前匹配路由的params参数，类似于5.x中的match.params .
  • 示例代码:

 

4.useSearchParams() 

  • 作用:用于读取和修改当前位置的URL中的查询字符串。
  • 返回一个包含两个值的数组，内容分别为:当前的seaech参数、更新search的函数。
  • 示例代码:

 

5.useLocation()

  • 作用:获取当前location信息，对标5.x中的路由组件的location属性。
  • 示例代码: 

 

6.useMatch() 

  • 作用:返回当前匹配信息，对标5.x中的路由组件的match属性。
  • 示例代码:

 

16.项目地址

 https://gitee.com/coderPatrickStar/react/tree/master/20231003

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

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

相关文章

【市场分析】Temu数据采集销售额商品量占比分析数据分析接口Api

【市场分析】Temu数据采集销售额商品量占比分析数据分析接口Api

引言 temu电商平台是一个充满活力的电商平台&#xff0c;拥有多种商品类别和数万家店铺。在这个项目中我的任务是采集平台上的大量公开数据信息。通过数据采集&#xff0c;我旨在深入了解temu电商平台的产品分布、销售趋势和文本描述&#xff0c;以揭示有趣的见解。 数据采集…
阅读更多...
二叉树OJ练习题（C语言版）

二叉树OJ练习题（C语言版）

目录 一、相同的树 二、单值二叉树 三、对称二叉树 四、树的遍历 前序遍历 中序遍历 后序遍历 五、另一颗树的子树 六、二叉树的遍历 七、翻转二叉树 八、平衡二叉树 一、相同的树 链接&#xff1a;100. 相同的树 - 力扣&#xff08;LeetCode&#xff09; bool isSameTree(…
阅读更多...
2022年09月 Python（三级）真题解析#中国电子学会#全国青少年软件编程等级考试

2022年09月 Python（三级）真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试&#xff08;1~6级&#xff09;全部真题・点这里 一、单选题&#xff08;共25题&#xff0c;每题2分&#xff0c;共50分&#xff09; 第1题 十六进制数100&#xff0c;对应的十进制数为 &#xff1f;&#xff08; &#xff09; A: 128 B: 256 C: 28 D: 56 答…
阅读更多...
【多线程】Lambda表达式

【多线程】Lambda表达式

package org.example;public class TestLambda {public static void main(String[] args) {Like likenew Like();like.lambda();}}//定义一个函数式接口 interface ILike{void lambda(); }//实现类 class Like implements ILike{Overridepublic void lambda() {System.out.prin…
阅读更多...
Java中的static

Java中的static

目录 static修饰成员变量 静态成员变量特征 static修饰成员方法 【静态方法特性】 static成员变量初始化 就地初始化 静态代码块初始化 注意事项 static修饰成员变量 静态成员变量特征 static修饰的成员变量&#xff0c;称为静态成员变量&#xff0c;静态成员变量最大的…
阅读更多...
前馈神经网络自动梯度计算和预定义算子

前馈神经网络自动梯度计算和预定义算子

目录 1 自动梯度计算和预定义算子 1.1 利用预定义算子重新实现前馈神经网络 1.2 完善Runner类 1.3 模型训练 1.4 性能评价 1.5 增加一个3个神经元的隐藏层&#xff0c;再次实现二分类&#xff0c;并与1.1.1做对比. 1.6 自定义隐藏层层数和每个隐藏层中的神经元个数&#xf…
阅读更多...
【Python工具】Panoply介绍及安装步骤

【Python工具】Panoply介绍及安装步骤

Panoply介绍及安装步骤 1 Panoply介绍2 Panoply安装步骤&#xff08;Windows&#xff09;2.1 下载并安装JAVA环境2.2 下载Panoply报错&#xff1a;Error: A JNI error has occurred, please check your installation and try again. 参考 1 Panoply介绍 Panoply是一款由美国国…
阅读更多...
Pycharm安装配置Pyqt5教程(保姆级)

Pycharm安装配置Pyqt5教程(保姆级)

目录 一、前言 1、依赖包 2、工具 二、安装依赖包 三、配置环境 四、配置设计工具 1、Qt Designer 2、PyRcc 3、PyUIC 五、使用 1、界面设计 2、ui文件转化为py文件 一、前言 很多情况下需要为程序设计一个GUI界面&#xff0c;在Python中使用较多的用户界面设计工具…
阅读更多...
深度学习之基于Python+OpenCV+dlib的考生信息人脸识别系统(GUI界面)

深度学习之基于Python+OpenCV+dlib的考生信息人脸识别系统(GUI界面)

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 深度学习在人脸识别领域的应用已经取得了显著的进展。Python是一种常用的编程语言&#xff0c;它提供了许多强大的库…
阅读更多...
Makefile初识

Makefile初识

目录 0.前期准备0.1、程序编译链接&#xff1a; 1.Makefile基础1.1、认识Makefile1.2、Makefile定义模式&#xff1a;(1) 定义模式&#xff1a;(2) 执行Makefile&#xff1a; 1.3、Makefile的变量(1) 变量定义&#xff1a;(2) **变量的赋值符**:(3) 自动化变量 1.4 伪目标1.5 文…
阅读更多...
2022年12月 Python（三级）真题解析#中国电子学会#全国青少年软件编程等级考试

2022年12月 Python（三级）真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试&#xff08;1~6级&#xff09;全部真题・点这里 一、单选题&#xff08;共25题&#xff0c;每题2分&#xff0c;共50分&#xff09; 第1题 列表L1中全是整数&#xff0c;小明想将其中所有奇数都增加1&#xff0c;偶数不变&#xff0c;于是编写了如下图所示的代…
阅读更多...
gorm的自动化工具gen

gorm的自动化工具gen

gorm的自动化工具gen 官方 https://gorm.io/zh_CN/gen/假设数据库结构如 这里使用gen-tool 安装 go install gorm.io/gen/tools/gentoollatest用法 gentool -hUsage of gentool:-c string配置文件名、默认值 “”、命令行选项的优先级高于配置文件。 -db string指定Driver…
阅读更多...
volatile-禁重排案例详解

volatile-禁重排案例详解

在每一个volatile写操作前面插入一个StoreStore屏障--->StoreStore屏障可以保证在volatile写之前&#xff0c;其前面所有的普通写操作都已经刷新到主内存中。 在每一个volatile写操作后面插入一个StoreLoad屏障--->StoreLoad屏障的作用是避免volatile写与后面可能有的vo…
阅读更多...
Python：PDF转长图像和分页图像

Python：PDF转长图像和分页图像

简介&#xff1a;随着电子化文档的普及&#xff0c;PDF文件的使用频率越来越高。有时我们需要将PDF中的内容转化为图片格式进行分享或编辑&#xff0c;那么如何才能轻松地完成此任务呢&#xff1f;本文将为你展示一个Python工具&#xff1a;如何将PDF文件转化为图片&#xff0c…
阅读更多...
【黑马程序员】Maven 进阶

【黑马程序员】Maven 进阶

文章目录 前言一、分模块开发与设计1. 分模块开发意义2. 分模块开发&#xff08;模块拆分&#xff09;2.1 创建 Maven 模块2.2 书写模块代码2.3 通过 Maven 指令安装模块到本地仓库&#xff08;install 指令&#xff09; 二、依赖管理1. 依赖传递1.1 依赖传递冲突问题 2. 可选依…
阅读更多...
Rust编程基础核心之所有权(上)

Rust编程基础核心之所有权(上)

1.什么是所有权? Rust 的核心功能&#xff08;之一&#xff09;是 所有权&#xff08;ownership&#xff09;。虽然该功能很容易解释&#xff0c;但它对语言的其他部分有着深刻的影响。 所有程序都必须管理其运行时使用计算机内存的方式。一些语言中具有垃圾回收机制&#x…
阅读更多...
【Linux】第十二站：进程

【Linux】第十二站：进程

文章目录 1.windows和linux中的进程2.先描述3.在组织4.具体的Linux系统是如何做的&#xff1f;1.基本概念2.描述进程-PCB3.task_struct和PCB的关系4.task_struct内容分类5.linux具体如何做的&#xff1f;6.查看进程 1.windows和linux中的进程 一个已经加载到内存的程序&#xf…
阅读更多...
【MySQL】MVCC机制（undo log，read view）

【MySQL】MVCC机制（undo log，read view）

文章目录 前言一. 预备知识二. 模拟MVCC三. Read View四. RC与RR的本质区别结束语 前言 MVCC&#xff08;多版本并发控制&#xff09;是一种用来解决读-写冲突的无锁并发控制 MVCC为事务分配单向增长的事务ID&#xff0c;为每个修改保存一个版本&#xff0c;版本与事物ID相关联…
阅读更多...
全球首款双模型AI手机METAVERTU2，为用户开发“第二大脑”

全球首款双模型AI手机METAVERTU2，为用户开发“第二大脑”

在2023年11月1日&#xff0c;英国奢侈手机品牌VERTU在香港举办了一场新品发布会&#xff0c;它推出了一款全新的AI手机称为METAVERTU2&#xff0c;这是全球首款双模型AI手机。此款手机将Web3技术与人工智能相结合&#xff0c;通过AI模型标记数据和AI Agent的方式&#xff0c;将…
阅读更多...
如何设置OBS虚拟摄像头给钉钉视频会议使用

如何设置OBS虚拟摄像头给钉钉视频会议使用

环境&#xff1a; OBS Studio 29.1.3 Win10 专业版 钉钉7.1.0 问题描述&#xff1a; 如何设置OBS虚拟摄像头给钉钉视频会议使用 解决方案&#xff1a; 1.打开OBS 底下来源这添加视频采集设备 选择OBS虚拟摄像头 2.源那再建一个图像&#xff0c;随便选一张图片 3.点击虚…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023