基于Vue+ElementUI的后台管理系统开发的总结

2019年9月14日 131次阅读 来源: Bibiboomer

第一步：工具的介绍

工欲善其事必先利其器，所以首先先总结一下这个项目中的使用到的工具，主要是对自己不熟悉也是第一次接触的一些东西的总结，这些工具大概分成3类：项目管理工具、项目打包工具、项目运行依赖

项目管理工具

SourceTree：一个免费的Git图形化管理工具

项目打包工具

Webpack :模块打包机

项目运行依赖

Nodejs：服务器端的、非阻断式I/O的、事件驱动

开发规范

  • 1 自定义的属性命名前缀：$
  • 2 所有的路劲配置（测试，模拟）等地址，另起文件集中管理，在入口文件mian.js引入

问题与总结

1：变量命名

  • 1.1 关于input输入框绑定的变量（this）命名，与loadData中的Get方法中的参数（reqParam）一致；此外input的事件绑定函数的参数(this)也与之一致。以输入框为条件查询时，如果输入框输入值，则get方法的参数增加对于绑定的值
  • 1.2 input中v-model绑定的值不能直接使用后端给定的字段，会导致input组件的@change事件无法响应。
  • 1.3 v-model的变量可以通过点的方式获取,而prop的变量获取则不可。

2：elementUI组件

  • 2.1.0 table表格：在el-table-column中， scope可以获取当前行或列的所有数据信息
  • 2.1.1 table表格：在el-table组件绑定的data类型必须是数组，且el-table-column中的prop必须是data[x]对象的属性名对应，data需要绑定的服务器返回数据response.data的数据结构过于复杂，可不必转化
lr
<el-table :data="configPrice.data" border>
    <el-table-column type="index" v-if="false"></el-table-column>
    <el-table-column label="修改日期" prop="createTime" align="center" width="150"></el-table-column>
    <el-table-column label="企业工商信息比对" prop="content.orgPay.query" align="center" width="150"></el-table-column>
</el-table>
  • 2.2 所有需要验证的数据，用form进行包裹（el-form组价中的v-model绑定的变量都在aForm中定义）。el-form组件的model, ref, rules关系：(：model=”aForm”; ref=”aForm”; :rules=”aRules”)。Form-Item 组件里的元素绑定的数据：model=”aForm.xxx’的形式.data返回的 return 中，aRules：{ xxx:[{}, {}], xxxx:[{}, {}]}。

  • 2.3 关于多选框的验证[el-select]，当设置了prop属性时，且有validator的验证，则触发的条件需要加上change，无需设置@change事件

    productPriceType: [
                        { validator: checkType, trigger: 'blur,change' }
                  ]

3：服务器返回的数据处理

项目中对后端服务器返回的数据有许多地方需要处理。服务器返回的数据基本是json格式的

  • 1.1 当返回的json数据为字符串类型
例如：JSONstring 返回一下数据
{
"orgPay":{"query":"20.00","pay":"2.50"},
"orgPayZhiMa":{"check":"2.50"},
"bankauth":{"mobilecode":"0.05","bankauth":"0.95","bankauth3":"0.90"},
"facereco":{"ocr":"0.10","liveExamVSIDPhoto":"0.20","policeVSLiveExam":"1.70"},
"psnZhiMa":{"check":"2.00"},
"psnCheck":{"idInfoCheck":"0.85"},
"bizConfirm":{"bizCheck":"2.50"},
"telecomauth":{"telecomauth":"1.00"}}

前端需要把JSON类型的数据转换为js对象读取所有价格，这时，有两种解决方案
（一）：eval函数
var jsObj = eval( "(" + JSONstring + ")" )
方案说明：
    加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行将json数据转换为json对象。
    但是使用eval函数解析JSON是一种很不安全的方式，能不用最好就不用，原因是eval不但可以解析JSON字符串，还会执行其中的代码块（如果有的话）
（二）：JSON.parse()
方案说明：
    JSON.parse()可以把将JSON格式的字符串数据转换为 JavaScript 对象

4：返回服务器的数据

-1 可以参考请求回来的数据格式，

例如：put方法中对"content"字段的数据必须是***json格式的字符串***
let json = {"orgPay":{"query": priceForm.orgPay_query, "pay": priceForm.orgPay_pay },
            "orgPayZhiMa": {"check": priceForm.orgPayZhiMa_check },
            "bankauth": {"mobilecode": priceForm.bankauth_mobilecode, "bankauth": priceForm.bankauth_bankauth , "bankauth3": priceForm.bankauth_bankauth3 },
            "facereco": {"ocr": priceForm.facereco_ocr, "liveExamVSIDPhoto": priceForm.facereco_liveExamVSIDPhoto, "policeVSLiveExam": priceForm.facereco_policeVSLiveExam },
            "psnZhiMa": {"check": priceForm.psnZhiMa_check },
            "psnCheck": {"idInfoCheck": priceForm.psnCheck_idInfoCheck },
            "bizConfirm": {"bizCheck": priceForm.bizConfirm_bizCheck },
            "telecomauth": {"telecomauth": priceForm.telecomauth_telecomauth }
             };
let content  = JSON.stringify(json); ***JavaScript 对象转换为字符串。***

5：精度的控制

后端数据对精度的要求均在前端控制，即在验证时控制

  • 1：parseFloat(xx) 可解析一个字符串xx，并返回一个浮点数；第一个x必须是number
  • 2: xx.toFixed(2) 把数字转换为字符串，结果的小数点后有指定位数的数字

项目现有版本存在的一些疑惑

1.1 用户管理板块

分页样式：无法在首次刷新时显示所有页数。原因：后端数据返回存在误差

    原文作者：Bibiboomer
    原文地址: https://segmentfault.com/a/1190000012910134
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞