React 全栈体系（十一）

2023-09-20 22:44:52

第五章 React 路由

五、向路由组件传递参数数据

1. 效果

请添加图片描述

2. 代码 - 传递 params 参数

2.1 Message
/* src/pages/Home/Message/index.jsx */
import React, { Component } from "react";
import {Link, Route} from 'react-router-dom'
import Detail from './Detail'

export default class Message extends Component {
  state = {
    messageArr: [
      {id:'01', title: '消息1'},
      {id:'02', title: '消息2'},
      {id:'03', title: '消息3'},
    ]
  }
  render() {
    const {messageArr} = this.state
    return (
      <div>
        <ul>
          {
            messageArr.map((msgObj)=>{
              return (
                <li key={msgObj.id}>
                  {/* 向路由组件传递params参数 */}
                  <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
                </li>
              )
            })
          }
        </ul>
        <hr />
        {/* 声明接收params参数 */}
        <Route path="/home/message/detail/:id/:title" component={Detail}/>
      </div>
    );
  }
}
2.2 Detail
/* src/pages/Home/Message/Detail/index.jsx */
import React, { Component } from 'react'

const Detaildata = [
    {id:'01', content:'你好，中国'},
    {id:'02', content:'你好，小帽学堂'},
    {id:'03', content:'你好，未来的自己'}
]
export default class Detail extends Component {
  render() {
    //接收params参数
    const {id, title} = this.props.match.params
    const findResult = Detaildata.find((detailObj)=>{
        return detailObj.id === id
    })
    return (
      <ul>
        <li>ID:{id}</li>
        <li>Title:{title}</li>
        <li>Content: {findResult.content}</li>
      </ul>
    )
  }
}

3. 代码 - 传递 search 参数

3.1 Message
/* src/pages/Home/Message/index.jsx */
import React, { Component } from "react";
import {Link, Route} from 'react-router-dom'
import Detail from './Detail'

export default class Message extends Component {
  state = {
    messageArr: [
      {id:'01', title: '消息1'},
      {id:'02', title: '消息2'},
      {id:'03', title: '消息3'},
    ]
  }
  render() {
    const {messageArr} = this.state
    return (
      <div>
        <ul>
          {
            messageArr.map((msgObj)=>{
              return (
                <li key={msgObj.id}>
                  {/* 向路由组件传递params参数 */}
                  {/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> */}

                  {/* 向路由组件传递search参数 */}
                  <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
                </li>
              )
            })
          }
        </ul>
        <hr />
        {/* 声明接收params参数 */}
        {/* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}

        {/* search参数无需声明接收，正常注册路由即可 */}
        <Route path="/home/message/detail" component={Detail}/>
      </div>
    );
  }
}
3.2 Detail
/* src/pages/Home/Message/Detail/index.jsx */
import React, { Component } from 'react'
import qs from 'querystring'

const Detaildata = [
    {id:'01', content:'你好，中国'},
    {id:'02', content:'你好，小帽学堂'},
    {id:'03', content:'你好，未来的自己'}
]
export default class Detail extends Component {
  render() {
    // 接收params参数
    // const {id, title} = this.props.match.params

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

    const findResult = Detaildata.find((detailObj)=>{
        return detailObj.id === id
    })
    return (
      <ul>
        <li>ID:{id}</li>
        <li>Title:{title}</li>
        <li>Content: {findResult.content}</li>
      </ul>
    )
  }
}

4. 代码 - 传递 state 参数

4.1 Message
/* src/pages/Home/Message/index.jsx */
import React, { Component } from "react";
import {Link, Route} from 'react-router-dom'
import Detail from './Detail'

export default class Message extends Component {
  state = {
    messageArr: [
      {id:'01', title: '消息1'},
      {id:'02', title: '消息2'},
      {id:'03', title: '消息3'},
    ]
  }
  render() {
    const {messageArr} = this.state
    return (
      <div>
        <ul>
          {
            messageArr.map((msgObj)=>{
              return (
                <li key={msgObj.id}>
                  {/* 向路由组件传递params参数 */}
                  {/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> */}

                  {/* 向路由组件传递search参数 */}
                  {/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}

                  {/* 向路由组件传递state参数 */}
                  <Link to={{pathname:'/home/message/detail', state:{id:msgObj.id, title: msgObj.title}}}>{msgObj.title}</Link>
                </li>
              )
            })
          }
        </ul>
        <hr />
        {/* 声明接收params参数 */}
        {/* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}

        {/* search参数无需声明接收，正常注册路由即可 */}
        {/* <Route path="/home/message/detail" component={Detail}/> */}

        {/* state参数无需声明接收，正常注册路由即可 */}
        <Route path="/home/message/detail" component={Detail}/>

      </div>
    );
  }
}
4.2 Detail
/* src/pages/Home/Message/Detail/index.jsx */
import React, { Component } from 'react'
// import qs from 'querystring'

const Detaildata = [
    {id:'01', content:'你好，中国'},
    {id:'02', content:'你好，小帽学堂'},
    {id:'03', content:'你好，未来的自己'}
]
export default class Detail extends Component {
  render() {
    // 接收params参数
    // const {id, title} = this.props.match.params

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

    // 接收state参数
    const {id, title} = this.props.location.state || {}
    const findResult = Detaildata.find((detailObj)=>{
        return detailObj.id === id
    }) || {}
    return (
      <ul>
        <li>ID:{id}</li>
        <li>Title:{title}</li>
        <li>Content: {findResult.content}</li>
      </ul>
    )
  }
}

5. 总结

1.params参数
	路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>
	注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>
	接收参数：this.props.match.params

2.search参数
	路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
	注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
	接收参数：this.props.location.search
	备注：获取到的search是urlencoded编码字符串，需要借助querystring解析

3.state参数
	路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
	注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
	接收参数：this.props.location.state
	备注：刷新也可以保留住参数

6. 代码 - push 与 replace 模式

Message
/* src/pages/Home/Message/index.jsx */
import React, { Component } from "react";
import {Link, Route} from 'react-router-dom'
import Detail from './Detail'

export default class Message extends Component {
  state = {
    messageArr: [
      {id:'01', title: '消息1'},
      {id:'02', title: '消息2'},
      {id:'03', title: '消息3'},
    ]
  }
  render() {
    const {messageArr} = this.state
    return (
      <div>
        <ul>
          {
            messageArr.map((msgObj)=>{
              return (
                <li key={msgObj.id}>
                  {/* 向路由组件传递params参数 */}
                  {/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> */}

                  {/* 向路由组件传递search参数 */}
                  {/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}

                  {/* 向路由组件传递state参数 */}
                  <Link replace to={{pathname:'/home/message/detail', state:{id:msgObj.id, title: msgObj.title}}}>{msgObj.title}</Link>
                </li>
              )
            })
          }
        </ul>
        <hr />
        {/* 声明接收params参数 */}
        {/* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}

        {/* search参数无需声明接收，正常注册路由即可 */}
        {/* <Route path="/home/message/detail" component={Detail}/> */}

        {/* state参数无需声明接收，正常注册路由即可 */}
        <Route path="/home/message/detail" component={Detail}/>

      </div>
    );
  }
}

六、多种路由跳转方式

1. 效果

请添加图片描述

2. 代码 - 跳转 + 携带 params 参数

2.1 Message
/* src/pages/Home/Message/index.jsx */
import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Detail from "./Detail";

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

  pushShow = (id, title) => {
    //push跳转+携带params参数
    this.props.history.push(`/home/message/detail/${id}/${title}`)
  }

  replaceShow = (id, title) => {
    //replace跳转+携带params参数
    this.props.history.replace(`/home/message/detail/${id}/${title}`)
  }
  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map((msgObj) => {
            return (
              <li key={msgObj.id}>
                {/* 向路由组件传递params参数 */}
                <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>
                  {msgObj.title}
                </Link>
                &nbsp;<button onClick={()=>this.pushShow(msgObj.id, msgObj.title)}>push查看</button>
                &nbsp;<button onClick={()=>this.replaceShow(msgObj.id, msgObj.title)}>replace查看</button>
              </li>
            );
          })}
        </ul>
        <hr />
        {/* 声明接收params参数 */}
        <Route path="/home/message/detail/:id/:title" component={Detail} />
      </div>
    );
  }
}
2.2 Detail
/* src/pages/Home/Message/Detail/index.jsx */
import React, { Component } from 'react'
// import qs from 'querystring'

const Detaildata = [
    {id:'01', content:'你好，中国'},
    {id:'02', content:'你好，小帽学堂'},
    {id:'03', content:'你好，未来的自己'}
]
export default class Detail extends Component {
  render() {
    // 接收params参数
    const {id, title} = this.props.match.params

    const findResult = Detaildata.find((detailObj)=>{
        return detailObj.id === id
    }) || {}
    return (
      <ul>
        <li>ID:{id}</li>
        <li>Title:{title}</li>
        <li>Content: {findResult.content}</li>
      </ul>
    )
  }
}

3. 代码 - 跳转 + 携带 state 参数

3.1 Message
/* src/pages/Home/Message/index.jsx */
import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Detail from "./Detail";

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

  pushShow = (id, title) => {
    //push跳转+携带state参数
    this.props.history.push(`/home/message/detail`, {id,title})
  }

  replaceShow = (id, title) => {
    //replace跳转+携带state参数
    this.props.history.replace(`/home/message/detail`, {id,title})
  }
  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map((msgObj) => {
            return (
              <li key={msgObj.id}>
                {/* 向路由组件传递params参数 */}
                <Link to={{pathname:'/home/message/detail',state:{id:msgObj.id, title:msgObj.title}}}>{msgObj.title}</Link>
                &nbsp;<button onClick={()=>this.pushShow(msgObj.id, msgObj.title)}>push查看</button>
                &nbsp;<button onClick={()=>this.replaceShow(msgObj.id, msgObj.title)}>replace查看</button>
              </li>
            );
          })}
        </ul>
        <hr />
        {/* 声明接收state参数 */}
        <Route path="/home/message/detail" component={Detail} />
      </div>
    );
  }
}
3.2 Detail
/* src/pages/Home/Message/Detail/index.jsx */
import React, { Component } from 'react'

const Detaildata = [
    {id:'01', content:'你好，中国'},
    {id:'02', content:'你好，小帽学堂'},
    {id:'03', content:'你好，未来的自己'}
]
export default class Detail extends Component {
  render() {
    const {id, title} = this.props.location.state

    const findResult = Detaildata.find((detailObj)=>{
        return detailObj.id === id
    })
    return (
      <ul>
        <li>ID:{id}</li>
        <li>Title:{title}</li>
        <li>Content: {findResult.content}</li>
      </ul>
    )
  }
}

4. 代码 - 前进后退

/* src/pages/Home/Message/index.jsx */
import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Detail from "./Detail";

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

  pushShow = (id, title) => {
    //push跳转+携带state参数
    this.props.history.push(`/home/message/detail`, { id, title });
  };

  replaceShow = (id, title) => {
    //replace跳转+携带state参数
    this.props.history.replace(`/home/message/detail`, { id, title });
  };

  back = () => {
    this.props.history.goBack();
  };

  forward = () => {
    this.props.history.goForward();
  };

  go = () => {
    this.props.history.go(-2);
  };
  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map((msgObj) => {
            return (
              <li key={msgObj.id}>
                {/* 向路由组件传递params参数 */}
                <Link
                  to={{
                    pathname: "/home/message/detail",
                    state: { id: msgObj.id, title: msgObj.title },
                  }}
                >
                  {msgObj.title}
                </Link>
                &nbsp;
                <button onClick={() => this.pushShow(msgObj.id, msgObj.title)}>
                  push查看
                </button>
                &nbsp;
                <button
                  onClick={() => this.replaceShow(msgObj.id, msgObj.title)}
                >
                  replace查看
                </button>
              </li>
            );
          })}
        </ul>
        <hr />
        {/* 声明接收state参数 */}
        <Route path="/home/message/detail" component={Detail} />
        <button onClick={this.back}>回退</button>&nbsp;
        <button onClick={this.forward}>前进</button>&nbsp;
        <button onClick={this.go}>go</button>
      </div>
    );
  }
}

5. 总结

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

6. withRouter 的使用

Header
/* src/components/Header/index.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 (
			<div className="page-header">
				<h2>React Router Demo</h2>
				<button onClick={this.back}>回退</button>&nbsp;
				<button onClick={this.forward}>前进</button>&nbsp;
				<button onClick={this.go}>go</button>
			</div>
		)
	}
}

export default withRouter(Header)

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

请添加图片描述

七、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可以用于解决一些路径错误相关的问题。
更多推荐

淘宝分布式文件存储系统( 二 ) -TFS

淘宝分布式文件存储系统(二)->>TFS目录:大文件存储结构哈希链表的结构文件映射原理及对应的API文件映射头文件的定义大文件存储结构:采用块(block)文件的形式对数据进行存储,分成索引块,主块,扩展块。所有的小文件都是存放到主块中的，扩展块用来保存溢出的数据，也就是当我们的主快存储不下的时候，数据就会保存到扩展块

kafka 分布式的情况下，如何保证消息的顺序消费?

目录一、什么是分布式二、kafka介绍三、消息的顺序消费四、如何保证消息的顺序消费一、什么是分布式分布式是指将计算任务分散到多个计算节点上进行并行处理的一种计算模型。在分布式系统中，多台计算机通过网络互联，共同协作完成任务。每个计算节点都可以独立运行，并且可以相互通和协调。这种分布式的架构可以提高计算能力和可靠性，充分

高云FPGA系列教程（8）：ARM串口数据接收（中断和轮询方式）

文章目录@[toc]1.GW1NSR-4C串口外设简介2.FPGA配置3.常用函数4.轮询方式接收数据5.中断方式接收数据本文是高云FPGA系列教程的第8篇文章。本篇文章介绍片上ARMCortex-M3硬核处理器串口外设的使用，演示轮询方式和中断方式接收串口数据，并进行回环测试，基于TangNano4K开发板。参考文档

享元模式模式简介

概念：享元模式（Flyweightpattern）是一种结构型设计模式，旨在通过共享对象来减少内存使用和提高性能。它通过将对象的状态分为可共享的内部状态和不可共享的外部状态，来实现对象的共享。内部状态可以被多个对象共享，而外部状态则取决于具体的对象。通过共享内部状态，可以减少系统中相似对象的数量，从而节省内存空间。特点

【论文阅读 09】融合门控自注意力机制的生成对抗网络视频异常检测

2021年中国图象图形学报摘要背景：视频异常行为检测是智能监控技术的研究重点，广泛应用于社会安防领域。当前的挑战之一是如何提高异常检测的准确性，这需要有效地建模视频数据的空间维度和时间维度信息。生成对抗网络（GANs）因其结构优势而被广泛应用于视频异常行为检测。方法：本文提出了一种改进的生成对抗网络方法，用于视频异常行

OpenCV实现的F矩阵+RANSAC原理与实践

1RANSAC筛选1.1大致原理Randomsampleconsensus(RANSAC)，即随机抽样一致性，其是一种用于估计模型参数的迭代方法，特别适用于处理包含离群点（outliers）的数据集RANSAC的主要思想是随机采样数据点，用这些采样点拟合一个模型，然后计算其他数据点到这个模型的拟合误差；根据误差和阈值，

什么是异步编程？解释异步编程的优势和实现方式

1、什么是异步编程？解释异步编程的优势和实现方式。异步编程是一种编程模型，它将程序中的计算任务分成独立的阶段，并在每个阶段完成后立即返回结果。异步编程模型通常用于处理长时间运行的任务，例如网络请求、IO操作等，以避免阻塞主线程，提高程序的响应性能。异步编程的优势：减少阻塞：异步编程可以避免主线程被长时间运行的任务阻塞，

Go语言支持闭包吗?说说你对它的理解

1.引言闭包是编程语言中的一个重要概念，它允许函数不仅仅是独立的代码块，还可以携带数据和状态。闭包的特点是可以捕获并保持对外部变量的引用，使函数值具有状态和行为，可以在多次调用之间保留状态。本文将深入探讨闭包的定义、用途和注意事项，以及如何正确使用闭包。2.什么是闭包闭包是一个函数值，它引用了在其外部定义的一个或多个变

[2023.09.20]:Yew的前端开发经历小结

今天基本上完成了一个操作闭环，即能够保存，拉取和删除数据。截个图这个过程的前端和后端都是用Rust写的，前端使用的是Yew。Yew是一种用于构建现代Web应用程序的Rust框架，其计目标是提供一种安全、高效、易用的方式来构建Web应用程序。Yew基于WebAssembly（Wasm）技术，将Rust代码编译为能在浏览器

Redis 哈希表操作实战（全）

目录HSET添加HSETNX添加HMSET批量添加HGET获取元素HGETALL获取所有HMGET批量查询HEXISTS判断是否存在HINCRBY增加整数HINCRBYFLOAT添加浮点数HLEN查Field数量HKEYS查所有FieldHVALS查所有Field值HSCAN迭代HDEL删除FieldHSET添加HSE

2023复旦大学计算机科学技术（网络空间安全）保研记录

BG：中九rank前5％、科研经历少、无竞赛复旦大学计算机科学与技术--网络空间安全方向，参营4天（6.26-6.29），管午饭，住宿自理6.26--报道+听会，6.27--听会＋实验室参观给了一些专业方向和老师27号晚上会有一个小时的博弈时间，你可以看到每个方向有多少个人报名了，可以实时调整，紧张刺激，不过今年网安人

热文推荐
  1. 向量数据库，能让AI再次起飞吗？

    9月7-8日，深圳国际会展中心18号馆来了，来了，腾讯面向产业互联网领域规格最高、规模最大、覆盖最广的年度科技盛会-——-腾讯全球数字生态大会。9月7日，我们将聚焦产业未来发展新趋势，针对云计算、大数据、人工智能、安全、SaaS等核心数字化工具做关键进展发布，并联合生态伙伴推出最新行业场景解决方案。同时，携手全球权威商

  2. mysql：列类型之float、double

    mysql：列类型之float、double_mysqldouble_普通网友的博客-CSDN博客环境：window10vs2022.net6mysql8.0.25DBeaver参考：《MSDN：浮点数值类型（C#引用）》《mysql：11.1.4Floating-PointTypes(ApproximateValue

  3. Flutter开发桌面应用的一些探索分享

    引言在移动应用开发领域，Flutter已经赢得了广泛的认可和采用，成为了跨平台移动应用开发的瑞士军刀。然而，Flutter的魅力并不仅限于移动平台，它还可以用于开发桌面应用程序，为开发人员提供了一种全新的选择。本文将深入探讨Flutter在桌面应用开发中的应用，以及目前国内新颖的跨端开发技术。桌面应用开发的现状在过去，

  4. RHCE---Linux的计划任务

    文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言如果想要让自己设计的备份程序可以自动地在系统下面运行，而不需要手动来启动它，这是该如何处理？这些任务可以分为【单一】任务和【循环】任务，在系统内又是哪些服务在负责？有的工作是例行性的，而有些任务是临时发生的。但是计算机不在身边这时就可以使用计

  5. 【C语言】字符串函数

    文章目录前言1.strcat2.strncpy3.strncat4.strncmp5.strstr6.strtok7.strerror8.strcat的模拟实现9.strstr的模拟实现总结添加链接描述前言大家好呀，今天给大家分享一下字符函数和字符串函数C语言中对字符和字符串的处理很是频繁，但是C语言本身是没有字符串类

  6. 可转债实战与案例分析——成功的和失败的可转债投资案例、教训与经验分享

    实战与案例分析——投资案例研究股票量化程序化自动交易接口一、成功的可转债投资案例成功的可转债投资案例提供了有价值的经验教训，以下是一个典型的成功案例：案例：投资者B的成功可转债投资投资者B是一位懂得风险管理的投资者，他在某家知名科技公司发行的可转债上发现了投资机会。以下是他的投资故事：投资背景：投资者B注意到该科技公司

  7. 大气化学在线耦合模式WRF/Chem

    查看原文：区域气象-大气化学在线耦合模式（WRF/Chem）在大气环境领域实践随着我国经济快速发展，我国面临着日益严重的大气污染问题。近年来，严重的大气污染问题已经明显影响国计民生，引起政府、学界和人们越来越多的关注。大气污染是工农业生产、生活、交通、城市化等方面人为活动的综合结果，同时气象因素是控制大气污染的关键自然

  8. 【自然语言处理】【大模型】RWKV：基于RNN的LLM

    相关博客【自然语言处理】【大模型】RWKV：基于RNN的LLM【自然语言处理】【大模型】CodeGen：一个用于多轮程序合成的代码大语言模型【自然语言处理】【大模型】CodeGeeX：用于代码生成的多语言预训练模型【自然语言处理】【大模型】LaMDA：用于对话应用程序的语言模型【自然语言处理】【大模型】DeepMind

  9. 分布式事物【RocketMQ事务消息、Docker安装 RocketMQ、实现订单微服务、订单微服务业务层实现】(八)-全面详解（学习总结---从入门到深化）

    目录可靠消息最终一致性分布式事务实现_RocketMQ事务消息可靠消息最终一致性分布式事务实战_案列业务介绍数据库表设计可靠消息最终一致性分布式事务实战_Docker安装RocketMQ部署RocketMQ的管理工具可靠消息最终一致性分布式事务实战_实现订单微服务可靠消息最终一致性分布式事务实战_订单微服务业务层实现可