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

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

JVM运行时数据区

JVM运行时数据区

Java和C的区别&#xff0c;体现在自动内存分配和垃圾收集技术。 JVM在执行Java程序时&#xff0c;会将它管理的内存分为若干个不同的数据区域。 这些区域有各自的作用范围以及生命周期&#xff1a; 线程私有的区域&#xff0c;随着用户线程的启动和结束而建立和销毁。线程共…
阅读更多...
2023网络安全十大顶级工具

2023网络安全十大顶级工具

从事网络安全工作&#xff0c;手上自然离不开一些重要的网络安全工具。今天&#xff0c;分享10大网络安全工具。 一、Kali Linux Kali 是一个基于 Debian 的 Linux 发行版。它的目标就是为了简单&#xff1a;在一个实用的工具包里尽可能多的包含渗透和审计工具。Kali 实现了这…
阅读更多...
MySQL基础（二十二）逻辑架构

MySQL基础（二十二）逻辑架构

1.逻辑架构剖析 1.1 第1层&#xff1a;连接层 系统&#xff08;客户端&#xff09;访问MySQL服务器前&#xff0c;做的第一件事就是建立TCP连接。 经过三次握手建立连接成功后&#xff0c;MySQL服务器对TCP传输过来的账号密码做身份认证、权限获取。 用户名或密码不对&#…
阅读更多...
Redis 五大基本数据类型常见命令

Redis 五大基本数据类型常见命令

一、redis中的常见数据结构 Redis共有5种常见数据结构&#xff0c;分别字符串&#xff08;STRING)、列表&#xff08;LIST&#xff09;、集合&#xff08;SET)、散列&#xff08;HASH&#xff09;、有序集合&#xff08;ZSET)。 二、redis中五大基本数据类型介绍 字符串(Str…
阅读更多...
尚硅谷JUC

尚硅谷JUC

文章目录 1. 什么是JUC1.1 JUC简介1.2 进程和线程基本概念2.1 Synchronized2.1.1 Synchronized关键字2.1.2 synchronized实现三个线程卖30张票 2.2 Lock2.2.1 什么是Lock2.2.2 使用Lock实现买票功能2.2.3 两者的区别 3. 线程间通信及定制化通信3.1 使用synchronized实现线程之间…
阅读更多...
Hive语言

Hive语言

一、Hive的DDL语言&#xff08;数据库、数据表的增删改查操作) 二、Hive的DQL语言&#xff08;数据库查询语言&#xff09; 2.1Hive七子句 聚合函数&#xff1a;count()、sum()、max()、min()、avg()可以单独使用。(缩写&#xff1a;cs mm a) 2.1.1 分区查询与分区裁剪 SELEC…
阅读更多...
女生学习软件测试怎么样？

女生学习软件测试怎么样？

在IT技术行业&#xff0c;女生学习还是有很大优势的。女生相较于男生更有耐心&#xff0c;包容性强&#xff0c;心思细腻&#xff0c;对细节把控更好&#xff0c;同时还能帮助团队男女平衡&#xff0c;活跃气氛。 编程是一个只要你肯学习就会有回报的行业&#xff0c;不论男生…
阅读更多...
ResourceManager HA 原理

ResourceManager HA 原理

简介 为了解决 Yarn 中 ResourceManager 的单点故障问题&#xff0c;在 Hadoop 2.4 中新增了 ResourceManager HA 的能力&#xff0c; 该文章基于 Hadoop 3.1.1 进行讲解。 1.1. 名词定义 全称简称备注ResourceManagerRmZookeeperZK ResourceManager Ha 架构 ResourceMana…
阅读更多...
前端工程化 搭建私有组件库 组件从开发到发布私有npm仓库的全过程

前端工程化 搭建私有组件库 组件从开发到发布私有npm仓库的全过程

前言 基于Vue3.0 TS的组件从开发组件库到发布私有npm仓库的全过程 环境 这里列出本文所使用的环境版本 vue 3.0 vue/cli 4.5.9 nodeJs 14.15.1 npm 6.14.8 vue --version vue/cli 4.5.9 npm -v 6.14.8 node -v v14.15.1 步骤 创建项目 使用 vue-cli 创建一个 vue3 项目&a…
阅读更多...
mysql的高级查询语句

mysql的高级查询语句

1.本文前言 数据库是用来存储数据&#xff0c;更新&#xff0c;查询数据的工具&#xff0c;而查询数据是一个数据库最为核心的功能&#xff0c;数据库是用来承载信息&#xff0c;而信息是用来分析和查看的。所以掌握更为精细化的查询方式是很有必要的。本文将围绕数据的高级查…
阅读更多...
C++类和对象（中）

C++类和对象（中）

目录 1.类的6个默认成员函数 2.构造函数 2.1构造函数的概念 2.2构造函数的重载 2.3默认构造函数 2.4总结 3.析构函数 3.1析构函数的概念 3.2编译器自动生成的析构函数会做那些事情呢&#xff1f; 3.3析构函数的析构顺序 4.拷贝构造函数&#xff08;复制构造函数&am…
阅读更多...
用ChatGPT三分钟免费做出数字人视频- 提升自媒体魅力

用ChatGPT三分钟免费做出数字人视频- 提升自媒体魅力

用ChatGPT三分钟免费做出数字人视频- 提升自媒体魅力 一、ChatGPT产生文案二、腾讯智影网站三、选择一个2D数字人四、粘贴文本五、编辑自定义&#xff0c;合成六、资源七、其他数字人平台推荐八、生成视频预览 本教程收集于&#xff1a;AIGC从入门到精通教程汇总 操作指引 Ch…
阅读更多...
哪个牌子的电视盒子好用？罗鹏数码盘点2023电视盒子排名

哪个牌子的电视盒子好用？罗鹏数码盘点2023电视盒子排名

电视机资源少、卡顿&#xff0c;配置不足的时候只需要安装一台电视盒子就可以解决这些问题&#xff0c;不需要花费大价钱更换电视机。那么&#xff0c;你知道哪个牌子的电视盒子好用吗&#xff1f;今天罗鹏就来详细聊聊这个话题&#xff0c;分享2023最新电视盒子排名。 一&…
阅读更多...
gitlab服务器发送邮件配置

gitlab服务器发送邮件配置

1.修改gitlab的配置文件&#xff1a; vim /etc/gitlab/gitlab.rb 这里具体的gitlab.rb文件所在路径需要根据实际的来 找到如下图所示的部分&#xff0c;放开注释&#xff0c;修改配置&#xff0c;此处我用的发件邮箱是QQ邮箱&#xff0c;所以域名配置都是qq.com&#xff0c;…
阅读更多...
图表控件Stimulsoft 2023.2 带来极致深色主题， 一起来看看还有哪些亮点？

图表控件Stimulsoft 2023.2 带来极致深色主题， 一起来看看还有哪些亮点？

Stimulsoft Reports 是一款报告编写器&#xff0c;主要用于在桌面和Web上从头开始创建任何复杂的报告。可以在大多数平台上轻松实现部署&#xff0c;如ASP.NET, WinForms, .NET Core, JavaScript, WPF, Angular, Blazor, PHP, Java等&#xff0c;在你的应用程序中嵌入报告设计器…
阅读更多...
clickhouse的嵌套数据结构Tuple、Array与Nested类型介绍和使用示例

clickhouse的嵌套数据结构Tuple、Array与Nested类型介绍和使用示例

文章目录 Tuple类型Array类型Nested类型使用示例单独使用Tuple数组嵌套 Array(Tuple)Nested类型 生产使用&#xff1a;分组查询 Tuple类型 Tuple是ClickHouse数据库中的一种数据类型&#xff0c;它允许在一个字段中存储由不同数据类型组成的元组(tuple)。元组可以包含任意数量…
阅读更多...
快速了解C语言的基本元素

快速了解C语言的基本元素

C语言是一种编程语言&#xff0c;和其它语言一样&#xff0c;也定义了自己的语法和词汇。学习C语言&#xff0c;首先要学习C语言的词汇&#xff0c;再学习C语言的语法规则&#xff0c;然后由词汇构成语句&#xff0c;由语句构成源程序&#xff0c;源程序也称为源代码或代码&…
阅读更多...
ChatGPT ：国内免费可用 ChatGPT +Midjourney绘图

ChatGPT ：国内免费可用 ChatGPT +Midjourney绘图

前言 ChatGPT&#xff08;全名&#xff1a;Chat Generative Pre-trained Transformer&#xff09;&#xff0c;美国OpenAI 研发的聊天机器人程序 &#xff0c;于2022年11月30日发布 。ChatGPT是人工智能技术驱动的自然语言处理工具&#xff0c;它能够通过理解和学习人类的语言来…
阅读更多...
【MySQL】绪论 MySQL工作环境

【MySQL】绪论 MySQL工作环境

文章目录 实验内容实验步骤实验内容 MySQL命令MySQL 的启动与关闭MySQL 管理备份和还原数据库navicat工具使用实验步骤 1. MySQL命令 （1）查看MySQL基本命令 （2）查看MySQL版本信息 2. MySQL的启动与关闭 （1）启动MySQL服务器 （2）测试服务器启动成功 （3）合法用
阅读更多...
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…
阅读更多...
最新文章

Copyright @ 2022~2023