|
|
|
@ -139,7 +139,7 @@ ABP是一个模块化的框架,理想的设计是让每个模块都有自己的 |
|
|
|
|
|
|
|
初始化种子数据很重要,ABP具有模块化的种子数据基础设施. 种子数据的更多信息,请参阅[文档](../Data-Seeding.md). |
|
|
|
|
|
|
|
虽然创建数据库和应用迁移似乎只对关系数据库有用,但即使您选择NoSQL数据库提供程序(如MongoDB),也会生成此项目. 这时,它会为应用程序提供必要的初始数据. |
|
|
|
虽然创建数据库和应用迁移似乎只对关系数据库有用,但即使你选择NoSQL数据库提供程序(如MongoDB),也会生成此项目. 这时,它会为应用程序提供必要的初始数据. |
|
|
|
|
|
|
|
* 它依赖 `.EntityFrameworkCore.DbMigrations` 项目 (针对EF Core),因为它需要访问迁移文件. |
|
|
|
* 它依赖 `.Application.Contracts` 项目,因为它需要访问权限定义在初始化种子数据时为管理员用户赋予所有权限. |
|
|
|
@ -272,17 +272,17 @@ ABP使用开源的[IdentityServer4](https://identityserver.io/)框架做应用 |
|
|
|
|
|
|
|
#### AppModule(应用程序模块) |
|
|
|
|
|
|
|
`AppModule` 是应用程序的根模块。一些ABP模块和一些基本模块导入到 `AppModule` 中. |
|
|
|
`AppModule` 是应用程序的根模块. 一些ABP模块和一些基本模块导入到 `AppModule` 中. |
|
|
|
|
|
|
|
ABP 配置模块也已经导入到 `AppModule` 中,以满足可延迟加载 ABP 模块的初始需求。 |
|
|
|
ABP 配置模块也已经导入到 `AppModule` 中, 以满足可延迟加载 ABP 模块的初始需求. |
|
|
|
|
|
|
|
#### AppRoutingModule(应用程序路由模块) |
|
|
|
|
|
|
|
在 `AppRoutingModule` 中有可延迟加载的 ABP 模块作为路由。 |
|
|
|
在 `AppRoutingModule` 中有可延迟加载的 ABP 模块作为路由. |
|
|
|
|
|
|
|
> 不应更改ABP模块的路径。 |
|
|
|
> 不应更改ABP模块的路径. |
|
|
|
|
|
|
|
你应该在 `data` 对象中添加 `routes` 属性,以便在菜单中添加一个链接来重定向到自定义页面。 |
|
|
|
你应该在 `data` 对象中添加 `routes` 属性, 以便在菜单中添加一个链接来重定向到自定义页面. |
|
|
|
|
|
|
|
```js |
|
|
|
{ |
|
|
|
@ -300,103 +300,103 @@ ABP 配置模块也已经导入到 `AppModule` 中,以满足可延迟加载 AB |
|
|
|
} |
|
|
|
``` |
|
|
|
在上面的例子中; |
|
|
|
* 如果用户没有登录, AuthGuard 会阻塞访问并重定向到登录页面。 |
|
|
|
* PermissionGuard 使用 `rotues` 对象的 `requiredPolicy` 属性检查用户的权限。如果用户未被授权访问该页,则显示403页。 |
|
|
|
* `routes` 的 `name` 属性是菜单链接标签。可以定义本地化 key。 |
|
|
|
* `routes` 对象的 `iconClass` 属性是菜单链接图标类。 |
|
|
|
* `routes` 对象的 `requiredPolicy` 属性是访问页面所需的策略 key。 |
|
|
|
* 如果用户没有登录, AuthGuard 会阻塞访问并重定向到登录页面. |
|
|
|
* PermissionGuard 使用 `rotues` 对象的 `requiredPolicy` 属性检查用户的权限. 如果用户未被授权访问该页, 则显示403页. |
|
|
|
* `routes` 的 `name` 属性是菜单链接标签. 可以定义本地化 key. |
|
|
|
* `routes` 对象的 `iconClass` 属性是菜单链接图标类. |
|
|
|
* `routes` 对象的 `requiredPolicy` 属性是访问页面所需的策略 key. |
|
|
|
|
|
|
|
在上述 `routes` 定义之后,如果用户被授权,仪表盘链接将出现在菜单上。 |
|
|
|
在上述 `routes` 定义之后, 如果用户被授权, 仪表盘链接将出现在菜单上. |
|
|
|
|
|
|
|
#### Shared Module(共享模块) |
|
|
|
|
|
|
|
所有模块可能需要的模块已导入到 `SharedModule`. 你应该将 `SharedModule` 导入所有模块。 |
|
|
|
所有模块可能需要的模块已导入到 `SharedModule`. 你应该将 `SharedModule` 导入所有模块. |
|
|
|
|
|
|
|
参见 [Sharing Modules(共享模块)](https://angular.io/guide/sharing-ngmodules) 文档。 |
|
|
|
参见 [Sharing Modules(共享模块)](https://angular.io/guide/sharing-ngmodules) 文档. |
|
|
|
|
|
|
|
#### Environments(环境) |
|
|
|
|
|
|
|
`src/environments` 文件夹下的文件包含应用程序的基本配置。 |
|
|
|
`src/environments` 文件夹下的文件包含应用程序的基本配置. |
|
|
|
|
|
|
|
#### Home Module |
|
|
|
|
|
|
|
Home模块是一个可延迟加载的模块,它加载应用程序的根地址。 |
|
|
|
Home模块是一个可延迟加载的模块, 它加载应用程序的根地址. |
|
|
|
|
|
|
|
#### Styles(样式) |
|
|
|
|
|
|
|
在 `angular.json` 中向 `styles` 数组添加所需的样式文件。`AppComponent` 在主包加载后通过 `LazyLoadService` 加载一些样式文件,以缩短第一次绘制的时间。 |
|
|
|
在 `angular.json` 中向 `styles` 数组添加所需的样式文件. `AppComponent` 在主包加载后通过 `LazyLoadService` 加载一些样式文件, 以缩短第一次绘制的时间. |
|
|
|
|
|
|
|
#### Testing(测试) |
|
|
|
|
|
|
|
您应该在与要测试的文件相同的文件夹中创建测试。 |
|
|
|
你应该在与要测试的文件相同的文件夹中创建测试. |
|
|
|
|
|
|
|
参见[测试文档](https://angular.io/guide/testing/). |
|
|
|
|
|
|
|
#### Depended Packages(依赖包) |
|
|
|
|
|
|
|
* [NG Bootstrap](https://ng-bootstrap.github.io/) 被用作UI组件库。 |
|
|
|
* [NGXS](https://www.ngxs.io/) 被用作状态管理库。 |
|
|
|
* [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc) 用于支持OAuth 2和OpenId Connect (OIDC)。 |
|
|
|
* [Chart.js](https://www.chartjs.org/) 用于创建小部件。 |
|
|
|
* [ngx-validate](https://github.com/ng-turkey/ngx-validate) 用于对交互表单进行动态验证。 |
|
|
|
* [NG Bootstrap](https://ng-bootstrap.github.io/) 被用作UI组件库. |
|
|
|
* [NGXS](https://www.ngxs.io/) 被用作状态管理库. |
|
|
|
* [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc) 用于支持OAuth 2和OpenId Connect (OIDC). |
|
|
|
* [Chart.js](https://www.chartjs.org/) 用于创建小部件. |
|
|
|
* [ngx-validate](https://github.com/ng-turkey/ngx-validate) 用于对交互表单进行动态验证. |
|
|
|
|
|
|
|
### React Native |
|
|
|
|
|
|
|
解决方案将[React Native](https://reactnative.dev/)应用程序作为默认值包含在 `react-native` 文件夹中。 |
|
|
|
解决方案将[React Native](https://reactnative.dev/)应用程序作为默认值包含在 `react-native` 文件夹中. |
|
|
|
|
|
|
|
服务器端类似于上面描述的解决方案。`*.HttpApi.Host` 的项目提供 API,所以 React 本机应用程序使用它。 |
|
|
|
服务器端类似于上面描述的解决方案. `*.HttpApi.Host` 的项目提供 API, 所以 React 本机应用程序使用它. |
|
|
|
|
|
|
|
React 本机应用程序是用 [Expo](https://expo.io/)生成的。Expo 是一套基于 React Native 构建的工具,帮助你快速启动一个应用程序,尽管它有很多功能。 |
|
|
|
React 本机应用程序是用 [Expo](https://expo.io/)生成的. Expo 是一套基于 React Native 构建的工具, 帮助你快速启动一个应用程序, 尽管它有很多功能. |
|
|
|
|
|
|
|
React Native 应用文件夹结构,如下图所示: |
|
|
|
React Native 应用文件夹结构, 如下图所示: |
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
* `App.js` 是应用程序的引导组件。 |
|
|
|
* `Environment.js` f文件有应用程序的基本配置。在这个文件中定义了 `prod` and `dev` 配置。 |
|
|
|
* [Contexts](https://reactjs.org/docs/context.html) 是在 `src/contexts` 文件夹中创建的。 |
|
|
|
* [Higher order components](https://reactjs.org/docs/higher-order-components.html) 是在 `src/hocs` 文件夹中创建的。 |
|
|
|
* [Custom hooks](https://reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook) 是在 `src/hooks` 中创建的。 |
|
|
|
* [Axios interceptors](https://github.com/axios/axios#interceptors) 是在 `src/interceptors` 文件夹中创建。 |
|
|
|
* 工具函数从 `src/utils` 文件夹导出。 |
|
|
|
* `App.js` 是应用程序的引导组件. |
|
|
|
* `Environment.js` f文件有应用程序的基本配置. 在这个文件中定义了 `prod` and `dev` 配置. |
|
|
|
* [Contexts](https://reactjs.org/docs/context.html) 是在 `src/contexts` 文件夹中创建的. |
|
|
|
* [Higher order components](https://reactjs.org/docs/higher-order-components.html) 是在 `src/hocs` 文件夹中创建的. |
|
|
|
* [Custom hooks](https://reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook) 是在 `src/hooks` 中创建的. |
|
|
|
* [Axios interceptors](https://github.com/axios/axios#interceptors) 是在 `src/interceptors` 文件夹中创建. |
|
|
|
* 工具函数从 `src/utils` 文件夹导出. |
|
|
|
|
|
|
|
#### Components(组件) |
|
|
|
|
|
|
|
可以在所有屏幕上使用的组件是在 `src/components` 文件夹中创建的。所有组件都是作为一个能够使用 [hooks](https://reactjs.org/docs/hooks-intro.html) 的函数创建的。 |
|
|
|
可以在所有屏幕上使用的组件是在 `src/components` 文件夹中创建的. 所有组件都是作为一个能够使用 [hooks](https://reactjs.org/docs/hooks-intro.html) 的函数创建的. |
|
|
|
|
|
|
|
#### Screens(屏幕) |
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
Screens 是通过在 `src/screens` 文件夹中创建将名称分开的文件夹来创建的。 某些 screens 的某些部分可以拆分为组件。 |
|
|
|
Screens 是通过在 `src/screens` 文件夹中创建将名称分开的文件夹来创建的. 某些 screens 的某些部分可以拆分为组件. |
|
|
|
|
|
|
|
每个 screen 都在 `src/navigators` 文件夹中的导航器中使用。 |
|
|
|
每个 screen 都在 `src/navigators` 文件夹中的导航器中使用. |
|
|
|
|
|
|
|
#### Navigation(导航) |
|
|
|
|
|
|
|
[React Navigation](https://reactnavigation.org/) 被用作导航库。导航器是在 `src/navigators` 中创建的。一个 [drawer](https://reactnavigation.org/docs/drawer-based-navigation/) 导航器和几个 [stack](https://reactnavigation.org/docs/hello-react-navigation/#installing-the-stack-navigator-library) 导航器在此文件夹中创建。查看 [上图](#screens) 中的导航结构。 |
|
|
|
[React Navigation](https://reactnavigation.org/) 被用作导航库. 导航器是在 `src/navigators` 中创建的. 一个 [drawer](https://reactnavigation.org/docs/drawer-based-navigation/) 导航器和几个 [stack](https://reactnavigation.org/docs/hello-react-navigation/#installing-the-stack-navigator-library) 导航器在此文件夹中创建. 查看 [上图](#screens) 中的导航结构. |
|
|
|
|
|
|
|
#### State Management(状态管理) |
|
|
|
|
|
|
|
[Redux](https://redux.js.org/) 被用作状态管理库。[Redux Toolkit](https://redux-toolkit.js.org/) 库被用作高效Redux开发的工具集。 |
|
|
|
[Redux](https://redux.js.org/) 被用作状态管理库. [Redux Toolkit](https://redux-toolkit.js.org/) 库被用作高效Redux开发的工具集. |
|
|
|
|
|
|
|
在 `src/store` 文件夹中创建 Actions, reducers, sagas, selectors。存储文件夹如下: |
|
|
|
在 `src/store` 文件夹中创建 Actions, reducers, sagas, selectors. 存储文件夹如下: |
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
* [**Store**](https://redux.js.org/basics/store) 在 `src/store/index.js` 文件中定义。 |
|
|
|
* [**Actions**](https://redux.js.org/basics/actions/) 是将数据从应用程序发送到存储的有效信息负载。 |
|
|
|
* [**Reducers**](https://redux.js.org/basics/reducers) 指定应用程序的状态如何更改以响应发送到存储的操作。 |
|
|
|
* [**Redux-Saga**](https://redux-saga.js.org/) 是一个库,旨在使应用程序的副作用(即异步的事情,如数据获取和不纯的事情,如访问浏览器缓存)更容易管理。Sagas 是在 `src/store/sagas` 文件夹中创建的。 |
|
|
|
* [**Reselect**](https://github.com/reduxjs/reselect) 库用于创建缓存的选择器。选择器是在 `src/store/selectors` 文件夹中创建的。 |
|
|
|
* [**Store**](https://redux.js.org/basics/store) 在 `src/store/index.js` 文件中定义. |
|
|
|
* [**Actions**](https://redux.js.org/basics/actions/) 是将数据从应用程序发送到存储的有效信息负载. |
|
|
|
* [**Reducers**](https://redux.js.org/basics/reducers) 指定应用程序的状态如何更改以响应发送到存储的操作. |
|
|
|
* [**Redux-Saga**](https://redux-saga.js.org/) 是一个库, 旨在使应用程序的副作用(即异步的事情, 如数据获取和不纯的事情, 如访问浏览器缓存)更容易管理. Sagas 是在 `src/store/sagas` 文件夹中创建的. |
|
|
|
* [**Reselect**](https://github.com/reduxjs/reselect) 库用于创建缓存的选择器. 选择器是在 `src/store/selectors` 文件夹中创建的. |
|
|
|
|
|
|
|
#### APIs |
|
|
|
|
|
|
|
[Axios](https://github.com/axios/axios) 用作HTTP客户端库。Axios 实例从 `src/api/API.js` 导出 。使用相同的配置进行HTTP调用。`src/api` 文件夹中还有为 API 调用创建的 API 文件。 |
|
|
|
[Axios](https://github.com/axios/axios) 用作HTTP客户端库. Axios 实例从 `src/api/API.js` 导出 . 使用相同的配置进行HTTP调用. `src/api` 文件夹中还有为 API 调用创建的 API 文件. |
|
|
|
|
|
|
|
#### Theming(主题) |
|
|
|
|
|
|
|
[Native Base](https://nativebase.io/) 被用作UI组件库。本地基本组件可以很容易地进行自定义。参见 [Native Base customize](https://docs.nativebase.io/Customize.html#Customize) 文档。我们沿着同样的路走。 |
|
|
|
[Native Base](https://nativebase.io/) 被用作UI组件库. 本地基本组件可以很容易地进行自定义。参见 [Native Base customize](https://docs.nativebase.io/Customize.html#Customize) 文档。我们沿着同样的路走。 |
|
|
|
|
|
|
|
* Native Base 主题变量在 `src/theme/variables` 文件夹中。 |
|
|
|
* Native Base 组件样式在 `src/theme/components` 文件夹中。这些文件是用 Native Base's `ejectTheme` 脚本生成的。 |
|
|
|
|