1. 程式人生 > >前端基於react,後端基於.net core2.0的開發之路(1) 介紹

前端基於react,後端基於.net core2.0的開發之路(1) 介紹

tco ioc logs asp webpack 路由 src 部署 關鍵字

文章提綱目錄

1.前端基於react,後端基於.net core2.0的開發之路(1) 介紹

2.前端基於react,後端基於.net core2.0的開發之路(2) 開發環境的配置,註意事項,後端數據初始化

3.前端基於react,後端基於.net core2.0的開發之路(3) 各個技術棧配置和說明

4.前端基於react,後端基於.net core2.0的開發之路(4) 前端路由,模型,服務的說明

5.前端基於react,後端基於.net core2.0的開發之路(5) 配置node層,session設置、獲取,請求攔截

6.前端基於react,後端基於.net core2.0的開發之路(6) 服務端渲染(SSR)

7.前端基於react,後端基於.net core2.0的開發之路(7) 路由,模型,服務,node,後端如何交互,數據如何傳遞

8.前端基於react,後端基於.net core2.0的開發之路(8) 怎麽實現前端路由跳轉控制

9.前端基於react,後端基於.net core2.0的開發之路(9) 怎麽實現前後端權限控制按鈕顯示

10.前端基於react,後端基於.net core2.0的開發之路(10) 後端實現請求驗證,權限驗證

11.前端基於react,後端基於.net core2.0的開發之路(11) 簡單部署到服務器,實現外網訪問

項目介紹

項目碼雲地址:https://gitee.com/teambp/ScaffoldClient

項目預覽地址:http://test.hourxu.com/

測試賬號:test

測試密碼:test

只開放了一部分菜單的新增和查看權限

唔,爭取在2個月左右時間內完成這一系列文章。。歡迎大家加群催更

群號:17078075

react開始學習的時間是今年8月份左右。因為本職工作的原因,所以斷斷續續到現在才拿出一個半成品項目。

.Net Core沒什麽入門難度,走通很快,後面也就是各種第三方的集成,按照文檔即可完成配置。

項目已投入實際項目開發,有任何問題,都會和大家分享

前端技術棧

React(v15.*)

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

Antd :UI框架

Node

Webpack

More.......具體看源碼

後端技術棧

.NetCore2.0

WebApi

EFCore :DbFirst

Swashbuckle.AspNetCore :API文檔

StructureMap.AspNetCore :DI容器

More.....

前端實現了什麽

1.SSR,服務端(node)渲染,讓整個WEB應用擁有APP的體驗感

2.路由跳轉,結合權限,如果跳轉菜單未在權限裏面,則跳403頁面

3.頁面按鈕控制,結合權限,如果沒有操作權,按鈕不顯示。當然,請求在API層還會再驗證一次權限。

4.請求轉發,登錄後,API層會返回token,當需要請求API層時,會經過node層,拼接憑證和加密後,請求API,如果私鑰對不上則報錯。

後端實現了什麽

1.API請求token驗證

2.權限驗證

3.日誌數據庫

4.Dbfirst,初始化數據

5.DI容器

6.Swagger API文檔

文章不講什麽

各大環境的安裝

關鍵字:node安裝,git安裝,.netcore2.0安裝,vscode安裝,vs2017安裝,sqlserver安裝

整體流程會過一遍,但是涉及到文檔有的東西,重要的會提一下,其他略過,主要是我也很多沒用上

react文檔地址:https://doc.react-china.org/docs/hello-world.html

dva文檔地址:https://github.com/dvajs/dva/blob/master/README_zh-CN.md

antd文檔地址:https://ant.design/docs/react/introduce-cn

其他的,用到再貼出來

文章會講什麽

每個文件夾的含義,每個層級的含義。

前端router,model,service的意義,裏面各個API的含義,這3層如何傳遞數據,

node層如何攔截請求,怎麽轉發請求,怎麽保存獲取session,

怎麽實現服務端渲染,

前端後端如何交互。

前端如何配合後端實現權限控制。

後端如何實現請求驗證

後端架構的說明,如何實現ioc,如何dbfirst等等等等.............

項目結構

前端:

技術分享

後端:

技術分享

前端也是看文檔,看源碼,慢慢變成這個樣子的,所以合不合理我也不知道,畢竟我是搞後端的,哈哈哈哈哈。

後端是實際的項目,簡化而來的,開發速度不錯。

前端基於react,後端基於.net core2.0的開發之路(1) 介紹