循序渐进VUE+Element 前端应用开发(14）--- 根据ABP后端接口实现前端界面展示

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

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

在JS里面引入了ES6的语法，JS函数就可以使用类的方式来实现各种基础接口的封装和子类的继承关系了。

例如我们先定义好JS中常规的API封装接口BaseApi类，然后定义子类有DIctType、DictData等业务类，那么这些类继承BaseApi，就会具有相关的接口了，如下所示继承关系。

这些API类的文件视图如下所示。

有了这些业务类的准备，那么我们和后端ABP的API接口对接，就很容易了，如下图所示。

一般来说，我们页面模块可能会涉及到Store模块，用来存储对应的状态信息，也可能是直接访问API模块，实现数据的调用并展示。在页面开发过程中，多数情况下，不需要Store模块进行交互，一般只需要存储对应页面数据为全局数据状态的情况下，才可能启用Store模块的处理。

通过WebProxy代理的处理，我们可以很容易在前端中实现跨域的处理，不同的路径调用不同的域名地址API都可以，最终转换为本地的API调用，这就是跨域的处理操作。

2、ABP接口信息和前端界面处理

============================================================================

有了上面的一些知识准备，相信对ABP+Vue+Element的前端对接有了一个大概的认识了。

ABP+Swagger负责API接口的开发和公布，如下是API接口的管理界面。

进一步查看GetAll的API接口说明，我们可以看到对应的条件参数，如下所示。

这些是作为查询条件的处理，用来给后端获取对应的条件信息，从而过滤返回的数据记录的。

那么我们前端界面也需要根据这些参数来构造查询界面，我们可以通过部分条件进行处理即可，其中MaxResultCount和SkipCount是用于分页定位的参数。

前端界面代码如下所示。

主要就是构造一个条件查询的表单如下所示。

其中定义了一个searchForm的属性，那么我们可以了解下它的定义。

然后我们在查询处理的函数getlist里面，就可以根据这些条件，以及分页参数进行数据的请求查询了，如下代码所示。

getlist() { // 列表数据获取

var param = { // 构造常规的分页查询条件

SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,

MaxResultCount: this.pageinfo.pagesize,

// 过滤条件

Name: this.searchForm.name,

Remark: this.searchForm.remark,

DictType_ID: this.searchForm.dictType_ID

};

// 获取产品列表，绑定到模型上，并修改分页数量

this.listLoading = true

dictdata.GetAll(param).then(data => {

this.list = data.result.items

this.pageinfo.total = data.result.totalCount

this.listLoading = false

})

},

其中的dictdata.GetAll就是调用API模块里面的函数进行处理，是我们在视图页面类中导入这些API类的定义的。

// 业务API对象

import dicttype from ‘@/api/dicttype’

import dictdata from ‘@/api/dictdata’

我们对于DictDataApi的JS类定义如下所示。

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

其中list是列表的数据，pageinfo是分页信息，那么我们在前端的列表展示界面代码如下所示。

<el-table

v-loading=“listLoading”

:data=“list”

border

fit

stripe

highlight-current-row

:header-cell-style=“{background:‘#eef1f6’,color:‘#606266’}”

@selection-change=“selectionChange”

@row-dblclick=“rowDbclick”

{{ scope.row.name }}

{{ scope.row.value }}

{{ scope.row.remark }}

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

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

方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

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

[外链图片转存中…(img-eCdiZoWi-1715233833805)]
[外链图片转存中…(img-Im7XdXLu-1715233833806)]