作者heavenbetula (绿草)
看板Web_Design
标题[问题] ASP.NET MVC结合React
时间Fri May 31 09:34:43 2019
各位大大好~
我是刚学习React的新手
由於公司环境上使用ASP.NET MVC
想要前後分离，View用React来做，彼此间的沟通藉由web api
问题来了我自己写好打包好的html、css、js
我不知道该怎麽做，才能在server上运作
server是使用IIS
查了网路上的文章，似乎蛮多都用React.net的package?
如果不使用这个的话，要怎麽做呢?
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 122.116.84.179
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1559266485.A.AF7.html
1F：→ forewero: 你到底是用mvc还是api... 打包好的静态文件挂iis就可以 05/31 20:15
不好意思可能我观念不太好
想请问一下"你到底是用mvc还是api"的意思是什麽呢?
因为我以为asp.net mvc中controller写的get、post的class，就算是api了
※ 编辑: heavenbetula (111.185.94.38), 05/31/2019 21:26:00
2F：→ satanbaby: 关键字 UseDefaultFiles 不知道是不是你要的 06/01 00:07
3F：推 pm2001: get post只是HTTP Method,不是是否为api的标准 06/01 00:12
4F：→ ssccg: html css js直接放到IIS上就会动了啊y 06/01 22:58
5F：推 dalconan: 我猜是你不知道你的HTML和JS那些该放在MVC专案的哪？ 06/02 19:25
感谢各位大大~由於会不知道怎麽在IIS运作是因为asp.net mvc好像包出来是个zip档?
所以一直跟我以往的"直接将html css js放在server"上不太一样所以很困惑
但现在好像知道了，就是将我包出来的这些档案，放在asp.net mvc的某个资料夹
(假设叫Webpage),然後让controller中的ActionResult指向这个Webpage资料的
index.html,然後就可以照asp.net mvc平常的运作方式去打包
只是又有一个问题是我启动asp.net mvc模拟时，会出现：
http://localhost/main.css is not found.
http://localhost/bundle.js is not found.
资料夹路径是这样的：
Webpage----inde.html
bundle.js
main.css
我知道是因为我的React包出来的index.html档中include的js路径是相对於
这个index.html
而会跑出这个error的原因是因为实际的server路径上根本没有我打包出来的bundle.js
以及main.css
这个问题可实际手动调整index.html里的引入路径如将原本的
src="bundle.js"改为src="../Webpage/bundle.js"即可解决
但总觉得还有更好的方法，可以让我以後React包完直接放在资料夹下都不用再调整...
请问可以透过设定asp.net mvc的什麽东西，达到这样的功能吗?
※ 编辑: heavenbetula (111.185.94.38), 06/02/2019 22:17:27
6F：推 dalconan: ASP.NET MVC有个可以打包复数个JS或CSS成一个档案的功能 06/03 20:47
7F：→ dalconan: 把你所有的档案打包成一个档案，然後路径符合你html档名 06/03 20:47
8F：→ dalconan: 应该就可以了？ 06/03 20:48
谢谢你~现在我只改了输出之後的index.html里的<base href="/Webpage/" />路径的问题
就解决了！
只是又跑出一个问题...当我页面reload的时候会404
爬文解决方法是在asp.net mvc路由设定的routes.MapRoute中
将原本的
url:"{controller}/{action}/{id}"
改为
url:"{*url}"
不过改成这样子後，原本写在controller的api又不知道怎麽去get post到他了...
※ 编辑: heavenbetula (111.185.94.38 台湾), 06/03/2019 22:29:38
9F：→ satanbaby: 你现在的问题是如何把react的静态档部署到後端吧？ 06/04 10:44
10F：推 pm2001: 我觉得你可能要先了解.net mvc的routing是怎麽设定的 06/04 16:04
react静态档放在server上，Apache、nginx都有试过OK
实在是asp.net mvc走controller的方式让我比较不懂
不过感谢~现在.net mvc routing的设置我也解决了
总之我目前是设两个routes.MapRoute
第一个路由的url写成url:"{url}"
第二个的路由维持预设url:"{controller}/{action}/{id}"
之前爬文把第一个的路由url:"{*url}"加了*符号，虽然页面reload 404的问题解决
但这会导致，当url的路径为controller名称时，无法匹配到第二个路由去
所以ajax 的get post根本无法跑进controller去运作
因此只要不要加*符号，两个问题看起来是解决了！
※ 编辑: heavenbetula (111.185.94.38 台湾), 06/04/2019 21:51:58