ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

04-前端基础平台搭建宣导材料

2022-04-03 16:33:55  阅读：214  来源： 互联网

标签：name 04 hs component dataIndex 宣导 组件 搭建 页面


1.为什么要封装前端页面及组件？

组件封装平台 VS 未封装业务页面 == 用一个打印机完成各种花式的打印 VS 每种花样一台打印机

单业务页面开发优缺点分析：

  • 优点：
    1.根据具体页面具体设计 ；
    2.新的页面能快速开发；
  • 缺点：
    1.页面通用性差
    2.同一个基础组件重复使用时，页面冗余，代码冗余
    3.当某一个组件需要调整时，所有使用过的地方都要进行替换调整
    4.新人接手项目，无从下手，代码和功能可扩展性差
    5.通用业务，基础业务处理不好

组件封装及基础平台搭建 优缺点分析：

  • 优点：
    1.一处封装处处使用
    2.不针对具体业务，只针对特定页面模块组件
    3.使用灵活，代码量少
    4.通用页面开发快速，开发门槛较低
    5.可扩展性强，后续维护方便，结构严谨
    6.可配置化，也意味着后续可视化设计页面
    7.开发需要由原先的业务页面开发转变成，模块组件的设计者角色

  • 缺点:
    1.复杂组件封装逻辑复杂，需要有良好的业务剥离能力
    2.对新手阅读代码能力有要求

代码比对

封装组件后的页面代码

  • 页面部分（部分封装，还未封装完毕）
<hs-list-page :pageInfo="pageInfo"/> <!-- 查询区域 --> 
  <printer-list-modal ref="modalForm" @ok="modalFormOk">
</printer-list-modal>
展开查看 
 
this.pageInfo = {
	search: {
		defaultBtns: [{
			type: 'reset'
		}, {
			type: 'reload'
		}],
		searchArea: {
			conditions: [{
						name: '状态', //展示标题名称 
                	    prop:'purchaseTypeList', 
                	    display:'row',//展示行列样式 
                        component:'hs-radio-div',//组件名称 
                        datas: that.statusObj  
            			},{
                         name:'打印机品牌',//展示标题名称 
                            prop:'brandName', span:3, //占用的span数 
                            component:'hs-input',//组件名称
                        },{name:'打印机型号',//展示标题名称 
                           prop:'brandType',
                           component:'hs-input',//组件名称 
                          },{ name:'机器编号', 
                             component:'hs-input', 
                             prop:'machineNumber', 
                            },{name:'主板ID',
                               prop:'mainboardId', 
                               component:'hs-input'
                              },{name:'喷头类型',
                                 prop:'printheadType', 
                                 component:'hs-input'
                                },{ name:"入库时间",// 
                                   span:6, 
                                   component:'hs-date-picker', 
                                   startProp:'createTimeStart', //起始日期属性
                                   endProp:'createTimeEnd',//结束日期属性
                                   format:'YYYY-MM-DD HH:mm:ss',//格式化规则 
                                  },{name:"出货时间",// 
                                     span:6, 
                                     component:'hs-date-picker', 
                                     startProp:'shippingTimeStart', //起始日期属性
                                     endProp:'shippingTimeEnd',//结束日期属性 
                                     format:'YYYY-MM-DD HH:mm:ss',//格式化规则 
                                    } 
                        ],
        			} , 
        			queryParam:{ 
                        purchaseTypeList:[1,2,3]
                     }
    				},
    				btns:[], 
    				table:{ tableInfo:{
						columns: [{
							title: '#',
							dataIndex: '',
							key: 'rowIndex',
							width: 60,
							align: "center",
							customRender: function(t, r, index) {
								return parseInt(index) + 1;
							}
						}, {
							title: '购机客户',
							align: "center",
							dataIndex: 'custName'
						}, {
							title: '打印机品牌',
							align: "center",
							dataIndex: 'brandName'
						}, {
							title: '打印机型号',
							align: "center",
							dataIndex: 'brandType'
						}, {
							title: '机器编号',
							align: "center",
							dataIndex: 'machineNumber'
						}, {
							title: '主板ID',
							align: "center",
							dataIndex: 'mainboardId'
						}, {
							title: '喷车板芯片ID',
							align: "center",
							dataIndex: 'sprayPlateChipId'
						}, {
							title: '喷头类型',
							align: "center",
							dataIndex: 'printheadType'
						}, {
							title: '喷头ID',
							align: "center",
							dataIndex: 'nozzleId',
							scopedSlots: {
								customRender: 'nozzleId'
							}
						}, {
							title: '状态',
							align: "center",
							dataIndex: 'purchaseType',
						}, {
							title: '入库时间',
							align: "center",
							dataIndex: 'createTime',
						}, {
							title: '出货时间',
							align: "center",
							dataIndex: 'shippingTime',
						}, {
							title: '操作',
							dataIndex: 'action',
							align: "center",
							fixed: "right",
							width: 147,
							scopedSlots: {
								customRender: 'action'
							}
						}],
						colProperty: [{
									prop: "purchaseType", // 对应列的dataIndex 
                            		component:'hs-text-select', //table的文本多选组件名称 
                            		options:[ //选择框的选项 
                                        { name:"未出售", value:1 },
                                        { name:"代售中", value:2, style:{ color:"#18bc9c" } },
                                        { name:"已出售", value:3, style:{ color:"#e74c3c" } }
                                    ] },
                                      {prop:"action",
                                       component:'hs-table-button',
                                       btns:[
                                           { name:"查看", has:"M070402",
                                            click: record => that.handleDetail(record)
                                           } 
                                       ] 
                                      } 
                                     ] 
            			},
                         initDatas:{
                         	url:'outOrder/outbound',
                           resData:'outBoundList'
                         }
    				} 
		}

原始具体页面代码

  • 页面部分
<a-card :bordered="false" style="min-height:814px"> 
   <!-- <hs-list-page :pageInfo="pageInfo"/> --> 
   <!-- 查询区域 --> 
   <div class="table-page-search-wrapper"> 
    <a-form layout="inline" class="searchBox"> 
     <a-row :gutter="48"> 
      <a-col :md="24" :sm="24"> 
       <a-form-item label="状态"> 
        <div class="statusBtn" @click="changeStatus(item.value)" :class=" {active:currentSeleted==item.value}" v-for="(item,index) in statusObj" :key="index">
         {{item.name}}
        </div> 
       </a-form-item> 
      </a-col> 
     </a-row> 
     <a-row :gutter="48"> 
      <a-col :md="8" :sm="24"> 
       <a-form-item label="打印机品牌"> 
        <a-input v-model.trim="queryParam.brandName" placeholder="打印机品 牌" /> 
       </a-form-item> 
      </a-col> 
      <a-col :md="8" :sm="24"> 
       <a-form-item label="打印机型号"> 
        <a-input v-model.trim="queryParam.brandType" placeholder="打印机型 号" /> 
       </a-form-item> 
      </a-col> 
      <template v-if="advanced"> 
       <a-col :md="8" :sm="24"> 
        <a-form-item label="机器编号"> 
         <a-input v-model.trim="queryParam.machineNumber" placeholder="机 器编号" style="width: 100%" /> 
        </a-form-item> 
       </a-col> 
       <a-col :md="8" :sm="24"> 
        <a-form-item label="主板ID"> 
         <a-input v-model.trim="queryParam.mainboardId" placeholder="主板 ID" style="width: 100%" /> 
        </a-form-item> 
       </a-col> 
       <a-col :md="8" :sm="24"> 
        <a-form-item label="喷头类型"> 
         <a-input v-model.trim="queryParam.printheadType" placeholder="喷 头类型" style="width: 100%" /> 
        </a-form-item> 
       </a-col> 
       <a-col :md="8" :sm="24"> 
        <a-form-item label="入库时间"> 
         <div> 
          <a-date-picker v-model="startValue" 
               :disabled-date="disabledStartDate" 
               format="YYYY-MM-DD" placeholder="请选择开始时间" 
               @openchange="handleStartOpenChange" class="timeBox" 
               :class="{nonePadding:startValue}" />
          <a-date-picker v-model="endValue" 
              :disabled-date="disabledEndDate" format="YYYY-MM-DD" 
              placeholder="请选择结束时间" :open="endOpen" 
              @openchange="handleEndOpenChange" 
              class="timeBox end" :class="{nonePadding:endValue}" /> 
         </div> 
        </a-form-item> 
       </a-col> 
       <a-col :md="8" :sm="24"> 
        <a-form-item label="出货时间"> 
         <!-- <a-form-item > --> 
         <!-- <label slot="label">出&nbsp;货&nbsp;时&nbsp;间</label> --> 
         <div> 
          <a-date-picker v-model="startValue1" 
              :disabled-date="disabledStartDate1" 
              format="YYYY-MM-DD" placeholder="请选择开始时间" 
              @openchange="handleStartOpenChange1" 
              class="timeBox" :class="{nonePadding:startValue1}" />
          <a-date-picker v-model="endValue1" 
              :disabled-date="disabledEndDate1" 
              format="YYYY-MM-DD" placeholder="请选择结束时间" 
              :open="endOpen1" 
              @openchange="handleEndOpenChange1" 
              class="timeBox end" 
              :class="{nonePadding:endValue1}" /> 
         </div> 
        </a-form-item> 
       </a-col> 
      </template> 
      <a-col :md="!advanced &amp;&amp; 8 || 24" :sm="24" class="hasRight"> 
       <span class="table-page-search-submitButtons" :style="advanced &amp;&amp; { float: 'right', overflow: 'hidden' } || {} "> 
        <a-button type="primary" @click="onSubmit">
         查询
        </a-button> 
        <a-button style="margin-left: 8px" @click="resetSearchForm">
         重置 
        </a-button> <a @click="toggleAdvanced" style="margin-left: 8px"> {{ advanced ? '收起' : '展开' }} 
         <a-icon :type="advanced ? 'up' : 'down'" /> </a> </span> 
      </a-col> 
     </a-row> 
    </a-form> 
   </div> 
   <!-- 查询区域-END --> 
   <!-- 操作按钮区域 --> 
   <div class="table-operator"> 
    <!-- <a-button @click="handleAdd" type="primary" icon="plus" v- has="'M030201'">打印机入库</a-button> --> 
   </div> 
   <!-- table区域-begin --> 
   <div class="tb1"> 
    <a-table ref="table" 
        size="middle" :scroll="{x:true}" bordered="" 
        :rowkey="(record,index)=&gt;{return index}" 
        :columns="columns" 
        :datasource="dataSource" 
        :pagination="ipagination" 
        :loading="loading" class="j-table-force-nowrap" 
        @change="handleTableChange"> 
     <div slot="nozzleId" slot-scope="text"> 
      <a-popover title="喷头ID" v-if="text.length&gt;9"> 
       <template slot="content"> 
        <p>{{text}}</p> 
       </template> 
       <div>
        {{text.substr(0,8)+'...'}}
       </div> 
      </a-popover> 
      <span v-else="">{{text}}</span> 
     </div> 
     <template slot="htmlSlot" slot-scope="text"> 
      <div v-html="text"></div> 
     </template> 
     <template slot="purchaseType" slot-scope="text"> 
      <div v-if="text==1">
       已入库
      </div> 
      <div v-if="text==2" style="color:#18bc9c">
       待出货
      </div> 
      <div v-if="text==3" style="color:#e74c3c">
       已出货
      </div> 
     </template> 
     <span slot="action" slot-scope="text, record">
       <a @click="handleDetail(record)" v-has="'M070402'">查看</a> 
     </span> 
    </a-table> 
   </div> 
   <printer-list-modal ref="modalForm" @ok="modalFormOk"></printer-list-modal> 
  </a-card>
  • 代码部分冗余也是很多，而且很多都是重复的代码

2.厘清几个概念

2.1 页面构成


  • 结构：先划分左右，在进行上下进行组合
  • 页面可以拆成几个大的模块，每个模块又能拆分成更小的模块

封装做的是什么？
把最小的模块，按照业务组成一个区域模块在把区域模块，根据页面的构成布局组成

2.2 组件的概念

3.通用业务组件的扩展性和低耦合性表现

1.通用基础组件1.0

  • 基础组件进行封装，减少重复代码
  • 原有日期组件，及日期范围选择控制
<a-date-picker 
    v-model="startValue" 
    :disabled-date="disabledStartDate" 
    format="YYYY-MM-DD" 
    placeholder="请选择开始时间" 
    @openChange="handleStartOpenChange" 
    class="timeBox" 
    :class="{nonePadding:startValue}" />
<a-date-picker v-model="endValue" 
    :disabled-date="disabledEndDate" 
    format="YYYY-MM-DD" placeholder="请选择结束时间" 
    :open="endOpen" 
    @openChange="handleEndOpenChange" 
    class="timeBox end" 
    :class="{nonePadding:endValue}" />
  • 代码部分
展开查看

  • 封装后基础业务组件
<hs-date-picker :form.sync="queryParam" :item="hsDatePick" />
 <script> 
    hsDatePick:{ 
        startProp:'startOrderTime', //起始日期属性 
        endProp:'endOrderTime',//结束日期属性 
        format:'YYYY-MM-DD HH:mm:ss',//格式化规则 
    },
 </script>
  • 对比的优势
    1.同一个页面多次使用，只需要配置json,基础组件的相关方法都不需要额外增加
    2.页面更加简洁，冗余代码比较少，不需要考虑通用基础组件处理

2.通用业务组件2.0

  • 原有页面代码
<div class="table-page-search-wrapper">
    <a-form layout="inline" class="searchBox">
        <!-- <a-form layout="inline" class="searchBox" labelAlign="left"> -->
        <a-row :gutter="48">
            <a-col :md="24" :sm="24">
                <a-form-item label="订单状态">
                    <div class="statusBtn" @click="changeStatus(item.value)" :class=" {active:currentSeleted==item.value}" v-for="(item,index) in statusObj" :key="index">{{item.name}}</div>
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="48">
            <a-col :md="5" :sm="24">
                <a-form-item label="业务">
                    <a-select allowClear v-model="queryParam.salesmanName" placeholder="请选择">
                        <a-select-option :value="item.id" v-for="(item, index) in personList" :key="index">{{item.userName}}</a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :md="5" :sm="24">
                <a-form-item label="跟单">
                    <a-select allowClear v-model="queryParam.merchandiserName" placeholder="请选择">
                        <a-select-option :value="item.id" v-for="(item, index) in personList" :key="index">{{item.userName}}</a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <!-- <a-col :md="10" :sm="24" > <a-form-item label="下单日期" class="moreWidth"> <hs-date-picker :form.sync="queryParam" :item="hsDatePick" /> </a-form-item> </a-col> -->
            <a-col :md="10" :sm="24">
                <a-form-item label="下单日期" class="moreWidth">
                    <div><a-date-picker v-model="queryParam.startOrderTime" :disabled-date="disabledStartDate" format="YYYY-MM-DD" placeholder="请选择开始日期" @openChange="handleStartOpenChange" class="timeBox" :class="{nonePadding:queryParam.startOrderTime}" /><a-date-picker v-model="queryParam.endOrderTime" :disabled-date="disabledEndDate" format="YYYY-MM-DD" placeholder="请选择结束日期" :open="endOpen" @openChange="handleEndOpenChange" class="timeBox end" :class="{nonePadding:queryParam.endOrderTime}" />
                    </div>
                </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24" class="hasRight">
                <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} "> <a-button type="primary" @click="onSubmit">查询</a-button> <a-button style="margin-left: 8px" @click="resetSearchForm">重置 </a-button> </span> 
            </a-col>
        </a-row>
    </a-form>
</div>
  • 封装后代码
<hs-search-row-conditions :rowConditions="rowConditions" :form="form" />
<script>
searchArea: {
    conditions: [{
        name: '状态', //展示标题名称 
        prop: 'purchaseTypeList',
        display: 'row', //展示行列样式 
        component: 'hs-radio-div', //组件名称 
        datas: that.statusObj,
    }, {
        name: '打印机品牌', //展示标题名称 
        prop: 'brandName',
        span: 3, //占用的span数 
        component: 'hs-input', //组件名称 
    }, {
        name: '打印机型号', //展示标题名称 
        prop: 'brandType',
        component: 'hs-input', //组件名称 
    }, {
        name: '机器编号',
        component: 'hs-input',
        prop: 'machineNumber',
    }, {
        name: '主板ID',
        prop: 'mainboardId',
        component: 'hs-input',
    }, {
        name: '喷头类型',
        prop: 'printheadType',
        component: 'hs-input',
    }, {
        name: "入库时间", // 
        span: 6,
        component: 'hs-date-picker',
        startProp: 'createTimeStart', //起始日期属性 
        endProp: 'createTimeEnd', //结束日期属性 
        format: 'YYYY-MM-DD HH:mm:ss', //格式化规则 
    }, {
        name: "出货时间", // 
        span: 6,
        component: 'hs-date-picker',
        startProp: 'shippingTimeStart', //起始日期属性 
        endProp: 'shippingTimeEnd', //结束日期属性 
        format: 'YYYY-MM-DD HH:mm:ss', //格式化规则
    }],
}
</script>
  • 对比优势：
    1.不需要写任何基础组件代码
    2.需要增删组件只需要对JSON中的配置项进行删减

3.通用业务页面组件3.0

  • 对比就是刚开始讲的两个页面对比优势：
    1.封装后的通用业务页面，全部是json配置而成
    2.页面代码几乎为0，开发成本很低
    3.页面开发门槛降低，只要知道配置规则，稍微知道前端知识就能配置页面
    4.提高了开发效率

4.通用业务页面4.0

  • json 数据存储数据库
  • 通用业务页面不需要进行写代码，通过页面配置实现
  • 减少业务重复代码开发，部分个性化开发提供接口，可直接在系统进行开发
  • 秉持的理念是：设计与渲染分离

4.1通用列表页面

4.2通用表单配置

  • 通过拖动实现页面设计

5.通用业务基础平台5.0

基本点：
前后端通用化，页面可配置，后端增删改查接口的通用化
后端通用接口提供插槽，特殊业务通过插槽进行处理，通用业务通用处理降低基础页面的前后端开发，后端接口封装要求对业务剥离度要高
后端必要时引入现有设计类后端组件。

4基础业务平台搭建的好处

4.1统一性

  • 前端页面样式统一后端接口统一
  • 代码冗余少

4.2减少重复开发

  • 后端增删改查接口减少，可以有更多时间处理核心业务
  • 前端基础页面减少，重点是复杂页面，和通用页面业务组件开发

4.3提高项目开发速度

  • 可以通过基础业务平台，快速搭建起新系统
  • 新系统的基础功能转移更加便捷，转移相关数据库配置就能完成，较少考虑代码影响

4.4提高系统可扩展性

  • 剥离具体业务，提高系统的整体可扩展性

文件路径：https://files.cnblogs.com/files/perferect/基础组件平台封装宣导.rar?t=1648543032

标签：name,04,hs,component,dataIndex,宣导,组件,搭建,页面
来源： https://www.cnblogs.com/perferect/p/16072594.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有