未来将有黄金支撑的数字货币!
在上一篇博文中[Vue]介绍了Vue和asp的集成。net核心webAPI,介绍了集成原理:在中间件管道中注册spa终端中间件。在整个注册过程中,终端中间件将调用节点,执行npmstart命令,启动Vue开发服务器,并向中间件管道添加路由匹配,即非API请求(请求静态文件,jscsshtml),通过代理转发到spa开发服务器。
注册代码如下:
publicvoidConfigure(Microsoft.AspNetCore.Builder.IAApplicationBuilderApp、IWebHostenEnvironmentEnv)
数字黄金货币
{。
#区域点
//执行匹配的数据点
数字黄金货币
应用程序。使用端点(端点=>)
{。
端点。地图控制器
})。
数字黄金货币
应用程序。使用spa(spa=>)
{。
温泉。选项。SourcePath=“ClientApp”
if(环境发展)
{。
数字黄金货币
//温泉。UseReactDevelopmentServer(npm:“启动”)
温泉。使用VueCliser版本(npm:“开始”)
//温泉。使用ProxyToSpadDevelopmentServer(“http://localhost:8080")。
}。
})。
#末端区域
}。
“。
您可以看到,可以匹配API请求的属性路由首先被注册。
”。
如果上述属性路由不匹配,请求将通过中间件管道传递到下一个中间件:spa的终端中间件。
以上是整合原则。接下来,我们解释中间件的源代码。总的来说,还有许多知识点值得阅读和学习:
异步编程。
内联中间件。
开始这个过程。
事件驱动。
1.异步编程-继续使用。
让我们忽略调用npmstart命令执行的细节。我们看到的是异步编程。众所周知,Vue执行NPMstart(NPMrundev),这是一个耗时的过程。为了实现完美集成的目标:注册中间件时,我们需要等待Vue前端开发服务器启动,正常使用它,并接收对开发服务器的代理请求。这将等待下一个操作完成,然后再执行其他操作,这是一个异步编程。
创建需要返回npmrundev结果的类:
classVueCliServerInfo
{。
publicintPort{get;set;}
}。
编写异步代码并启动前端开发服务器。
privatestaticasyncTask<VueLiserverInfo>StartVueCliServerAsync(
stringsourcePath、stringnpmName、iLogger)
{。
//省略代码。
}。
1.1继续
继续写。
Continuewith本身返回一个任务。
varvuecliserverinfo任务=StartVueCliServerAsync(源路径、npmName、记录器)
//继续体。
vartargetUriTask=vueCliServerInfoTask.ContinueWith(。
task=>。
{。
returnnewUriBuilder("http","localhost",task.Result.Port).Uri。
})。
1.2内联中间件。
继续使用这个继续体返回的task,并applicationBuilder.Use配置一个内联中间件,即所有请求都代理至开发服务器。
SpaProxyingExtensions.UseProxyToSpaDevelopmentServer(spaBuilder,=>。
{。
vartimeout=spaBuilder.Options.StartupTimeout。
returntargetUriTask.WithTimeout(timeout。
$"TheVueCLIprocessdidnotstartlisteningforrequests"。
$"withinthetimeoutperiodof{timeout.Seconds}seconds."。
$"Checkthelogoutputforerrorinformation.")。
})。
publicstaticvoidUseProxyToSpaDevelopmentServer(。
thisISpaBuilderspaBuilder。
Func<Task<Uri>>baseUriTaskFactory)。
{。
varapplicationBuilder=spaBuilder.ApplicationBuilder。
varapplicationStoppingToken=GetStoppingToken(applicationBuilder)。
//省略部分代码。
//ProxyallrequeststotheSPAdevelopmentserver。
applicationBuilder.Use(async(context,next)=>。
{。
vardidProxyRequest=。
awaitSpaProxy.PerformProxyRequest(。
context,neverTimeOutHttpClient,baseUriTaskFactory,applicationStoppingToken。
proxy404s:true)。
})。
}。
所有的后续请求,都会类似nginx一样的操作:
publicstaticasyncTask<bool>PerformProxyRequest(。
HttpContextcontext。
HttpClienthttpClient。
Task<Uri>baseUriTask。
CancellationTokenapplicationStoppingToken。
boolproxy404s)。
{。
//省略部分代码..。
//获取task的结果,即开发服务器uri。
varbaseUri=awaitbaseUriTask。
//把请求代理至开发服务器。
//接收开发服务器的响应给到context,由asp.netcore响应。
}。
2.启动进程-ProcessStartInfo。
接下来进入StartVueCliServerAsync的内部,执行node进程,执行npmstart命令。
2.1确定vue开发服务器的端口。
确定一个随机的、可用的开发服务器端口,代码如下:
internalstaticclassTcpPortFinder。
{。
publicstaticintFindAvailablePort()。
{。
varlistener=newTcpListener(IPAddress.Loopback,0)。
listener.Start。
try。
{。
return((IPEndPoint)listener.LocalEndpoint).Port。
}。
finally。
发表评论