循序渐进VUE+Element 前端应用开发(20） - 使用组件封装简化界面代码

物业客服 發表於 2020-9-11 12:07:00

循序渐进VUE+Element 前端应用开发(20）--- 使用组件封装简化界面代码

VUE+Element 前端应用，比较不错的一点就是界面组件化，我们可以根据重用的指导方针，把界面内容拆分为各个不同的组合，每一个模块可以是一个组件，也可以是多个组件的综合体，而且这一个过程非常方便。组件封装的目的就是为了能够更加便捷、快速的进行业务功能的开发。组件（component）是vue的最强大功能之一，组件可以实现一些类似功能的复用及与其它业务逻辑的解耦。本篇随笔介绍前端框架中常用到的一些组件封装处理，用于简化界面、隐藏实现细节的目的。
<h3>1、组件封装的需要</h3>
在我们开发一个主要界面的时候，一般需要排列很多内容，各个部分的内容可能会在其他界面上比较常见，那么这些如果是简单的使用原始的Element界面组件，以及简单的复制处理的话，页面代码比较臃肿，而且随着不断的复制过去使用，各部分的界面又不在统一了。这个时候如果把那些相同的功能，抽象出来抽离成组件，通过组件引用方式就会显得格外省事了。
在Winform开发中，我们知道有很多常见的用户自定义控件，就是对常规界面内容的一些通用部分进行封装，拖动过来即可使用。现在VUE+Element 前端应用的组件开发也很容易，把界面代码和Vue的控制逻辑JS代码组合一起形成一个小组件，通过使用Prop的方式传入所需参数，由组件内部控制界面的展示逻辑及事件处理，那么界面调用组件的时候就非常简洁，这样我们主页面上的代码量就降低不少，也方便代码的维护。
例如对于常规的字典下拉列表，我们希望绑定一个字典类型就可以实现系统的下拉列表的显示，那么我们可以封装这个常见的界面内容为一个字典组件。
<img src="https://img2020.cnblogs.com/blog/8867/202009/8867-20200911112344631-1899674956.png" alt="" loading="lazy">
还有对于树列表及其过滤实现等常规的处理，我们也可以通过简单的封装，实现树列表的展示，这样我们传入对应的树列表数据即可呈现所需要的树状列表内容。
<img src="https://img2020.cnblogs.com/blog/8867/202009/8867-20200911112434840-643380511.png" alt="" loading="lazy">
另外，还有一种情况，是界面内容太多，我们把它按内容划分为不同的界面组件，然后页面进行独立的维护，主界面直接一行代码即可集成所需的内容板块，极大减少主界面的代码铺陈。
例如：对于权限系统中的每个角色，除了包含基本信息外，还会包含拥有的权限（功能控制点）、包含用户，以及拥有的菜单，其中权限是用来控制界面元素，如操作按钮的显示的，而拥有的菜单，则是用户以指定账号登录系统后，获得对应角色的菜单，然后构建对应的访问入口的。角色界面模块UML类图如下所示。 
那么对应界面元素上，我们就应该以不同的Tab来展示这些信息，每个Tab内容部分就可以作为一个独立的界面组件来开发。
<img src="https://img2020.cnblogs.com/blog/8867/202007/8867-20200713172611456-1627083929.png" alt="" loading="lazy">
<img src="https://img2020.cnblogs.com/blog/8867/202009/8867-20200911120630217-569571770.png" alt="" loading="lazy">
在比如，组织机构里面添加成员和添加角色的操作UML图。
<img src="https://img2020.cnblogs.com/blog/8867/202007/8867-20200713173050552-254132834.png" alt="" loading="lazy">
<img src="https://img2020.cnblogs.com/blog/8867/202009/8867-20200911120454909-693872031.png" alt="" loading="lazy">
其中添加成员、添加角色，涉及界面的列表数据展示以及对应的添加展示操作，独立一个界面组件还是比较方便的，而且添加成员，在角色维护模块里面也需要用到，那么可以兼容两个场景来设计组件模块。
 
<h3>2、界面组件的封装处理</h3>
在VUE+Element 的前端场景中，想要封装好一个组件，一般要熟练掌握的三个技能：1、父组件传值到子组件（props） 2、子组件传值到父组件（$emit）3、插槽使用（slot）。对于一个独立的组件，props是用来为组件内部注入核心内容；$emit用来使这个组件通过一些操作来融入其它组件中。
我们来详细分析下前面介绍的组件场景。
对于字典模块来说，一般如果需要实现和系统字典模块里面的Api对接，并展示对应字典类型的下拉列表，实现代码如下所示。
<div class="cnblogs_code">
<pre><el-select v-model="searchForm.ProductType" filterable clearable placeholder="请选择">
<el-option
v-for="(item, key) in typeList"
:key="key"
:label="item.value"
:value="item.key"
/>
</el-select></pre>
</div>
然后在JS逻辑里面使用字典的API获取对应数据，然后绑定到typeList属性上面即可。这样的逻辑如果每个用到字典的地方都需要这样处理，代码显然比较臃肿，而且使用组件封装更方便。
我们在Componen目录下创建一个Common目录，然后在其中添加一个my-dictdata.vue文件，用来封装字典内容处理的。
如果我们完成组件的编写，那么引用组件只需要一行代码即可实现相同的功能了。
<div class="cnblogs_code">
<pre><my-dictdata v-model="searchForm.ProductType" type-name="商品类型" /></pre>
</div>
以及在页面的组件里面引入这个自定义组件即可。
<div class="cnblogs_code">
<pre>import myDictdata from '@/components/Common/my-dictdata'
export default {
components: { myDictdata },</pre>
</div>
如果为了简便，也可以在main.js里面统一全局引入。
这样相对于使用原始的Element界面组件，既有界面代码，又有JS代码，这样的一行代码就实现功能，显得非常简洁。
 
为了了解其中的奥秘，我们对组件的开发过程进行简单的了解，其中组件界面部分的代码如下所示，和上面的差不多。
<div class="cnblogs_code">
<pre><template>
<el-select v-model="svalue" filterable clearable placeholder="请选择">
<el-option
 v-for="(item, index) in dictItems"
 :key="index"
 :label="item.Text"
 :value="item.Value"
>
 <span style="float: left;color:yello;">
 <i class="el-icon-tickets" style="color:blue;" />
 {{ item.Text }}
 </span>
</el-option>
</el-select>
</template></pre>
</div>
然后在JS部分引入字典操作的Api类，以及定义Prop属性typeName，如下所示。
<img src="https://img2020.cnblogs.com/blog/8867/202009/8867-20200911113240080-1744559582.png" alt="" loading="lazy">
并对传入Model值进行监控
<img src="https://img2020.cnblogs.com/blog/8867/202009/8867-20200911113427272-349201536.png" alt="" loading="lazy">
 我们在Mounted的实现里面，增加对字典数据的请求绑定，如下所示。
<img src="https://img2020.cnblogs.com/blog/8867/202009/8867-20200911113613549-1318207212.png" alt="" loading="lazy">
对于树形列表
<img src="https://img2020.cnblogs.com/blog/8867/202009/8867-20200911112434840-643380511.png" alt="" loading="lazy">
一般来说它的使用代码如下所示。
<img src="https://img2020.cnblogs.com/blog/8867/202009/8867-20200911114351561-809269054.png" alt="" loading="lazy">
还是可以感觉比较臃肿，如果放到主页面里面，会占用很多代码行，维护起来也不方便，而且树列表也是一个常见的界面展示内容，可以通过简单的封装进行减少主页面的代码量。 
同样我们可以通过封装一个树列表组件
<img src="https://img2020.cnblogs.com/blog/8867/202009/8867-20200911114721174-1671148571.png" alt="" loading="lazy">
 我们可以在my-tree.vue里面定义很多常见的的Prop属性，以方便调用的时候传入对应的值来改变界面的呈现。
<img src="https://img2020.cnblogs.com/blog/8867/202009/8867-20200911115012438-1738701685.png" alt="" loading="lazy">
这样主界面调用组件来实现功能的时候，只需要一行界面代码即可。
<div class="cnblogs_code">
<pre><myTree :data="treedata" icon-class="el-icon-price-tag" @nodeClick="nodeClick" /></pre>
</div>
相应的处理获得treedata的操作，是下面的函数
<div class="cnblogs_code">
<pre> getTree() { // 树列表数据获取
 var param = {
 SkipCount: 0,
 MaxResultCount: 1000,
 Tag: 'web' // Web端专用
 }
 menu.GetAll(param).then(data => {
 this.treedata = [];// 树列表清空
 var list = data.result.items
 if (list) {
 // 使用getJsonTree函数，实现对二维表转换为嵌套树对象集合
 var newTreedata = getJsonTree(list, {
 id: 'id',
 pid: 'pid',
 children: 'children',
 label: 'name'
 });
 this.treedata = newTreedata
 }
 });
},</pre>
</div>
而对于部分页面组件的方式，这种一般不是很通用的组件，一般我们可以把它放在同一个目录上的Components目录里面，如下是权限模块里面用到的一些界面内容组件封装。
<img src="https://img2020.cnblogs.com/blog/8867/202009/8867-20200911115800607-954176667.png" alt="" loading="lazy">
<img src="https://img2020.cnblogs.com/blog/8867/202007/8867-20200713172524064-321772392.png" alt="" loading="lazy">
完成添加成员、添加角色的界面组件后，我们就可以在组织机构界面里面引入使用。
<img src="https://img2020.cnblogs.com/blog/8867/202007/8867-20200714121334220-2134283948.png" alt="" loading="lazy">
<img src="https://img2020.cnblogs.com/blog/8867/202009/8867-20200911115833374-2138925497.png" alt="" loading="lazy">
<img src="https://img2020.cnblogs.com/blog/8867/202007/8867-20200713172611456-1627083929.png" alt="" loading="lazy"> 
角色管理，我们也依据这个来对模块的内容进行划分，不同业务设计不同的界面组件，最后整合一起使用即可。
<img src="https://img2020.cnblogs.com/blog/8867/202007/8867-20200714123540581-1505066306.png" alt="" loading="lazy">
 <img src="https://img2020.cnblogs.com/blog/8867/202009/8867-20200911115937839-614360646.png" alt="" loading="lazy">
 <img src="https://img2020.cnblogs.com/blog/8867/202009/8867-20200911115950636-2128844486.png" alt="" loading="lazy">
<div class="cnblogs_code">
<pre><el-dialog title="查看信息" :visible="isView" :modal-append-to-body="false" @close="closeDialog">
<el-col>
<el-tabs value="basicPage" type="border-card">
 <el-tab-pane name="basicPage" label="基本信息">
 <el-form ref="viewForm" :model="viewForm" label-width="120px">
 <el-form-item label="角色名">
 <el-input v-model="viewForm.name" disabled />
 </el-form-item>
 <el-form-item label="角色显示名">
 <el-input v-model="viewForm.displayName" disabled />
 </el-form-item>
 <el-form-item label="角色描述">
 <el-input v-model="viewForm.description" type="textarea" disabled />
 </el-form-item>
 </el-form>
 </el-tab-pane>

 <el-tab-pane name="permitPage" label="权限">
 <rolefunction ref="rolefunction" :role-id="selectRoleId" />
 </el-tab-pane>

 <el-tab-pane name="userPage" label="用户">
 <roleuser ref="roleuser" :role-id="selectRoleId" :can-add="false" :can-delete="false" />
 </el-tab-pane>

 <el-tab-pane name="menuPage" label="菜单">
 <rolemenu ref="rolemenu" :role-id="selectRoleId" />
 </el-tab-pane>
</el-tabs>
</el-col>
<div slot="footer" class="dialog-footer">
<el-button type="success" @click="closeDialog">关闭</el-button>
</div>
</el-dialog></pre>
</div>
或者
<img src="https://img2020.cnblogs.com/blog/8867/202009/8867-20200911120208744-490246553.png" alt="" loading="lazy">
以上就是我们封装一些常见通用组件，以及页面模块的组件，主要的目的就是可以简化主调用界面的代码，以及提高使用的效率。
 
为了方便读者理解，我列出一下前面几篇随笔的连接，供参考：
循序渐进VUE+Element 前端应用开发(1）--- 开发环境的准备工作
循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用
循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理
循序渐进VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理
循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理
循序渐进VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用
循序渐进VUE+Element 前端应用开发(7）--- 介绍一些常规的JS处理函数
循序渐进VUE+Element 前端应用开发(8）--- 树列表组件的使用
循序渐进VUE+Element 前端应用开发(9）--- 界面语言国际化的处理
循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示 
循序渐进VUE+Element 前端应用开发(11）--- 图标的维护和使用
循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理
循序渐进VUE+Element 前端应用开发(13）--- 前端API接口的封装处理
循序渐进VUE+Element 前端应用开发(14）--- 根据ABP后端接口实现前端界面展示
循序渐进VUE+Element 前端应用开发(15）--- 用户管理模块的处理
循序渐进VUE+Element 前端应用开发(16）--- 组织机构和角色管理模块的处理 
循序渐进VUE+Element 前端应用开发(17）--- 菜单管理
循序渐进VUE+Element 前端应用开发(18）--- 功能点管理及权限控制  
VUE+Element 前端应用开发框架功能介绍 
循序渐进VUE+Element 前端应用开发(19）--- 后端查询接口和Vue前端的整合
使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面
循序渐进VUE+Element 前端应用开发(20）--- 使用组件封装简化界面代码
循序渐进VUE+Element 前端应用开发(21）--- 省市区县联动处理的组件使用
循序渐进VUE+Element 前端应用开发(22）--- 简化main.js处理代码，抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
循序渐进VUE+Element 前端应用开发(23）--- 基于ABP实现前后端的附件上传，图片或者附件展示管理 
循序渐进VUE+Element 前端应用开发(24）--- 修改密码的前端界面和ABP后端设置处理
循序渐进VUE+Element 前端应用开发(25）--- 各种界面组件的使用（1）
循序渐进VUE+Element 前端应用开发(26）--- 各种界面组件的使用（2）
电商商品数据库的设计和功能界面的处理 
循序渐进VUE+Element 前端应用开发(27）--- 数据表的动态表单设计和数据存储
循序渐进VUE+Element 前端应用开发(28）--- 附件内容的管理 
循序渐进VUE+Element 前端应用开发(29）--- 高级查询条件的界面设计
部署基于.netcore5.0的ABP框架后台Api服务端，以及使用Nginx部署Vue+Element前端应用
循序渐进VUE+Element 前端应用开发(30）--- ABP后端和Vue+Element前端结合的分页排序处理 
循序渐进VUE+Element 前端应用开发(31）--- 系统的日志管理，包括登录日志、接口访问日志、实体变化历史日志
循序渐进VUE+Element 前端应用开发(32）--- 手机短信动态码登陆处理 
循序渐进VUE+Element 前端应用开发(33）--- 邮件参数配置和模板邮件发送处理 
使用代码生成工具快速开发ABP框架项目 
使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理 
使用Vue-TreeSelect组件的时候，用watch变量方式解决弹出编辑对话框界面无法触发更新的问题 
 

</div>
<div id="MySignature" role="contentinfo">
<div style="border-right-color: #cccccc; border-right-width: 1px; border-right-style: solid; padding-right: 5px; border-top-color: #cccccc; border-top-width: 1px; border-top-style: solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left-color: #cccccc; border-left-width: 1px; border-left-style: solid; width: 98%; padding-top: 4px; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: solid; background-color: #eeeeee;">
<img src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top" alt>

专注于代码生成工具、.Net/Python 框架架构及软件开发，以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架、Python开发框架等框架产品。
 转载请注明出处：撰写人：伍华聪 http://www.iqidi.com </div> 
来源：https://www.cnblogs.com/wuhuacong/p/13650518.html

頁: [1]

琼殿技术论坛's Archiver

循序渐进VUE+Element 前端应用开发(20）--- 使用组件封装简化界面代码