asp.net mvc 項目中怎麼用react redux,vue 等前端框架？

01-05

前端框架官方的例子都使用npm webpack等，對於http://asp.net mvc的項目該怎麼使用，前後台都是一個人寫的情況下怎麼高效率調試

捨棄razor

把前後端分離部署，前端通過webpack構建出一坨靜態文件，放在伺服器的一個目錄下，後端用.net的話就走webapi，通過nginx tengine之類的反向代理映射到相同域名，所有以api、service之類關鍵詞開頭的請求，統一proxy pass到.net程序上，其他的請求直接發前端文件

（另外，有服務端渲染的需求的話中間加一個nodejs，其他的請求話基本都走fetch ajax）

提高開發調試效率的方法：

這裡面關鍵就是多了一個反向代理，平時開發的話，你同樣可以把後端請求映射到自己的.net程序上，前端請求映射到dev server上，這樣就可以使用webpack hot load等功能

我這邊用的react全家桶，後台類應用直接用的 ant-design/ant-design 加 dvajs/dva（對redux的封裝），dev工具用的是sorrycc/roadhog 反正都是阿里人搞的，穩定的很，當然如果你做線上站點，antd作用就沒那麼大了

多一句嘴：如果你不想做重前端，而只是想頁面某個部分使用react、vue，那麼就只需要用webpack構建這些組件，然後把它們掛靠在window對象上，async載入引入這些js後，通過http://window.xxx就能獲取這些組件了，再藉助react、vue等的global渲染方法render到對應的dom節點上就可以了，可以看我這個issue 諮詢一個dva架構上的問題 · Issue #554 · dvajs/dva

不 return View，改為 return Json，然後當WebAPI 用咯

試試前後端一體 WEB 視圖框架 - C# 高性能自動化服務端框架 - 凹凸架構，在擁有前端框架靈活性的同時，自動解決 Web API 數據組織與搜索引擎友好問題。

Microsoft.AspNetCore.SpaService

用這個 nuget 包就好了

你可以不用razor模板的

解決這個問題主要從兩方面入手，一個是實現前後端分離，一個是在前端接入react/vue：

一、改變數據的獲取方式：將原來的使用後端模板引擎渲染數據到頁面的方式，改為後端提供介面，前端發起非同步請求獲取數據，在客戶端將數據組織為dom；

二、react/vue並不是只能走npm webpack，這些工具只是提供了更多的特性和便捷以及更強大的工程化管理；事實上兩者都有unpkg的方式，使用的時候直接script標籤src一下就好了，你完全可以在不藉助打包工具的情況下寫程序並且能正常工作，在對工具不熟悉的情況下，這樣掌握起來會比較容易。

提高效率：花點時間學習如何使用開發打包工具，讓前端開發工程化、自動化。

補充：react/vue並沒有局限於寫單頁面，合理的組織一樣可以多頁面。

給你個例子參考一下billshooting/CNCDataManager_Core後端是用ASP.NET Core寫的，前端是用Angular1 + Typescript寫的。道理是一樣的

根據前端的單頁應用特性，你的問題一分為二。首先，大部分人已經回答你了，就是不要用模版，只做為一個簡單的http server。其次，前端的單頁應用，不像模版解析後生成的網頁，已包含數據，它肯定需要訪問後端數據啊！你就可以用asp.net mvc功能，方便、快速地建立web api，為前端提供數據服務！

razor是伺服器端的，你可以不用，全靠angular，react等到了前端來處理。

不過我一般讓razor負責大部分不變的比如layout，一些純展示的頁面，angular負責動態那部分。

剛用MVC(WebAPI)做的項目，前台用的TS，React,Redux,Webpack，完全不影響嘛

WebAPI提供介面，數據統一起來

前端就單頁面，主要用React做路由處理(hashHistory)

配套的React前端組件用的AntD，速度提升很大。

這個跟你後台用什麼語言沒什麼關係，不過既然決定前端用React了，那就把垃圾一樣的.net頁面標籤扔掉吧

https://github.com/Restry/spa-webapi-angularjs

推薦一個項目這裡面是mvc和angularjs 的，文檔特別清晰。項目框架也很合理

其實http://asp.net mvc中如果你要使用angualrjs或reactjs這種spa模式的前端開發，最好的辦法是捨棄mvc本身的功能，而是用webAPI+angularjs或webAPI+reactjs的方式進行開發（也就是傳統上的前後端分離）。基本的方式是:

1.在http://asp.net裡面只保留一個默認頁面比如(login) 用來解決登錄和許可權驗證問題。

2.在客戶登錄成功後跳轉到另外一個頁面比如(home)頁面，而這個頁面的"view"(.chtml文件)直接載入angularjs的源碼和你自己的javascript代碼。

3.由於angularjs和reactjs都能很容易的實現「導航」功能，所以這個頁面本身就足以支撐「所有的前端頁面開發」的需求(也就是大多數情況下更本不需要有第三個.chtml文件)。

4.數據由伺服器端通過webapi實現介面（也就是繼承「apiController類的子類」），客戶端通過ajax請求來訪問獲取。這方面的技術現在也相當成熟了，angualrjs本身就有用於數據請求的對象 $http . reactjs也有相應的類庫支持.

下一個vs對npm的擴展就能在vs里用