前端技术栈 工作实用目录

一 前端技术栈实录（不断更新）

（一）vue

主要方法收集

1，获取当前时间的方法

//2021-11-22 2021/11/22 2021年11月22日都可
dateTime( ) {
        var date = new Date( )
        var seperator1 = '-'		            //做格式化处理
        var year = date.getFullYear( )		    //返回年
        var month = date.getMonth( ) + 1		//返回月
        var strDate = date.getDate( )			//返回日期
        var hh=date.getHours()					//显示小时
		var mm=date.getMinutes()		        //显示分钟
		var sss=date.getMilliseconds()			//毫秒
		var ss=date.getSeconds()			    //显示秒
		var tt=Math.floor((date.getMonth() + 3) / 3)			//季度
        if ( month >= 1 && month <= 9 ) {		                //做判断，如果不是两位数在前面加个0
          month = '0' + month
        }
        if ( strDate >= 0 && strDate <= 9 ) {
          strDate = '0' + strDate
        }
        this.currentdate = year + seperator1 + month + seperator1 + strDate
        this.currentdateYear = year
},

获取周期的方式
现在data中定义一个数组，以及一个变量

weeks: {
				  "0":'星期日',
				  "1":'星期一',
				  "2":'星期二',
				  "3":'星期三',
				  "4":'星期四',
				  "5":'星期五',
				  "6":'星期六',
				},
				currentWeeks:'',
				

因为getDay（）这个函数返回的是数字下标，以0开始，所以 还需要我们在其一个方法如下

dataDateChange(){
			  let date = new Date();
			  let weekIndex = date.getDay();
			  this.currentWeeks=this.weeks[weekIndex]
			  console.log("this.currentWeeks=======",this.currentWeeks)
			  
			},

如上图所示，weekIndex对应的即为星期一

2，日期格式化（根据返回的时间戳）

var time = new Date(val);
      function timeAdd0(str) {
        if (str < 10) {
          str = "0" + str;
        }
        return str;
      }
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();//获取当前小时数(0-23)
      var m = time.getMinutes();//获取当前分钟数(0-59)
      var s = time.getSeconds();//获取当前秒数(0-59)
      console.log("val",val);
      if(val==this.detail.updateDate){
        return y + "." + timeAdd0(m) + "." + timeAdd0(d) + " "+timeAdd0(h)+":"+timeAdd0(m)+":"+timeAdd0(s);
      }
      return y + "." + timeAdd0(m) + "." + timeAdd0(d) + " ";

3，表格分页

//html
<el-pagination v-if="serviceDynamicsValue.length!=0" class="pageSize" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]" :page-size="10"
        layout="sizes, prev, pager, next" :total="total">
 </el-pagination>
 //script
 handleSizeChange( val ) {
   this.personalNum = '1'
   this.personalSize = val
   this.serviceDynamicsM( )
},
 //分页页数 
handleCurrentChange( val ) {
  this.personalNum = val		//改变页签
  this.serviceDynamicsM( )		//调用数据展示
},

图片效果

1 2 3 4代表personalNum 条/页的数字代表personalSize

4，axios模板调用结构

this.$axios( {
          method: 'delete',												//方法
          url: '/gzhgoa/branchDutyDynamics/' + value[ index ].id,		//地址
          headers: {													//头部参数
            isToken: 'false',											//token状态
            'TENANT-ID': '1',											
            'Authorization': 'Bearer ' + window.sessionStorage.getItem( "access_token" )
          },
        } ).then( res => {												
            //调用成功后进行的操作         
		}).catch(res=>{
			//调用失败后进行的操作
		});

5，拖拽配置指令（含禁止拖拽）

import Vue from 'vue';
//使用Vue.directive()定义一个全局指令
//1.参数一：指令的名称，定义时指令前面不需要写v-
//2.参数二：是一个对象，该对象中有相关的操作函数
//3.在调用的时候必须写v-
const drag = Vue.directive('drag', {
    //1.指令绑定到元素上回立刻执行bind函数，只执行一次
    //2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象
    //3.通过el.focus()是无法获取焦点的，因为只有插入DOM后才生效
    bind: function (el) { },
    //inserted表示一个元素，插入到DOM中会执行inserted函数，只触发一次
    inserted: function (el) {
        el.onmousedown = function (e) {
            var disx = e.pageX - el.offsetLeft;
            var disy = e.pageY - el.offsetTop;
            
            document.onmousemove = function (e) {
                el.style.left = e.pageX - disx + 'px';
                el.style.top = e.pageY - disy + 'px';
            }
            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;
            }
        }
    },
    //当VNode更新的时候会执行updated，可以触发多次
    updated: function (el) { }
})


export default drag;

然后再到需要用拖拽的地方，使用v-drag指令即可，在配置一个另外的文件，在不需要使用的地方用v-stopDrag指令即可。
注：两个文件，都需要在main.js中引入才可以使用

import Vue from 'vue';
const stopDrag = Vue.directive('stopDrag', {
    inserted: function(el, binding, vnode) {
        let element = el;
        element.onmousedown = function(e) {
            e.stopPropagation()
        }
    }
})
export default stopDrag;

6，根据两个日期判断相差天数

配置在任意js文件中，需要引入的时候导包即可使用

/**
 * 根据两个日期，判断相差天数
 * @param bdate 开始日期 如：2016-11-01
 * @param edate 结束日期 如：2016-11-02
 * @returns {number} 返回相差天数
 */
export function daysBetween(bdate, edate) {
  let oneDayMillisecond = 86400000 // 一天毫秒数
  let bdateMillisecond = new Date(bdate).getTime()
  let edateMillisecond = new Date(edate).getTime()
  let diffMillisecond = edateMillisecond - bdateMillisecond
  let diffDays = Math.floor(Math.abs(diffMillisecond / oneDayMillisecond))
  let date_arr = []

  for (let index = 0; index <= diffDays; index++) {
    let new_date = dayjs(bdateMillisecond + oneDayMillisecond * index).format('YYYY-MM-DD')
    date_arr.push(new_date)
  }
  // console.log('生成两个起止日期之间的日期数组',date_arr)
  return date_arr
}

7，请假时长计算

规则，去除午休时间，法定放假时间，公司规定相关假期时间

/**
 * 计算请假时长
 * @param {Object} beginTime    开始时间  '2020-09-07 07:00:00'
 * @param {Object} endTime      结束时间
 * @param {Object} stWorkTime   上班时间
 * @param {Object} enWrokTime   下班时间
 * @param {Object} isFreeTime  是否要去除午休工作时长
 * @param {Object} freeTimeMon  午休开始时间
 * @param {Object} freeTimeAft  午休结束时间
 * @param { Array } fillterDatas 节假日日期
 * @param { String } dateType 请假类型 如果为产假陪产假，不排除节假日与周末
 *
 */
export function getLeave(beginTime, endTime, stWorkTime, enWrokTime, isFreeTime, freeTimeMon, freeTimeAft, fillterDatas, dateType) {
  var days
  var hours
  var date
  var freeTime = freeTimeAft - freeTimeMon

  // beginTime = beginTime.replace(/-/g, '/');
  var beginArr = beginTime.split(' ')
  // var beginMonth = parseInt(beginArr[0].split('-')[1])
  // var beginDay = parseInt(beginArr[0].split('-')[2])
  var beginHours = parseInt(beginArr[1].split(':')[0])
  var beginMin = parseInt(beginArr[1].split(':')[1])
  var beginHoursMin = beginHours + beginMin / 60

  // endTime = endTime.replace(/-/g, '/');
  var endArr = endTime.split(' ')
  // var endMonth = parseInt(endArr[0].split('-')[1])
  // var endDay = parseInt(endArr[0].split('-')[2])
  var endHours = parseInt(endArr[1].split(':')[0])
  var endMin = parseInt(endArr[1].split(':')[1])
  var endHoursMin = endHours + endMin / 60

  // 如果beginHoursMin时间小于上班时间都算上班时间
  if (beginHoursMin <= stWorkTime) {
    beginHoursMin = stWorkTime
  }
  // 如果endHoursMin时间大于上班时间都算下班时间
  if (endHoursMin >= enWrokTime) {
    endHoursMin = enWrokTime
  }
  // 如果endHoursMin时间小于上班时间都算下班时间
  if (endHoursMin <= stWorkTime) {
    endHoursMin = stWorkTime
  }
  // 如果结束时间在freeTimeMon和freeTimeAft之间都算freeTimeMon
  if (isFreeTime === true) {
    if (endHoursMin >= freeTimeMon && endHoursMin <= freeTimeAft) {
      endHoursMin = freeTimeMon
    }
  }

  // 获取结束时间-开始时间的天数
  var daysBetweenlist = daysBetween(beginTime, endTime)
  let effectiveLeaveDate

  if (dateType === 5 || dateType === 7 || dateType === 8 || dateType === 9) {
    effectiveLeaveDate = daysBetweenlist
  } else {
    effectiveLeaveDate = daysBetweenlist.filter(date => !fillterDatas.includes(date)).filter(date => (new Date(date).getDay() !== 6 && new Date(date).getDay() !== 0))
  }

  if (beginTime > endTime) {
    // Vue.prototype.$Message.warning({
    //   content: '开始时间需小于结束时间',
    //   duration: 3
    // })
    // Vue.prototype.$confirm('开始时间需小于结束时间111', '警告', {
    //   confirmButtonText: '确定',
    //   cancelButtonText: '取消',
    //   type: 'warning'
    // })
    return false
  }

  if (!effectiveLeaveDate.includes(beginTime.split(' ')[0])) {
    // Vue.prototype.$Message.warning({
    //   content: '调休开始、结束时间需在工作日，请您重新选择',
    //   duration: 3
    // })
    // alert('调休开始、结束时间需在工作日，请您重新选择')

    return false
  }
  if (effectiveLeaveDate.length > 0) {
    var daysBetweenLen = effectiveLeaveDate.length
    // 午休
    if (isFreeTime === true) {
      var hour = enWrokTime - stWorkTime - freeTime
      if (daysBetweenLen === 1) {
        // 同一天
        if (endHoursMin - freeTimeAft > 0 && beginHoursMin <= freeTimeMon) {
          hours = (endHoursMin) - (beginHoursMin) - freeTime
        } else {
          hours = (endHoursMin) - (beginHoursMin)
        }
      } else if (daysBetweenLen === 2) {
        // 跨一天
        // 第一天的时长
        hours = enWrokTime - beginHoursMin
        // 是否有午休
        if (beginHoursMin <= freeTimeMon) { hours = hours - freeTime }
        // 第二天的时长
        hours += endHoursMin - stWorkTime
        // 是否有午休
        if (endHoursMin >= freeTimeAft) { hours = hours - freeTime }
      } else {
        // 跨两天以上
        // 第一天的时长
        hours = enWrokTime - beginHoursMin
        // 是否有午休
        if (beginHoursMin <= freeTimeMon) { hours = hours - freeTime }
        // 中间时长
        hours += (daysBetweenLen - 2) * (hour)
        // 最后一天时长
        hours += endHoursMin - stWorkTime
        // 是否有午休
        if (endHoursMin >= freeTimeAft) { hours = hours - freeTime }
      }
      days = Math.floor(hours / hour)
      hours = hours % hour
      date = {
        'days': days,
        'hours': hours
      }
      // date = days * 24 + hours
    } else {
      // 非午休
      hour = enWrokTime - stWorkTime
      if (daysBetweenLen === 1) {
        // 同一天
        hours = (endHoursMin) - (beginHoursMin)
      } else if (daysBetweenLen === 2) {
        // 跨一天
        hours = enWrokTime - beginHoursMin
        // 第二天的时长
        hours += endHoursMin - stWorkTime
      } else {
        // 跨两天以上
        // 第一天的时长
        hours = enWrokTime - beginHoursMin
        // 中间时长
        hours += (daysBetweenLen - 2) * (hour)
        // 最后一天时长
        hours += endHoursMin - stWorkTime
      }
      days = Math.floor(hours / hour)
      hours = hours % hour
      date = {
        'days': days,
        'hours': hours
      }
      // date = days * 24 + hours
    }
  }
  console.log('hours===', hours)
  console.log('date===', date)
  return date
}

8，随机数字生成

/**
 * 生成随机len位数字
 */
export const randomLenNum = (len, date) => {
  let random = ''
  random = Math.ceil(Math.random() * 100000000000000).toString().substr(0, len || 4)
  if (date) random = random + Date.now()
  return random
}

9，动态插入css样式

/**
 * 动态插入css
 */

export const loadStyle = url => {
  const link = document.createElement('link')
  link.type = 'text/css'
  link.rel = 'stylesheet'
  link.href = url

  const head = document.getElementsByTagName('head')[0]
  head.appendChild(link)
}

10，全屏与退出全屏以及判断是否为全屏（浏览器）

//全屏
export const reqFullScreen = () => {
  if (document.documentElement.requestFullScreen) {
    document.documentElement.requestFullScreen()
  } else if (document.documentElement.webkitRequestFullScreen) {
    document.documentElement.webkitRequestFullScreen()
  } else if (document.documentElement.mozRequestFullScreen) {
    document.documentElement.mozRequestFullScreen()
  }
}

写任意js，需要用时直接导入即可

/**
 * 浏览器退出全屏
 */
export const exitFullScreen = () => {
  if (document.documentElement.requestFullScreen) {
    document.exitFullScreen()
  } else if (document.documentElement.webkitRequestFullScreen) {
    document.webkitCancelFullScreen()
  } else if (document.documentElement.mozRequestFullScreen) {
    document.mozCancelFullScreen()
  }
}

/**
 * 浏览器判断是否全屏
 */
export const fullscreenEnable = () => {
  return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
}

11，判断是否为空（非正则）封装方法

/**
 * 判断是否为空
 */
export function validatenull(val) {
  if (typeof val === 'boolean') {
    return false
  }
  if (typeof val === 'number') {
    return false
  }
  if (val instanceof Array) {
    if (val.length === 0) return true
  } else if (val instanceof Object) {
    if (JSON.stringify(val) === '{}') return true
  } else {
    if (val === 'null' || val == null || val === 'undefined' || val === undefined || val === '') return true
    return false
  }
  return false
}

写任意js，需要用时直接导入即可

12，动态加载样式，防止内外网样式无法导入问题

任意js写方法

import Vue from 'vue'
export const loadStyleIcon = url => {
  const link = document.createElement('link')
  link.type = 'text/css'
  link.rel = 'stylesheet'
  link.href = url
}

在到main,js里面导入包，之后下载需要动态加载的文件到本地目录，在用之前封装的方法按照如下代码引入即可

import { loadStyleIcon } from './utils/util'
import {iconfontVersion } from '@/config/env'
// 动态加载阿里云字体库
iconfontVersion.forEach(ele => {
  // loadStyle(iconfontUrl.replace('$key', ele))
  loadStyleIcon('../public/cdn/iconfont/1.0.0/index667895.css')
  loadStyleIcon('../public/cdn/iconfont/index1638883.css')
})

13，表单验证问题

/**
 * 邮箱
 * @param {*} s
 */
export function isEmail(s) {
  return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}

/**
 * 手机号码
 * @param {*} s
 */
export function isMobile(s) {
  return /^1[0-9]{10}$/.test(s)
}

/**
 * 电话号码
 * @param {*} s
 */
export function isPhone(s) {
  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}

/**
 * URL地址
 * @param {*} s
 */
export function isURL(s) {
  return /^http[s]?:\/\/.*/.test(s)
}

export function isvalidUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}

/* 合法uri */
export function validateURL(textval) {
  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return urlregex.test(textval)
}

/* 小写字母 */
export function validateLowerCase(str) {
  const reg = /^[a-z]+$/
  return reg.test(str)
}

/* 大写字母 */
export function validateUpperCase(str) {
  const reg = /^[A-Z]+$/
  return reg.test(str)
}

/* 大小写字母 */
export function validatAlphabets(str) {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
}

/* 验证pad还是pc */
export const vaildatePc = function() {
  const userAgentInfo = navigator.userAgent
  const Agents = ['Android', 'iPhone',
    'SymbianOS', 'Windows Phone',
    'iPad', 'iPod'
  ]
  let flag = true
  for (var v = 0; v < Agents.length; v++) {
    if (userAgentInfo.indexOf(Agents[v]) > 0) {
      flag = false
      break
    }
  }
  return flag
}

/**
 * validate email
 * @param email
 * @returns {boolean}
 */
export function validateEmail(email) {
  const re = /^(([^<>()\\[\]\\.,;:\s@"]+(\.[^<>()\\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return re.test(email)
}

/**
 * 判断身份证号码
 */
export function cardid(code) {
  const list = []
  let result = true
  let msg = ''
  var city = {
    11: '北京',
    12: '天津',
    13: '河北',
    14: '山西',
    15: '内蒙古',
    21: '辽宁',
    22: '吉林',
    23: '黑龙江 ',
    31: '上海',
    32: '江苏',
    33: '浙江',
    34: '安徽',
    35: '福建',
    36: '江西',
    37: '山东',
    41: '河南',
    42: '湖北 ',
    43: '湖南',
    44: '广东',
    45: '广西',
    46: '海南',
    50: '重庆',
    51: '四川',
    52: '贵州',
    53: '云南',
    54: '西藏 ',
    61: '陕西',
    62: '甘肃',
    63: '青海',
    64: '宁夏',
    65: '新疆',
    71: '台湾',
    81: '香港',
    82: '澳门',
    91: '国外 '
  }
  if (!validatenull(code)) {
    if (code.length === 18) {
      if (!code || !/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(code)) {
        msg = '证件号码格式错误'
      } else if (!city[code.substr(0, 2)]) {
        msg = '地址编码错误'
      } else {
        // 18位身份证需要验证最后一位校验位
        code = code.split('')
        // ∑(ai×Wi)(mod 11)
        // 加权因子
        var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
        // 校验位
        var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2, 'x']
        var sum = 0
        var ai = 0
        var wi = 0
        for (var i = 0; i < 17; i++) {
          ai = code[i]
          wi = factor[i]
          sum += ai * wi
        }
        if (parity[sum % 11] !== code[17]) {
          msg = '证件号码校验位错误'
        } else {
          result = false
        }
      }
    } else {
      msg = '证件号码长度不为18位'
    }
  } else {
    msg = '证件号码不能为空'
  }
  list.push(result)
  list.push(msg)
  return list
}

/**
 * 判断手机号码是否正确
 */
export function isvalidatemobile(phone) {
  const list = []
  let result = true
  let msg = ''
  var isPhone = /^0\d{2,3}-?\d{7,8}$/
  // 增加134 减少|1349[0-9]{7}，增加181,增加145，增加17[678]
  if (!validatenull(phone)) {
    if (phone.length === 11) {
      if (isPhone.test(phone)) {
        msg = '手机号码格式不正确'
      } else {
        result = false
      }
    } else {
      msg = '手机号码长度不为11位'
    }
  } else {
    msg = '手机号码不能为空'
  }
  list.push(result)
  list.push(msg)
  return list
}

/**
 * 判断姓名是否正确
 */
export function validatename(name) {
  var regName = /^[\u4e00-\u9fa5]{2,4}$/
  if (!regName.test(name)) return false
  return true
}

/**
 * 判断是否为整数
 */
export function validatenum(num, type) {
  let regName = /[^\d.]/g
  if (type === 1) {
    if (!regName.test(num)) return false
  } else if (type === 2) {
    regName = /[^\d]/g
    if (!regName.test(num)) return false
  }
  return true
}

/**
 * 判断是否为小数
 */
export function validatenumord(num, type) {
  let regName = /[^\d.]/g
  if (type === 1) {
    if (!regName.test(num)) return false
  } else if (type === 2) {
    regName = /[^\d.]/g
    if (!regName.test(num)) return false
  }
  return true
}

/**
 * 判断是否为空
 */
export function validatenull(val) {
  if (typeof val === 'boolean') {
    return false
  }
  if (typeof val === 'number') {
    return false
  }
  if (val instanceof Array) {
    if (val.length === 0) return true
  } else if (val instanceof Object) {
    if (JSON.stringify(val) === '{}') return true
  } else {
    if (val === 'null' || val == null || val === 'undefined' || val === undefined || val === '') return true
    return false
  }
  return false
}

14，localStorage相关方法操作封装

import { validatenull } from '@/util/validate'

const keyName = '海关管理系统' + '-'
/**
 * 存储localStorage
 */
export const setStore = (params = {}) => {
  let {
    name,
    content,
    type
  } = params
  name = keyName + name
  const obj = {
    dataType: typeof (content),
    content: content,
    type: type,
    datetime: new Date().getTime()
  }
  if (type) window.sessionStorage.setItem(name, JSON.stringify(obj))
  else window.localStorage.setItem(name, JSON.stringify(obj))
}
/**
 * 获取localStorage
 */

export const getStore = (params = {}) => {
  let {
    name,
    debug
  } = params
  name = keyName + name
  let obj = {}
  let content
  obj = window.sessionStorage.getItem(name)
  if (validatenull(obj)) obj = window.localStorage.getItem(name)
  if (validatenull(obj)) return
  try {
    obj = JSON.parse(obj)
  } catch (e) {
    return obj
  }
  if (debug) {
    return obj
  }
  if (obj.dataType === 'string') {
    content = obj.content
  } else if (obj.dataType === 'number') {
    content = Number(obj.content)
  } else if (obj.dataType === 'boolean') {
    content = eval(obj.content)
  } else if (obj.dataType === 'object') {
    content = obj.content
  }
  return content
}
/**
 * 删除localStorage
 */
export const removeStore = (params = {}) => {
  let {
    name,
    type
  } = params
  name = keyName + name
  if (type) {
    window.sessionStorage.removeItem(name)
  } else {
    window.localStorage.removeItem(name)
  }
}

/**
 * 获取全部localStorage
 */
export const getAllStore = (params = {}) => {
  const list = []
  const {
    type
  } = params
  if (type) {
    for (let i = 0; i <= window.sessionStorage.length; i++) {
      list.push({
        name: window.sessionStorage.key(i),
        content: getStore({
          name: window.sessionStorage.key(i),
          type: 'session'
        })
      })
    }
  } else {
    for (let i = 0; i <= window.localStorage.length; i++) {
      list.push({
        name: window.localStorage.key(i),
        content: getStore({
          name: window.localStorage.key(i)
        })
      })
    }
  }
  return list
}

/**
 * 清空全部localStorage
 */
export const clearStore = (params = {}) => {
  const { type } = params
  if (type) {
    window.sessionStorage.clear()
  } else {
    window.localStorage.clear()
  }
}

15，token 失效时退出登录

// 导航守卫
router.beforeEach( ( to, from, next ) => {
  if ( to.path === '/login' ) {
    next( );
  } else {
    // = getStore({ name: 'admin_token' })
    let token = window.sessionStorage.getItem( "access_token" );
    if ( token == undefined ) {
      next( '/login' );
    } else {
      next( );
    }
  }
} );
export default router;

16，确认键方法调用步骤

//写方法
handleKeyDown(e) {
        let key = null;
        if (window.event === undefined) {
          key = e.keyCode;
        } else {
          key = window.event.keyCode;
        }
        if (key === 13) {
          this.login();
        }
      },
//2，在去created里面调用监听函数
window.addEventListener('keydown', this.handleKeyDown, true)//开启监听键盘按下事件

17，全屏与不全屏 窗口

使用npm 命令安装插件

npm install vue-fullscreen

在到main,js中进行全局配置

import fullscreen from 'vue-fullscreen'
Vue.use(fullscreen)

在再网页中使用

<fullscreen :fullscreen.sync="fullscreen"> 
	<div @click='fullScreen'>全屏</div>
</fullscreen >
fullScreen(){
	this.fullscreen=!this.fullscreen  //不要忘记了在data中定义他为false
}

18，按enter键调用登录方法

//1，写方法enterSure
enterSure(){
        var t = this;
        document.onkeydown = function(e){
          if(window.event == undefined){
            var key = e.keyCode;
          }else{
            var key = window.event.keyCode;
          }
        //enter的ASCII码是13
          if(key == 13){
            t.submit();
          }
        }
      },
//2，在到created（）的生命周期里面调用该方法
	this.enterSure()
//3，在写登录的调接口的方法暂且命名为 submit
	this.$axios( {
          method: 'post',
          url: '/auth/oauth/token',
          data: qs.stringify( {
            username: this.form.username,
            password: jiami( this.form.password ),
            scope: 'server',
            grant_type: 'password'
          } ),
          headers: {
            isToken: 'false',
            'TENANT-ID': '1',
            'Authorization': 'Basic Z3poZzpnemhn'
          }
        } ).then( res => {
          if ( res.status == 200 ) {
            document.onkeydown = undefined;					//必须在调用成功后，加上这段代码，代表清空enter按下的事件
            console.log( "res.data.data===========", res.data.user_info );
            this.$message.success( "登录成功！" )
      
            this.$router.push( "/home" );
          } else {
            
          }
        } ).catch( err => {
       
          	this.$message.warning( "用户名或密码错误" )
        } )

19，手写展开与收起

html网页结构

```javascript
 <div    
          :class="is_show ? 'product-description-boss' : 'product-description-show'"
        >
          <div
          v-for="(item, index) in productData"
          :key="index"
          class="product-description"   
          ref="productDescription"   
        >
         
            <div class="product-description-title color-blue">
              <font class="color-blue data-title">|</font>&nbsp;产品说明
            </div>
            <div class="product-text" v-html="item">
              
            </div>
            <div v-if="index==productDataIndex" @click="topAction"  class="top-acition">
              <div v-if="topOrDown">
                <div class="display">
                  <img src='../../../assets/images/top_action.png'>
                </div> 
              
                <div class="display top-acition-title">
                  收起
                </div>
              </div>

              <div v-if="!topOrDown" >
                <div class="display">
                  <img src='../../../assets/images/down_action.png'>
                </div> 
              
                <div  class="display top-acition-title">
                  展开
                </div>
              </div>
              
            </div>
        </div>
        </div>

data变量

	productData: [],
	detailForm:{},
	topOrDown:false,
	productDataIndex:0,
	is_show:true

vue 方法

/**展开 */
    topAction(){
      if(this.topOrDown==true){
        this.topOrDown=false 
        this.is_show=true
        this.productDataIndex=0
        console.log("我是收起======");     
      }else{
        this.topOrDown=true     
        this.is_show=false 
        this.productDataIndex=this.productData.length-1
        console.log("我是展开======");
      }  
    }

CSS

.product-description-boss{
  height: 130px ;
  overflow: hidden;
}

.product-description-show{
  height: auto ;
  overflow: hidden;
}

具体思路分析

1，写CSS样式，再最外层写一个BOSSdiv，一个样式设置高度，一个样式auto 2，设置展开收起，显隐方法模板
3，展开时候展开收起的div再第一行，收起后模板再数据的最后一个div中，并且，高度动态绑定的变量跟随改变，根据以下代码来确定
:class="is_show ? ‘product-description-boss’ :
‘product-description-show’" 并且社会 设置一个变量规定起再数组中的哪一个index中，根据以下代码来确定
v-if=“index==productDataIndex”

20，数组中某一个对象相同时候，其他项合并成一个数组

mounted() {
            this.CS();
        },
        methods: {
            CS() {
                var data = [{
                        "name": "C",
                        "size": 240,
                        "data": 57
                    },
                    {
                        "name": "F",
                        "size": 520,
                        "data": 42
                    },
                    {
                        "name": "G",
                        "size": 240,
                        "data": 47
                    },
                    {
                        "name": "C",
                        "size": 520,
                        "data": 23
                    },
                    {
                        "name": "F",
                        "size": 240,
                        "data": 14
                    },
                    {
                        "name": "G",
                        "size": 520,
                        "data": 62
                    },
                    {
                        "name": "C",
                        "size": 240,
                        "data": 34
                    },
                    {
                        "name": "F",
                        "size": 520,
                        "data": 25
                    },
                    {
                        "name": "G",
                        "size": 240,
                        "data": 35
                    }
                ]
                console.log(data)
                var echararr = [];
                for (var i = 0; i < data.length; i++) {
                	//判断是否有相等的name
                    var arrindex=echararr.findIndex((item, index, arr) => {
                    	return item.name === data[i].name
                    })
                    //获取下标
                    if(arrindex==-1){//不存在盘符数据的添加盘符数据
                        echararr.push({
                            "name": data[i].name,
                            "size": data[i].size,
                            "data": [data[i].data]
                        });
                    }else{//有盘符则往盘符数据中添加
                        echararr[arrindex].data.push(data[i].data)
                    }
                    //console.log(arrindex);
                }
                console.log(echararr)
            }
        }

（二）js

1，获取时间差

创建方法er

DateDiffer(Date_end){
   //date1结束时间
   let date1 = new Date(Date_end);
   //date2当前时间
   let date2 = new Date();
   date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
   date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
   const diff = date1.getTime() - date2.getTime(); //目标时间减去当前时间
   const diffDate = diff / (24 * 60 * 60 * 1000);  //计算当前时间与结束时间之间相差天数
}

（三） css

一，模板
1，vue 左中右布局模板（数据可视化）

```javascript
<template>
  <div class="content border">
    <!--最左边-->

    <div class="content-left border">
      <div class="content-left-top border"></div>
      <div class="content-left-center border"></div>
      <div class="content-left-bottom border"></div>
    </div>
    <div class="content-center border"></div>
    <!--最右边-->
    <div class="content-left border">
      <div class="content-left-top border"></div>
      <div class="content-left-center border"></div>
      <div class="content-left-bottom border"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 85%;
  margin-top: 1%;
  display: inline-flex;
  .content-left {
    flex-grow: 1;
    min-width: 30%;
    max-width: 30%;
    height: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    .content-left-top {
      height: 30%;
      width: 100%;
    }
    .content-left-center {
      height: 35%;
      width: 100%;
    }
    .content-left-bottom {
      height: 30%;
      width: 100%;
    }
  }
  .content-center {
    flex-grow: 2;
    min-width: 40%;
    max-width: 40%;
    height: 100%;
  }
  .content-right {
    flex-grow: 1;
    min-width: 30%;
    max-width: 30%;
    height: 100%;
  }
}
</style>

1，h5 PC端打开网页模式显示不全的解决办法
在template.h5.html的代码中的head复制如下代码即可

```javascript
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=0.3, maxmum-scale=1.0, minimum-scale=0.3">

二，宫格布局

html模块

<view class="wrap">
<view class="item" v-for="(item,index) in 10" :key="index">
<image src="" width="220" height="180"></image>
	</view>
</view>

css模块

.wrap {
	display: flex;
	flex-wrap: wrap;
}
.item {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 190rpx;
	flex: 0 0 33.33333333%;
	justify-content: center;
	overflow: hidden;
}

效果

3，数组方法之判断数组对象中某个值是否都为某个数

 if (this.data.rightList.findIndex(target => target.baodanshow === true) == -1) {
                            console.log('验证通过')
                        } else {
                            console.log('验证不通过')
                        }

（四）element ui

1，el-table 添加序列号

{{scope.$index+1}}

（五）vue 插件相关

（六）JQ

（七）HTML

（八）微信小程序

1，微信小程序获取当前页面的url和参数

var pages = getCurrentPages()    //获取加载的页面
var currentPage = pages[pages.length - 1]    //获取当前页面的对象
var url = currentPage.route    //当前页面url
console.log(url)
    var options = currentPage.options    //如果要获取url中所带的参数可以查看options

2，微信小程序跳转到上一个页面会出现直接跳转到首页的问题

1、A -> B -> C C直接返回A

A -> B通过 wx.navigateTo 跳转

B -> C 通过 wx.redirectTo 跳转.跳转触发后 B 页面就会被销毁， C 页面再返回 wx.navigateBack 就会直接到 A 了

2、A -> B -> C 返回效果C -> B -> A

正常 A -> B -> C 都是通过 wx.navigateTo 跳转的，所以 wx.navigateBack 只能返回上一界面

（九）百度小程序

（十）app