基于Vue+ElementUI的后台管理系统开发的总结
第一步:工具的介绍
工欲善其事必先利其器,所以首先先总结一下这个项目中的使用到的工具,主要是对自己不熟悉也是第一次接触的一些东西的总结,这些工具大概分成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 用户管理板块
分页样式:无法在首次刷新时显示所有页数。原因:后端数据返回存在误差
基于Vue+ElementUI的后台管理系统开发的总结相关推荐
- vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇1】
项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了vue+element-ui JYAdmin 后台管理系统模板-集成方案,从零到一的手写搭建全过程. ...
- Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板 技术:Vue + Element-ui 功能:后台管理系统基础模板,路由配置,加载页面进度条,请求响应拦截器的封装等 页面预览: ...
- element ui 前台模板_SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(二):引入 element-ui 定义基本页面显示...
前提: (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y ...
- 完整企业官网源码,前端基于Vue+ElementUI,后台基于基于core3 webapi,含数据库文件,含详情安装部署文档
完整企业官网源码,前端基于Vue+ElementUI,后台基于基于core3 webapi,含数据库文件,含详情安装部署文档 完整代码下载地址:完整企业官网源码 某工程管理有限公司企业官网 前端 新版 ...
- SpringBoot+Vue+ElementUI实现后台管理系统
前言 今天学习了如何搭建一个后台管理系统,因此打算记录并总结一下今天的学习内容. 该项目是一个非常好用的后台管理系统模板,代码比较简单,项目功能比较通用,总之就是很推荐初学者学习. 项目的大体项目框架 ...
- 基于vue + element 的后台管理系统
该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发.基于vue.js,使用vue-cli@3.2.3脚手架快速生成项目目录,引用Elem ...
- Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境 配置环境
项目介绍 使用 vue 以及 element-ui 搭建一个 后台管理系统的模板. 纯属练手(写的比较糙 望指点) 基本环境搭建 初始化项目 使用 vue 以及 element-ui 搭建一个 后台管 ...
- Vue + Element-ui实现后台管理系统---项目搭建 + ⾸⻚布局实现
目录:导读 项目搭建 + ⾸⻚布局实现 一.项目搭建 1.环境搭建 2.项目初期搭建 二.Main.vue 三.左侧栏部分(CommonAside.vue) 四.header部分(CommonHead ...
- 基于Vue.js的后台管理系统组件开发
什么是Vue Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合. ...
最新文章
- 宜信开源|数据库审核软件Themis的规则解析与部署攻略
- jvm有哪些内存区域
- Windows XP中防火墙后如何实现共享(图)
- LeetCode -- 204. Count Primes
- 【转】ubuntu 开机sudo启动应用程序
- LeetCode 380. 常数时间插入、删除和获取随机元素(哈希+vector)
- java 上传图片后没法立马显示出来_SpringMVC多个文件上传及上传后立即显示图片功能...
- IoT 爆发前夕,企业架构要面对哪些变革
- 如何做相册_我是如何对2000张照片进行批量套版的
- chap6_1 Sphere Environmental mapping in OGRE
- ArrayList源码剖析
- Grafana v5.2 设置
- 高一信息技术认识计算机网络课件,中图版高中信息技术认识计算机网络课件.pptx...
- 纸张大小、规格、度量详解
- java j2ee j2se_Java EE / J2EE与J2SE / JDK版本之间的关联
- ubuntu下的beyond compare破解
- 知道做到 - 分享三
- 电脑桌面便签提醒事项到期后怎么清除时间设置?
- xx省驾驶员信用评分模型
- 如何使用数字万用表检测电缆电线的断点