asp.net core react 项目实战(一)

2021年09月15日 阅读数:3
这篇文章主要向大家介绍asp.net core react 项目实战(一),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

asp.net-core-react

asp.net core reactnode

简介

  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
  1. 开发语言
    asp.net core
    reactreact

  2. 开发工具
    vscodegit

开发流程

  1. 建立sln项目解决方案「sln 不是必须建立 可是建立了对智能提示友好」
    dotnet new slngithub

  2. 组织项目
    为了时髦一些我在和sln并列层级目录里床架了一个src文件夹 以此来管理源代码
    mkdir srcweb

  3. 进入src 目录建立一个react web应用 取名为web
    cd src
    dotnet new react -o webnpm

  4. 回到项目根目录 将新添加的 web项目 添加到sln 项目解决文件中
    dotnet sln add src/web/web.csproj
    「这个必定要➕加」
    咱们当前目录结构是这样的json

.
├── 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

  1. 启动项目 -p 指定项目启动文件 src/web 里面有Program.cs 致咱们的启动项目文件
    dotnet run -p src/web/
  2. 项目启动ok

  1. 浏览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文件夹下c#

  1. build react 项目

  1. 发布项目
    在sln同一个层次建立release文件夹用来存放发布文件
    dotnet publish -c release -o ../../release/
    将项目发布出去

  1. 执行发布文件
    dotnet release/web.dll
  2. 关于环境变量设置推文
    https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/environments?view=aspnetcore-2.2

项目已经推送到GitHub

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

第二章节asp.net

半成品 ... 没时间搞了 ... 后期完善

这个demo算是比较有料

  1. 里面有c# md5加密解密和js之间的坑
  2. 用另外一种方式使用了dapper
  3. ... 一个目的 体验.net core和react 的 效果
    目前项目表现效果