IIS 上的 ASP.NET、AngularJS 和 html5Mode:第一次试用

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡/ 赠书活动

目前,正在 星球 内带小伙伴们做第一个项目:全栈前后端分离博客项目,采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 204 小节,累计 32w+ 字,讲解图:1416 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 870+ 小伙伴加入,欢迎点击围观

我最近一直在研究 AngularJS。我已经在 MongoDB (使用 Mongoose )、 Express Angular Node.js (MEAN) 中完成了足够多的项目,以便熟悉 Angular 的工作原理。但我想尝试使用 ASP.NET 作为后端。我总是在学习。一直在进步。

开始时,我只是设置了一个 index.html 页面来保存我的基本表单,因为我获得了基本的外观和感觉。但是随着我的进步,我想确保自己的进步,我想添加使用 Angular 的 html5Mode 进行客户端路由的功能。

ASP.NET、AngularJS 和 html5Mode

对于 Angular 的新手,Angular 是一个客户端 JavaScript 框架,它允许您创建 Web 应用程序,其中大部分处理发生在客户端而不是服务器端。这够酷了。但它也增加了处理客户端路由的能力,就像 ASP.NET 的 MVC 处理服务器端路由一样。这允许您拥有一个客户端“母版页”,它可以根据地址栏中的 url 在需要时吸收与服务器的差异。事实上,有一个扩展可以让您根据需要尽可能地拥有子路线。

开箱即用的 Angular 和大多数其他实现客户端路由的框架都使用井号来指定路由。例如:


 http://blog.dmbcllc.com/index.html#/pathToRoute

这允许路由在较旧的浏览器上工作,但如果您使用支持 HTML5 的较新浏览器,则可以避免散列标签并只创建如下所示的路由:


 http://blog.dmbcllc.com/index.html#/pathToRoute

您必须承认,看起来好多了。

这是问题开始的地方

一旦您在 IIS 或 IIS Express 中托管的站点上实施 html5Mode,您将收到 404 错误,因为您对服务器的初始请求将向服务器询问不存在的路径。

有几种方法可以解决这个问题,但请注意,您需要运行 ASP.NET 的唯一时间是调用服务器获取数据。

为每个未定义的服务器路由返回默认视图

您可能会发现的第一个建议 是为所有以“/angular/”开头的路由创建一个默认视图

这是一个很好的开始。但这是我的问题:如果我真的想按照预期的方式使用 Angular,我宁愿根本不必在服务器端使用 MVC。虽然不是很受欢迎,但写一个剃刀页面只是为了让我的初始角度页面起来似乎有点矫枉过正。必须有一种方法可以在不创建 *.chshtml 文件的情况下执行此操作。我也不想为我的页面设置子目录。为什么我不能将 http://blog.dmbcllc.com 作为我的默认路由?为什么我不能只返回一个普通的旧 html 文件?!

直接从控制器返回 HTML 页面

好吧,事实证明你可以。对“返回默认视图”方法稍作修改是让您的控制器返回您的 html 页面。

如果您深入研究,您会发现其他人已经意识到您可以直接从控制器返回 HTML。这个技巧的神奇之处与原始文章中的人所做的非常相似,除了在控制器中,他不返回视图,而是返回包含主 html 的 html 文件。


 http://blog.dmbcllc.com/index.html#/pathToRoute

他的主要 MVC 路线如下所示:


 http://blog.dmbcllc.com/index.html#/pathToRoute

这个实现还有一个额外的好处,就是我没有绑定到特定的子目录,因为它只是说,“任何后面没有真实文件的 URL 都应该解析到这个默认路由。”

当然,您可能会想,但是 WEB API 路由,或者我想要在我的系统中使用的任何其他路由呢?好吧,只要确保这条路线排在第一位,您还有其他路线可以覆盖您希望能够支持的真实路线。

现在,这解决了我对第一个解决方案的反对意见。我不再需要路线。但是,为什么我需要调用控制器?这只是我们正在谈论的静态 HTML 文件。我应该能够绕过 ASP.NET 处理这个文件,让 IIS 直接为我提供服务。

使用 URL 重写模块

对搜索引擎的更深入挖掘提醒我,我可以设置 URL 重写模块 以在没有实际页面可用时返回我的主 HTML 页面。顺便说一句,URL Rewrite 内置于 IIS Express 中,因此如果您使用 IIS Express 以及安装了该模块的 IIS,它应该可以在您的开发环境中工作。

实现此功能的主要步骤是将以下 XML 添加到您的 Web.config 文件中:


 http://blog.dmbcllc.com/index.html#/pathToRoute

您的 web.config 文件中应该已经有一个 system.webServer 部分,所以您只需要在其中添加重写规则。

基本上这条规则的作用是说,“如果你找不到文件,并且你正在寻找的路径不是“api”目录的子目录,则返回根目录下的默认文件。”关于 API 目录的部分允许您的 WEB API 内容继续工作。

您唯一需要做的另一件事(这不是 ASP.NET 或 MVC 所独有的)是您需要记住将 base 标记添加到 HTML 文件的 HEAD 部分。


 http://blog.dmbcllc.com/index.html#/pathToRoute

并且所有带有 HTML5 问题的客户端路由都应该得到解决。

请注意, 无需 运行 ASP.NET 代码即可使其正常工作。