内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

数据库_如皋网站建设公司_怎么样

2021-07-08 01:54 出处:欧普曼云计算 人气: 评论(0

数据库_如皋网站建设公司_怎么样

索引

您是否希望利用React和SAP Cloud Foundry的强大功能构建出色的应用程序?好吧,让我们开始今天的主题:散列路由。

今天我们将学习如何使用react+CAP+AppRouter+HTML5 Repo服务进行散列路由,下面是一些简单的步骤!因为你可以有一个只有几个按钮和图片的网站,但一旦应用程序开始增长,你就需要路由。我将通过一个例子与您分享我是如何使路由成为可能的,如果您觉得有用或者您想提出任何改进建议,请提供任何反馈。

App Init

首先,我们将使用我的团队和我创建的一个小脚本,大数据时代纪录片,以便在CF中构建称为CF create App的完整堆栈应用程序时让您的生活更轻松。这将安装一个合适的CAP,react应用程序,html5 repo服务,添加Hana和一些调整,使部署尽可能简单。只需运行

$npx cf create app

这将花费几分钟时间,主要是由于react的应用程序安装。

在生成的文件夹中,您将发现一个CAP应用程序,其中包含常用文件夹和新文件夹:

app/包含react应用程序–它有一个已修改的清单和一个xs-应用程序.json在公用文件夹中正确使用HTML5回购服务srv/您的所有服务定义–已创建默认值,这样应用程序在启动时不会崩溃db/所有域模型和数据库HTMLDeployer/需要在html5 repo服务中部署html5应用程序approuter/approuter,具有从html5 Repo服务到后端和html5应用程序的默认路由mta.yaml公司预配置mta.yaml公司–将处理您的部署,除非您知道自己在做什么,否则不要触摸此

安装完成后,您只需进入项目文件夹并运行这些命令即可启动应用程序。这将启动react应用程序并执行cds watch以运行CAP应用程序:

$cd$npm运行开发

就是这样!

安装React模块

接下来进入app文件夹,我们将安装一些依赖项。我们要安装的第一件事是连接路由器和历史。我个人有一个问题,安装历史版本5.0.0会导致redux状态无法正确更新,所以如果遇到这个问题,请像我一样安装版本4.10.1。在app文件夹中运行以下命令:

$npm install历史@4.10.1连接的react路由器

您可以使用不同的模块,但此模块将允许我们调度历史方法(与redux一起使用),并支持react路由器v4和v5。其次安装react router和前面提到的redux,我想你已经知道这个库了

$npm install react router react router dom redux react redux

Create redux Store

之后我们需要用特定的密钥路由器创建一个reducer。就我个人而言,我喜欢保持干净,你可能想在src文件夹内创建一个名为store的文件夹,其中包含以下文件:

$mkdir store&&cd store

Reducers//项目/app/src/store/异径管.js

如果您在过去使用过redux,这些reducer文件可以正常工作,只需在项目中添加您可能需要的reducer即可。如果你在过去没有与redux合作过,并且喜欢与react一起工作,我强烈建议你开始阅读它,因为它会让你的react生活难以置信的精彩。我特别喜欢使用Redux工具箱https://redux-toolkit.js.org/

继续,让我们创建商店!

创建中间件//项目/app/src/store/配置存储.js

集成Redux存储

为了使所有这些配置工作,我们将把配置的存储添加到我们的索引.js在src文件夹中,如下所示。还可以查看指向通配符"*"的路由。我们用它重定向到我们的主页,以避免中断的路线索引.js//项目/app/src/索引.js

使用连接的React路由器的React组件示例

此外,您还希望看到它的实际运行!所以我把一个小组件放在一起,它将帮助你理解如何使用这个库进行路由默认组件.js//项目/app/src/默认组件.js

我们学习了如何实现基本的哈希路由,大数据治理平台,如何"推"到不同的路由,以及如何重定向。您可以通过点击react应用程序的"匹配"和"未命中"按钮在本地进行尝试–查看路线的变化。我们到云端去吧!

最后一步

使用库cf create app,国内云服务器哪家好,所有模块都会在您的应用程序中添加和配置mta.yaml公司因此,您不必手动执行任何操作,除非您想添加自己的服务或自行调整它们。它已经配置好了,所以您只需要构建和部署?

在项目文件夹中运行以下命令:

$mbt build$cf deploy mta\u archives/

考虑到这一点,您需要启用HTML5 Repo服务并拥有足够的配额。一旦您的应用程序部署完毕,请转到cf cli提供的批准者URL,希望您的应用程序能够启动并运行!

结论

今天我们学习了如何使用CAP+approuter+react+html5 repo服务快速创建应用程序。react应用程序将部署在HTML5 Repo服务中,并由审批者使用。为了在我们的应用程序中导航,我们已经实现了哈希路由,网络云服务器,防止我们的路由中断。

只剩下一个问题。为什么我所有的路线都以'/索引.html’? 我还没有弄清楚这一点,但是当部署带有HTML5 Repo服务的应用程序并从approuter使用它们时,除非我提供索引.html在路径的末尾,批准者将无法找到该文件。如果你知道答案,请提供反馈!

如果您有任何问题,请随时提出,您也可以通过本项目查看回购。https://github.com/Turutupa/cf-html5-repo-hash-routing-react

如果您喜欢cf创建应用,大数据用什么数据库,请关注和支持https://github.com/turutupa/cf-create-app

分享给小伙伴们:
本文标签: 数据库如皋网站建设公司怎么样

相关文章

评论

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

签名: 验证码: 点击我更换图片

评论列表