使用aspnetcore前后端分离开发,你一定要知道这个。

前言

用过Vue单页面应用开发的,一定都知道Vue-router这个路由组件,它支持hashhistory两种模式。

HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({mode: 'history',routes: [...]
})

当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!
不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

aspnetcore使用Vuerouter history模式如何生产部署

今天我们的目的就是如何使用history模式,让url地址更加简洁美观,为了更完整的演示,从头手把手演示一遍。

创建vue项目

首先安装nodejs,然后执行下面的npm命令创建vue3项目,跟着提示选择是或否即可完成项目的创建。本次创建的项目名称为vue-project

npm init vue@3

2146e9b7979df04f21403344e0697254.png

创建aspnetcore的webapi项目

如下图选择ASP.Net Core WebApi项目,项目名称为TestHistory,目录选择和上面Vue项目同属一个文件夹下。
c36df20da2dbcbc7d9a6b2fc03686cec.png

配置History模式

配置前端

vscode打开前端项目,找到router配置
3dbd38a84396c8cc01fc979208fd3db2.png
由于这里创建的是Vue3项目模板,模板自动配置好的vuerouter4,
其实下面这种是一样的。详情参考,

const router = new VueRouter({mode: 'history',routes: [...]
})

如果要使用hash模式,则使用createWebHashHistory函数创建。

配置后端

如果我们的前端和后端用的是同一个域名,也就是部署在同一个目录下,则应该将前端编译后的Html页面使用aspnetcore的静态资源进行托管,而不是直接放到根目录下。
后端首先要添加app.UseStaticFiles();以支持静态资源托管,然后创建该中间件默认的静态资源文件目录wwwroot

部署

将webapi项目发布到本地
3228402e5463cbc21714341174e1ed31.png
vue项目执行npm run build编译前端代码,将dist目录下的文件拷贝到到webapi发布后的wwwroot目录下,

1dd0932be1d538e042c45166f3d61b86.png

IIS新建一个站点,这里使用8080端口
91980367f0eb51be8781f02c5aa58c5e.png
别忘记安装Hosting Bundle

13c7abbd23893992e048208529c448cf.png

如果一切顺利,打开http://localhost:8080你应该会看到这个页面。

6b93056cbdba985b6d3bbf2ade1724d6.png
点击about还会显示下面这个页面,而且地址是http://localhost:8080/about,这不就是history模式的效果吗!
6a80d79ce86d0419948a9552ea0e37b7.png
什么都没做,效果就达到了?

别急的得意,在http://localhost:8080/about这个地址下,刷新下网页试试。
49e8be32a8ea0e223b80e6dab9a0ff2a.png
卧槽,404了。

先解释下为什么会这样,当你访问http://localhost:8080时由于iis默认是设置了默认文档

220e4c81e14234279feb297e0ba52d93.png

13e778789b5a4ea30eb76127e7729f7d.png
当找不到你请求的资源时,它会尝试检查目录下的默认文档是否存在,按先后顺序检查,发现存在index.html所以就返回浏览器了,所以能够正常显示;当你点击about时,其实只是触发了页面的一个事件,页面有变化,url也变化了,但浏览器压根刷新。当你手动刷新http://localhost:8080/about时,就向后端发起这个地址的Get请求,很明显,我们没有写任何Controller来匹配这个路由,wwwroot目录下也不存在about/index.html当然返回404了。

如何配置history模式,而不导致404

Vuerouter官方文档给出了部分后端服务器的配置方式 后端配置例子
这里只展示aspnetcore常用的服务器

nginx

location / {try_files $uri $uri/ /index.html;
}

Internet Information Services (IIS)

  1. 安装 IIS UrlRewrite(opens new window)

  2. 在你的网站根目录中创建一个 web.config 文件,内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<configuration><system.webServer><rewrite><rules><rule name="Handle History Mode and custom 404/500" stopProcessing="true"><match url="(.*)" /><conditions logicalGrouping="MatchAll"><add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /><add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /></conditions><action type="Rewrite" url="/" /></rule></rules></rewrite></system.webServer>
</configuration>

nginx的由于没有环境,没有测试,应该没问题,配置也比较简单。
iis的根据文档做一遍,UrlRewrite可以理解为是一个中间件,会对请求拦截,对符合规则的url进行路径重写,可行。

当然我要做的不是上面的任何一种,因为我们的站点可能会部署到各种各样的服务器,每次换服务器都需要不同的配置来实现,很繁琐,既然我们aspnetcore拥有强大的中间件系统,为什么不让aspnetcore来做这件事呢,不再依赖不同服务器的配置方案,实现一次编码,到处运行,在之前的文章中有介绍过如何处理404 《ASP.NETCore统一处理404错误都有哪些方式?》
那我们就在404的处理逻辑里实现其实就好了。

直接上代码

app.MapFallback(async (context) =>
{var phpath = Path.Join(app.Environment.WebRootPath, context.Request.Path);var name = Path.Combine(Path.GetDirectoryName(phpath)!, "index.html");if (File.Exists(name)){context.Response.StatusCode = 200;await context.Response.SendFileAsync(name);}
});

1.当进入404处理逻辑时,首先拼接访问路径
2.检查访问的路径所属的文件夹下是否存在index.html文件
3.当文件存在,则修改响应码,返回该文件。
4.不存在,什么也不干(这里其实可以做个友好提示页面)。
重新发布,测试,不管如何刷新,都能正常显示了。

源码

Github上获取:https://github.com/SpringHgui/TestHistory

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/288705.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Visual Studio 2015专业版创建Win32控制台应用程序,C,C++源文件

原配的Visual Studio 2015专业版不像之前的版本,在新建项目里面是找不到Win32模板的,那么怎么才能新建Win32项目和Win32控制台应用程序呢?今天我就带大家做一简单介绍。 先看如下图所示: 解决: 1、添加的办法是点击上图所示的新建项目界面的Visual C++下面的Windows,再…

php 序列化对象

习惯性借用手册里面的介绍&#xff1a; 所有php里面的值都可以使用函数serialize()来返回一个包含字节流的字符串来表示。unserialize()函数能够重新把字符串变回php原来的值。序列化一个对象将会保存对象的所有变量&#xff0c;但是不会保存对象的方法&#xff0c;只会保存类…

如何为同一 DTO 属性指定 2 个名称

前言我们在《实现DDD领域驱动设计》中谈到过输出 DTO 的最佳实践&#xff0c;其中一条是&#xff1a;保持输出 DTO 数量最少&#xff0c;尽可能重用。但是&#xff0c;对于 2 个不同接口输出的同一 DTO 属性&#xff0c;客户端可能需要对应不同的名称&#xff0c;比如&#xff…

HDU 4777 Rabbit Kingdom 树状数组

分析&#xff1a;找到每一个点的左边离他最近的不互质数&#xff0c;记录下标(L数组)&#xff0c;右边一样如此&#xff08;R数组&#xff09;&#xff0c;预处理 这个过程需要分解质因数O&#xff08;n*sqrt(n)) 然后离线&#xff0c;按照区间右端点排序 然后扫一遍&#xff0…

按一行一行的方法将一个文本文件复制到另一个文件中_命令行技巧:分割文件内容...

(给Linux爱好者加星标&#xff0c;提升Linux技能)英文&#xff1a;Stephen Snow&#xff0c;翻译&#xff1a;Linux中国/MjSevenlinux.cn/article-10809-1.htmlFedora 发行版是一个功能齐全的操作系统&#xff0c;有出色的图形化桌面环境。用户可以很容易地通过单击动作来完成任…

谷歌浏览器之如何调试页面js

1 问题 谷歌浏览器如果调试页面js 2 举例子 比如我们需要调试www.baidu.com这个页面&#xff0c;我们需要先按下F12&#xff0c;然后再去点击Source,然后在找到相应的js文件&#xff0c;在左边进行打上断点&#xff0c;然后我们再刷新页面&#xff0c;然后我们在右边可以看到…

php判断秒为两位数,判“新”函数:得到今天与明天的秒数

判“新”函数&#xff1a;得到今天与明天的秒数更新时间&#xff1a;2006年10月09日 00:00:00 作者&#xff1a;如果你想根据时间来判断某一时间值(用秒数表示)是否在今天的范围之内。下面这个函数&#xff0c;将帮你轻而易举的判断。函数源代码&#xff1a;----------------…

如何查看文件夹里有几张图片_如何把几张图片合成一个pdf?图片合并为pdf的操作教程...

我在一家公司当美工&#xff0c;平时要接触到很多图片素材&#xff0c;并把它们以pdf格式文件的形式发送给客户查看(以此来摸索出客户想要的图片效果)。把几张图片合并成为一个pdf文件&#xff0c;即是将图片格式转换成为pdf格式&#xff0c;这对我来说不难操作。毕竟是公司的老…

Dapr 能否取代 Spring Cloud?

Dapr 和 Spring Cloud 的区别很多人都是使用 Spring Boot 和 Spring Cloud 来开发微服务。Dapr 也是开发微服务的框架&#xff0c;它和 Spring Cloud 有什么区别呢&#xff0c;其实这不是一个区别的问题&#xff0c;它是不同的时代需要不同的框架。Spring Cloud 是一种产品&…

Start vm by command line

为什么80%的码农都做不了架构师&#xff1f;>>> VBoxHeadless -startvm "dcsvr08" 转载于:https://my.oschina.net/kut/blog/1501095

php之生成器

引用手册&#xff1a;一个生成器函数看起来像一个普通的函数&#xff0c;不同的是普通函数返回一个值&#xff0c;而一个生成器可以yield生成许多它所需要的值。当一个生成器被调用的时候&#xff0c;它返回一个可以被遍历的对象.当你遍历这个对象的时候(例如通过一个foreach循…

使用JDBC进行数据库的事务操作(2)

本篇将讲诉如何使用JDBC进行数据库有关事务的操作。在上一篇博客中已经介绍了事务的概念&#xff0c;和在MySQL命令行窗口进行开启事务&#xff0c;提交事务以及回滚事务的操作。 似乎事务和批处理都可以一次同时执行多条SQL命令&#xff0c;但是事务是如果某一条SQL出错&#…

谷歌浏览器之如何快速找到js、css等文件

1 问题 我们分析前端代码的时候&#xff0c;需要快速定位某个js文件&#xff0c;然后查看里面的源代码 2 具体操作 比如我在www.baidu.com这个页面&#xff0c;我们先按下F12, 然后点击到network,然后我们再用快捷键 ctrl p 比如我们要找tu_d03f361.js 效果如下&#x…

HTML5 播放器

随着 HTML5 的普及&#xff0c;越来越多视频网站使用 <video></video> 标签播放直播、点播内容&#xff08;如下图所示&#xff09;。使用 <video> 的好处&#xff0c;主要以下两点。 可以直接在页面中播放&#xff0c;也就是所谓的“区域播放”&#xff0c;…

linux shell之控制台打印各种颜色字体和背景

1 问题 控制台打印各种颜色字体和背景 字体颜色 #30:黑 #31:红 #32:绿 #33:黄 #34:蓝色 #35:紫色 #36:深绿 #37:白色 背景颜色 #40:黑 #41:深红 #42:绿 #43:黄色 #44:蓝色 #45:紫色 #46:深绿 #47:白色 echo -e "\e[43;35m chenyu\e[0m hello word&quo…

修改GIT的user.name和user.email

为什么80%的码农都做不了架构师&#xff1f;>>> $ git config --global --replace-all user.email "输入你的邮箱" $ git config --global --replace-all user.name "输入你的用户名" ----验证是否修改成功---- $ git config --list 转载…

sql distinct 去重复 (mysql)

DISTINCT 去重复 &#xff08;运动扭伤腰。。。悲伤。。。 (▼ _ ▼) &#xff09; 首先&#xff0c;例如我们的表&#xff1a; 首先观察表&#xff1a; 其中第二行和第三行和第八行的name1的只是重复的&#xff0c;但第八行的age1确是12&#xff0c;与第二行和第三行不同…

如何5分钟上手使用OCR

随便打开一个Microsoft Visual Studio&#xff0c;新建一个WinForms项目&#xff0c;从下面列表中随便选择一个NET框架。net35;net40;net45;net451;net452;net46;net461;net462;net47;net471;net472;net48; netstandard2.0;netcoreapp3.1; net5.0;net6.0;创建完窗口后&#xff…

利用Excel VBA批量计算气象数据多个台站多年来春季和冬季降水量和平均气温

气象数据是地理数据的重要组成部分,存储量虽然不大,但是处理过程非常繁琐,长时序数据更不用说。本文总结了一个气象数据的基本处理方法。 如下图所示,气象数据的排列格式是区站号→年→月→降水量→平均气温,时间范围为1983~2012年,每一年都有台站数300多个,下面按区站…

VMware Workstation 12新建虚拟机

1、点击“创建新的虚拟机”2、选择“自定义”(初学选择典型也可以)&#xff0c;下一步3、默认&#xff0c;直接下一步4、通常都是先创建虚拟机&#xff0c;等虚拟机创建完成后再来安装操作系统&#xff0c;若安装过程出现什么问题方便解决&#xff0c;故选择“稍后安装操作系统…