asp.net core react 項目實戰(一)

asp.net-core-react

asp.net core react

簡介

1. 開發依賴環境

.NET Core SDK (reflecting any global.json): 
Version:   2.2.300

Runtime Environment:
OS Name:     Mac OS X

Host (useful for support):
Version: 2.2.5

node -v
v10.16.0

2. 開發語言
   asp.net core
   react

3. 開發工具
   vscode

開發流程

1. 創建sln項目解決方案「sln 不是必須創建 但是創建了對智能提示友好」
   dotnet new sln

2. 組織項目
   為了時髦一些我在和sln並列層級目錄里床架了一個src文件夾 以此來管理源代碼
   mkdir src

3. 進入src 目錄創建一個react web應用 取名為web
   cd src
dotnet new react -o web

4. 回到項目根目錄 將新添加的 web項目 添加到sln 項目解決文件中
   dotnet sln add src/web/web.csproj
   「這個一定要➕加」
   我們當前目錄結構是這樣的

.
├── LICENSE
├── README.md
├── asp.net-core-react.sln
└── src
    └── web
        ├── ClientApp
        ├── Controllers
        ├── Pages
        ├── Program.cs
        ├── Properties
        ├── Startup.cs
        ├── appsettings.Development.json
        ├── appsettings.json
        ├── obj
        └── web.csproj

7 directories, 8 files

5. 啟動項目 -p 指定項目啟動文件 src/web 里面有Program.cs 致我們的啟動項目文件
   dotnet run -p src/web/
6. 項目啟動ok

7. 瀏覽web/ClientApp/package.json

"scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"
  }

scripts里集成了幾個命令 用來啟動 react 這個項目 或者build這個項目 啟動這個項目之前需要加上npm
npm start
npm build
npm test
...
執行目錄要在ClinetApp文件夾下

8. build react 項目

9. 發布項目
   在sln同一個層次創建release文件夾用來存放發布文件
   dotnet publish -c release -o ../../release/
   將項目發布出去

10. 執行發布文件
    dotnet release/web.dll
11. 關於環境變量設置推文
    https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/environments?view=aspnetcore-2.2

項目已經推送到GitHub

地址:
https://github.com/TopGuo/asp.net-core-react

第二章節

半成品 ... 沒時間搞了 ... 后期完善

這個demo算是比較有料

1. 里面有c# md5加密解密和js之間的坑
2. 用另一種方式使用了dapper
3. ... 一個目的 體驗.net core和react 的 效果
   目前項目表現效果