mirror of https://github.com/abpframework/abp.git
bnymncoskuner
4 years ago
6711 changed files with 215112 additions and 283482 deletions
@ -0,0 +1,137 @@ |
|||
# EditorConfig is awesome: https://EditorConfig.org |
|||
# Please feel free to update it (by considering the code style of ABP Team). |
|||
# top-most EditorConfig file |
|||
root = true |
|||
|
|||
[*.cs] |
|||
|
|||
#Namespace settings |
|||
csharp_style_namespace_declarations = file_scoped |
|||
dotnet_diagnostic.IDE0161.severity = warning |
|||
|
|||
#Core editorconfig formatting - indentation |
|||
|
|||
#use tabs for indentation |
|||
indent_style = tabs |
|||
|
|||
#Formatting - indentation options |
|||
|
|||
#indent switch case contents. |
|||
csharp_indent_case_contents = true |
|||
#indent switch labels |
|||
csharp_indent_switch_labels = true |
|||
|
|||
#Formatting - new line options |
|||
|
|||
#place catch statements on a new line |
|||
csharp_new_line_before_catch = true |
|||
#place else statements on a new line |
|||
csharp_new_line_before_else = true |
|||
#require members of object intializers to be on separate lines |
|||
csharp_new_line_before_members_in_object_initializers = true |
|||
#require braces to be on a new line for object_collection_array_initializers, methods, control_blocks, types, and lambdas (also known as "Allman" style) |
|||
csharp_new_line_before_open_brace = object_collection_array_initializers, methods, control_blocks, types, lambdas |
|||
|
|||
#Formatting - organize using options |
|||
|
|||
#sort System.* using directives alphabetically, and place them before other usings |
|||
dotnet_sort_system_directives_first = true |
|||
|
|||
#Formatting - spacing options |
|||
|
|||
#require NO space between a cast and the value |
|||
csharp_space_after_cast = false |
|||
#require a space before the colon for bases or interfaces in a type declaration |
|||
csharp_space_after_colon_in_inheritance_clause = true |
|||
#require a space after a keyword in a control flow statement such as a for loop |
|||
csharp_space_after_keywords_in_control_flow_statements = true |
|||
#require a space before the colon for bases or interfaces in a type declaration |
|||
csharp_space_before_colon_in_inheritance_clause = true |
|||
#remove space within empty argument list parentheses |
|||
csharp_space_between_method_call_empty_parameter_list_parentheses = false |
|||
#remove space between method call name and opening parenthesis |
|||
csharp_space_between_method_call_name_and_opening_parenthesis = false |
|||
#do not place space characters after the opening parenthesis and before the closing parenthesis of a method call |
|||
csharp_space_between_method_call_parameter_list_parentheses = false |
|||
#remove space within empty parameter list parentheses for a method declaration |
|||
csharp_space_between_method_declaration_empty_parameter_list_parentheses = false |
|||
#place a space character after the opening parenthesis and before the closing parenthesis of a method declaration parameter list. |
|||
csharp_space_between_method_declaration_parameter_list_parentheses = false |
|||
|
|||
#Formatting - wrapping options |
|||
|
|||
#leave code block on single line |
|||
csharp_preserve_single_line_blocks = true |
|||
|
|||
#Style - Code block preferences |
|||
|
|||
#prefer curly braces even for one line of code |
|||
csharp_prefer_braces = true:suggestion |
|||
|
|||
#Style - expression bodied member options |
|||
|
|||
#prefer block bodies for constructors |
|||
csharp_style_expression_bodied_constructors = false:suggestion |
|||
#prefer block bodies for methods |
|||
csharp_style_expression_bodied_methods = false:suggestion |
|||
#prefer expression-bodied members for properties |
|||
csharp_style_expression_bodied_properties = true:suggestion |
|||
|
|||
#Style - expression level options |
|||
|
|||
#prefer out variables to be declared inline in the argument list of a method call when possible |
|||
csharp_style_inlined_variable_declaration = true:suggestion |
|||
#prefer the language keyword for member access expressions, instead of the type name, for types that have a keyword to represent them |
|||
dotnet_style_predefined_type_for_member_access = true:suggestion |
|||
|
|||
#Style - Expression-level preferences |
|||
|
|||
#prefer default over default(T) |
|||
csharp_prefer_simple_default_expression = true:suggestion |
|||
#prefer objects to be initialized using object initializers when possible |
|||
dotnet_style_object_initializer = true:suggestion |
|||
#prefer inferred tuple element names |
|||
dotnet_style_prefer_inferred_tuple_names = true:suggestion |
|||
|
|||
#Style - implicit and explicit types |
|||
|
|||
#prefer var over explicit type in all cases, unless overridden by another code style rule |
|||
csharp_style_var_elsewhere = true:suggestion |
|||
#prefer var is used to declare variables with built-in system types such as int |
|||
csharp_style_var_for_built_in_types = true:suggestion |
|||
#prefer var when the type is already mentioned on the right-hand side of a declaration expression |
|||
csharp_style_var_when_type_is_apparent = true:suggestion |
|||
|
|||
#Style - language keyword and framework type options |
|||
|
|||
#prefer the language keyword for local variables, method parameters, and class members, instead of the type name, for types that have a keyword to represent them |
|||
dotnet_style_predefined_type_for_locals_parameters_members = true:suggestion |
|||
|
|||
#Style - Miscellaneous preferences |
|||
|
|||
#prefer local functions over anonymous functions |
|||
csharp_style_pattern_local_over_anonymous_function = true:suggestion |
|||
|
|||
#Style - modifier options |
|||
|
|||
#prefer accessibility modifiers to be declared except for public interface members. This will currently not differ from always and will act as future proofing for if C# adds default interface methods. |
|||
dotnet_style_require_accessibility_modifiers = for_non_interface_members:suggestion |
|||
|
|||
#Style - Modifier preferences |
|||
|
|||
#when this rule is set to a list of modifiers, prefer the specified ordering. |
|||
csharp_preferred_modifier_order = public,protected,private,virtual,async,readonly,static,override,abstract:suggestion |
|||
|
|||
#Style - Pattern matching |
|||
|
|||
#prefer pattern matching instead of is expression with type casts |
|||
csharp_style_pattern_matching_over_as_with_null_check = true:suggestion |
|||
|
|||
#Style - qualification options |
|||
|
|||
#prefer fields not to be prefaced with this. or Me. in Visual Basic |
|||
dotnet_style_qualification_for_field = false:suggestion |
|||
#prefer methods not to be prefaced with this. or Me. in Visual Basic |
|||
dotnet_style_qualification_for_method = false:suggestion |
|||
#prefer properties not to be prefaced with this. or Me. in Visual Basic |
|||
dotnet_style_qualification_for_property = false:suggestion |
|||
@ -1,24 +1,24 @@ |
|||
name: Merge branch rel-5.1 with rel-5.0 |
|||
name: Merge branch dev with rel-5.1 |
|||
on: |
|||
push: |
|||
branches: |
|||
- rel-5.0 |
|||
- rel-5.1 |
|||
jobs: |
|||
merge-rel-5-1-with-rel-5-0: |
|||
merge-dev-with-rel-5-1: |
|||
runs-on: ubuntu-latest |
|||
steps: |
|||
- uses: actions/checkout@v2 |
|||
with: |
|||
ref: rel-5.1 |
|||
ref: dev |
|||
- name: Reset promotion branch |
|||
run: | |
|||
git fetch origin rel-5.0:rel-5.0 |
|||
git reset --hard rel-5.0 |
|||
git fetch origin rel-5.1:rel-5.1 |
|||
git reset --hard rel-5.1 |
|||
- name: Create Pull Request |
|||
uses: peter-evans/create-pull-request@v3 |
|||
with: |
|||
branch: auto-merge/rel-5-0/${{github.run_number}} |
|||
title: Merge branch rel-5.1 with rel-5.0 |
|||
body: This PR generated automatically to merge rel-5.1 with rel-5.0. Please review the changed files before merging to prevent any errors that may occur. |
|||
branch: auto-merge/rel-5-1/${{github.run_number}} |
|||
title: Merge branch dev with rel-5.1 |
|||
body: This PR generated automatically to merge dev with rel-5.1. Please review the changed files before merging to prevent any errors that may occur. |
|||
reviewers: ${{github.actor}} |
|||
token: ${{ github.token }} |
|||
|
|||
|
After Width: | Height: | Size: 907 KiB |
|
After Width: | Height: | Size: 61 KiB |
@ -0,0 +1,47 @@ |
|||
# ABP.IO Platform 5.0 Final Has Been Released! |
|||
|
|||
[ABP Framework](https://abp.io/) and [ABP Commercial](https://commercial.abp.io/) 5.0 versions have been released today. |
|||
|
|||
## What's new with 5.0? |
|||
|
|||
Since all the new features are already explained in details with the [5.0 RC.1 Announcement Post](https://blog.abp.io/abp/ABP-IO-Platform-5.0-RC-1-Has-Been-Released), I will not repeat all the details again. See the [RC Blog Post](https://blog.abp.io/abp/ABP-IO-Platform-5.0-RC-1-Has-Been-Released) for all the features and enhancements. |
|||
|
|||
## Getting started with 5.0 |
|||
|
|||
### Creating new solutions |
|||
|
|||
You can create a new solution with the ABP Framework version 5.0 by either using the `abp new` command or using the **direct download** tab on the [get started page](https://abp.io/get-started). |
|||
|
|||
Type the following command in a command-line terminal to install the ABP CLI version 5.0: |
|||
|
|||
````bash |
|||
dotnet tool install -g Volo.Abp.Cli --version 5.0.0 |
|||
```` |
|||
|
|||
To upgrade your existing ABP CLI installation: |
|||
|
|||
````bash |
|||
dotnet tool update -g Volo.Abp.Cli --version 5.0.0 |
|||
```` |
|||
|
|||
Then you can create a new solution using the `abp new` command: |
|||
|
|||
````bash |
|||
abp new Acme.BookStore |
|||
```` |
|||
|
|||
> See the [getting started document](https://docs.abp.io/en/abp/latest/Getting-Started) for details. |
|||
|
|||
### Upgrading existing solutions |
|||
|
|||
Check [the migration guide](https://docs.abp.io/en/abp/latest/Migration-Guides/Abp-5_0) for the applications with the version 4.x upgrading to the version 5.0. Also see [the upgrading guide](https://docs.abp.io/en/abp/latest/Upgrading) to understand how to update existing solutions. |
|||
|
|||
## ABP Community Talks 2021.12 |
|||
|
|||
 |
|||
|
|||
As the core ABP development team, we've decided to organize monthly live meetings with the ABP community. The first live meeting will be at **December 16, 2021, 17:00 (UTC)** on YouTube. ABP core team members will present some of the new features coming with ABP 5.0. |
|||
|
|||
**Join this event on the Kommunity platform: https://kommunity.com/volosoft/events/abp-community-talks-4afca9c9** |
|||
|
|||
See you in the event! |
|||
|
After Width: | Height: | Size: 907 KiB |
@ -0,0 +1,149 @@ |
|||
# ABP.IO Platform 5.1 Has Been Released |
|||
|
|||
Today, we are releasing the [ABP Framework](https://abp.io/) and [ABP Commercial](https://commercial.abp.io/) version 5.1 (with a version number `5.1.1`). This blog post introduces the new features and important changes in this new version. |
|||
|
|||
> **Warning** |
|||
> |
|||
> For a long time we've been releasing RC (Release Candidate) versions a few weeks prior to every minor and major release. **This version has been released without a preview version.** This is because we've accidently released all the packages with a stable version number, without a `-rc.1` suffix and there is no clear way to unpublish all the NuGet and NPM packages. We're sorry about that. However, it doesn't mean that this release is buggy. We've already resolved the known problems. We will publish one or more patch releases if needed. You can follow [this milestone](https://github.com/abpframework/abp/milestone/64?closed=1) for the common problems or submit your own bug report. If you are worried about its stability, you can wait for the next patch release. |
|||
|
|||
## Get Started with 5.1 |
|||
|
|||
Follow the steps below to try the 5.1 version today: |
|||
|
|||
1) **Upgrade** the ABP CLI to the latest version using a command line terminal: |
|||
|
|||
````bash |
|||
dotnet tool update Volo.Abp.Cli -g |
|||
```` |
|||
|
|||
**or install** if you haven't installed it before: |
|||
|
|||
````bash |
|||
dotnet tool install Volo.Abp.Cli -g |
|||
```` |
|||
|
|||
2) Create a **new application**: |
|||
|
|||
````bash |
|||
abp new BookStore |
|||
```` |
|||
|
|||
Check out the [ABP CLI documentation](https://docs.abp.io/en/abp/latest/CLI) for all the available options. |
|||
|
|||
> You can also use the *Direct Download* tab on the [Get Started](https://abp.io/get-started) page. |
|||
|
|||
You can use any IDE that supports .NET 6.x development (e.g. [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/)). |
|||
|
|||
### Migration Notes & Breaking Changes |
|||
|
|||
This is a minor feature release, mostly with enhancements and improvements based on [version 5.0](https://blog.abp.io/abp/ABP-IO-Platform-5-0-Final-Has-Been-Released). There aren't any breaking changes except for the Angular UI upgrade. ABP 5.1 startup templates use **Angular 13**. |
|||
|
|||
### Angular UI |
|||
|
|||
**If you want to upgrade the ABP Framework but want to continue with Angular 12**, add the following section to the `package.json` file of the Angular project: |
|||
|
|||
````json |
|||
"resolutions": { |
|||
"ng-zorro-antd": "^12.1.1", |
|||
"@ng-bootstrap/ng-bootstrap": "11.0.0-beta.2" |
|||
} |
|||
```` |
|||
|
|||
## What's New with the ABP Framework 5.1? |
|||
|
|||
In this section, I will introduce some major features released with this version. |
|||
|
|||
### The New Hosting Model |
|||
|
|||
The ABP startup application template now uses the new ASP.NET Core hosting APIs ([check out the Microsoft's minimal APIs document](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/minimal-apis?view=aspnetcore-6.0)) on application startup ([check out the exact place in the ABP startup template](https://github.com/abpframework/abp/blob/46cdfbe7b06c93690181633be4e96bf62e7f34e2/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Web/Program.cs#L33-L40)). So, the `Startup.cs` file has been removed. |
|||
|
|||
Old-style hosting logic will continue to work as long as ASP.NET Core supports it. It is recommended to switch to the new model if it's possible for your solution. Check out [this guide](https://docs.abp.io/en/abp/latest/Migration-Guides/Upgrading-Startup-Template) if you need to know how to do that. |
|||
|
|||
### Asynchronous Startup Lifecycle Methods |
|||
|
|||
The new hosting model allows us to execute asynchronous code on application initialization in the [ABP module](https://docs.abp.io/en/abp/latest/Module-Development-Basics) classes. If you are using the new hosting model (which is default with 5.1 startup templates), you can override the `Async` versions of the module lifecycle methods. |
|||
|
|||
For example, you can now override the `ConfigureServicesAsync` (instead of `ConfigureServices`) or `OnApplicationInitializationAsync` (instead of `OnApplicationInitialization`) as shown in the following code block: |
|||
|
|||
````csharp |
|||
public class MyModule : AbpModule |
|||
{ |
|||
public override async Task ConfigureServicesAsync(ServiceConfigurationContext context) |
|||
{ |
|||
/* You can use await here and safely execute other async methods */ |
|||
} |
|||
|
|||
public override async Task OnApplicationInitializationAsync(ApplicationInitializationContext context) |
|||
{ |
|||
/* You can use await here and safely execute other async methods */ |
|||
} |
|||
} |
|||
```` |
|||
|
|||
If you override both the asynchronous and synchronous versions of the same method, only the asynchronous one will be executed. So, override only one of them based on your needs. |
|||
|
|||
### eShopOnABP Is Getting More Stable |
|||
|
|||
Our team is working to finalize the [eShopOnAbp](https://github.com/abpframework/eShopOnAbp) example solution, which is a reference **microservice solution** built with the ABP Framework. They will explain the project status and show what's done in the next **ABP Community Talks** meeting (Check out the *ABP Community Talks 2021.1* section at the bottom of this post). |
|||
|
|||
### The New ABP.IO Design! |
|||
|
|||
We've been working on a new design for the [abp.io](https://abp.io/) websites for a while. We are adding the final touches; the new design will be live very soon. Here's a screenshot from the design work: |
|||
|
|||
 |
|||
|
|||
The [ABP Commercial](https://commercial.abp.io/) and [ABP Community](https://community.abp.io/) websites will also have new designs as part of this update. |
|||
|
|||
### Other Changes |
|||
|
|||
Here are some other notable changes that come with this release: |
|||
|
|||
* Support markdown in [CMS-Kit comments ](https://docs.abp.io/en/abp/latest/Modules/Cms-Kit/Comments)feature ([#10792](https://github.com/abpframework/abp/pull/10792)) |
|||
* Used file scoped namespaces for all the ABP Framework source code :) ([#10552](https://github.com/abpframework/abp/pull/10696)) |
|||
|
|||
All issues & PRs in [5.1 milesone](https://github.com/abpframework/abp/milestone/60?closed=1). |
|||
|
|||
### About ABP Commercial |
|||
|
|||
The core team is also working on ABP Commercial (which provides pre-built modules, themes, tooling and support on top of the ABP Framework). We've done a lot of minor improvements and fixes to the modules and tooling. |
|||
|
|||
There's some exciting news about the **LeptonX theme**; We are working on making it available in the **MVC (Razor Pages)** and **Blazor** UI options too (in addition to Angular UI). We are also adding more components, layout options, demo pages, etc... We are planning to release a beta version in the next weeks. Here's an animated GIF from the dashboard we've prepared as a demonstration: |
|||
|
|||
 |
|||
|
|||
If you are wondering what is the LeptonX project, please check out this [blog post](https://blog.abp.io/abp/LeptonX-Theme-for-ABP-Framework-Alpha-Release). |
|||
|
|||
As another visible functionality, we've added a new feature to the [CMS Kit Pro](https://docs.abp.io/en/commercial/latest/modules/cms-kit/index) module that is used to forward a URL to another URL. This is a screenshot from the management UI: |
|||
|
|||
 |
|||
|
|||
This feature can be used to create short URLs in your application (like URL shortening services providers) or forward old pages to their new URLs. |
|||
|
|||
In addition to the new features shipped in every minor version, we are working on long-term projects for ABP.IO Platform and ABP Commercial (a little secret for now :). We will have announcements once these projects get more stable. |
|||
|
|||
## Community News |
|||
|
|||
### ABP Community Talks 2021.1 |
|||
|
|||
 |
|||
|
|||
This is the second episode of the ABP Community Talks and we are talking about microservice development with the ABP Framework, based on the [eShopOnAbp](https://github.com/abpframework/eShopOnAbp) reference solution. We will also briefly talk about the changes that come with ABP version 5.1. This **live meeting** will be on **January 20, 2022, 17:00 (UTC)** on YouTube. |
|||
|
|||
**Join this event on the Kommunity platform: https://kommunity.com/volosoft/events/abp-community-talks-20221-microservice-development-acd0f44b** |
|||
|
|||
You can also [subscribe to Volosoft YouTube channel](https://www.youtube.com/channel/UCO3XKlpvq8CA5MQNVS6b3dQ) for reminders of further ABP events and videos. |
|||
|
|||
### New ABP Community Posts |
|||
|
|||
Here are some of the recent posts added to the [ABP community](https://community.abp.io/): |
|||
|
|||
* [Minimal API development with the ABP Framework](https://community.abp.io/articles/minimal-api-with-abp-hello-world-part-1-sg5i44p8) by [@antosubash](https://github.com/antosubash) (three parts, video tutorial). |
|||
* [Integrating the Syncfusion MVC Components to the ABP MVC UI](https://community.abp.io/articles/integrating-the-syncfusion-mvc-components-to-the-abp-mvc-ui-0gpkr1if) by [@EngincanV](https://github.com/EngincanV). |
|||
* [Add Tailwind CSS to your ABP Blazor UI](https://community.abp.io/articles/add-tailwindcss-to-your-abp-blazor-ui-vidiwzcy) by [@antosubash](https://github.com/antosubash) (video tutorial). |
|||
* [Import external users into the users Table from an ABP Framework application](https://community.abp.io/articles/import-external-users-into-the-users-table-from-an-abp-framework-application-7lnyw415) by [@bartvanhoey](https://github.com/bartvanhoey). |
|||
|
|||
Thanks to the ABP Community for all the contents they have published. You can also [post your ABP and .NET related (text or video) contents](https://community.abp.io/articles/submit) to the ABP Community. |
|||
|
|||
## Conclusion |
|||
|
|||
In this blog post, I summarized the news about the new version and the ABP Community. Please try it and provide feedback by opening issues on the [GitHub repository](https://github.com/abpframework/abp). Thank you all! |
|||
|
After Width: | Height: | Size: 559 KiB |
|
After Width: | Height: | Size: 6.6 MiB |
|
After Width: | Height: | Size: 162 KiB |
|
After Width: | Height: | Size: 66 KiB |
File diff suppressed because it is too large
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 2.9 MiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 366 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 33 KiB |
@ -0,0 +1,321 @@ |
|||
# Integrating the Syncfusion MVC Components to the ABP MVC UI |
|||
|
|||
## Introduction |
|||
|
|||
In this article we will see how we can integrate the Syncfusion MVC Components into our ABP application. |
|||
|
|||
## Source Code |
|||
|
|||
You can find the source code of the application at https://github.com/EngincanV/ABP-Syncfusion-Components-Demo. |
|||
|
|||
## Prerequisites |
|||
|
|||
* [.NET 6](https://dotnet.microsoft.com/en-us/download/dotnet/6.0) |
|||
|
|||
* In this article, we will create a new startup template in v5.0.0-rc.2 and if you follow this article from top to bottom and create a new startup template with me, you need to install the [.NET 6 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/6.0) before starting. |
|||
|
|||
**NOTE:** ABP v5.X stable version has been released. You can replace v5.0.0-rc.2 with the latest stable version in your steps. |
|||
|
|||
Also, you need to update your ABP CLI to the v5.0.0-rc.2, you can use the command below to update your CLI version: |
|||
|
|||
```bash |
|||
dotnet tool update Volo.Abp.Cli -g --version 5.0.0-rc.2 |
|||
``` |
|||
|
|||
or install it if you haven't installed it before: |
|||
|
|||
```bash |
|||
dotnet tool install Volo.Abp.Cli -g --version 5.0.0-rc.2 |
|||
``` |
|||
|
|||
## Creating the Solution |
|||
|
|||
In this article, we will create a new startup template with EF Core as a database provider and MVC for the UI framework. But if you already have a project with MVC UI, you don't need to create a new startup template, you can directly implement the following steps to your existing project. |
|||
|
|||
> If you already have a project with MVC/Razor Pages UI, you can skip this section. |
|||
|
|||
We can create a new startup template by using the [ABP CLI](https://docs.abp.io/en/abp/latest/CLI): |
|||
|
|||
```bash |
|||
abp new SyncfusionComponentsDemo -t app --preview |
|||
``` |
|||
|
|||
Our project boilerplate will be ready after the download is finished. Then, we can open the solution and start developing. |
|||
|
|||
## Starting the Development |
|||
|
|||
### Pre-requisite |
|||
|
|||
> If you've already had a license from Syncfusion, you can skip this section. |
|||
|
|||
* The first thing we need to do is create an account to be able to get a license from Syncfusion. |
|||
|
|||
* So, let's navigate to https://www.syncfusion.com/aspnet-core-ui-controls and click the "Download Free Trial" button. |
|||
|
|||
* Then fill the form and start your 30-day free trial. |
|||
|
|||
* After that, navigate to https://www.syncfusion.com/account/manage-trials/downloads to get our license key that will be used in our application. |
|||
|
|||
 |
|||
|
|||
Click the "Get License Key" link for "ASP.NET Core (Essential JS 2)". |
|||
|
|||
 |
|||
|
|||
Then a modal will be opened like in the above image, select a version and click the "Get License Key" button. |
|||
|
|||
 |
|||
|
|||
Lastly, copy the generated license key value. |
|||
|
|||
In order to use the relevant components, Syncfusion needs to check this license key to know that our license is valid. |
|||
|
|||
### Configurations |
|||
|
|||
After providing a license key from Syncfusion, we can start with the configuration that needs to be done in our application. |
|||
|
|||
#### 1-) Install the Syncfusion.EJ2.AspNet.Core package |
|||
|
|||
We need to install the `Syncfusion.EJ2.AspNet.Core` Nuget package to our Web project (*.Web). |
|||
|
|||
We can install it via **Visual Studio's Nuget Package Manager**: |
|||
|
|||
 |
|||
|
|||
or via dotnet cli: |
|||
|
|||
```bash |
|||
dotnet add package Syncfusion.EJ2.AspNet.Core --version 19.3.0.57 |
|||
``` |
|||
|
|||
> In this article, I've used the package in version 19.3.0.57. |
|||
|
|||
#### 2-) Register the License Key |
|||
|
|||
* After installing the package, we need to register our license key to be able to use the Syncfusion Components. |
|||
|
|||
* To register the license key, open your web module class and update the `ConfigureServices` method as follows: |
|||
|
|||
```csharp |
|||
public override void ConfigureServices(ServiceConfigurationContext context) |
|||
{ |
|||
var hostingEnvironment = context.Services.GetHostingEnvironment(); |
|||
var configuration = context.Services.GetConfiguration(); |
|||
|
|||
//Register Syncfusion license |
|||
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense(licenseKey: configuration["Syncfusion:LicenseKey"].ToString()); |
|||
|
|||
ConfigureUrls(configuration); |
|||
ConfigureBundles(); |
|||
ConfigureAuthentication(context, configuration); |
|||
ConfigureAutoMapper(); |
|||
ConfigureVirtualFileSystem(hostingEnvironment); |
|||
ConfigureLocalizationServices(); |
|||
ConfigureNavigationServices(); |
|||
ConfigureAutoApiControllers(); |
|||
ConfigureSwaggerServices(context.Services); |
|||
} |
|||
``` |
|||
|
|||
Instead of writing the license key directly in here we can define it in the **appsettings.json** file and use it here by using the Configuration system of .NET. |
|||
|
|||
|
|||
* Open your **appsettings.json** file and add a new section named "Syncfusion" as below: |
|||
|
|||
```json |
|||
{ |
|||
//... |
|||
|
|||
"Syncfusion": { |
|||
"LicenseKey": "<your-license-key>" |
|||
} |
|||
} |
|||
``` |
|||
|
|||
> Replace the `<your-license-key> part with your license key that we've obtained in the previous section.` |
|||
|
|||
* To be able to use the Syncfusion Components we need to define them in our **_ViewImports.cshtml** file. By doing that we can use the Syncfusion components everywhere in our application. |
|||
|
|||
* Open your **/Pages/_ViewImports.cshtml** file and add a new tag helper: |
|||
|
|||
```cshtml |
|||
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers |
|||
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI |
|||
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap |
|||
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling |
|||
@addTagHelper *, Syncfusion.EJ2 //use Syncfusion components |
|||
``` |
|||
|
|||
#### 3-) Adding Syncfusion styles and scripts to our application |
|||
|
|||
Firstly, let's install the `@syncfusion/ej2` package from **npm**. |
|||
|
|||
* Open your **package.json** file and add the `@syncfusion/ej2` package with version **19.3.57**: |
|||
|
|||
```json |
|||
{ |
|||
"version": "1.0.0", |
|||
"name": "my-app", |
|||
"private": true, |
|||
"dependencies": { |
|||
"@abp/aspnetcore.mvc.ui.theme.basic": "^5.0.0-rc.2", |
|||
"@syncfusion/ej2": "^19.3.57" |
|||
} |
|||
} |
|||
``` |
|||
|
|||
* Then, open the **abp.resourcemapping.js** file and update the **mappings** section: |
|||
|
|||
```js |
|||
module.exports = { |
|||
aliases: { |
|||
|
|||
}, |
|||
mappings: { |
|||
"@node_modules/@syncfusion/ej2/dist/ej2.min.js": "@libs/syncfusion/", |
|||
"@node_modules/@syncfusion/ej2/material.css": "@libs/syncfusion/" |
|||
} |
|||
}; |
|||
``` |
|||
|
|||
> ABP copies related packages from **node_modules** folder to the **libs** folder by examining this file. You can read this [document](docs.abp.io/en/abp/latest/UI/AspNetCore/Client-Side-Package-Management#mapping-the-library-resources) for more info. |
|||
|
|||
* Then run the `abp install-libs` to install the dependencies and copy them into the libs folder by your mappings configuration. After running this command, in your **libs** folder it should be a folder named **syncfusion** folder. |
|||
|
|||
 |
|||
|
|||
The last thing we need to do is, add some style and script files provided by Syncfusion, between our head-body tags. |
|||
|
|||
* We can do this by creating two view components (one for Styles and the other for Scripts). Let's do that. |
|||
|
|||
First, create a folder structure as shown below under the **Components** folder. |
|||
|
|||
 |
|||
|
|||
Then open the related files and add the following codes to each of these files. |
|||
|
|||
* **Default.cshtml** (/Components/Syncfusion/Script/Default.cshtml) |
|||
|
|||
```cshtml |
|||
@addTagHelper *, Syncfusion.EJ2 //add this line |
|||
|
|||
<!-- Syncfusion Essential JS 2 Scripts --> |
|||
<script src="/libs/syncfusion/ej2.min.js"></script> |
|||
|
|||
<!-- Syncfusion Essential JS 2 ScriptManager --> |
|||
<ejs-scripts></ejs-scripts> |
|||
``` |
|||
|
|||
* **SyncfusionScriptComponent.cs** |
|||
|
|||
```csharp |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc; |
|||
|
|||
namespace SyncfusionComponentsDemo.Web.Components.Syncfusion.Script |
|||
{ |
|||
public class SyncfusionScriptComponent : AbpViewComponent |
|||
{ |
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View("~/Components/Syncfusion/Script/Default.cshtml"); |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
* **Default.cshtml** (/Components/Syncfusion/Style/Default.cshtml) |
|||
|
|||
```cshtml |
|||
<!-- Syncfusion Essential JS 2 Styles --> |
|||
<link rel="stylesheet" href="/libs/syncfusion/material.css"> |
|||
``` |
|||
|
|||
* SyncfusionStyleComponent.cs |
|||
|
|||
```csharp |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc; |
|||
|
|||
namespace SyncfusionComponentsDemo.Web.Components.Syncfusion.Style |
|||
{ |
|||
public class SyncfusionStyleComponent : AbpViewComponent |
|||
{ |
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View("~/Components/Syncfusion/Style/Default.cshtml"); |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
After creating these two components, we can use the [**Layout Hooks**](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Layout-Hooks) system of ABP to inject these two components between head and script tags. |
|||
|
|||
To do this, open your web module class and update the `ConfigureServices` method as below: |
|||
|
|||
|
|||
```csharp |
|||
public override void ConfigureServices(ServiceConfigurationContext context) |
|||
{ |
|||
var hostingEnvironment = context.Services.GetHostingEnvironment(); |
|||
var configuration = context.Services.GetConfiguration(); |
|||
|
|||
//Register Syncfusion license |
|||
var licenseKey = configuration["Syncfusion:LicenseKey"].ToString(); |
|||
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense(licenseKey: licenseKey); |
|||
|
|||
Configure<AbpLayoutHookOptions>(options => |
|||
{ |
|||
//Now, the SyncfusionStyleComponent code will be inserted in the head of the page as the last item. |
|||
options.Add(LayoutHooks.Head.Last, typeof(SyncfusionStyleComponent)); |
|||
|
|||
//the SyncfusionScriptComponent will be inserted in the body of the page as the last item. |
|||
options.Add(LayoutHooks.Body.Last, typeof(SyncfusionScriptComponent)); |
|||
}); |
|||
|
|||
ConfigureUrls(configuration); |
|||
ConfigureBundles(); |
|||
ConfigureAuthentication(context, configuration); |
|||
ConfigureAutoMapper(); |
|||
ConfigureVirtualFileSystem(hostingEnvironment); |
|||
ConfigureLocalizationServices(); |
|||
ConfigureNavigationServices(); |
|||
ConfigureAutoApiControllers(); |
|||
ConfigureSwaggerServices(context.Services); |
|||
} |
|||
``` |
|||
|
|||
After injecting the Syncfusion style and script into our application, our configurations have been completed. We can try with a simple component to see if it works as we expected. |
|||
|
|||
* Let's try with the [Calendar](https://www.syncfusion.com/aspnet-core-ui-controls/calendar) component. Open your **Index.cshtml** file and update with the below content: |
|||
|
|||
```cshtml |
|||
@page |
|||
@using Microsoft.AspNetCore.Mvc.Localization |
|||
@using SyncfusionComponentsDemo.Localization |
|||
@using Volo.Abp.Users |
|||
@model SyncfusionComponentsDemo.Web.Pages.IndexModel |
|||
|
|||
@section styles { |
|||
<abp-style src="/Pages/Index.css" /> |
|||
} |
|||
|
|||
@section scripts { |
|||
<abp-script src="/Pages/Index.js" /> |
|||
} |
|||
|
|||
<div class="container"> |
|||
<h2>Syncfusion - Calendar Component</h2> |
|||
<ejs-calendar id="calendar"></ejs-calendar> |
|||
</div> |
|||
``` |
|||
|
|||
* Then when we run the application, we need to see the relevant calendar component as below. |
|||
|
|||
 |
|||
|
|||
### Conclusion |
|||
|
|||
In this article, we've explained how to integrate the **Syncfusion Components** into our applications. After following this article, you can use the Syncfusion components in your application. |
|||
|
|||
Thanks for reading the article, I hope you've found it useful :) |
|||
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 53 KiB |
@ -0,0 +1,73 @@ |
|||
# 入门教程 |
|||
|
|||
````json |
|||
//[doc-params] |
|||
{ |
|||
"UI": ["MVC", "Blazor", "BlazorServer", "NG"], |
|||
"DB": ["EF", "Mongo"], |
|||
"Tiered": ["Yes", "No"] |
|||
} |
|||
```` |
|||
|
|||
> 本文档假设你更喜欢使用 **{{ UI_Value }}** 作为 UI 框架, 使用 **{{ DB_Value }}** 作为数据库提供程序. 对于其他选项, 请更改本文档顶部的首选项. |
|||
|
|||
## 创建新项目 |
|||
|
|||
我们将使用 ABP CLI 创建一个新的 ABP 项目. |
|||
|
|||
> 或者, 你可以使用[ABP Framework 网站](https://abp.io/get-started)页面上的选项轻松的 **创建并下载** 项目. |
|||
|
|||
使用 ABP CLI 的 `new` 命令创建一个新项目: |
|||
|
|||
````shell |
|||
abp new Acme.BookStore{{if UI == "NG"}} -u angular{{else if UI == "Blazor"}} -u blazor{{else if UI == "BlazorServer"}} -u blazor-server{{end}}{{if DB == "Mongo"}} -d mongodb{{end}}{{if Tiered == "Yes"}}{{if UI == "MVC" || UI == "BlazorServer"}} --tiered{{else}} --separate-identity-server{{end}}{{end}} |
|||
```` |
|||
|
|||
*你可以使用不同级别的命名空间, 例如: BookStore、Acme.BookStore或 Acme.Retail.BookStore.* |
|||
|
|||
{{ if Tiered == "Yes" }} |
|||
|
|||
{{ if UI == "MVC" || UI == "BlazorServer" }} |
|||
|
|||
* `--tified` 参数用于创建认证服务器、 UI 和 API 实际分隔的 N-层解决方案. |
|||
|
|||
{{ else }} |
|||
|
|||
* `--separate-identity-server` 参数用于将Identity Server应用程序与API主机应用程序分隔开. 如果未指定, 则服务器上将只有一个端点. |
|||
|
|||
{{ end }} |
|||
|
|||
{{ end }} |
|||
|
|||
> [ABP CLI 文档](./CLI.md) 涵盖了所有可用的命令和选项. |
|||
|
|||
## 移动端开发 |
|||
|
|||
如果你想要在你的解决方案中包含 [React Native](https://reactnative.dev/) 项目, 将 `-m react-native` (or `--mobile react-native`) 参数添加到项目创建命令. 这是一个基础的 React Native 启动模板, 用于开发基于你的 ABP 后端的移动应用程序. |
|||
|
|||
请参阅 [React Native 入门](Getting-Started-React-Native.md) 文档, 了解如何配置和运行 React Native 应用程序. |
|||
|
|||
### 解决方案结构 |
|||
|
|||
该解决方案具有分层结构 (基于 [域驱动设计](Domain-Driven-Design.md)), 并包含单元 & 集成测试项目. 请参阅 [应用程序模板文档](Startup-Templates/Application.md) 以详细了解解决方案结构. |
|||
|
|||
{{ if DB == "Mongo" }} |
|||
|
|||
#### MongoDB 事务 |
|||
|
|||
[启动模板](Startup-templates/Index.md) 默认在`.MongoDB`项目中**禁用**事务. 如果你的MongoDB服务器支持事务, 你可以在*YourProjectMongoDbModule*类中的`ConfigureServices`方法开启它: |
|||
|
|||
```csharp |
|||
Configure<AbpUnitOfWorkDefaultOptions>(options => |
|||
{ |
|||
options.TransactionBehavior = UnitOfWorkTransactionBehavior.Auto; |
|||
}); |
|||
``` |
|||
|
|||
> 或者你可以删除该代码, 因为 `Auto` 已经是默认行为. |
|||
|
|||
{{ end }} |
|||
|
|||
## 下一步 |
|||
|
|||
* [运行解决方案](Getting-Started-Running-Solution.md) |
|||
@ -0,0 +1,199 @@ |
|||
# 入门教程 |
|||
|
|||
````json |
|||
//[doc-params] |
|||
{ |
|||
"UI": ["MVC", "Blazor", "BlazorServer", "NG"], |
|||
"DB": ["EF", "Mongo"], |
|||
"Tiered": ["Yes", "No"] |
|||
} |
|||
```` |
|||
|
|||
> 本文档假设你更喜欢使用 **{{ UI_Value }}** 作为 UI 框架, 使用 **{{ DB_Value }}** 作为数据库提供程序. 对于其他选项, 请更改本文档顶部的首选项. |
|||
|
|||
## 创建数据库 |
|||
|
|||
### 连接字符串 |
|||
|
|||
检查在 {{if Tiered == "Yes"}}`.IdentityServer` 和`.HttpApi.Host` 项目{{else}}{{if UI=="MVC"}}`.Web` 项目{{else if UI=="BlazorServer"}}`.Blazor` 项目{{else}}`.HttpApi.Host` 项目{{end}}{{end}} 中 `appsettings.json` 文件里的**连接字符串**. |
|||
|
|||
{{ if DB == "EF" }} |
|||
|
|||
````json |
|||
"ConnectionStrings": { |
|||
"Default": "Server=(LocalDb)\MSSQLLocalDB;Database=BookStore;Trusted_Connection=True" |
|||
} |
|||
```` |
|||
|
|||
> **关于连接字符串和数据库管理系统** |
|||
> |
|||
> 解决方案配置为默认使用 **Entity Framework Core** 与 **MS SQL Server**. 但是, 如果在执行ABP CLI 的`new`命令时使用了`-dbms`参数来选择其他DBMS (如`-dbms MySQL`), 那么连接字符串可能不同. |
|||
> |
|||
> EF Core 支持 [多种](https://docs.microsoft.com/en-us/ef/core/providers/) 据库提供程序, 因此你可以使用任何受支持的DBMS. 你可以需要时候参阅[Entity Framework 集成文档](Entity-Framework-Core.md) 来学习如何[切换到另一个DBMS](Entity-Framework-Core-Other-DBMS.md). |
|||
|
|||
### 数据库迁移 |
|||
|
|||
该解决方案使用[Entity Framework Core Code First 迁移](https://docs.microsoft.com/en-us/ef/core/managing-schemas/migrations/?tabs=dotnet-core-cli). 带有 `.DbMigrator` 的控制台程序用于 **应用迁移** 和 **初始化种子数据**. 它在**开发**和**生产**环境中都很有用. |
|||
|
|||
> `.dbMigator` 项目有自己的 `appsettings.json`. 因此, 如果你更改了之前的连接字符串, 那么也应该更改这个连接字符串. |
|||
|
|||
### 初次迁移 |
|||
|
|||
`.dbMigator` 应用程序在首次运行时自动**创建初始迁移**. |
|||
|
|||
**如果你使用的是 Visual Studio, 你可以跳到 *运行 dbMigrator* 部分.** 但是, 其他 IDE (例如 Rider) 在首次运行时可能会遇到问题, 因为它会添加初始迁移并编译项目. 在这种情况下, 请在 `.dbMigration` 项目的文件夹中打开命令行终端, 然后运行以下命令: |
|||
|
|||
````bash |
|||
dotnet run |
|||
```` |
|||
|
|||
下次, 你可以像往常一样在 IDE 中运行它. |
|||
|
|||
### 运行迁移 |
|||
|
|||
右键单击 `.dbMigration` 项目, 然后选择 **设置为启动项目** |
|||
|
|||
 |
|||
|
|||
按F5(或Ctrl + F5) 运行应用程序. 它将具有如下所示的输出: |
|||
|
|||
 |
|||
|
|||
> 初始的[种子数据](Data-Seeding.md)在数据库中创建了 `admin` 用户(密码为`1q2w3E*`) 用于登录应用程序. 所以, 对于新数据库至少使用 `.DbMigrator` 一次. |
|||
|
|||
{{ else if DB == "Mongo" }} |
|||
|
|||
````json |
|||
"ConnectionStrings": { |
|||
"Default": "mongodb://localhost:27017/BookStore" |
|||
} |
|||
```` |
|||
|
|||
该解决方案配置为在本地计算机中使用 **MongoDB**, 因此你需要启动并运行 MongoDB 服务器实例, 或者将连接字符串更改为另一台 MongoDB 服务器. |
|||
|
|||
### 种子初始数据 |
|||
|
|||
该解决方案带有 `.DbMigrator` 的控制台程序用于 **初始化种子数据**. 它在**开发**和**生产**环境中都很有用. |
|||
|
|||
> `.dbMigator` 项目有自己的 `appsettings.json`. 因此, 如果你更改了之前的连接字符串, 那么也应该更改这个连接字符串. |
|||
|
|||
右键单击 `.dbMigration` 项目, 然后选择 **设置为启动项目** |
|||
|
|||
 |
|||
|
|||
按F5(或Ctrl + F5) 运行应用程序. 它将具有如下所示的输出: |
|||
|
|||
 |
|||
|
|||
> 初始的[种子数据](Data-Seeding.md)在数据库中创建了 `admin` 用户(密码为`1q2w3E*`) 用于登录应用程序. 所以, 对于新数据库至少使用 `.DbMigrator` 一次. |
|||
|
|||
{{ end }} |
|||
|
|||
## 运行应用程序 |
|||
|
|||
{{ if UI == "MVC" || UI == "BlazorServer" }} |
|||
|
|||
{{ if Tiered == "Yes" }} |
|||
|
|||
> 分层解决方案使用 **Redis** 作为分布式缓存. 确保它已安装并在本地计算机上运行. 如果你使用的是远程 Redis 服务器, 请修改项目的 ` appsettings.json` 文件中的配置. |
|||
|
|||
1. 确保 `.IdentityServer` 项目是启动项目. 运行此应用程序, 它将在浏览器中打开 **登录** 页面. |
|||
|
|||
> 在 Visual Studio 中使用 Ctrl+F5(而不是F5) 在不进行调试的情况下运行应用程序. 如果你没有调试目的, 这会更快. |
|||
|
|||
你可以登录, 但不能在这里进入主应用程序. 这 **只是身份验证服务器**. |
|||
|
|||
2. 确保 `.httpapi.Host` 项目是启动项目, 然后运行应用将在浏览器中打开 **Swagger UI**. |
|||
|
|||
 |
|||
|
|||
这是 Web 应用程序使用的 HTTP API. |
|||
|
|||
3. 最后, 确保 {{if UI=="MVC"}}`.Web`{{else}}`.Blazor`{{end}} 项目是启动项目,然后运行应用程序,它将在浏览器中打开 **欢迎** 页面 |
|||
|
|||
 |
|||
|
|||
单击 **login** 按钮, 它将重定向到 *身份验证服务器* 以登录到应用程序: |
|||
|
|||
 |
|||
|
|||
{{ else # Tiered != "Yes" }} |
|||
|
|||
确保 {{if UI=="MVC"}}`.Web`{{else}}`.Blazor`{{end}} 项目是启动项目. 运行应用程序将会在浏览器中打开 **login** 页面: |
|||
|
|||
> 在 Visual Studio 中使用 Ctrl+F5(而不是F5) 在不进行调试的情况下运行应用程序. 如果你没有调试目的, 这会更快. |
|||
|
|||
 |
|||
|
|||
{{ end # Tiered }} |
|||
|
|||
{{ else # UI != MVC || BlazorServer }} |
|||
|
|||
### 运行 HTTP API 主机(服务器端) |
|||
|
|||
{{ if Tiered == "Yes" }} |
|||
|
|||
> 分层解决方案使用 Redis 作为分布式缓存. 确保它已安装并在本地计算机上运行. 如果你使用的是远程 Redis 服务器, 请修改项目的 `appsettings.json` 文件中的配置. |
|||
|
|||
确保 `.IdentityServer` 项目是启动项目. 运行此应用程序, 它将在浏览器中打开 **登录** 页面. |
|||
|
|||
> 在 Visual Studio 中使用 Ctrl+F5(而不是F5) 在不进行调试的情况下运行应用程序. 如果你没有调试目的, 这会更快. |
|||
|
|||
你可以登录, 但不能在这里进入主应用程序. 这 **只是身份验证服务器**. |
|||
|
|||
确保 `.HttpApi.Host` 项目是启动项目, 然后运行应用程序将打开 Swagger UI 的: |
|||
|
|||
{{ else # Tiered == "No" }} |
|||
|
|||
确保 `.HttpApi.Host` 项目是启动项目, 然后运行应用程序将打开 Swagger UI 的: |
|||
|
|||
> 在 Visual Studio 中使用 Ctrl+F5(而不是F5) 在不进行调试的情况下运行应用程序. 如果你没有调试目的, 这会更快. |
|||
|
|||
{{ end # Tiered }} |
|||
|
|||
 |
|||
|
|||
你可以在这里查看应用程序的API并测试它们. 获取Swagger UI的[更多信息](https://swagger.io/tools/swagger-ui/). |
|||
|
|||
{{ end # UI }} |
|||
|
|||
{{ if UI == "Blazor" }} |
|||
|
|||
### 运行 Blazor 应用程序 (客户端) |
|||
|
|||
确保 `.Blazor` 项目是启动项目并运行应用程序. |
|||
|
|||
> 在 Visual Studio 中使用 Ctrl+F5(而不是F5) 在不进行调试的情况下运行应用程序. 如果你没有调试目的, 这会更快. |
|||
|
|||
应用程序启动后, 单击页头上的 **Login** 链接, 你将重定向到身份验证服务器以输入用户名和密码: |
|||
|
|||
 |
|||
|
|||
{{ else if UI == "NG" }} |
|||
|
|||
### 运行 Angular 应用程序 (客户端) |
|||
|
|||
转到 `Angular` 文件夹, 打开命令行终端, 键入 `yarn` 命令(我们建议使用 [yarn](https://yarnpkg.com/) 软件包管理器, 而 `npm install` 也可以使用) |
|||
|
|||
```bash |
|||
yarn |
|||
``` |
|||
|
|||
当所有node模块加载完毕后, 执行 `yarn start` (或 `npm start`) 命令： |
|||
|
|||
```bash |
|||
yarn start |
|||
``` |
|||
|
|||
初次构建可能需要更长的时间. 完成后, 它会在默认浏览器中使用 [localhost:4200](http://localhost:4200/) 地址打开 Angular UI. |
|||
|
|||
 |
|||
|
|||
{{ end }} |
|||
|
|||
输入用户名 **admin** 和 密码 **1q2w3E*** 登录应用程序. 应用程序已启动并正在运行. 你可以根据此启动模板开始开发应用程序. |
|||
|
|||
## 另请参见 |
|||
|
|||
* [Web 应用程序开发教程](Tutorials/Part-1.md) |
|||
* [应用程序启动模板](Startup-Templates/Application.md) |
|||
@ -0,0 +1,53 @@ |
|||
# 入门教程 |
|||
|
|||
````json |
|||
//[doc-params] |
|||
{ |
|||
"UI": ["MVC", "Blazor", "BlazorServer", "NG"], |
|||
"DB": ["EF", "Mongo"], |
|||
"Tiered": ["Yes", "No"] |
|||
} |
|||
```` |
|||
|
|||
> 本文档假设你更喜欢使用 **{{ UI_Value }}** 作为 UI 框架, 使用 **{{ DB_Value }}** 作为数据库提供程序. 对于其他选项, 请更改本文档顶部的首选项. |
|||
|
|||
## 设置你的开发环境 |
|||
|
|||
第一件事! 在创建项目之前, 让我们先设置你的开发环境. |
|||
|
|||
### 先决条件 |
|||
|
|||
开发计算机上应安装以下工具: |
|||
|
|||
* 一个集成开发环境 (比如: [Visual Studio](https://visualstudio.microsoft.com/vs/)) 它需要支持 [.NET 6.0+](https://dotnet.microsoft.com/download/dotnet) 的开发. |
|||
{{ if UI != "Blazor" }} |
|||
* [Node v12 或 v14](https://nodejs.org/) |
|||
* [Yarn v1.20+ (不是v2)](https://classic.yarnpkg.com/en/docs/install) <sup id="a-yarn">[1](#f-yarn)</sup> 或 npm v6+ (已跟随Node一起安装) |
|||
{{ end }} |
|||
{{ if Tiered == "Yes" }} |
|||
* [Redis](https://redis.io/) (启动解决方案使用 Redis 作为 [分布式缓存](Caching.md)). |
|||
{{ end }} |
|||
|
|||
{{ if UI != "Blazor" }} |
|||
|
|||
<sup id="f-yarn"><b>1</b></sup> _Yarn v2 工作方式不同, 不被支持._ <sup>[↩](#a-yarn)</sup> |
|||
|
|||
{{ end }} |
|||
|
|||
### 安装 ABP CLI |
|||
|
|||
[ABP CLI](./CLI.md) 是一个命令行界面, 用于自动执行基于 ABP 的解决方案的一些常见任务. 首先, 你需要使用以下命令安装 ABP CLI： |
|||
|
|||
````shell |
|||
dotnet tool install -g Volo.Abp.Cli |
|||
```` |
|||
|
|||
如果已安装, 则可以使用以下命令对其进行更新: |
|||
|
|||
````shell |
|||
dotnet tool update -g Volo.Abp.Cli |
|||
```` |
|||
|
|||
## 下一步 |
|||
|
|||
* [创建新的解决方案](Getting-Started-Create-Solution.md) |
|||
@ -1,374 +1,20 @@ |
|||
## 入门 |
|||
# 入门教程 |
|||
|
|||
````json |
|||
//[doc-params] |
|||
{ |
|||
"UI": ["MVC","NG"], |
|||
"UI": ["MVC", "Blazor", "BlazorServer", "NG"], |
|||
"DB": ["EF", "Mongo"], |
|||
"Tiered": ["Yes", "No"] |
|||
} |
|||
```` |
|||
|
|||
本教程介绍了如何创建一个新的{{if UI == "MVC"}} ASP.NET Core MVC web {{else if UI == "NG"}} Angular {{end}}. 配置并运行它. |
|||
> 本文档假设你更喜欢使用 **{{ UI_Value }}** 作为 UI 框架, 使用 **{{ DB_Value }}** 作为数据库提供程序. 对于其他选项, 请更改本文档顶部的首选项. |
|||
|
|||
## 设置你的开发环境 |
|||
## 内容 |
|||
|
|||
创建第一个项目之前,需要正确的设置你的开发环境. |
|||
本教程介绍如何使用 ABP 框架 **创建和运行** 新的 Web 应用程序. 请按照以下步骤操作; |
|||
|
|||
### 预先要求 |
|||
|
|||
你需要安装以下工具: |
|||
|
|||
* [Visual Studio 2019 (v16.4+)](https://visualstudio.microsoft.com/vs/) for Windows / [Visual Studio for Mac](https://visualstudio.microsoft.com/vs/mac/).<sup id="a-editor">[1](#f-editor)</sup> |
|||
* [.NET Core 3.1+](https://www.microsoft.com/net/download/dotnet-core/) |
|||
|
|||
* [Node v12 或 v14](https://nodejs.org/en/) |
|||
* [Yarn v1.19+](https://classic.yarnpkg.com/) |
|||
* [Yarn v1.20+ (not v2)](https://classic.yarnpkg.com/en/docs/install) <sup id="a-yarn">[2](#f-yarn)</sup> 或 npm v6+ (与Node一起安装) |
|||
{{ if Tiered == "Yes" }} |
|||
|
|||
* [Redis](https://redis.io/): 入门解决方案将Redis用作[分布式缓存](Caching.md). 因此你需要安装并运行Redis. |
|||
|
|||
{{ end }} |
|||
|
|||
<sup id="f-editor"><b>1</b></sup> _只要支持.NET Core和ASP.NET Core,就可以使用其他编辑器代替Visual Studio._ <sup>[↩](#a-editor)</sup> |
|||
|
|||
<sup id="f-yarn"><b>2</b></sup> _Yarn v2 的工作方式不同,不受支持._ <sup>[↩](#a-yarn)</sup> |
|||
|
|||
### 安装ABP CLI |
|||
|
|||
[ABP CLI](./CLI.md)是一个命令行页面,用于自动执行一些基于ABP的应用程序的常见任务. |
|||
|
|||
> ABP CLI是ABP框架一个免费开源的工具. |
|||
|
|||
你需要使用以下命令安排ABP CLI: |
|||
|
|||
````shell |
|||
dotnet tool install -g Volo.Abp.Cli |
|||
```` |
|||
|
|||
如果你已经安装,你可以使用以下命令更新到最新版本: |
|||
|
|||
````shell |
|||
dotnet tool update -g Volo.Abp.Cli |
|||
```` |
|||
|
|||
## 创建新项目 |
|||
|
|||
> 本文假设你使用 **{{ UI_Value }}** 做为UI框架 **{{ DB_Value }}** 做为数据库提供程序,对于其它选项,你可以更改文档顶部的首选项. |
|||
|
|||
### 使用ABP CLI创建一个新项目 |
|||
|
|||
使用ABP CLI的 `new` 命令创建新项目: |
|||
|
|||
````shell |
|||
abp new Acme.BookStore{{if UI == "NG"}} -u angular {{end}}{{if DB == "Mongo"}} -d mongodb{{end}}{{if Tiered == "Yes" && UI != "NG"}} --tiered {{else if Tiered == "Yes" && UI == "NG"}}--separate-identity-server{{end}} --mobile react-native |
|||
```` |
|||
|
|||
* 此命令还会在解决方案文件夹内创建一个React Native移动应用程序. 如果你不想要它,可以安全地删除它或从`abp new`命令中删除`--mobile react-native`选项, 以使其完全不包含在解决方案中. |
|||
|
|||
{{ if UI == "NG" }} |
|||
|
|||
* `-u` 指定UI框架, 本例中是 `angular`. |
|||
|
|||
{{ if Tiered == "Yes" }} |
|||
|
|||
* `--separate-identity-server` 参数用于将Identity服务器应用程序与API主机应用程序分隔开. 如果未指定,则服务器上将只有一个端点. |
|||
|
|||
{{ end }} |
|||
|
|||
{{ end }} |
|||
|
|||
{{ if DB == "Mongo" }} |
|||
|
|||
* `-d` 指定数据库提供程序, 本例中是 `mongodb`. |
|||
|
|||
{{ end }} |
|||
|
|||
{{ if Tiered == "Yes" && UI != "NG" }} |
|||
|
|||
* `--tiered` 参数用于创建n层解决方案,其中身份验证服务器层,UI层和API层在物理上是分离的. |
|||
|
|||
{{ end }} |
|||
|
|||
> 你可以使用不同级别的命令空间; 例如. BookStore, Acme.BookStore or Acme.Retail.BookStore. |
|||
|
|||
#### ABP CLI 命令 & 选项 |
|||
|
|||
[ABP CLI文档](./CLI.md)涵盖了ABP CLI的所有可用命令和选项. 本文档使用[应用程序启动模板](Startup-Templates/Application.md)创建新的Web应用程序. 有关其他模板,请参见[ABP启动模板](Startup-Templates/Index.md)文档. |
|||
|
|||
> 或者,您可以从[ABP Framework网站](https://abp.io/get-started)中选择"直接下载"选项卡创建新的解决方案. |
|||
|
|||
## 解决方案结构 |
|||
|
|||
{{ if UI == "MVC" }} |
|||
|
|||
创建项目后你会有以下解决方案目录和文件: |
|||
|
|||
 |
|||
|
|||
在Visual Studio中打开 `.sln` 文件时,将看到以下解决方案结构: |
|||
|
|||
{{if DB == "Mongo"}} |
|||
|
|||
 |
|||
|
|||
{{else}} |
|||
|
|||
![vs-default-app-solution-structure](images/vs-app-solution-structure{{if Tiered == "Yes"}}-tiered{{end}}.png) |
|||
|
|||
{{end}} |
|||
|
|||
{{ else if UI == "NG" }} |
|||
|
|||
在创建的解决方案中有三个文件夹: |
|||
|
|||
 |
|||
|
|||
* `angular` 文件夹包含Angular UI应用程序. |
|||
* `aspnet-core` 文件夹包含后端应用程序. |
|||
* `react-native` 文件夹包含React Native UI 应用程序. |
|||
|
|||
打开 `aspnet-core` 文件夹下的 `.sln`(`Visual Studio`解决方案)文件: |
|||
|
|||
![vs-angular-app-backend-solution-structure](images/vs-spa-app-backend-structure{{if DB == "Mongo"}}-mongodb{{end}}.png) |
|||
|
|||
{{ end }} |
|||
|
|||
> ###### 关于解决方案中的项目 |
|||
> |
|||
> 根据你的**UI**,**数据库**和其他选项,你的解决方案的结构可能略有不同. |
|||
|
|||
该解决方案具有分层结构(基于[Domain Driven Design](Domain-Driven-Design.md)), 并包含配置好的的单元&集成测试项目. |
|||
|
|||
{{ if DB == "EF" }} |
|||
|
|||
集成测试项目已配置为可与 **EF Core** & **SQLite 内存** database同时使用. |
|||
|
|||
{{ else if DB == "Mongo" }} |
|||
|
|||
集成测试项目已配置为每个测试创建的内存中的**MongoDB**数据库(使用的[Mongo2Go](https://github.com/Mongo2Go/Mongo2Go)库). |
|||
|
|||
{{ end }} |
|||
|
|||
> 请参阅[应用程序模板文档](Startup-Templates/Application.md)详细了解解决方案结构. |
|||
|
|||
{{ if DB == "Mongo" }} |
|||
|
|||
> [启动模板](Startup-templates/Index.md)默认在 `.MongoDB` 项目中**禁用**了工作单元事务. 如果你的MongoDB服务器支持事务,你可以手动启用工作单元的事务: |
|||
|
|||
```csharp |
|||
Configure<AbpUnitOfWorkDefaultOptions>(options => |
|||
{ |
|||
options.TransactionBehavior = UnitOfWorkTransactionBehavior.Enabled; |
|||
}); |
|||
``` |
|||
|
|||
{{ end }} |
|||
|
|||
## 创建数据库 |
|||
|
|||
### 连接字符串 |
|||
|
|||
检查 {{if UI == "MVC"}}{{if Tiered == "Yes"}}`.IdentityServer` 和 `.HttpApi.Host` 项目{{else}}`.Web` 项目{{end}}{{else if UI == "NG" }}`.HttpApi.Host` 项目{{end}}下 `appsettings.json` 文件中的 **链接字符串**: |
|||
|
|||
{{ if DB == "EF" }} |
|||
|
|||
````json |
|||
"ConnectionStrings": { |
|||
"Default": "Server=localhost;Database=BookStore;Trusted_Connection=True" |
|||
} |
|||
```` |
|||
|
|||
该解决方案配置为**Entity Framework Core**与**MS SQL Server**一起使用. EF Core支持[各种](https://docs.microsoft.com/en-us/ef/core/providers/)数据库提供程序,因此你可以使用任何受支持的DBMS. 请参阅[Entity Framework集成文档](https://docs.abp.io/en/abp/latest/Entity-Framework-Core)了解如何切换到另一个DBMS. |
|||
|
|||
### 数据库连接字符串 |
|||
|
|||
查看`.Web`项目下`appsettings.json`文件中的 **连接字符串**: |
|||
|
|||
````json |
|||
{ |
|||
"ConnectionStrings": { |
|||
"Default": "Server=localhost;Database=BookStore;Trusted_Connection=True" |
|||
} |
|||
} |
|||
```` |
|||
|
|||
解决方案使用 **Entity Framework Core** 和 **MS SQL Server**. EF Core支持[各种](https://docs.microsoft.com/zh-cn/ef/core/providers/)数据库提供程序,因此你可以根据实际需要使用其他DBMS. 如果需要,请更改连接字符串. |
|||
|
|||
### 应用迁移 |
|||
|
|||
该解决方案使用[Entity Framework Core Code First 迁移](https://docs.microsoft.com/en-us/ef/core/managing-schemas/migrations/?tabs=dotnet-core-cli). 你需要应用迁移来创建数据库,有两种方法迁移数据库. |
|||
|
|||
#### 使用DbMigrator应用程序应用迁移 |
|||
|
|||
该解决方案包含一个控制台应用程序(在此示例中名为`Acme.BookStore.DbMigrator`),可以创建数据库,应用迁移和初始化数据. 它对开发和生产环境都很有用. |
|||
|
|||
> `.DbMigrator`项目有自己的`appsettings.json`. 因此,如果你更改了上面的连接字符串,则还应更改此字符串. |
|||
|
|||
右键单击`.DbMigrator`项目并选择 **设置为启动项目**: |
|||
|
|||
 |
|||
|
|||
按F5(或Ctrl + F5)运行应用程序. 它将具有如下所示的输出: |
|||
|
|||
 |
|||
|
|||
#### 使用EF Core Update-Database命令 |
|||
|
|||
Ef Core具有`Update-Database`命令, 可根据需要创建数据库并应用挂起的迁移. 右键单击`.Web`项目并选择**设置为启动项目**: |
|||
|
|||
{{ if UI == "MVC" }} |
|||
|
|||
右键单击{{if Tiered == "Yes"}}`.IdentityServer`{{else}}`.Web`{{end}}项目并选择**设置为启动项目**: |
|||
|
|||
{{ else if UI != "MVC" }} |
|||
|
|||
右键单击`.HttpApi.Host`项目并选择**设置为启动项目**: |
|||
|
|||
{{ end }} |
|||
|
|||
 |
|||
|
|||
打开**包管理器控制台(Package Manager Console)**, 选择`.EntityFrameworkCore.DbMigrations`项目作为**默认项目**并运行`Update-Database`命令: |
|||
|
|||
 |
|||
|
|||
这将基于配置的连接字符串创建新数据库. |
|||
|
|||
> **使用`.DbMigrator`工具是建议的方法**, 因为它能初始化初始数据能够正确运行Web应用程序. |
|||
> |
|||
> 如果你只是使用 `Update-Database` 命令,你会得到一个空数据库,所以你无法登录到应用程序因为数据库中没有初始管理用户. 不需要种子数据库时,可以在开发期间使用 `Update-Database` 命令. 但是使用 `.DbMigrator` 应用程序会更简单,你始终可以使用它来迁移模式并为数据库添加种子. |
|||
|
|||
{{ else if DB == "Mongo" }} |
|||
|
|||
````json |
|||
"ConnectionStrings": { |
|||
"Default": "mongodb://localhost:27017/BookStore" |
|||
} |
|||
```` |
|||
|
|||
该解决方案被配置为在你的本地计算机中使用 **MongoDB**,因此你需要启动并运行一个MongoDB服务器实例或者将连接字符串更改为另一个MongoDB服务器. |
|||
|
|||
### 初始化种子数据 |
|||
|
|||
该解决方案附带一个 `.DbMigrator` 控制台应用程序,该应用程序为初始数据提供了种子. 它对于开发以及生产环境都很有用. |
|||
|
|||
> `.DbMigrator` 项目有自己的 `appsettings.json`.如果你更改了其他项目的 `appsettings.json`,也应该更改这个. |
|||
|
|||
右键点击 `.DbMigrator` 并选择 **设置为启动项目**. |
|||
|
|||
 |
|||
|
|||
按F5(或Ctrl+F5)启动应用程序,你会看到以下输出: |
|||
|
|||
 |
|||
|
|||
> 数据库创建后会初始化[种子数据](Data-Seeding.md), 其中包含用于登录的 `admin` 用户. 所以你至少使用 `.DbMigrator` 一次. |
|||
|
|||
{{ end }} |
|||
|
|||
### 运行应用程序 |
|||
|
|||
{{ if UI == "MVC" }} |
|||
|
|||
{{ if Tiered == "Yes" }} |
|||
|
|||
确保 `.IdentityServer` 是启动项目,运行应用程序后会在你的浏览器打开一个 **login** 页面. |
|||
|
|||
> 在Visual Studio中使用Ctrl+F5(而不是F5)运行应用,如果你不用于调试,这会减少启动时间. |
|||
|
|||
你可以登录,但是不能在这里进入主应用程序,它仅是验证服务器. |
|||
|
|||
确保 `.HttpApi.Host` 是启动项目,运行应用程序后会在你的浏览器打开一个 **Swagger UI** 页面. |
|||
|
|||
 |
|||
|
|||
这里是Web应用程序使用的API应用程序. |
|||
|
|||
最后确保 `.Web` 是启动项目,运行应用程序后会在你的浏览器打开一个 **welcome** 页面. |
|||
|
|||
 |
|||
|
|||
点击 **login** 按钮重定向到 `Identity Server` 来登录应用程序. |
|||
|
|||
 |
|||
|
|||
{{ else }} |
|||
|
|||
最后确保 `.Web` 是启动项目,运行应用程序后会在你的浏览器打开一个 **login** 页面. |
|||
|
|||
> 在Visual Studio中使用Ctrl+F5(而不是F5)运行应用,如果你不用于调试,这会减少启动时间. |
|||
|
|||
 |
|||
|
|||
{{ end }} |
|||
|
|||
{{ else if UI != "MVC" }} |
|||
|
|||
#### 运行HTTP API Host (服务器端) |
|||
|
|||
{{ if Tiered == "Yes" }} |
|||
|
|||
确保 `.IdentityServer` 是启动项目,运行应用程序后会在你的浏览器打开一个 **login** 页面. |
|||
|
|||
> 在Visual Studio中使用Ctrl+F5(而不是F5)运行应用,如果你不用于调试,这会减少启动时间. |
|||
|
|||
你可以登录,但是不能在这里进入主应用程序,它仅是验证服务器. |
|||
|
|||
{{ end }} |
|||
|
|||
确保 `.HttpApi.Host` 是启动项目,运行应用程序后会在你的浏览器打开一个 **Swagger UI** 页面. |
|||
|
|||
{{ if Tiered == "No" }} |
|||
|
|||
> 在Visual Studio中使用Ctrl+F5(而不是F5)运行应用,如果你不用于调试,这会减少启动时间. |
|||
|
|||
{{ end }} |
|||
|
|||
 |
|||
|
|||
你可以看到应用程序的API并进行测试. 更多信息,请参阅[Swagger UI](https://swagger.io/tools/swagger-ui/). |
|||
|
|||
> ##### Swagger UI 授权 |
|||
> |
|||
> 大多数的HTTP API都需要身份验证和授权. 如果你要测试授权API, 请手动进入 `/Account/Login` 页面, 输入用户名: `admin` 和密码: `1q2w3E*` 登录到应用程序. 然后你可以访问授权API. |
|||
|
|||
{{ end }} |
|||
|
|||
{{ if UI == "NG" }} |
|||
#### 运行 Angular 应用程序 (客户端) |
|||
|
|||
在 `angular` 下打开命令行终端, 输入 `yarn` 命令(我们推荐使用[yarn](https://yarnpkg.com/)包管理, `npm install` 在大多数情况下也可以工作). |
|||
|
|||
```bash |
|||
yarn |
|||
``` |
|||
|
|||
等到所有node模块加载成功, 执行 `yarn start` (或 `npm start`) 命令: |
|||
|
|||
```bash |
|||
yarn start |
|||
``` |
|||
|
|||
等待 `Angular CLI` 使用 `BrowserSync` 启动 `Webpack` dev-server. |
|||
它会负责编译你的 `TypeScript`代码, 并自动重新加载浏览器. |
|||
完成后 `Angular Live Development Server` 会监听 localhost:4200. |
|||
打开你的浏览器并导航到[localhost:4200](http://localhost:4200/). |
|||
|
|||
 |
|||
|
|||
{{ end }} |
|||
|
|||
输入用户名 **admin**,密码 **1q2w3E*** 登录到应用程序,应用程序已经启动并执行,你可以基于此启动模板开始开发应用程序. |
|||
|
|||
#### 移动开发 |
|||
|
|||
当你创建一个新的应用程序时. 可以添加`-m react-native`选项以在解决方案中包含 `react-native`项目. 这是一个基础的[React Native](https://reactnative.dev/)启动模板,用于开发与基于ABP的后端集成的移动应用程序. |
|||
|
|||
|
|||
请参阅"[React Native入门](Getting-Started-React-Native.md)"文档了解如何配置和运行React Native应用程序. |
|||
|
|||
## 下一步是什么? |
|||
|
|||
[Web应用程序开发教程](Tutorials/Part-1.md) |
|||
1. [设置你的开发环境](Getting-Started-Setup-Environment.md) |
|||
2. [创建新的解决方案](Getting-Started-Create-Solution.md) |
|||
3. [运行解决方案](Getting-Started-Running-Solution.md) |
|||
@ -1,3 +0,0 @@ |
|||
# CMS Kit Module |
|||
|
|||
TODO |
|||
@ -0,0 +1,3 @@ |
|||
# CMS Kit: Blogging |
|||
|
|||
TODO... |
|||
@ -0,0 +1,3 @@ |
|||
# CMS Kit: Comments |
|||
|
|||
TODO... |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue