高性能多级网关与多级缓存架构落地实战（完结+附电子书）

学习地址1：https://pan.baidu.com/s/14sTSypnp6u4RSYLLkGJiLg 提取码: jn7s 学习地址2：https://share.weiyun.com/SNltUNLW 密码：zi3dc7 我们今天讲的实际上是一个工作在 HTTP 七层协议的网关，它主要做的有几件事情： 第一，公网入口。它作为我们公有云服务的一个入口，可以把公有云过来的请求定向到用户的资源上面去。 第二，对接后端资源。我们云开发有很多内部的资源，像云函数、容器引擎这样的资源，便可以把请求对接到这样的云资源上面去。 第三，身份鉴权。云开发有自己的一套账号身份体系，请求里如果是带有身份信息的，那么网关会对身份进行鉴权。 那么该如何操作呢？非常简单，只需要三个步骤。 第一步，把function 改为class，然后去掉括号，让app继承react.component。 第二步，使用react 组件类的成员、render函数，把retrun的jsx代码全部包裹起来。 第三步需要我们创建构建函数，在构建函数中初始化state状态。react的构建函数的写法我们在前面课程中学过，而在这个组件的state状态中，我们需要初始化一个机器人画廊的空列表。 const fetchData = async () => { const response = await fetch("https://jsonplaceholder.typicode.com/users") // .then((response) => response.json()) // .then((data) => setRobotGallery(data)); const data = await response.json() setRobotGallery(data) }; 接下来，我们就可以开始在组件渲染的时候使用这个loading state了。找到机器人画册列表，就是在<ShoppingCart />组件下面的div元素。我们使用一个花括号把整个div元素都包起来。然后在花括号内做逻辑判断，如果loading state 等于false的时候，代表loading结束，我们显示机器人画册列表；而当loading 为 false的时候，我们应该在这里显示一个转菊花的loaidng 提示，不过我们这里稍微简单处理一下，显示一个loading的字符串意思一下就行了。 {!loading ? ( <div className={styles.robotList}> {robotGallery.map((r) => ( <Robot key={`robot_${r.id}`} id={r.id} name={r.name} email={r.email} /> ))} </div> ) : ( <h2>loading 加载中</h2> )} 接着，把三个图片的引用放到iamge组件的src属性中 <Col span={20}> <Row> <Col span={12}></Col> <Col span={12}> <Row> <Col span={12}></Col> <Col span={12}></Col> </Row> <Row> <Col span={12}></Col> <Col span={12}></Col> </Row> </Col> </Row> <Row> <Col span={6}></Col> <Col span={6}></Col> <Col span={6}></Col> <Col span={6}></Col> </Row> </Col> 最后，别忘了在组件index、以及component index文件中都导出一下ProductCollection组件。 接下来，我们回到app.tsx，引用ProductCollection组件以后就可以使用了。请注意，ProductCollection组件我们将会使用3次，每次传入不同的标题，和产品列表。而标题还可以通过Title组件的type属性配置不同的颜色。 <ProductCollection title={<Typography.Title level={3} type="warning">爆款推荐</Typography.Title>} sideImage={sideImage} products={productList1} /> <ProductCollection title={<Typography.Title level={3} type="danger">新品上市</Typography.Title>} sideImage={sideImage2} products={productList2} /> <ProductCollection title={<Typography.Title level={3} type="success">国内游推荐</Typography.Title>} sideImage={sideImage3} products={productList3} /> 好了，这下错误就消失了，现在，react-router的数据以及路由操作的函数就都通过上下文Context传递给ProductImage组件了，我们可以随意在组件中使用history所定义的所有操作了。 const ProductImageComponent: React.FC<PropsType> = ({ id, size, imageSrc, price, title, ...props }) => { console.log(props.history) console.log(props.location) console.log(props.match) return ( 我们就可以通过this.props来访问t函数了。 接下来，我们把header中所有的语言都是用t函数来封装一下。 <Typography.Text>{t("header.slogan")}</Typography.Text> <Menu.Item key={"new"}>{t("header.add_new_language")}</Menu.Item> <Button.Group className={styles["button-group"]}> <Button onClick={() => history.push("register")}> {t("header.register")} </Button> <Button onClick={() => history.push("signIn")}> {t("header.signin")} </Button> </Button.Group> <Typography.Title level={3} className={styles.title}> {t("header.title")} </Typography.Title> <Menu mode={"horizontal"} className={styles["main-menu"]}> <Menu.Item key="1"> {t("header.home_page")} </Menu.Item> <Menu.Item key="2"> {t("header.weekend")} </Menu.Item> <Menu.Item key="3"> {t("header.group")} </Menu.Item> <Menu.Item key="4"> {t("header.backpack")} </Menu.Item> <Menu.Item key="5"> {t("header.private")} </Menu.Item> <Menu.Item key="6"> {t("header.cruise")} </Menu.Item> <Menu.Item key="7"> {t("header.hotel")} </Menu.Item> <Menu.Item key="8"> {t("header.local")} </Menu.Item> <Menu.Item key="9"> {t("header.theme")} </Menu.Item> <Menu.Item key="10"> {t("header.custom")} </Menu.Item> <Menu.Item key="11"> {t("header.study")} </Menu.Item> <Menu.Item key="12"> {t("header.visa")} </Menu.Item> <Menu.Item key="13"> {t("header.enterprise")} </Menu.Item> <Menu.Item key="14"> {t("header.high_end")} </Menu.Item> <Menu.Item key="15"> {t("header.outdoor")} </Menu.Item> <Menu.Item key="16"> {t("header.insurance")} </Menu.Item> </Menu> 比如说，我们有一个加法计算器，curriedAdd 。通过柯里化，给函数传入第一部分的参数；然后，赋值定义给另一个函数，addTen；最后，在调用addTen函数的时候传入第二部分的参数。 let next = store.dispatch store.dispatch = function dispatchAndLog(action) { console.log('dispatching', action) console.log('当前 state', store.getState()); next(action) console.log('更改后的 state', store.getState()); } 那么，如果把这个入口封装一下，给未来的拓展做更广泛的应用，那么，我们可以把整个流程都写在函数里来处理，函数名称叫做，applyMiddleware。 const applyMiddleware = function(middleware){ let next = store.dispatch; // 这里传入store，因为中间件中有可能会用到getState获取数据，比如打印store store.dispatch = middleware(store)(next); } applyMiddleware(dispatchAndLog) 首先，我们引入几个依赖，productDetailSlice、然后从自定义hook中引入useSelector ；最后，从react-redux中引入useDispatch函数。 import { productDetailSlice } from "../../redux/productDetail/slice"; import { useSelector } from "../../redux/hooks"; import { useDispatch } from "react-redux"; 接下来，我们使用useSelector来连接产品详情数据中的loading、error以及data这三个字段的数据。 const loading = useSelector((state) => state.productDetail.loading); const product = useSelector((state) => state.productDetail.data); const error = useSelector((state) => state.productDetail.error);