使用aspnetcore前后端分离开发,你一定要知道这个
前言
用过Vue单页面应用开发的,一定都知道Vue-router
这个路由组件,它支持hash
和history
两种模式。
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
创建aspnetcore的webapi项目
如下图选择ASP.Net Core WebApi项目,项目名称为TestHistory
,目录选择和上面Vue项目同属一个文件夹下。
配置History模式
配置前端
在vscode
打开前端项目,找到router配置
由于这里创建的是Vue3项目模板,模板自动配置好的vuerouter4,
其实下面这种是一样的。详情参考,
const router = new VueRouter({
mode: 'history',
routes: [...]
})
如果要使用hash
模式,则使用createWebHashHistory
函数创建。
配置后端
如果我们的前端和后端用的是同一个域名,也就是部署在同一个目录下,则应该将前端编译后的Html页面使用aspnetcore
的静态资源进行托管,而不是直接放到根目录下。
后端首先要添加app.UseStaticFiles();
以支持静态资源托管,然后创建该中间件默认的静态资源文件目录wwwroot
。
部署
将webapi项目发布到本地
vue项目执行npm run build
编译前端代码,将dist
目录下的文件拷贝到到webapi发布后的wwwroot
目录下,
IIS新建一个站点,这里使用8080
端口
别忘记安装Hosting Bundle
。
如果一切顺利,打开http://localhost:8080
你应该会看到这个页面。
点击about还会显示下面这个页面,而且地址是http://localhost:8080/about
,这不就是history
模式的效果吗!
什么都没做,效果就达到了?
别急的得意,在http://localhost:8080/about
这个地址下,刷新下网页试试。
卧槽,404了。
先解释下为什么会这样,当你访问http://localhost:8080
时由于iis默认是设置了默认文档
当找不到你请求的资源时,它会尝试检查目录下的默认文档是否存在,按先后顺序检查,发现存在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)
- 安装 IIS UrlRewrite(opens new window)
- 在你的网站根目录中创建一个
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
使用aspnetcore前后端分离开发,你一定要知道这个的更多相关文章
- vue+mockjs 模拟数据,实现前后端分离开发
在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...
- 如何利用vue和php做前后端分离开发?
新手上路,前端工程师,刚毕业参加工作两个月,上面让我用vue搭建环境和php工程师一起开发,做前后端分离,然而我只用过简单的vue做一些小组件的经验,完全不知道怎样和php工程师配合,ps: php那 ...
- 基于RAP(Mock)实现前后端分离开发
看看RAP的官方定义: 什么是RAP? (Rigel API Platform) 在前后端分离的开发模式下,我们通常需要定义一份接口文档来规范接口的具体信息.如一个请求的地址.有几个参数.参数名称及类 ...
- laravel5.7 前后端分离开发 实现基于API请求的token认证
最近在学习前后端分离开发,发现 在laravel中实现前后台分离是无法无法使用 CSRF Token 认证的.因为 web 请求的用户认证是通过Session和客户端Cookie的实现的,而前后端分离 ...
- SpringBoot,Vue前后端分离开发首秀
需求:读取数据库的数据展现到前端页面 技术栈:后端有主要有SpringBoot,lombok,SpringData JPA,Swagger,跨域,前端有Vue和axios 不了解这些技术的可以去入门一 ...
- 超简单工具puer——“低碳”的前后端分离开发
本文由作者郑海波授权网易云社区发布. 前几天,跟一同事(MIHTool作者)讨教了一下开发调试工具.其实个人觉得相较于定制一个类似MIHTool的Hybrid App容器,基于长连的B/S架构的工具其 ...
- Springboot前后端分离开发
.1.springboot前后端分离开发之前要配置好很多东西,这周会详细补充博客内容和遇到的问题的解析 2,按照下面流程走一遍 此时会加载稍等一下 pom.xml显示中加上阿里云镜像可以加速下载配置文 ...
- beego-vue URL重定向(beego和vue前后端分离开发,beego承载vue前端分离页面部署)
具体过程就不说,是搞这个的自然会动,只把关键代码贴出来. beego和vue前后端分离开发,beego承载vue前端分离页面部署 // landv.cnblogs.com //没有授权转载我的内容,再 ...
- 【坑】前后端分离开发中 跨域问题以及前台不带cookie的问题
文章目录 前言 跨域问题 cookie问题 拦截器导致的跨域问题 后记 前言 场景一: 前台哒哒哒的点击页面,发送请求,但是后台服务器总是没有回应,后台接口虽打了断点,但是根本进不到断点处: 前端:我 ...
随机推荐
- SpringCloudAlibaba 微服务讲解(四)Sentinel--服务容错(一)
4.1 高并发带来的问题 在微服务中,我们将业务拆分成一个个的服务,服务与服务之间可以相互调用,但是由于网络原因或者自身的原因,服务并不能保证100%可用,如果单个服务出现问题,调用这个服务就会出现网 ...
- JDBC操作数据库的步骤 ?
注册数据库驱动. 建立数据库连接. 创建一个Statement. 执行SQL语句. 处理结果集. 关闭数据库连接.
- java中的正则表达式And Pattern And Macher
在哪里?? java.util.regex包下有两个用于正则表达式的类, 一个是Matcher类, 另一个Pattern 简单例子 public class RegexLeaning { public ...
- dos 循环读取当前文件夹下的视频名字
@echo off for /R %%i in (*.mp4) do ( echo -isma %%~nxi ) pause
- 解释 AOP 模块?
AOP 模块用于发给我们的 Spring 应用做面向切面的开发, 很多支持由 AOP 联 盟提供,这样就确保了 Spring 和其他 AOP 框架的共通性.这个模块将元数据编 程引入 Spring.
- css文本溢出解决方案
1.普通单行截断省略 overflow:hidden; 文字长度超出限定宽度,则隐藏超出的内容) text-overflow:ellipsis;(设置文字在一行显示,不能换行) white-space ...
- Python - 函数的五大参数
Python的函数参数挺重要的,总结一下: (1)位置参数:没啥好说的,就是普通的参数. (2)默认参数: 参数形式:def power(x, n = 3): (在函数定义时通过对一个形参赋值的形式, ...
- numpy计算数组中满足条件的个数
Numpy计算数组中满足条件元素个数 需求:有一个非常大的数组比如1亿个数字,求出里面数字小于5000的数字数目 1. 使用numpy的random模块生成1亿个数字 2. 使用Python原生语法实 ...
- IPython是什么?
参考:IPython 中常用的魔法命令 Ipython中的魔法命令总结 IPython 是一个 python 的交互式 shell,比默认的python shell 好用得多,支持变量自动补全,自动缩 ...
- Dockerize an ASP.NET Core application
原文:Dockerize an ASP.NET Core application 介绍 本示例演示了如何对ASP.NET Core应用程序进行容器化. 为什么要构建ASP.NET Core? 开源 在 ...