【Blog.Core开源】快速预览Admin界面效果

( 半盏屠苏犹未举，灯前小草写桃符 )

书接上文《【Blog.Core开源】开发插件，给Swagger加权》，在上篇文章中，我们给项目的接口文档增加了一个控制界面，可以输入用户名密码，这样也算是简单的一个加密控制了，当然也可以使用Nginx的加权功能，具体写法大家搜索下就知道了，这里按下不表。

本文故事背景

花开两朵，各表一枝。今天忙中偷闲，看了看Github上的Issue，都已经四个了，该解决解决了，找了一个单元测试的Bug，简单解决了一下。本着负责的态度，还是要好好测试一下，打开前端项目，npm run serve启动下服务，然后配置下后端接口，点点，没问题，关掉项目，开始提交等等。

突然想到，我可以直接把Vue的项目发布好后，放到Blog.Core后端的wwwroot里，作为静态资源文件来访问，这样每次后端修改完成以后，就不用再打开前端了，比如这样同一个站点：

Blog.Core的Swagger接口文档：
http://localhost:9291/Blog.Admin的Vue界面展示效果：
http://localhost:9291/ui/

这样就很方便了，说来就来，简单修改下，便满足了，直接上代码。

PART

打包Vue前端

作为经常开发Vue的小伙伴肯定很熟悉，前后端比较有关联的地方，无非就那么几个：

1、api的base接口；
// src\api\api.js2、打包的相对路径；
// src\router\index.js

因为是前后端一个域名，所以直接用把base接口设置为后端接口绝对路径就行：

然后给前端增加一个/ui/的路由前缀，所以输出也要改一下：

然后除了那两个修改以外，还有个需要修改的，就是路由模式，经过测试在netcore里静态资源访问Vue项目，如果Vue用history路由的方式话，刷新页面会出现404的问题，毕竟不是nginx，不能修改try_file，不过我再研究下，有更新会发公众号补充。

所以这里先把路由模式改为hash模式：

然后npm run build进行打包，万事俱备，再配置后端。

PART

修改后端，读取静态文件

后端就相对比较简单些，因为之前该配置的都已经配置好了，只需要将上文打包后文件，拷贝到wwwroot静态文件夹里就行，有一个简单修改的就是配置下默认的index.html作为首页：

// 使用静态文件DefaultFilesOptions defaultFilesOptions = new DefaultFilesOptions();defaultFilesOptions.DefaultFileNames.Clear();defaultFilesOptions.DefaultFileNames.Add("index.html");app.UseDefaultFiles(defaultFilesOptions);app.UseStaticFiles();

记得要做一下gitignore哟，毕竟文件挺多的。

直接启动项目，浏览/ui/文件夹，就会看到效果了，动图展示下：

做到这里，其实我们的需求已经做完了，以后在不改变接口的情况下，可以直接预览效果，看看接口是否可以。但是却不是完美的，这里随便说一个问题，大家可以自己暂停思考下，看看和我想的是否一致。

这样把前端打包好的dist文件夹放到后端项目，会不会文件又多占地方，又不好看？

如何改进一下呢？

PART

其他静态文件优化

如果你之前看过我讲过微软的那个微服务架构eShopOnContainer的话，应该知道，它里边就有一个处理的方案，就是zip压缩包。

所以我也有压缩包的形式，放到wwwroot里，然后在项目启动的时候，把压缩包解压到wwwroot的ui文件夹即可。

/// <summary>/// 将前端UI压缩文件进行解压/// </summary>public static class UiFilesZipSetup{public static void AddUiFilesZipSetup(this IServiceCollection services, IWebHostEnvironment _env){if (services == null) throw new ArgumentNullException(nameof(services));string zipUiItemFiles = Path.Combine(_env.ContentRootPath, "wwwroot", "ui.zip");ZipFile.ExtractToDirectory(zipUiItemFiles, Path.Combine(_env.ContentRootPath, "wwwroot"));}}

然后在startup的服务配置中，引用一下就好，后端最终修改是这么多：