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

总结

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。

开源分享：docs.qq.com/doc/DSmRnRG… 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"

这样就可以简单实现列表的查询和展示了。

当然我们一般情况下，可能有一些列表用来进行数据过滤处理的，如这里的字典类型，可以通过树列表的进行展示，从而可以友好的管理不同类型的字典数据，如下是整合了树形列表的查询处理过程，界面相对复杂一些，不过原理差不多，都是根据条件进行API数据的请求，然后展示在列表中即可。

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

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

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！