博客

前端笔记（一）

  • Post author:
  • Post category:其他


学习记录

前端

1.element UI

  • 首先需要搭建前端框架vue.js，百度搜索一堆，这里借鉴该博客搭建

    https://www.cnblogs.com/ganmy/p/6029774.html

  • http://element-cn.eleme.io/#/zh-CN/component/installation

    该网址为element UI官方组件，提供了各组件的使用方式，以及示例代码
  • 该项目自己用到的组件


  • el-form表单
     

    <el-form class="form" label-width="100px">
        <div class="searchForm">
          <el-form-item label="所属分公司：">
            <el-select v-model="selCompany" placeholder="请选择公司" class="size" >
              <el-option v-for="item in companyList" :key="item.value"
                         :label="item.company" :value="item.companyId"></el-option>
            </el-select>
          </el-form-item>
        </div>
</el-form>

    其中el-form为该表单，element-UI组件几乎都以el开头，class为该表单的样式，div盒子模型将下面的组件包含其中，el-form-item为一个文字标签显示文字,el-select为下拉列表，后面介绍 

    <form ref="exportEmpForm" :action="action" method="post">
        <input type="hidden" name="token" :value="token">
        <input type="hidden" name="data" value="employee"/>
</form>

    这也是表单，其中ref为表单对象名称，:action为表单提交地址，action前加了冒号则后面的地址为变量可以在js中设置，如果不加则是确定值，js中不可修改，其中该冒号用法可以应用于其他种类，如:display=”display”,在js中可以设置display为true或者false，如果不写冒号则display=”true”或者display=”false”，为一定值，input就不介绍了，文本框，type=”hidden”则为隐藏域，第一行传的值为token，登录验证用，第二行为我们要传递的数据，第一行的value则是变量，在JS中给值，第二行则为定值，为employee。

    表单提交方式：

    this.$refs.exportEmpForm.submit()


    下载必须用到表单提交方式


  • el-select下拉列表
     

<el-select v-model="selCustomer" placeholder="请选择客户" class="size":disabled="checkD">
      <el-option v-for="item in customerList" :key="item.value"
                 :label="item.customer" :value="item.customerId"></el-option>
</el-select>

下拉列表，其中v-model表示选中的值与el-option中的:value对应，下拉列表的所有内容为customerList，v-for则是循环该list，得到该list所有内容，：key则是该list中的键，：label为名称，：value为选择的值，其中需要在JS中定义v-model的值，初始化，以及customerList赋值内容


  • el-dialog
     
<el-dialog title="导出提示" v-model="outDialogVisable" align="left">
        <hr class="dialogHr"/>
        <div class="textAlign">
          <el-button type="primary"  @click="empTemplateDown" align="center">雇员模版下载</el-button>
        </div>
      </el-dialog>

el-dialog为提示框，v-model设置为true或者false可以设置该提示框是否可见，该提示框封装的很不错，自动给当前页加黑幕，然后动画呈现


  • el-upload
     
<el-upload
            :action="loadUrl"
            :on-success="empSuccess"
            :show-file-list="false"
            :data="postData" style="display: inline-block;">
            <el-button type="primary" class="el-button">雇员导入</el-button>
</el-upload>

上传文件组件，action为调用的后台地址，on-success为提交成功后的返回值，如果提交成功后需要返回值，则需要on-success得到后台返回值，不需要则不用，show-file-list为在提交按钮下呈现当前提交的内容，false则不呈现，data为需要传递过去的数据，该上传我主要用来导入表单所以需要数据以及返回值呈现提交后的表单数据，display: inline-block;将块级元素转行级元素


  • el-table
     
<div v-if="empTableVisable" key="empKey">
        <el-table  :data="empData.slice((employeeCurrentPage-1)*pageSize,employeeCurrentPage*pageSize)" border class="el-table"  key="companyKey">
          <el-table-column label="序号" fixed width="70" type="index" align="center"></el-table-column>
          <el-table-column prop="empName" fixed label="姓名" width="100" align="center"></el-table-column>
          </el-table>
          <el-table-column label="状态" align="center" width="100" fixed="right">
            <template scope="scope">{{scope.row.status | initStatus}}</template>
          </el-table-column>
</div>

v-if判断，设置true或者false可以让该组件可见或不可见：data为该表格的内容数据其中后面的slice则是实现了前台分页功能，通过改变employeeCurrentPage当前页的值改变data的数据量实现分页 el-table-column 中的fixed可以固定该表格列，其他列超出的可以实现滑动查看，prop属性则是该表格数据中的键值，根据键值得到内容，同时也可以利用template scope=”scope”当前行，用两个花括号scope.row.表格属性名可以获得值，后面的| initStatus则是过滤器，如将得到的1显示为成功；**key则指定该表格唯一，因为当时我隐藏一个表格显示第二个，第一个还是有杂乱的，运用key则可以解决该问题。


  • el-pagination
     
<el-pagination class="fenYe" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="employeeCurrentPage"
                       :page-sizes="[10,20,50,100]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
</el-pagination>

分页组件@size-change=”handleSizeChange”改变当前页显示的范围，如10条，20条，@current-change=”handleCurrentChange”改变页码数，:current-page=”employeeCurrentPage”当前呈现第几页，:page-sizes=”[10,20,50,100]”可供选择每页显示多少条， :page-size=”pageSize”默认每页显示多少条，

:total=”total”，很重要一条，为该数据量，一共有多少条数据，分页也是根据该数据进行分页

2.JS部分

  1. 导入js 
  import api from '../api/api'
  import global from '../common/global'

导入api以及global,由于前后端分离，所以前端代码调用后台代码则是利用该api.js调用后台。global定义了一些全局变量名，后台地址等。

2. 

export default{
    data: function () {
          return {
                data1: []
           }
    }

return中则是定义变量区域的地方，如上面的：后的值，v-model的值，v-if的值

3. 

methods: {
      templateDown () {
        this.outDialogVisable = true
      }
 }

methods则是编写方法区域的地方

4.js一些杂乱的点

  • 定义数组：data[]
  • 上传地址：


    loadUrl:global.Host+'/fssc/initialStageController/uploadEmpExcel',
  • 表单验证：

1.在表单中：el-from 加入 :rules=”rules” ref=”editCompany” ref的值与v-model的值相同

2.在js中，在定义变量区，即return块中加入


rules: {

pHouston: [{pattern: /^[0-9]+(.[0-9]{1,2})?$/, message: '请输入最多两位小数的金额(>=0)', trigger: 'blur'}],

pBenefits: [{pattern: /^[0-9]+(.[0-9]{1,2})?$/, message: '请输入最多两位小数的金额(>=0)', trigger: 'blur'}]

}


pHoston即为表格列的prop的值表示对该值进行校验，pattern: /^[0-9]+(.[0-9]{1,2})?$/为正则表达式，message表示校验不通过的提示信息,trigger:blur表示光标离开时就进行校验

点击按钮时第二次校验


@click="editEmpConfrimButton('editEmployee')"

括号中的值为ref的值，后台JS


editEmpConfrimButton (formName) {

this.$refs[formName].validate((valid) => {

if (valid) {

this.$message({

message: '修改成功',

type: 'success'

})

}

  • 获取当前行数据和下标


@click="editEmpButton(scope.$index,scope.row)"


scope.$index为当前行的下标，从0开始，scope.row则为当前行的数据

  • Object.assign({}, row)


this.editEmployee = Object.assign({}, row)


在编辑时输入改变的数据，表格中数据不会改动，利用该行代码则能够实现，将行内数据复制带一个新的空间

  • 分页Js 
handleSizeChange (val) {
        this.pageSize = val//改变当前页显示内容条数
      },
      handleCurrentChange (val) {
        this.employeeCurrentPage = val//改变页码数
      },
  }
  • 一些杂项

js判断json是否包含某个键


res.data[0].hasOwnProperty('empName')

js中数组去重，利用hashTable高效去重

高效去重链接

js遍历json

`for (var o in this.editEmployee) {

if (this.editEmployee[o] === null || this.editEmployee[o] === ”) {

this.editEmployee[o] = ‘0’

}

数组添加数据data.push();

一些消息提示参见element组件官网

三元运算


var a = _this.selCompany === '' || _this.selCompany === null ? true : _this.selCompany === params[i].companyId


a ? b : c 当a为真时则执行b否则执行c
这里写图片描述

  • 表单提交对象方法


this.$refs.exportErrorForm.errorData.value= JSON.stringify(_this.errorData)


该数据在后台为 List<Map<String,Object>> 而前台表单无法提交对象，利用此将对象转换成JSON字符串，到后台再将该字符串转换成List，不过只能转成List<Map>，不能识别Map中的对象类型

  • 一个思路

查找，利用两个下拉框内容，两个文本框内容查找数据，如果填了一项就根据一项查，填几项就根据几项查，常规需要判断这四项是否为空，再从不为空的中查找是否存在，需要很繁琐的代码，而利用三元运算就可以一步到位，直接定义4个boolean类型变量，第一个表达式判别是否为空，第二个默认为true，第三个为判断是否存在，最后直接判断这4个boolean类型变量是否为真，为真则查到该数据


版权声明：本文为jckeli原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。