Front-end based on react, backend based on. NET core2.0 Development Road (1) Introduction

Article Outline Directory

1. Front-end based on react, backend based on. NET core2.0 Development Road (1) Introduction

2. Front-end based on react, backend based on. NET core2.0 Development Path (2) Development environment configuration, considerations, backend data initialization

3. Front-end based on react, backend based on. NET core2.0 Development Road (3) each technology stack configuration and description

4. Front-end based on react, backend based on. NET core2.0 Development Road (4) front-end routing, model, service description

5. Front-end based on react, backend based on. NET core2.0 Development Path (5) Configure node layer, session settings, acquisition, request interception

6. Front-end based on react, back-end development path based on. NET core2.0 (6) server-side rendering (SSR)

7. Front-end based on react, backend based on. NET core2.0 Development path (7) routing, model, service, node, backend how to interact, how data is passed

8. Front-end based on react, backend based on. NET core2.0 Development Path (8) How to implement the front-end routing jump control

9. Front-end based on react, backend based on. NET core2.0 Development Road (9) How to implement the front-end permission control button display

10. Front-end based on react, backend based on. NET core2.0 Development Path (10) Backend implementation request validation, permission validation

11. Front-end based on react, back-end development path based on. NET core2.0 (11) Simple deployment to the server for extranet access

Project Introduction

Project Code Cloud Address: https://gitee.com/teambp/ScaffoldClient

Project Preview Address: http://test.hourxu.com/

Testing Account: Test

Testing Password: Test

New and viewing permissions are only available for a subset of menus

Well, strive to complete this series of articles in about 2 months ' time. Welcome everyone to add a group to urge more

Group number: 17078075

The time react started studying was around August this year. Because of the cause of his job, so intermittent until now to come up with a semi-finished project.

. Net core does not have the difficulty of getting started, it is fast, and then the integration of a variety of third parties, according to the document can be configured.

Project has been put into actual project development, there are any problems, will share with you

Front End Technology Stack

React (v15.*)

Dva (v1.2.1): React-router (v2.8.1), redux

Antd:ui Frame

Node

Webpack

More ..... Specific look at the source

Back-end technology stack

. NetCore2.0

WebApi

Efcore:dbfirst

Swashbuckle.AspNetCore:API Documentation

StructureMap.AspNetCore:DI container

More .....

What the front end implements

1.SSR, server-side (node) rendering, giving the entire web app a sense of app experience

2. Route jump, combined with permissions, if the Jump menu is not in the permissions, then jump 403 page

3. Page button control, combined with permissions, if there is no operation right, the button is not displayed. Of course, the request at the API layer also verifies the permissions again.

4. Request forwarding, login, API layer will return token, when the need to request API layer, will pass through the node layer, stitching credentials and encryption, request API, if the private key is not on the error.

What the backend implements

1.API Request Token Verification

2. Permission Validation

3. Log Database

4.Dbfirst, initializing data

5.DI container

6.Swagger API Documentation

What does the article say?

Installation of the major environments

Keywords: node installation, git installation,. netcore2.0 installation, Vscode installation, vs2017 installation, SQL Server installation

The whole process will go through, but there is something involved in the document, important will mention, the other skipped, mainly I also a lot of useless on

React Document Address: https://doc.react-china.org/docs/hello-world.html

DVA document address: HTTPS://GITHUB.COM/DVAJS/DVA/BLOB/MASTER/README_ZH-CN.MD

ANTD Document Address: HTTPS://ANT.DESIGN/DOCS/REACT/INTRODUCE-CN

The other, use it to post it again.

What the article will say

the meaning of each folder, the meaning of each level.

The meaning of the front-end router,model,service, the meaning of each API, the 3-tier how to pass data,

How the node layer intercepts the request, how to forward the request, how to save the session,

How to implement server-side rendering,

How the front-end backend interacts.

How the front end implements permission control with the backend.

How the backend implements request validation

Description of backend architecture, how to implement IOC, how to Dbfirst and so on ...

Project structure

Front:

Back end:

The front-end is also look at the document, look at the source, slowly become this appearance, so it is not reasonable I do not know, after all, I am engaged in the back end, ha haha haha.

The backend is the actual project, the simplification comes, the development speed is good.

Front-end based on react, backend based on. NET core2.0 Development Road (1) Introduction