使用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,一经查实,立即删除!

相关文章

Atitit. 木马病毒的外部class自动加载机制------加载class的方法总结

Atitit. 木马病毒的外部class自动加载机制------加载class的方法总结 Atitit.java load class methods 1. 动态加载jar文件和class文件。 1 2. 使用Class静态方法 Class.forName 1 2.1. 使用ClassLoader 1 2.2. 3. 直接new 2 3. Ref 2 1. 动态加载jar文件和class文件。 完成…

剑指offer之找到链表里面包含环的入口节点

1 问题 剑指offer之找到链表里面包含环的入口节点&#xff0c;比如 // node7<-node6 <-node5// | |//head->node1->node2->node3->node4 环的入口节点是node2 2 代码实现 #include <stdio.h> #include <s…

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

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

php 序列化对象

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

php html标签自定义属性,详解H5的自定义属性data-*

HTML5 增加了一项新功能是 自定义数据属性 &#xff0c;也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性&#xff0c;来进行一些数据的存放当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。例如&#xff1a;…

cdoj 1131 男神的礼物 区间dp

男神的礼物 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1131 Description Lweb学长是集训队里公认的男神。有一天他要给美美的学姐姐准备礼物。Lweb学长可是会魔法的哟。为了准备一份礼物&#xff0c;男神要加工n份材料。每一次…

如何为同一 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;有出色的图形化桌面环境。用户可以很容易地通过单击动作来完成任…

java:遍历

import java.util.ArrayList;import java.util.Iterator;import java.util.List;/*** 遍历数组四种方法*/class Test {/*** 注&#xff1a;Iterator 迭代器*/public static void main(String[] args) {Test1 t new Test1();Test1 t1 new Test1();List list new ArrayList();…

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

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

Matlab 2016b+TimeSat 3.1中文经典安装及使用教程(附下载地址)

本教程为博主刘一哥GIS原创,坚决打击侵权行为,严禁抄袭!!! 目录 一、Matlab2016b下载及安装 二、TimeSat 3.1软件安装 三、TimeSat 3.1软件的使用和说明详解

对象比较 ===三个等于号

可能这是我博客里面最短的博文了。 有关三个等于号的用法。。。 我在这个分类里只是记录一下php中少见的东西&#xff0c;或者说是php中书上不是太过详细介绍的东西。 那么我在这里直接引用php手册里面的内容吧&#xff0c;很简单&#xff1a;当使用比较运算符&#xff08;&…

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

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

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

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

HDU - 4734 F(x) (2013成都网络游戏,数字DP)

意甲冠军&#xff1a;求0-B见面<F[A]所有可能的 思维&#xff1a;数字DP&#xff0c;内存搜索 #include <iostream> #include <cstring> #include <algorithm> #include <cstdio> using namespace std;int A, B; int dp[20][200000]; int bit[20];i…

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

用dataGridView实现增删改查

只需一个窗体一个dataGridView控件,即可实现系统中所有基础数据的维护操作,真是太简单实用了,还不快Get了? 1、公共类User.cs: public abstract class DBUser {public static string sServer;public static string sDBName;public static string sUser;public static str…

php之生成器

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