阿瞒有我良计15

[尚硅谷React笔记]——第5章 React 路由

目录：

对SPA应用的理解
对路由的理解
前端路由原理
路由的基本使用
路由组件与一般组件
NavLink的使用
封装NavLink组件
Switch的使用
解决样式丢失问题
路由的模糊匹配与严格匹配
Redirect的使用
嵌套路由
向路由组件传递params参数
向路由组件传递search参数
.向路由组件传递state参数
总结路由参数
push与repalce
编程式路由导航
withRouter的作用
BrowserRouter与HashRouter

1.对SPA应用的理解

单页Web应用（single page web application，SPA）。
整个应用只有一个完整的页面。
点击页面中的链接不会刷新页面，只会做页面的局部更新。
数据都需要通过ajax请求获取, 并在前端异步展现。

2.对路由的理解

什么是路由?

一个路由就是一个映射关系(key:value)
key为路径, value可能是function或component

路由分类

后端路由：
1. 理解： value是function, 用来处理客户端提交的请求。
2. 注册路由： router.get(path, function(req, res))
3. 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
前端路由：
1. 浏览器端路由，value是component，用于展示页面内容。
2. 注册路由:
3. 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

3.前端路由原理

前端路由的基石.html




  
  前端路由的基石_history


	push test1

4.路由的基本使用

明确好界面中的导航区、展示区
导航区的a标签改为Link标签 Demo
展示区写Route标签进行路径的匹配
的最外侧包裹了一个或

App.js

import React, {Component} from 'react';
import {Link, Route} from "react-router-dom";
import About from "./components/About/About";
import Home from "./components/Home/Home";

class App extends Component {
    render() {
        return (
            
                
                    
                        React Router Demo
                    
                
                
                    
                        
                            About
                            Home
                        
                    
                    
                        
                            
                                
                                
                            
                        
                    
                
            
        );
    }
}

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(
    
        
    
);

About.jsx

import React, {Component} from 'react';

class About extends Component {
    render() {
        return (
            
                我是About的内容
            
        );
    }
}

export default About;

Home.jsx

import React, {Component} from 'react';

class Home extends Component {
    render() {
        return (
            
                我是Home的内容
            
        );
    }
}

export default Home;

运行结果：

5.路由组件与一般组件

写法不同:
1. 一般组件:
2. 路由组件:
存放位置不同:
1. 一般组件:components
2. 路由组件: pages
接收到的props不同:
1. 一般组件:,写组件标签时传递了什么，就能收到什么
2. 路由组件:接收到三个固定的属性
  1. history:
    1. go: f go(n)
    2. goBack: f goBack()
    3. goForward: f goForward()
    4. push: f push(path,state)
    5. replace: f replace(path, state)
  2. location:
    1. pathname: "/about"
    2. search: ""
    3. state: undefined
  3. match:|
    1. params: {}
    2. path: "/about"
    3. url: "/about"

6.NavLink的使用

Header.jsx

import React, {Component} from 'react';

class Header extends Component {
    render() {
        // console.log('Header组件收到的props是', this.props)
        return (
            
                React Router Demo
            
        );
    }
}

export default Header;

About.jsx

import React, {Component} from 'react';

class About extends Component {
    render() {
        // console.log('About组件收到的props是', this.props)
        return (
            
                我是About的内容
            
        );
    }
}

export default About;

Home.jsx

import React, {Component} from 'react';

class Home extends Component {
    render() {
        return (
            
                我是Home的内容
            
        );
    }
}

export default Home;

App.js

import React, {Component} from 'react';
import {NavLink, Route} from "react-router-dom";
import About from "./pages/About/About";
import Home from "./pages/Home/Home";
import Header from "./components/Header/Header";

class App extends Component {
    render() {
        return (
            
                
                    
                        
                    
                
                
                    
                        
                            About
                            Home
                        
                    
                    
                        
                            
                                
                                
                            
                        
                    
                
            
        );
    }
}

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(
    
        
    
);

index.html

项目结构：

运行结果：

7.封装NavLink组件

NavLink与封装NavLink

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

App.js

import React, {Component} from 'react';
import {NavLink, Route} from "react-router-dom";
import About from "./pages/About/About";
import Home from "./pages/Home/Home";
import Header from "./components/Header/Header";
import MyNavLink from "./components/MyNavLink/MyNavLink";

class App extends Component {
    render() {
        return (
            
                
                    
                        
                    
                
                
                    
                        
                            About
                            Home
                        
                    
                    
                        
                            
                                
                                
                            
                        
                    
                
            
        );
    }
}

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(
    
        
    
);

Header.jsx

import React, {Component} from 'react';

class Header extends Component {
    render() {
        // console.log('Header组件收到的props是', this.props)
        return (
            
                React Router Demo
            
        );
    }
}

export default Header;

MyNavLink.jsx

import React, {Component} from 'react';
import {NavLink} from "react-router-dom";

class MyNavLink extends Component {
    render() {
        console.log(this.props)
        return (
            
                
            
        );
    }
}

export default MyNavLink;

About.jsx

import React, {Component} from 'react';

class About extends Component {
    render() {
        // console.log('About组件收到的props是', this.props)
        return (
            
                我是About的内容
            
        );
    }
}

export default About;

Home.jsx

import React, {Component} from 'react';

class Home extends Component {
    render() {
        return (
            
                我是Home的内容
            
        );
    }
}

export default Home;

项目结构：

运行结果：

8.Switch的使用

通常情况下，path和component是一一对应的关系。
Switch可以提高路由匹配效率(单一匹配)。

Test.jsx

import React, {Component} from 'react';

class Test extends Component {
    render() {
        return (
            
                Test...
            
        );
    }
}

export default Test;

App.js

import React, {Component} from 'react';
import {NavLink, Route, Switch} from "react-router-dom";
import About from "./pages/About/About";
import Home from "./pages/Home/Home";
import Header from "./components/Header/Header";
import MyNavLink from "./components/MyNavLink/MyNavLink";
import Test from "./pages/Test/Test";

class App extends Component {
    render() {
        return (
            
                
                    
                        
                    
                
                
                    
                        
                            About
                            Home
                        
                    
                    
                        
                            
                                
                                    
                                    
                                    
                                
                            
                        
                    
                
            
        );
    }
}

export default App;

运行结果：

项目结构：

9.解决样式丢失问题

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

1../css/bootstrap.css改为：

2../css/bootstrap.css改为：

3.BroserRouter改成HashRouter

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {BrowserRouter, HashRouter} from "react-router-dom";


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    
        
    
);

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

默认使用的是模糊匹配(简单记:【输入的路径】必须包含要【匹配的路径】，且顺序要一致)
开启严格匹配：
严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

App.js

import React, {Component} from 'react';
import {Route, Switch} from "react-router-dom";
import About from "./pages/About/About";
import Home from "./pages/Home/Home";
import Header from "./components/Header/Header";
import MyNavLink from "./components/MyNavLink/MyNavLink";

class App extends Component {
    render() {
        return (
            
                
                    
                        
                    
                
                
                    
                        
                            About
                            Home
                        
                    
                    
                        
                            
                                
                                    
                                    
                                
                            
                        
                    
                
            
        );
    }
}

export default App;

运行结果：

11.Redirect的使用

一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
具体编码:

App.js

import React, {Component} from 'react';
import {Redirect, Route, Switch} from "react-router-dom";
import About from "./pages/About/About";
import Home from "./pages/Home/Home";
import Header from "./components/Header/Header";
import MyNavLink from "./components/MyNavLink/MyNavLink";

class App extends Component {
    render() {
        return (
            
                
                    
                        
                    
                
                
                    
                        
                            About
                            Home
                        
                    
                    
                        
                            
                                
                                    
                                    
                                    
                                
                            
                        
                    
                
            
        );
    }
}

export default App;

12.嵌套路由

注册子路由时要写上父路由的path值
路由的匹配是按照注册路由的顺序进行的

App.js

import React, {Component} from 'react';
import {Redirect, Route, Switch} from "react-router-dom";
import About from "./pages/About/About";
import Home from "./pages/Home/Home";
import Header from "./components/Header/Header";
import MyNavLink from "./components/MyNavLink/MyNavLink";

class App extends Component {
    render() {
        return (
            
                
                    
                        
                    
                
                
                    
                        
                            About
                            Home
                        
                    
                    
                        
                            
                                
                                    
                                    
                                    
                                
                            
                        
                    
                
            
        );
    }
}

export default App;

Message.jsx

import React, {Component} from 'react';

class Message extends Component {
    render() {
        return (
            
                
                    
                        message001  
                    
                    
                        message002  
                    
                    
                        message003  
                    
                
            
        );
    }
}

export default Message;

News.jsx

import React, {Component} from 'react';

class News extends Component {
    render() {
        return (
            
                
                    news001
                    news002
                    news003
                
            
        );
    }
}

export default News;

Home.jsx

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

class Home extends Component {
    render() {
        return (
            
                Home组件内容
                
                    
                        
                            News
                        
                        
                            Message
                        
                    
                    
                        
                        
                        
                    
                
            
        );
    }
}

export default Home;

MyNavLink.jsx

import React, {Component} from 'react';
import {NavLink} from "react-router-dom";

class MyNavLink extends Component {
    render() {
        console.log(this.props)
        return (
            
                
            
        );
    }
}

export default MyNavLink;

Header.jsx

import React, {Component} from 'react';

class Header extends Component {
    render() {
        // console.log('Header组件收到的props是', this.props)
        return (
            
                React Router Demo
            
        );
    }
}

export default Header;

About.jsx

import React, {Component} from 'react';

class About extends Component {
    render() {
        // console.log('About组件收到的props是', this.props)
        return (
            
                我是About的内容
            
        );
    }
}

export default About;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {BrowserRouter, HashRouter} from "react-router-dom";


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    
        
    
);

项目结构：

运行结果：

13. 向路由组件传递params参数

1.params参数

路由链接(携带参数):详情

注册路由(声明接收):

接收参数: const {id,title} = this.props.match.params

Header.jsx

import React, {Component} from 'react';

class Header extends Component {
    render() {
        // console.log('Header组件收到的props是', this.props)
        return (
            
                React Router Demo
            
        );
    }
}

export default Header;

MyNavLink.jsx

import React, {Component} from 'react';
import {NavLink} from "react-router-dom";

class MyNavLink extends Component {
    render() {
        console.log(this.props)
        return (
            
                
            
        );
    }
}

export default MyNavLink;

About.jsx

import React, {Component} from 'react';

class About extends Component {
    render() {
        // console.log('About组件收到的props是', this.props)
        return (
            
                我是About的内容
            
        );
    }
}

export default About;

Detail.jsx

import React, {Component} from 'react';

const DetailData = [
    {id: '01', content: '你好,中国'},
    {id: '02', content: '你好,尚硅谷'},
    {id: '03', content: '你好,未来的自己'},
]

class Detail extends Component {

    render() {
        // console.log(this.props)
        const {id, title} = this.props.match.params
        const findResult = DetailData.find((detailObj) => {
            return detailObj.id === id
        })
        return (
            
                ID:{id}
                TITLE:{title}
                CONTENT:{findResult.content}
            
        );
    }
}

export default Detail;

Message.jsx

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

class Message extends Component {
    state = {
        messageArr: [
            {id: '01', title: '消息1'},
            {id: '02', title: '消息2'},
            {id: '03', title: '消息3'},
        ]
    }

    render() {
        const {messageArr} = this.state
        return (
            
                
                    {
                        messageArr.map((msgObj) => {
                            return (
                                
                                    {msgObj.title}
                                
                            )
                        })
                    }
                

                
                
            
        );
    }
}

export default Message;

News.jsx

import React, {Component} from 'react';

class News extends Component {
    render() {
        return (
            
                
                    news001
                    news002
                    news003
                
            
        );
    }
}

export default News;

Home.jsx

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

class Home extends Component {
    render() {
        return (
            
                Home组件内容
                
                    
                        
                            News
                        
                        
                            Message
                        
                    
                    
                        
                        
                        
                    
                
            
        );
    }
}

export default Home;

App.js

import React, {Component} from 'react';
import {Redirect, Route, Switch} from "react-router-dom";
import About from "./pages/About/About";
import Home from "./pages/Home/Home";
import Header from "./components/Header/Header";
import MyNavLink from "./components/MyNavLink/MyNavLink";

class App extends Component {
    render() {
        return (
            
                
                    
                        
                    
                
                
                    
                        
                            About
                            Home
                        
                    
                    
                        
                            
                                
                                    
                                    
                                    
                                
                            
                        
                    
                
            
        );
    }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {BrowserRouter, HashRouter} from "react-router-dom";


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    
        
    
);

运行结果：

项目结构：

14.向路由组件传递search参数

2.search参数

路由链接(携带参数): 详情
注册路由(无需声明，正常注册即可):
接收参数: const isearch} = this.props.location
备注:获取到的search是urlencoded编码字符串，需要借助querystring解析

Message.jsx

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

class Message extends Component {
    state = {
        messageArr: [
            {id: '01', title: '消息1'},
            {id: '02', title: '消息2'},
            {id: '03', title: '消息3'},
        ]
    }

    render() {
        const {messageArr} = this.state
        return (
            
                
                    {
                        messageArr.map((msgObj) => {
                            return (
                                
                                    {/*{msgObj.title}*/}
                                    {msgObj.title}
                                
                            )
                        })
                    }
                

                
                {/**/}
                
            
        );
    }
}

export default Message;

Detail.jsx

import React, {Component} from 'react';
import qs from "qs"

const DetailData = [
    {id: '01', content: '你好,中国'},
    {id: '02', content: '你好,尚硅谷'},
    {id: '03', content: '你好,未来的自己'},
]

class Detail extends Component {

    render() {
        console.log(this.props)
        // const {id, title} = this.props.match.params

        const {search} = this.props.location
        const {id, title} = qs.parse(search.slice(1))
        const findResult = DetailData.find((detailObj) => {
            return detailObj.id === id
        })
        return (
            
                ID:{id}
                TITLE:{title}
                CONTENT:{findResult.content}
            
        );
    }
}

export default Detail;

运行结果：

项目结构：

15.向路由组件传递state参数

state参数：

路由链接(携带参数): 详情注册路由(无需声明，正常注册即可):
接收参数: this.props.location.state
备注:刷新也可以保留住参数

Message.jsx

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

class Message extends Component {
    state = {
        messageArr: [
            {id: '01', title: '消息1'},
            {id: '02', title: '消息2'},
            {id: '03', title: '消息3'},
        ]
    }

    render() {
        const {messageArr} = this.state
        return (
            
                
                    {
                        messageArr.map((msgObj) => {
                            return (
                                
                                    {/*{msgObj.title}*/}
                                    {/*{msgObj.title}*/}
                                    {msgObj.title}
                                
                            )
                        })
                    }
                

                
                {/**/}
                {/**/}
                
            
        );
    }
}

export default Message;

Detail.jsx

import React, {Component} from 'react';
import qs from "qs"

const DetailData = [
    {id: '01', content: '你好,中国'},
    {id: '02', content: '你好,尚硅谷'},
    {id: '03', content: '你好,未来的自己'},
]

class Detail extends Component {

    render() {
        console.log(this.props)
        // const {id, title} = this.props.match.params

        // const {search} = this.props.location
        // const {id, title} = qs.parse(search.slice(1))


        const {id, title} = this.props.location.state || {}

        const findResult = DetailData.find((detailObj) => {
            return detailObj.id === id
        }) || {}
        return (
            
                ID:{id}
                TITLE:{title}
                CONTENT:{findResult.content}
            
        );
    }
}

export default Detail;

运行结果：

16.总结路由参数

17.push与repalce

Message.jsx

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

class Message extends Component {
    state = {
        messageArr: [
            {id: '01', title: '消息1'},
            {id: '02', title: '消息2'},
            {id: '03', title: '消息3'},
        ]
    }

    render() {
        const {messageArr} = this.state
        return (
            
                
                    {
                        messageArr.map((msgObj) => {
                            return (
                                
                                    {/*{msgObj.title}*/}
                                    {/*{msgObj.title}*/}
                                    {msgObj.title}
                                
                            )
                        })
                    }
                

                
                {/**/}
                {/**/}
                
            
        );
    }
}

export default Message;

push:留下记录
repalce:不留记录

18.编程式路由导航

Message.jsx

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

class Message extends Component {
    state = {
        messageArr: [
            {id: '01', title: '消息1'},
            {id: '02', title: '消息2'},
            {id: '03', title: '消息3'},
        ]
    }

    render() {
        const {messageArr} = this.state
        return (
            
                
                    {
                        messageArr.map((msgObj) => {
                            return (
                                
                                    {/*{msgObj.title}*/}
                                    {/*{msgObj.title}*/}
                                    {msgObj.title}
                                
                            )
                        })
                    }
                

                
                {/**/}
                {/**/}
                
            
        );
    }
}

export default Message;

Detail.jsx

import React, {Component} from 'react';
import qs from "qs"

const DetailData = [
    {id: '01', content: '你好,中国'},
    {id: '02', content: '你好,尚硅谷'},
    {id: '03', content: '你好,未来的自己'},
]

class Detail extends Component {

    render() {
        console.log(this.props)
        // const {id, title} = this.props.match.params

        // const {search} = this.props.location
        // const {id, title} = qs.parse(search.slice(1))


        const {id, title} = this.props.location.state || {}

        const findResult = DetailData.find((detailObj) => {
            return detailObj.id === id
        }) || {}
        return (
            
                ID:{id}
                TITLE:{title}
                CONTENT:{findResult.content}
            
        );
    }
}

export default Detail;

19.withRouter的作用

News.jsx

import React, {Component} from 'react';

class News extends Component {
    componentDidMount() {
        setTimeout(() => {
            this.props.history.push('/home/message')
        }, 2000)
    }

    render() {
        return (
            
                
                    news001
                    news002
                    news003
                
            
        );
    }
}

export default News;

借助this.prosp.history对象上的API对操作路由跳转、前进、后退
this.prosp.history.push()
this.prosp.history.replace()
this.prosp.history.goBack()
this.prosp.history.goForward()
this.prosp.history.go()

withRouter可以加工一般组件，让一般组件具备路由组件所特有的API
withRouter的返回值是一个新组件

Header.jsx

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()
    }
    go = () => {
        this.props.history.go(2)
    }

    render() {
        // console.log('Header组件收到的props是', this.props)
        return (
            
                
                    React Router Demo
                    
                    
                    
                
            
        );
    }
}

export default withRouter(Header);

20.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可以用于解决一些路径错误相关的问题。

你可能感兴趣的:(#,React,react.js,笔记,javascript)

安全见闻（3） Bulestar_xx 泷羽sec学习笔记安全网络 windows
摘要脚本程序主要讨论的是安全性问题。脚本语言因其源代码可见、可复制性高而具有脚本性质。常见的脚本语言包括：-Lua-PHP-Go-Python-JavaScript脚本语言可以编写病毒和木马，例如Python可以编写木马，PHP可以编写一句话木马。编写脚本病毒需要了解脚本语言基础和病毒构成。宏病毒（macro）可以通过工具如metasploit生成，并植入Office文件中，如Word和PPT。宏
刷题前必学！时间复杂度和空间复杂度！用JavaScript学数据结构与算法
‍JavaScript算法与数据结构-HowieCong务必要熟悉JavaScript使用再来学！一、时间复杂度（1）下面代码，一共执行了几次？functiontraverse(arr){//最没有悬念的是函数里面的第一行代码，只会被执行1次varlen=arr.length//1.i的初始化语句，只有一次，只会被执行1次//2.iO(n)=1T(n)=3n^2+5n+3=>O(n)=n^2（4）
BUUCTF：[ISITDTU 2019]EasyPHP --- rce 超级异或，，，吐了，，，字符之间异或，成型的异或payload！！！ Zero_Adam BUUCTF刷题记录 RCE python
目录:一、自己做：二、学的的三、学习WP1.这里先来个不限制字符个数的关于这个%ff以及异或的事情，咱们好好唠唠1.生成异或中间值的python脚本2.看有字符限制的时候，：参考：末初一、自己做：0xd)die('youaresoclose,omg');eval($_);?>过滤了，不少，我一般碰到rce的题，就看自己的笔记，然后把payload一股脑的网上怼，，，二、学的的正则看不明白的时候，可
Webpack 模块加载、动态引入机制源码解读 AIGC小陈正则表达式 javascript 开发语言 react.js 前端
今天的文章简单探讨一下Vue和React的不同。本人Vue2和React都用过，但不熟悉Vue3，没用它做过项目。其实我对这两大框架也没有认真钻研过它们的细节，也就是工作上用它们写一些简单业务，或偶尔看看相关的博客文章，但还是有一些浅显的认识的，写下来记录一下。Vue和React都是用于构建UI界面的流行框架。它们的哲学也有很多相似的地方，我们可以认为这些特性是流行前端框架的一个趋势。它们是：组件
FastDFS实用笔记（Docker 搭建环境 + 整合 SpringBoot）字节全栈_kYu 笔记 docker spring boot
解决了大容量存储和负载均衡的问题，特别适合中小文件（4KB>文件路径为空…”);return“文件路径不能为空”;}try{StorePathstorePath=StorePath.parseFromUrl(fileUrl);storageClient.deleteFile(storePath.getGroup(),storePath.getPath());}catch(Exceptione){l
101算法javaScript描述【3】 2401_89317507 算法 javascript java
通常情况下，不能出现超过连续三个相同的罗马数字并且罗马数字中小的数字在大的数字的右边。但也存在特例，例如4不写做IIII，而是IV。数字1在数字5的左边，所表示的数等于大数5减小数1得到的数值4。同样地，数字9表示为IX。这个特殊的规则只适用于以下六种情况：I可以放在V(5)和X(10)的左边，来表示4和9。X可以放在L(50)和C(100)的左边，来表示40和90。C可以放在D(500)和M(1
java xml dom 解析_解析 XML DOM 十二月极光 java xml dom 解析
解析XMLDOM大多数浏览器都内建了供读取和操作XML的XML解析器。解析器把XML转换为JavaScript可存取的对象。实例W3School提供的实例独立于浏览器和平台。这些实例可在所有现代浏览器中运行。解析XML所有现代浏览器都内建了用于读取和操作XML的XML解析器。解析器把XML读入内存，并把它转换为可被JavaScript访问的XMLDOM对象。微软的XML解析器与其他浏览器中的解析器
JavaScript网页设计实战：微信登录 + 获取用户头像和昵称 James吖 javascript 微信前端开发语言目标检测 ecmascript 神经网络
引言在现代Web开发中，社交媒体登录已经成为提升用户体验的一个重要组成部分。微信登录因其广泛的用户基础和便捷的登录方式，深受开发者和用户的喜爱。本文将通过一个实战案例，介绍如何在JavaScript网页应用中集成微信登录功能，并获取用户的头像和昵称。前提条件在开始之前，请确保你已经具备以下条件：已经在微信开放平台上注册并创建了应用，获取到了AppID和AppSecret。了解基本的HTML、CSS
XML DOM 改变节点值 shangaoo xml java 前端
nodeValue属性用于改变节点值。setAttribute()方法用于改变属性值。尝试一下-实例下面的实例使用XML文件books.xml。函数loadXMLDoc()，位于外部JavaScript中，用于加载XML文件。改变元素的文本节点本例使用nodeValue属性来改变"books.xml"中第一个元素的文本节点。通过使用setAttribute来改变属性值本例使用setAttribut
XMLDOM之浏览器差异 dengguxinghe4335 javascript xhtml ViewUI
DOM解析中的浏览器差异所有现代浏览器都支持w3cDOM规范，不过浏览器之间是有差异的，重要的区别有两点：加载XML的方式；处理空白和换行的方式；１、加载XML的方式：所有现代浏览器都内建了用于读取和操作XML的XML解析器。解析器把XML读入内存，并把它转换为可被JavaScript访问的XMLDOM对象；微软的XML解析器与其他浏览器中的解析器是有差异的。微软的解析器支持对XML文件和XML字
CentOS 7.6用户管理指令 2301_80069458 linux 服务器学习
#学习笔记#一、用户添加useradd用户名二、给用户指定密码passwd用户名三、删除用户1、仅删除用户不删除用户家目录（此处用户家目录可以理解为用户的数据，通常情况下建议保留）userdel用户名2、输出用户并且删除用户家目录userdel-r用户名四、切换用户1、从当前用户切换到另一个用户上（从权限高的用户切换到权限低的用户无需输入密码，反之需要输入密码）su-用户名2、从切换的账户上退回到
【书生·浦语大模型实战营】学习笔记（三）：“茴香豆” 搭建你的RAG 智能助理 GoAI 自然语言处理NLP 深入浅出AI 深入浅出LLM 深度学习 LLM 人工智能大模型
AI学习星球推荐：GoAI的学习社区知识星球是一个致力于提供《机器学习|深度学习|CV|NLP|大模型|多模态|AIGC》各个最新AI方向综述、论文等成体系的学习资料，配有全面而有深度的专栏内容，包括不限于前沿论文解读、资料共享、行业最新动态以、实践教程、求职相关（简历撰写技巧、面经资料与心得）多方面综合学习平台，强烈推荐AI小白及AI爱好者学习，性价比非常高！加入星球➡️点击链接【书生·
『大模型笔记』视觉语言模型解释 AI大模型前沿研究大模型笔记 LLM VLM 视觉语言模型语言模型大模型人工智能
视觉语言模型解释文章目录一.视觉语言模型解析1.什么是视觉语言模型？2.开源视觉语言模型概览3.如何找到合适的视觉语言模型MMMUMMBench4.技术细节5.使用变压器(transformers)运用视觉语言模型6.使用TRL微调视觉语言模型二.参考文章一.视觉语言模型解析视觉语言模型是一类能够同时从图像和文本中学习，以处理从视觉问题回答到图像描述等多种任务的模型。本文将深入探讨视觉语言模型的核
JavaScript-黑马程序员-前端零基础羊羊的代码笔记本 javascript 前端 html
目录1.初识JavaScript1.1浏览器执行js1.2js的组成1.3js三种书写方式1.4JavaScript输入输出语句2.变量2.1变量是一个装东西的容器2.2变量是使用2.3更新变量2.4声明多个变量1.初识JavaScript是一种高级编程语言1.1浏览器执行js浏览器分成两部分：渲染引擎和js引擎渲染引擎：用来解析HTML和CSS，俗称内核js引擎：也称为js解释器。用来读取网页中
css（尚硅谷笔记） rzl02 css 笔记前端
接着上次的内容写一、css字体属性1.字体大小·属性名：font-size（作用：控制字体大小。）·语法：div{font-size:40px;}注意点：1.Chrome浏览器支持的最小文字为12px，默认的文字大小为16px，并且0px会自动消失。2.不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。3.通常以给body设置font-size属性，这样body中的其他元
零基础学Python学习笔记小陌白机器学习 python 学习开发语言
Python学习笔记代码下载地址链接：https://pan.baidu.com/s/1yGnpfq4ZHeKpt4V0J_PTSg提取码：hmzs1.Python基础语法1.1基本数据类型整数(int)：8浮点数(float)：8.8字符串(str)：“8”“Python”布尔值(bool)：TrueFalseprint(type(int('8')))#将字符串8转化为整型print(type(
2024年作品汇总萝卜青今天也要开心 spring java 后端笔记学习
思维读书笔记-《当下的力量》读书笔记-《暗时间》信息技术如何设计离线跑批系统程序员工作中常见问题，你遇到过几个？读书笔记-《Redis设计与实现》（一）数据结构与对象（上）读书笔记-《大数据时代》读书笔记-《Spring技术内幕》（一）IoC容器的实现读书笔记-《Spring技术内幕》（二）AOP的实现读书笔记-《Spring技术内幕》（三）MVC与Web环境读书笔记-《Spring技术内幕》（四
读书笔记-《乡下人的悲歌》萝卜青今天也要开心笔记学习
前段时间看了一些J.D.Vance的采访视频，几乎都是记者带着刁难的问题先手进攻，而Vance面带微笑，提及对方的名字，条理清晰地从对方的攻击中切回主题形成后手反制，实在让人看得过瘾。更不可思议的是，Vance的成长经历似乎也非常糟糕，他是如何走到今天这一步的呢？带着这样的疑问，我拿起了这本传记。01Vance的成长经历Vance成长时所处的大背景是：中西部工业地区经济下滑，制造业岗位流向海外，没
读书笔记-《Spring技术内幕》（一）IoC容器的实现萝卜青今天也要开心 spring java 后端笔记
如今已是2024年，掌握Spring早已是Java从业人员的基本要求。Spring帮我们屏蔽掉了许多繁琐的工作，使我们可以把重心放在业务逻辑上。但也因此，要深刻体会到Spring带来的便捷性，反倒需要与没有使用Spring时作对比。为此，我特地翻了下上大学时用JaveWeb开发的项目（无框架），希望能让大家更好理解。01SpringIoC容器概述Spring的架构图如上所示，IoC与AOP都是Sp
python学习笔记 YYYYYY02020 python 学习笔记
1print不用添加";"，但是加了也行print("666")print('666')print("6'6'6")print("6\"6\'6")print("""666666555""")print("张三"+"李四")2math#引入函数库importmatha=1b=2c=3#b**2就是b的平方x=(-b+(b**2-4*a*c)**(1/2))/2*ax=(-b+math.sqrt(b
Java 在包管理与模块化中的优势：与其他开发语言的比较 nbsaas-boot 开发语言 java
在开发复杂的、规模庞大的软件系统时，包管理和模块化设计起着至关重要的作用。它们不仅决定了代码的组织和可维护性，还直接影响到团队协作效率、扩展性和性能。在众多编程语言中，Java凭借其成熟的生态系统、强类型系统和标准化的包管理机制，成为了大型企业级应用开发的首选之一。本文将探讨Java在包管理和模块化方面的优势，并与其他流行语言（如Rust、Go、Python、JavaScript和C#）进行对比，
读书笔记-《Redis设计与实现》（一）数据结构与对象（下）萝卜青今天也要开心 redis 数据结构学习 java
各位朋友新年快乐~今天我们来继续学习Redis。01整数集合当集合仅包含整数值，并且元素数量不多时，Redis就会采用整数集合来作为集合键的底层实现。typedefstructintset{//编码方式uint32_tencoding;//元素数量uint32_tlength;//数组int8_tcontents[];}intset;可以看到，contents就是存储元素的地方，各个元素按从小到大
Github 2025-02-01 开源项目月报 Top20 老孙正经胡说 github 开源 Github趋势分析开源项目 Python Golang
根据GithubTrendings的统计，本月(2025-02-01统计)共有20个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量Python项目8TypeScript项目3JupyterNotebook项目2Rust项目2HTML项目2C++项目1Ruby项目1JavaScript项目1Svelte项目1非开发语言项目1Go项目1Ollama:本地大型语言模型设置与运行创建周
pandas ---- pd.DataFrame基本用法 JU HE python常用库 pandas python
文章目录前言1loc和iloc注意事项。（后面这些都会在笔记中提到）2DataFrame的维度一、DataFrame的创建---pd.DataFrame(data，index=None，columns=None)1字典创建DataFrame(字典转Dataframe很常用)2用numpy数组或者嵌套list创建DataFrame二、DataFrame的访问、索引、切片、布尔索引、修改等操作1行切片
Python网络爬虫调试技巧：解决爬虫中的问题 master_chenchengg python python Python python开发 IT
Python网络爬虫调试技巧：解决爬虫中的问题引子：当你的小蜘蛛遇到大麻烦知己知彼：了解常见的爬虫错误类型侦探出马：使用开发者工具和日志追踪问题源头化险为夷：调整User-Agent与添加延时策略进阶秘籍：处理JavaScript渲染页面与动态加载内容引子：当你的小蜘蛛遇到大麻烦在一个阳光明媚的下午，我正坐在电脑前，满怀信心地运行着我的Python爬虫脚本。这个脚本是为了从一个大型电子商务网站上抓
探究Fingerprintjs：了解浏览器指纹技术的原理和应用 Bj陈默 javascript
一、什么是FingerprintjsFingerprintjs是一个用于生成浏览器指纹的JavaScript库。浏览器指纹是一种通过收集浏览器的各种信息来识别用户设备的技术。它类似于人的指纹，具有一定的独特性，可以用于区分不同的用户设备。二、浏览器指纹技术的原理（一）基本信息收集用户代理（UserAgent）用户代理字符串包含了浏览器的类型、版本、操作系统等信息。例如，一个典型的用户代理字符串可能
人工智能导论--第1章-知识点与学习笔记想拿高薪的韭菜人工智能学习笔记
请根据教材内容，完成进行下面的作业任务。必须包含有教材的具体内容，不能是生成式AI系统的生成内容。参考教材1.1节的内容介绍，谈谈你对“智能”的认识。思维能力是智能的重要特征之一，结合教材1.1.2节内容，从思维的定义、分类及其特点等角度，阐述思维的含义。参考教材1.1.3节的内容介绍，名词解析“人工智能”。参考教材1.2节的内容介绍，介绍人工智能的发展简史。参考教材1.3节的内容介绍，人工智能作
React：封装高阶路由组件，根据有无token控制路由跳转听海边涛声 react.js 前端前端框架
有些页面内的内容比较敏感，如果用户没有经过登录获取到token，是不允许跳转的。实现方案：封装一个高阶组件，根据token的有无进行路由跳转控制：
react18高阶组件我谈山美，我说你媚前端 javascript reactjs
高阶组件的本质上就是函数，接受一个组件作为参数，然后返回一个组件。解决了组件之间如何横向抽离公共逻辑的问题。类组件之间常使用，函数组件中也可以使用，但更多的时候使用自定义hooks。高阶组件命名一般采用with开头，它可以将普通组件内部的公用功能抽离出来，复用在其被调用的组件上。举个例子，需求：每个组件渲染销毁的时候打印日志importReact,{useEffect}from'react';//
react中关于组件的一些概念(有无状态组件、组件封装与继承、高阶组件) 不能懒鸭 react基础面试 react.js javascript 前端
怎么理解“在react中，一切皆为组件”句话react采用组件化的思想，最小的组件单位就是原生HTML元素，采用JSX语法组件声明调用react的虚拟dom，就是一个大的组件树，从父组件层到子组件，在react-routerv4版开始，路由本身也是组件各个库提供的hoc返回也是组件，如withRouter、connectreact中的基础数据stateprops的传递也是以组件为基础1.什么是组件
windows下源码安装golang 616050468 golang安装 golang环境 windows
系统： 64位win7，开发环境：sublime text 2， go版本： 1.4.1 1. 安装前准备(gcc, gdb, git) golang在64位系
redis批量删除带空格的key bylijinnan redis
redis批量删除的通常做法： redis-cli keys "blacklist*" | xargs redis-cli del 上面的命令在key的前后没有空格时是可以的，但有空格就不行了： $redis-cli keys "blacklist*" 1) "blacklist:12: [email protected]
oracle正则表达式的用法 0624chenhong oracle 正则表达式
方括号表达示方括号表达式描述 [[:alnum:]] 字母和数字混合的字符 [[:alpha:]] 字母字符 [[:cntrl:]] 控制字符 [[:digit:]] 数字字符 [[:graph:]] 图像字符 [[:lower:]] 小写字母字符 [[:print:]] 打印字符 [[:punct：]] 标点符号字符 [[:space:]]
2048源码(核心算法有，缺少几个anctionbar，以后补上) 不懂事的小屁孩 2048
2048游戏基本上有四部分组成， 1：主activity，包含游戏块的16个方格，上面统计分数的模块 2：底下的gridview，监听上下左右的滑动，进行事件处理， 3：每一个卡片，里面的内容很简单，只有一个text，记录显示的数字 4：Actionbar，是游戏用重新开始，设置等功能(这个在底下可以下载的代码里面还没有实现) 写代码的流程 1：设计游戏的布局，基本是两块，上面是分
jquery内部链式调用机理换个号韩国红果果 JavaScript jquery
只需要在调用该对象合适(比如下列的setStyles)的方法后让该方法返回该对象（通过this 因为一旦一个函数称为一个对象方法的话那么在这个方法内部this（结合下面的setStyles）指向这个对象） function create(type){ var element=document.createElement(type); //this=element;
你订酒店时的每一次点击背后都是NoSQL和云计算蓝儿唯美 NoSQL
全球最大的在线旅游公司Expedia旗下的酒店预订公司，它运营着89个网站，跨越68个国家，三年前开始实验公有云，以求让客户在预订网站上查询假期酒店时得到更快的信息获取体验。云端本身是用于驱动网站的部分小功能的，如搜索框的自动推荐功能，还能保证处理Hotels.com服务的季节性需求高峰整体储能。 Hotels.com的首席技术官Thierry Bedos上个月在伦敦参加“2015 Clou
java笔记1 a-john java
1，面向对象程序设计（Object-oriented Propramming，OOP）：java就是一种面向对象程序设计。 2，对象：我们将问题空间中的元素及其在解空间中的表示称为“对象”。简单来说，对象是某个类型的实例。比如狗是一个类型，哈士奇可以是狗的一个实例，也就是对象。 3，面向对象程序设计方式的特性： 3.1 万物皆为对象。
C语言 sizeof和strlen之间的那些事 C/C++软件开发求职面试题必备考点（一） aijuans C/C++求职面试必备考点
找工作在即，以后决定每天至少写一个知识点，主要是记录，逼迫自己动手、总结加深印象。当然如果能有一言半语让他人收益，后学幸运之至也。如有错误，还希望大家帮忙指出来。感激不尽。后学保证每个写出来的结果都是自己在电脑上亲自跑过的，咱人笨，以前学的也半吊子。很多时候只能靠运行出来的结果再反过来
程序员写代码时就不要管需求了吗？ asia007 程序员不能一味跟需求走
编程也有2年了，刚开始不懂的什么都跟需求走，需求是怎样就用代码实现就行，也不管这个需求是否合理，是否为较好的用户体验。当然刚开始编程都会这样，但是如果有了2年以上的工作经验的程序员只知道一味写代码，而不在写的过程中思考一下这个需求是否合理，那么，我想这个程序员就只能一辈写敲敲代码了。我的技术不是很好，但是就不代
Activity的四种启动模式百合不是茶 android 栈模式启动 Activity的标准模式启动栈顶模式启动单例模式启动
android界面的操作就是很多个activity之间的切换,启动模式决定启动的activity的生命周期 ; 启动模式xml中配置 <activity android:name=".MainActivity" android:launchMode="standard&quo
Spring中@Autowired标签与@Resource标签的区别 bijian1013 java spring @Resource @Autowired @Qualifier
Spring不但支持自己定义的@Autowired注解，还支持由JSR-250规范定义的几个注解，如：@Resource、 @PostConstruct及@PreDestroy。 1. @Autowired @Autowired是Spring 提供的，需导入 Package:org.springframewo
Changes Between SOAP 1.1 and SOAP 1.2 sunjing Changes Enable SOAP 1.1 SOAP 1.2
JAX-WS SOAP Version 1.2 Part 0: Primer (Second Edition) SOAP Version 1.2 Part 1: Messaging Framework (Second Edition) SOAP Version 1.2 Part 2: Adjuncts (Second Edition) Which style of WSDL
【Hadoop二】Hadoop常用命令 bit1129 hadoop
以Hadoop运行Hadoop自带的wordcount为例， hadoop脚本位于/home/hadoop/hadoop-2.5.2/bin/hadoop，需要说明的是，这些命令的使用必须在Hadoop已经运行的情况下才能执行 Hadoop HDFS相关命令 hadoop fs -ls 列出HDFS文件系统的第一级文件和第一级
java异常处理（初级）白糖_ java DAO spring 虚拟机 Ajax
从学习到现在从事java开发一年多了，个人觉得对java只了解皮毛，很多东西都是用到再去慢慢学习，编程真的是一项艺术，要完成一段好的代码，需要懂得很多。最近项目经理让我负责一个组件开发，框架都由自己搭建，最让我头疼的是异常处理，我看了一些网上的源码，发现他们对异常的处理不是很重视，研究了很久都没有找到很好的解决方案。后来有幸看到一个200W美元的项目部分源码，通过他们对异常处理的解决方案，我终
记录整理-工作问题 braveCS 工作
1）那位同学还是CSV文件默认Excel打开看不到全部结果。以为是没写进去。同学甲说文件应该不分大小。后来log一下原来是有写进去。只是Excel有行数限制。那位同学进步好快啊。 2）今天同学说写文件的时候提示jvm的内存溢出。我马上反应说那就改一下jvm的内存大小。同学说改用分批处理了。果然想问题还是有局限性。改jvm内存大小只能暂时地解决问题，以后要是写更大的文件还是得改内存。想问题要长远啊
org.apache.tools.zip实现文件的压缩和解压，支持中文 bylijinnan apache
刚开始用java.util.Zip，发现不支持中文（网上有修改的方法，但比较麻烦）后改用org.apache.tools.zip org.apache.tools.zip的使用网上有更简单的例子下面的程序根据实际需求，实现了压缩指定目录下指定文件的方法 import java.io.BufferedReader; import java.io.BufferedWrit
读书笔记-4 chengxuyuancsdn 读书笔记
1、JSTL 核心标签库标签 2、避免SQL注入 3、字符串逆转方法 4、字符串比较compareTo 5、字符串替换replace 6、分拆字符串 1、JSTL 核心标签库标签共有13个，学习资料：http://www.cnblogs.com/lihuiyy/archive/2012/02/24/2366806.html 功能上分为4类： (1)表达式控制标签：out
[物理与电子]半导体教材的一个小问题 comsci 问题
各种模拟电子和数字电子教材中都有这个词汇-空穴书中对这个词汇的解释是; 当电子脱离共价键的束缚成为自由电子之后,共价键中就留下一个空位,这个空位叫做空穴我现在回过头翻大学时候的教材,觉得这个
Flashback Database --闪回数据库 daizj oracle 闪回数据库
Flashback 技术是以Undo segment中的内容为基础的，因此受限于UNDO_RETENTON参数。要使用flashback 的特性，必须启用自动撤销管理表空间。在Oracle 10g中， Flash back家族分为以下成员： Flashback Database， Flashback Drop，Flashback Query(分Flashback Query,Flashbac
简单排序:插入排序 dieslrae 插入排序
public void insertSort(int[] array){ int temp; for(int i=1;i<array.length;i++){ temp = array[i]; for(int k=i-1;k>=0;k--)
C语言学习六指针小示例、一维数组名含义，定义一个函数输出数组的内容 dcj3sjt126com c
# include <stdio.h> int main(void) { int * p; //等价于 int *p 也等价于 int* p; int i = 5; char ch = 'A'; //p = 5; //error //p = &ch; //error //p = ch; //error p = &i; //
centos下php redis扩展的安装配置3种方法 dcj3sjt126com redis
方法一 1.下载php redis扩展包代码如下复制代码 #wget http://redis.googlecode.com/files/redis-2.4.4.tar.gz 2 tar -zxvf 解压压缩包，cd /扩展包（进入扩展包然后运行phpize 一下是我环境中phpize的目录，/usr/local/php/bin/phpize (一定要
线程池(Executors) shuizhaosi888 线程池
在java类库中，任务执行的主要抽象不是Thread，而是Executor，将任务的提交过程和执行过程解耦 public interface Executor { void execute(Runnable command); } public class RunMain implements Executor{ @Override pub
openstack 快速安装笔记 haoningabc openstack
前提是要配置好yum源版本icehouse，操作系统redhat6.5 最简化安装，不要cinder和swift 三个节点 172 control节点keystone glance horizon 173 compute节点nova 173 network节点neutron control /etc/sysctl.conf net.ipv4.ip_forward =
从c面向对象的实现理解c++的对象（二） jimmee C++面向对象虚函数
1. 类就可以看作一个struct，类的方法，可以理解为通过函数指针的方式实现的，类对象分配内存时，只分配成员变量的，函数指针并不需要分配额外的内存保存地址。 2. c++中类的构造函数，就是进行内存分配(malloc)，调用构造函数 3. c++中类的析构函数，就时回收内存(free) 4. c++是基于栈和全局数据分配内存的，如果是一个方法内创建的对象，就直接在栈上分配内存了。专门在
如何让那个一个div可以拖动 lingfeng520240 html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
第10章高级事件（中） onestopweb 事件
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
计算两个经纬度之间的距离 roadrunners 计算纬度 LBS 经度距离
要解决这个问题的时候，到网上查了很多方案，最后计算出来的都与百度计算出来的有出入。下面这个公式计算出来的距离和百度计算出来的距离是一致的。 /** * * @param longitudeA * 经度A点 * @param latitudeA * 纬度A点 * @param longitudeB *
最具争议的10个Java话题 tomcat_oracle java
1、Java8已经到来。什么！？ Java8 支持lambda。哇哦，RIP Scala！　　随着Java8 的发布，出现很多关于新发布的Java8是否有潜力干掉Scala的争论，最终的结论是远远没有那么简单。Java8可能已经在Scala的lambda的包围中突围，但Java并非是函数式编程王位的真正觊觎者。　　2、Java 9 即将到来　　 Oracle早在8月份就发布
zoj 3826 Hierarchical Notation(模拟) 阿尔萨斯 rar
题目链接：zoj 3826 Hierarchical Notation 题目大意：给定一些结构体，结构体有value值和key值，Q次询问，输出每个key值对应的value值。解题思路：思路很简单，写个类词法的递归函数，每次将key值映射成一个hash值，用map映射每个key的value起始终止位置，预处理完了查询就很简单了。这题是最后10分钟出的，因为没有考虑value为{}的情