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

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

时间：2022-07-08 21:31:33

第一步：工具的介绍

工欲善其事必先利其器，所以首先先总结一下这个项目中的使用到的工具，主要是对自己不熟悉也是第一次接触的一些东西的总结，这些工具大概分成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="Pay.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": Pay_query, "pay": Pay_pay },"orgPayZhiMa": {"check": PayZhiMa_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 对象转换为字符串。***