循序渐进VUE+Element 前端应用开发(28）--- 附件内容的管理

<myTree :data=“treeType” icon-class=“el-icon-price-tag” @nodeClick=“nodeTypeClick” />

<myTree :data=“treeCategory” icon-class=“el-icon-price-tag” @nodeClick=“nodeCategoryClick” />

而树形列表的类别名称，我们是从数据库中动态获取的，因此需要特殊的 API 封装调用。

在 ABP 框架的后端，应用服务类 FileUploadAppService 中定义一个获取类别的列表接口

///

/// 获取所有类别(Distinct)

///

///

public virtual async Task<List> GetAllCategory()

{

var query = Repository.GetAll().Where(s=> s.Category != null).OrderBy(s => s.Category);

var list = query.Select(s => s.Category).Distinct().ToList();

return await Task.FromResult(list);

}

在客户端的 API 调用类中同时增加一个 API 处理接口，如下所示。

而 Element 的前端调用后端的 ABP 接口，前面很多博客也介绍的很多了，如下是它们的处理过程图示。

前端根据 ABP 后端的接口进行前端 JS 端的类的封装处理，引入了 ES6 类的概念实现业务基类接口的统一封装，简化代码。

大多数模块我们涉及到常规增删改查等业务接口，那么这些类继承 BaseApi，就会具有相关的接口了，如下所示继承关系。

其中 JS 类的 BaseApi 具有常规的增删改查接口，如下所示。

在整合 ABP 后端接口的时候，我们为了方便，一般使用 ES6 的方式定义一个客户端的 Api 调用类，基础接口封装在 BaseApi 类里面，扩展自定义接口放在子类定义，因此前端 API 封装类 fileupload.js 的类关系如下所示。

我们再次回到管理界面，在列表中展示附件信息外，如果是图片提供预览，如果是文件则提供下载链接，方便处理。

或者

预览查看图片文件的时候，我们也需要在明细中列出附件的一些信息，如下界面所示。

以上就是附件管理的设计表，以及管理界面，其中前端主要使用了 Vue + Element 进行开发，后端还是用 ABP 的框架提供相关的 API 接口。

2、附件上传的处理

在之前随笔《循序渐进 VUE+Element 前端应用开发 (23）— 基于 ABP 实现前后端的附件上传，图片或者附件展示管理》中已经比较详细的介绍了对附件的上传处理，我们 ABP 后端提供了一些 API 接口给前端界面控件进行调用即可上传对应的附件

在附件上传处理的时候，我们就可以通过这样获得请求的文件对象了，如下代码所示。

我们上传到后端 ABP 应用服务器的文件，一般情况是不能访问目录的，如果需要特别放行，那么需要在 ABP 服务的 Host 应用里面，设置静态文件，允许前端访问我们的文件路径。

一般在 Host 项目的启动入口设置即可。

public void Configure(IApplicationBuilder app, ILoggerFactory loggerFactory)

{

…

app.UseStaticFiles();

//指定特定的目录作为静态文件目录，如UploadFiles

//是否可以访问静态文件

app.UseStaticFiles(new StaticFileOptions

{

FileProvider = new PhysicalFileProvider(Path.Combine(System.AppDomain.CurrentDomain.BaseDirectory, “UploadFiles”)),

RequestPath = “/UploadFiles”

});

…

这样上传的文件，在对应目录里面，就可以通过 URL 地址访问了。

另外，前面我们看到的数据记录里面，没有绝对的 URL 地址，一般是为了适应性方便，不需要绝对的地址。

但是前端为了方便，服务器后端返回的接口中，我们一般增加一个绝对的地址信息供查看或者下载文件，那么我们可以在后端对应附件记录的转义函数里面增加一个对相对地址转换为绝对访问的 URL 地址的转换即可。

///

/// 对记录进行转义

///

/// dto数据对象

///

protected override void ConvertDto(FileUploadDto item)

{

//转义相对地址为绝对地址

item.FileUrl = GetFileUrl(item.BasePath, item.SavePath);

}

///

/// 根据记录的basePath和savePath，以及HttpContext上下文确定绝对路径

///

/// 附件的基础路径

/// 附件的保存路径

///

private string GetFileUrl(string basePath, string savePath)

{

var httpContext = _httpContext.HttpContext;

string serverRealPath = basePath.UriCombine(savePath);

if (!Path.IsPathRooted(basePath) &&

!basePath.StartsWith(“http://”) &&

!basePath.StartsWith(“https://”))

{

//如果是相对目录，加上当前程序的目录才能定位文件地址

var url = string.Format(“{0}😕/{1}”, httpContext.Request.Scheme, httpContext.Request.Host.Value);

serverRealPath = url.UriCombine(serverRealPath).Replace(‘\\’, ‘/’);

}

return serverRealPath;

}

而前端界面中，一般的图片和附件上传界面如下所示。

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】