【SpringCloud实战开发总结】

1、Vue——开启Watch监听

1. watch功能
watch：响应数据的变化，，如果需要在声明的时候就响应执行监听函数，使用handler属性，并且需要让immediate为true，如果要监听对象里面的属性的变化，需要让deep为true。

2. 基本用法——属性监听
最简单的用法就是，在开发过程中，一个属性的值需要和另一个绑定，我就遇到过，只不过这两个属性分属于不同的对象中。下面的例子中，我将name的值和fileName通过监听绑定在一起 ，只要在输入框中输入文件名，姓名也随之改变。

  <div>
         <FormItem label="文件名:">
            <input type="text
           "v-model="firstName">
         </FormItem>
</div>
      
<div>
     <span>姓名：{
    
    {
    
    name}} </span
<div>

data:{
    
    
  fileName:'',
  name:''
},

watch:{
    
    
   'fileName' :{
    
    
       immediate: true,
       handler (curVal,olaVal){
    
    
       		if(curVal){
    
    
//当fileName被监听时，如果fileName改变，这里可以执行操作。
//例如，将fileName赋值给name
				this.name = curVal
       		}
       }
   }
}

3. handler方法和immediate属性
immediate可以加也可以不加，看需求。你刚进入某一个页面要输入信息了，你需不需要让你监听的方法在刷新页面时就执行watch监听，就靠immediate属性。如果页面刷新时，你用不着监听，那就去掉这个属性，如果你刷新页面的时候就需要监听，这个属性就加上。
所以，immediate属性，加上，绑定时第一次就会执行，不加上，绑定时，第一次不执行。
而绑定immediate属性后，一旦被监听的属性产生变化，就会执行handler方法。

4. 深入监听——对象监听
开发过程中，往往不是单一的属性，而是对象中属性的变化，用法都大同小异，主要是注意deep属性的使用，deep一般不会使用，因为监听太频繁，页面刷新频率太高。

5. 对象赋值
默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到，比如我们在 mounted事件钩子函数中对obj进行重新赋值：

mounted: {
    
    
  this.obj = {
    
    
    a: '456'
  }
}

6. 那么我们需要监听obj里的属性a的值呢？这时候deep属性就派上用场了:

watch: {
    
    
  obj: {
    
    
    handler(newName, oldName) {
    
    
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
}

7. 这样的方法对性能影响很大，修改obj里面任何一个属性都会触发这个监听器里的 handler。我们可以做如下处理：

 watch: {
    
    
  'obj.a': {
    
    
    handler(newName, oldName) {
    
    
      console.log('obj.a changed');
    },
    immediate: true,
    // deep: true
  }
}

2、@on-blur

1、使用@on-blur，当失去焦点时，触发事件
失去焦点，就是当鼠标的光标从输入框中离开的时候触发的方法。方法在’methods’中，可以用于校验、赋值、计算等等操作。

3、:disabled

:disabled属性是用来控制，输入框或者选择框等是否可编辑，它的属性本身是布尔类型。当为false时，可编辑，当为true时，不可编辑。
注意：当在html的input中使用这个属性时，input标签中的值无法传递给后端。

可以使用readonly=“readonly”，这个属性也是防止用户修改标签中的值。并且在html中可以将值传递回后端。

4、InputNumber标签中的:max和:min

:max="输入最大值"：允许输入的最大值
:min="输入最小值"：允许输入的最小值

5、Select标签用于模糊查询

使用filterable标签即可。

	<template>
    <Row :gutter="24">
        <Col span="12">
            <Select v-model="model" filterable>
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{
    
    {
    
     item.label }}</Option>
            </Select>
        </Col>
        <Col span="12">
            <Select v-model="model1" filterable multiple>
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{
    
    {
    
     item.label }}</Option>
            </Select>
        </Col>
    </Row>
</template>
<script>
    export default {
    
    
        data () {
    
    
            return {
    
    
                cityList: [
                    {
    
    
                        value: 'New York',
                        label: 'New York'
                    },
                    {
    
    
                        value: 'London',
                        label: 'London'
                    },
                    {
    
    
                        value: 'Sydney',
                        label: 'Sydney'
                    },
                    {
    
    
                        value: 'Ottawa',
                        label: 'Ottawa'
                    },
                    {
    
    
                        value: 'Paris',
                        label: 'Paris'
                    },
                    {
    
    
                        value: 'Canberra',
                        label: 'Canberra'
                    }
                ],
                model: '',
                model1: []
            }
        }
    }
</script>

效果：

6、强制渲染的三种方法

1、Vue.set(Object,key,value)
this.$set(Object,key,value)
例子：想给 this.product.name 赋值 保险
this.$set(this.product, name, '保险')

2、this.$forceUpdate()

3、推荐使用
this.$nextTick(()=>{
    //修改数据参数
    this.chartIsShow = true
})

7、增加下拉框宽度

使用下拉框标签时，使用该样式可以让下拉框不局限于输入框的宽度。
使用场景，下拉框中的值的长度远远大于下拉框的长度。

.expand-select .ivu-select .ivu-select-dropdown {
    
    
  width: 400px !important;
}

8、vue前端校验

1、:rules=“formRules”：formRules是后续我们自己编写的规则的名称；
2、ref=“rulesForm”：获取整体表单的数据保存在rulesForm，用于校验整体表单做准备；
3、:model="rulesForm：这个是JS处定义的变量，将Form标签控件与rulesForm的json变量绑定

<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item label="银行卡号:" prop="accountNumber">
       <el-input v-model="rulesForm.accountNumber" style="width:300px" maxlength="19"/>
    </el-form-item>
</el-form>

4、申明表单中单项的属性prop，prop与v-model中绑定的是对应的。prop是必填的，我们定义的校验规则通过prop属性来绑定。

<el-form-item label="用户名称:" prop="userName">
    <el-input v-model="rulesForm.userName" style="width:300px" maxlength="50"/>
  </el-form-item>

5、编写规则，其中userName的规则，就对应前面属性prop="userName"那个表项，对userName表项的校验规则为：必须输入；若为输入显示“请输入用户名称”；当失去焦点时验证执行，失去焦点和@on-blur的性质一样。

 formRules: {
    
    
            accountNumber: [
                    {
    
    required: true,validator: validatorAccountNumber,trigger: "blur"}
                ]
            }

6、自己定义一个检验方法，然后引入使用

 data () {
    
    
  const numberNormalValidate = (rule, value, callback) => {
    
    
        if(value){
    
    
          if(!NumberUtil.isNumber(value)){
    
    
            return callback(new Error('只能输入数字!'));
          }else{
    
    
            if(value<0){
    
    
              return callback(new Error('只能输入正数!'));
            }
            if(value.length>12){
    
    
              return callback(new Error('不能到达万亿！'));
            }
          }
        }
      };
 
  const rateValidate = (rule, value, callback) => {
    
    
        if(value){
    
    
          if(!NumberUtil.isNumber(value)){
    
    
            return callback(new Error('费率只能输入数字!'));
          }else{
    
    
            if(value<=0){
    
    
              return callback(new Error('费率只能输入正数!'));
            }
            if(value>=1000){
    
    
              return callback(new Error('费率不能到达千分位！'));
            }
          }
        }
      };
 }

7、多个校验

<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="手机号"  prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
        <el-form-item label="身份证号"  prop="idNumber">
        <el-input v-model="ruleForm.idNumber"></el-input>
      </el-form-item>
        <el-form-item label="邮箱"  prop="email">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>



<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      ruleForm: {
    
    
        phone: "",
        email: "",
        idNumber: "",
      },
      rules: {
    
    
        phone: [
          {
    
     required: true, message: "请输入手机号", trigger: "blur" },
          // 这个只能验证手机号
          // { pattern:/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: "请输入合法手机号", trigger: "blur" }
          {
    
     pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号/电话号", trigger: "blur" }
        ],
        idNumber: [
         {
    
     required: true, message: "请输入身份证号", trigger: "blur" },
          {
    
     pattern:/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: "请输入合法身份证号", trigger: "blur"}
        ],
          email: [
         {
    
     required: true, message: "请输入邮箱", trigger: "blur" },
          {
    
     pattern:/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g, message: "请输入正确的邮箱", trigger: "blur"}
        ],
      }
    };
  },
  methods: {
    
    
    submitForm(formphone) {
    
    
      this.$refs[formphone].validate(valid => {
    
    
        if (valid) {
    
    
          alert("submit!");
        } else {
    
    
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formphone) {
    
    
      this.$refs[formphone].resetFields();
    }
  }
};

9、:maxLength的使用限制

限制长度可以使用 :maxlength=“输入的value的长度”,但是标签中必须要加上type=“text”，
InputNumber标签无法使用maxLength属性。

10、前端校验的两种方式

第一种：

<Form ref="account" :model="prpAccount" :rules="rules" :label-width="150" class="whitebox" :name="formName">
 <div class="ivu-col-span-8">
          <FormItem label="收款方手机号码：" prop="phone" required>
            <Input v-model="prpAccount.phone" :maxlength="11"
            />
          </FormItem>
        </div>
</Form>

data () {
    
    
      return {
    
    
	    prpAccount:{
    
    
		  phone
		},
        rules: {
    
    
          phone:{
    
    required: true, trigger: 'blur', pattern: /^[1-9][0-9]{10}$/, message: '请录入正确的手机号'},
        },

第二种：

<Form ref="account" :model="prpAccount" :rules="rules" :label-width="150" class="whitebox" :name="formName">
 <div class="ivu-col-span-8">
          <FormItem label="收款方手机号码：" prop="phone" required>
            <Input v-model="prpAccount.phone" :maxlength="11"
            />
          </FormItem>
        </div>
</Form>	

//引用
import {
    
    prpAccountRule} from 'pages/endorse/validator/endorseRule'		
		
data () {
    
    
      return {
    
    
        rules: prpAccountRule,
      }

Rule.js

export const prpAccountRule={
    
    
  accountName:{
    
    required: true, trigger: 'blur', message:'收款方户名不能为空'},
  accountNo:{
    
    required: true, trigger: 'blur', message:'收款方账号不能为空'},
  identifyType:{
    
    required: true, trigger: 'blur', message:'收款方证件类型不能为空'},
  identifyNumber:{
    
    required: true, trigger: 'blur', message:'收款方证件号码不能为空'},
  province:{
    
    required: true, trigger: 'blur', message:'收款方开户行归属省/直辖市不能为空'},
  city:{
    
    required: true, trigger: 'blur', message:'收款方开户行归属市不能为空'},
  bankOutlets:{
    
    required: true, trigger: 'blur', message:'网点名称不能为空'},
  bankNumber:{
    
    required: true, trigger: 'blur', message:'收款方银行行号不能为空'},
  priorityFlag:{
    
    required: true, trigger: 'blur', message:'转账汇款模式不能为空'},
  /**
  *pattern可以引用Rugular中的正则表达式
  */
  phone:{
    
    required: true, trigger: 'blur',pattern: Regular.MobilePhone, message:'请录入正确的手机号'},
  bankName:{
    
    required: true, trigger: 'blur', message:'收款方开户行名称'},
  bankType:{
    
    required: true, trigger: 'blur', message:'收款方开户行类型'},
}

//手机号最新正则表达式：

/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/

===================================================

Regular.js

export default {
    
    
  PostCode: /^[1-9][0-9]{5}$/, // 邮编
  Email: /[\w-]+@{1}[\w-]+\.{1}\w{2,4}(\.{0,1}\w{2}){0,1}/ig, // 电子邮箱
  Hour: /^(0?[1-9]|1[0-9]|2[0-4])$/, // 小时
  PhoneNumber: /^1[3456789]\d{9}$/, // 电话
  TelNo: /(^1\d{10}$)|(^\d{3,4}-\d{7,8}$)/,
  // TelNo: /((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/, // 座机号码
  Number: /^[0-9]*$/,
  Number_1_100: /^(0|\d{1,2}|100)$/,
  Number2: /^\d+(\.\d{1,2})?$/,
  Number3: /^\d+(\.\d{1,3})?$/,
  Number4: /^(0|-?[0-9]\d*)+(\.\d{1,2})?$/,
  NumberJudge: /^[0-9]+([.]{1}[0-9]{1,2})?$/,//判断非负数并且最多两位小数
  RunMiles: /^\d{1,7}(\.\d{1,2})?$/,
  NumberAndEnglish: /^[0-9a-zA-Z]*$/,
  EngineNo: /^[0-9a-zA-Z\-\s]*$/,
  NoChinese: /^[^\u4e00-\u9fa5]*$/,  // 非中文
  MobilePhone: /^[1-9][0-9]{10}$/,  // 手机
  Phone:/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,  //最新手机号正则表达式
  AccountNo: /^[0-9a-zA-Z]*$/,    // 数字或字母
  Date: /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/,   // 日期
  Money: /^(-?(0|[1-9][0-9]{0,8})([.][0-9]{1,2})?)?$/,    // 货币类型
  PositiveMoney: /^((0|[1-9][0-9]{0,8})([.][0-9]{1,2})?)$/,    // 货币类型
  CarNo: /(^[\u4e00-\u9fa5]{1}[A-Z0-9]{5,10}[\u4e00-\u9fa5]?$)|(^WJ[A-Z0-9]{4,9}[\u4e00-\u9fa5]?$)/, // 车牌号,
  // CarNo: /(^[\u4e00-\u9fa5]{1}[A-Z0-9]{5,10}$)|(^WJ[0-9]{4,9}$)/, // 车牌号,
  CarNoL: /^[A-Z0-9]{5,10}\u9886$/, // 领馆车牌号,
  CarNoLM: /^[A-Z0-9]{1}\u9886[A-Z0-9]{4,9}$/, // 领馆摩托车牌号,
  // CarNoL: /([\u4e00-\u9fa5A-Z0-9]{4,9}\u9886$)/, // 领馆车牌号,
  // CarNoLM: /([\u4e00-\u9fa5A-Z0-9]{1}\u9886[\u4e00-\u9fa5A-Z0-9]{3,8})/, // 领馆摩托车牌号,
  CarNoS: /((^\u4f7f[A-Z0-9]{4,9}$)|(^[A-Z0-9]{4,9}\u4f7f$))/, // 使车牌号,
  Percentage: /^100$|^(\d|[1-9]\d)(\.\d+)*$/,   // 百分率
  IdentifyNumber: IdentifyNumberRegex,
  NoEmpty: /\S/,
  Money2:  /^([0-9]{1,9}|[0-9]{1,9}\.[0-9]{1,2})$/,
  Money3: /^\d{1,9}$|^\d{1,9}[.]\d{1,2}$/,// 小数点前最多9位小数点后最多只有两位而且不为负数
}

11、hashMap使用put方法导致空指针异常

1、HashMap<String , String> hashMap=null 或者 private HashMap<String ,String>
2、没有分配内存空间，直接往里面put会导致空指针异常。
3、申明方法：HashMap<String , String> hashMap=new HashMap<>();

12、遇到空指针异常的解决办法

1、定位到NullPointException位置，一般是缺少空的判断。

2、判断是否为空，可以使用!Null,或者isEmpty。

3、对象可以用！null

4、数组，集合，对象中的元素可以用isEmpty，也就是说，需要数组，集合，以及对象本身不是null。如果他们本身就是空的，那么使用!null

5、xx.equals(yy) 使用时，xx为常量，yy为变量，可以有效防止空指针异常。

6、传参时，一定要判断参数是否有值，所以多使用if语句，多判断数据是否为空。

总结：假如一个容器，null是用来判断有没有这个容器，而isEmpty是有这个容器，来判断这个容器中的内容有没有东西，是不是空的！例如，通过debug，发现有itemList这个数组，但是itemList.length = 0，则表示有itemList，但是其中没有数据。

13、关于前端图片加载不出来的解决办法

1、在路径前加上 ~@
例如：src="~@/images/logo-nt.png"

14、数字保留两位小数

使用 xx.doubleValue()

15、常用方法（charAt、continue、indexOf()、push、splice）

1、 charAt: charAt()返回指定索引处的字符。

2、continue语句的作用是跳过本次循环体中余下尚未执行的语句，立即进行下一次的循环条件判定，可以理解为仅结束本次循环。 *continue 在剔除多余元素的用法： 使用while循环，在使用if语句，将不需要的数据剔除。

3、indexOf()方法： 某个元素在数组中首次出现位置的下标。 某个字符在字符串中首次出现位置的下标 obj[] obj.indexOf(find):find元素在obj中首次出现的位置的下标。 obj.indexOf(find,start):find元素从下标为start的位置开始，在obj中首次出现的位置的下标。 find：要查找的元素，必须选。 start:开始位置，根据需要使用。

4、new Number(num).toLocaleString()可以将不是数字的数值变成0

5、push()方法：表示在数组后添加元素。 arrayObject.push(newelement1,newelement2,....,newelementX) 可以添加一个或多个元素。

splice（）方法：向数组中添加或移除新的项。使用这个方法会改变数组原来的结构
splice(index,howmany,itemX)
这个方法可以传递一个参数、两个参数、三个参数：
 	传递一个参数的时候表示从这个参数的位置开始一直截取到最后
    var arr = [2,4,6,7,8,9]; 
    console.log(arr);//[2,4,6,7,8,9]
    var n = arr.splice(2);//参数为2表示从索引下标为2的位置开始一直截取到数组的最后；
    console.log(n);//[6,7,8,9]//splice（）返回的是截取到的数组
    console.log(arr);//[2,4]//原来的数组结构发生改变，为splice截取之后剩下的数组

 	传递两个参数，第一个参数表示开始的位置，第二个参数表示要删除的个数；如果第二个参数为0，则表示不删除，返回的空数组，原来的数组不变
    var arr = [2,4,6,7,8,9]; 
    console.log(arr);//[2,4,6,7,8,9]
    var n = arr.splice(2,3);//表示从下标位置为2开始删除3个数
    console.log(n);//[6, 7, 8]
    console.log(arr);//[2,4,9]

	传递三个数组的时候

    var arr = [2,4,6,7,8,9]; 
    console.log(arr);//[2,4,6,7,8,9]
    var n = arr.splice(2,0,5);//表示在下标为2的位置，截取0个数组，在下标为2的位置添加一个新项
    console.log(n);//[]
    console.log(arr);//[2, 4, 5, 6, 7, 8, 9]

    当第二个参数不为0的时候

    var arr = [2,4,6,7,8,9]; 
    console.log(arr);//[2,4,6,7,8,9]
    var n = arr.splice(2,3,5);//表示从下标为2的位置开始，删除3个项，在下标为2的位置添加一个数字为5的新项
    console.log(n);//[6, 7, 8]
    console.log(arr);//[2, 4, 5, 9]

16、获取路由

http://localhost:9999/module/product.html#/productEdit?riskCode=3126&inputEditType=05&queryBusinessNo=931261914400000000041&familyNo=
用 windes.location.href 获取路由中的路径

17、IDEA启动失败——端口号被占用

1、先把端口对应的进程杀掉

2、打开cmd

3、输入 netstat -ano|findstr 9031

4、找到pid号 , taskkill /pid xxx /f 就可以了

18、IDEA断点打得太多会导致程序启动失败

如果你在debug模式下启动程序，但是你打的断点太多，导致程序启动失败。但是又不知道断点打在哪里了，可以通过下面的方法取消断点。

如图，上面那个交叉的双红点，点进去后可以直接看到你打了多少断点，可以在里面取消打的断点。
下面那个红点，你点一下颜色会变，表示忽视所有你打的断点，再点一下后又可以恢复所有断点。

19、如果有新的内容，会继续更新…