使用Visual Studio 17和＆＃34; dotnet new reactredux＆＃34;在使用.NET Core 2.1模板构建的应用程序中独立运行Create-React-App服务器。

Question

问题：

要独立运行CRA服务器，Microsoft建议we run the CRA app separately and change the code within the Startup.cs class file，如下所示：

从控制台运行React应用程序：

  

＆GT; cd ClientApp

     

＆GT; npm start

将 Startup.cs 中的public List<Object> searchEmployee(EmployeeSearchDto data) { Session session = sessionFactory.openSession(); final String CRITERIA_EMPLOYEEID = "emp.employeeID =:id"; final String CRITERIA_EMPLOYEEID2 = "emp.employeeID LIKE:id"; final String CRITERIA_POSITION= "emp.positionID =:posID"; final String CRITERIA_DEPARTMENT="emp.departmentID =:deptID"; final String CRITERIA_WORKPLACE = "emp.workplaceID =:workID"; Boolean selected_dept = false; Boolean selected_pos = false; Boolean selected_work = false; Boolean input_empID = false; Boolean input_empName = false; firstName = ""; middleName = ""; lastName = ""; completeName = ""; firstLastName = ""; List<String> criteria = new ArrayList<>(); List<Object> employees = null; // checking the fields if all the fields is empty try{ //one by one check the select field String query = "Select" + " emp.employeeID," +"emp.firstName," +"emp.middleName," +"emp.lastName," +"pos.positionName," +"dept.deptName," +"work.workplaceName" +"from Employee emp " + "INNER JOIN Department dept " + "ON emp.departmentID = dept.deptID " + "INNER JOIN Position pos " + "ON emp.positionID = pos.positionID " + "INNER JOIN Workplace work " + "ON emp.workplaceID = work.workplaceID "; if(!data.isEmpty()) { query = query.concat("WHERE "); if(data.getEmployeeID()!="" && data.getEmployeeID()!=null) { criteria.add(CRITERIA_EMPLOYEEID2); System.out.println("Employee IDs"); input_empID = true; } if(data.getEmployeeName()!="" && data.getEmployeeName()!=null){ criteria.add(nameCriteriaHelper(data.getEmployeeName())); System.out.println("Employee Name AKOOO"); input_empName = true; } if(data.getDepartmentID()!=0) { criteria.add(CRITERIA_DEPARTMENT); System.out.println("Dept ID "); selected_dept = true; } if(data.getPositionID()!=0) { criteria.add(CRITERIA_POSITION); System.out.println("POS ID "); selected_pos = true; } if(data.getWorkplaceID()!=0) { criteria.add(CRITERIA_WORKPLACE); selected_work = true; } query = query.concat(String.join(" OR ", criteria)); } query = query.concat(" ORDER BY emp.joinDate DESC"); System.out.println("QUERY: " + query); Query q = session.createQuery(query); if(input_empID) { q.setParameter("id", "%" + data.getEmployeeID() + "%"); } if(input_empName) { if(searchbyOne) q.setParameter("inputName", "%" + data.getEmployeeName() + "%"); if(searchbyFandL) q.setParameter("firstLastName", "%" +firstLastName+ "%"); if(searchbyCompName) q.setParameter("completeName", "%" +completeName+ "%"); } if(selected_dept) { q.setParameter("deptID", data.getDepartmentID()); } if(selected_pos) { q.setParameter("posID", data.getPositionID()); } if(selected_work) { q.setParameter("workID", data.getWorkplaceID()); } employees = (List<Object>) q.list(); }catch(Exception e){ e.printStackTrace(); }finally{ session.close(); } return employees; } public String nameCriteriaHelper(String name) { searchbyOne = false; searchbyFandL = false; searchbyCompName = false; final String noOfTokens_1 = "CONCAT(emp.lastName,' ',emp.firstName, ' ',emp.middleName) LIKE :inputName"; final String noOfTokens_2 = "(CONCAT(emp.lastName, ' ', emp.firstName) LIKE :firstLastName " + "OR CONCAT(emp.firstName, ' ', emp.lastName) LIKE :firstLastName)"; final String noOfTokens_3 = "CONCAT(emp.lastName,' ',emp.firstName, ' ',emp.middleName) LIKE :completeName"; StringTokenizer stringTokenizer = new StringTokenizer(name); int no_of_tokens = stringTokenizer.countTokens(); switch(no_of_tokens) { case 1: searchbyOne = true; return noOfTokens_1; case 2: firstName = stringTokenizer.nextToken(); lastName = stringTokenizer.nextToken(); firstLastName = lastName + " " + firstName; searchbyFandL = true; return noOfTokens_2; default: int counter = 0; while( counter < (no_of_tokens - 2)) { firstName = firstName.concat(stringTokenizer.nextToken() + " "); counter++; } firstName = stringTokenizer.nextToken(); middleName = stringTokenizer.nextToken(); lastName = stringTokenizer.nextToken(); completeName = lastName + " " + firstName + " " + middleName; searchbyCompName = true; return noOfTokens_3; } 调用替换为：

  

spa.UseProxyToSpaDevelopmentServer（＆＃34; http://localhost:3000/＆＃34）;

但是，当我点击F5时，Visual Studio每次都会在http://localhost:54789

处启动CRA服务器

重现步骤：

1. 安装Microsoft Visual Studio Professional 2017
2. 在Visual Studio安装期间选择spa.UseReactDevelopmentServer版本



1. 从the NPM website
下载并安装npm
2. 打开Windows命令行工具
3. 导航到新的工作区目录.NET Core cross-platform development
4. 运行cd \path\to\workspace\
5. 确保您拥有最新的.NET模板：npm install
6. 从模板中创建一个新的React-Redux应用程序：dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0
7. 导航到ClientApp目录：dotnet new reactredux
8. 运行CRA服务器：cd ClientApp
9. 在Windows资源管理器中打开工作区目录
10. 打开已创建的.csproj文件（应在Visual Studio 2017中打开）
11. 将 Startup.cs 中的npm start调用替换为：

  

spa.UseProxyToSpaDevelopmentServer（＆＃34; http://localhost:3000/＆＃34）;

1. 点击 F5

环境：

• Microsoft Windows 7 Enterprise SP1
• Microsoft Visual Studio Professional 2017版本15.6.7
• Microsoft .NET Framework 4.7.02558
• Node.js 8.11.1
• 节点包管理器5.6.0
• .NET Core SDK 2.1.104

• 套餐参考：

  spa.UseReactDevelopmentServer

  Microsoft.AspNetCore.All 2.0.0

我只是误解了这个功能应该如何工作？