刘新修

发布专属环境SHELL脚本

[

2023/10/13 17:06 | by 刘新修 ]

C#代码

#ifconfig
echo $projectPath
echo $developer
echo $rebuildBranch
### 获取最后一层的项目名称
las_dir=$(basename "$projectPath")
### 提取上一层目录的全路径
cur_dir=$(dirname $projectPath)
### 获取业务线的名称第二层
pat_dir=$(basename "$cur_dir")
echo $las_dir
echo $cur_dir
echo $pat_dir
### 通用前端发布脚本( 从本地同步来取 dist.tar.gz 文件包 ) ###
wwwroot=/data/apps/nginx/htdocs/public/frontend$projectPath &&
cd $wwwroot && pwd && git fetch && git checkout dev-$developer &&
git pull origin dev-$developer &&
bash /sh/downdist.sh /data/apps/nginx/htdocs/public/frontend$projectPath/upload/dynamicAssets.json /data/apps/nginx/htdocs/public/tarfile/XXX/$developer$projectPath http://dl.ktm1234.com/XXX/$developer$projectPath
### 通用前端发布脚本( 从本地同步来取 dist.tar.gz 文件包 ) ###
wwwroot=/data/apps/nginx/htdocs/public/frontend$projectPath &&
cd $wwwroot && pwd
if [[ $rebuildBranch == true ]] ;then
echo '---- 全新构建分支 ------'
git checkout . && git checkout master &&
git branch -D dev-$developer && git fetch &&
git checkout -b dev-$developer origin/dev-$developer &&
bash /sh/downdist.sh /data/apps/nginx/htdocs/public/frontend$projectPath/upload/dynamicAssets.json /data/apps/nginx/htdocs/public/tarfile/XXX/$developer$projectPath http://dl.ktm1234.com/XXX/$developer$projectPath
else
echo '---- 更新新版本 ------'
git fetch && git checkout dev-$developer &&
git checkout . && git pull origin dev-$developer &&
bash /sh/downdist.sh /data/apps/nginx/htdocs/public/frontend$projectPath/upload/dynamicAssets.json /data/apps/nginx/htdocs/public/tarfile/XXX/$developer$projectPath http://dl.ktm1234.com/XXX/$developer$projectPath
fi

Linux/Unix | 评论(0) | 引用(0) | 阅读(98)

Vue (preventReClick)防暴点 +防抖（debounce）和节流（throttle）函数

[

2023/09/27 18:49 | by 刘新修 ]

1. 防暴点（preventReClick）

快速点击按钮时会频繁重复调用接口，为了防止这种情况，要对相应的按钮进行防暴力重复点击处理，最好是使用函数防抖或者函数截流来处理，但是现在已经要修改的按钮太多了，于是换一种方法，用指令的方式来达到相识的效果。

1.创建utils文件夹，在该文件夹下创建preventReClick.js文件

JavaScript代码

export default {
install(Vue) {
Vue.directive('preventReClick', {
inserted: function (el, binding) {
console.log(el.disabled)
el.addEventListener('click', (e) => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 3000)
//binding.value可以自行设置。如果设置了则跟着设置的时间走
//例如：v-preventReClick='500'
} else { // disabled为true时，阻止默认的@click事件
e.preventDefault()
e.stopPropagation()
}
})
}
}),
}

2.在main.js中全局引用

JavaScript代码

// 防止多次点击
import preventReClick from '@/util/preventReClick '
Vue.use(preventReClick);

3.在触发事件的按钮上就可以直接使用指令(button按钮和其他元素都可)

JavaScript代码

<div class="comment-btn" @click="submitMes()" v-preventReClick="3000">发送</div>
<el-button @click="submitMes()" v-preventReClick="3000">发送</el-button>

2. 防抖（debounce）

用户停下操作，就执行函数；只要不停止操作，永远不会执行函数内的操作
使用场景：防抖常应用于用户进行搜索输入节约请求资源，
eg：原来watch用户输入值改变马上请求接口，加入防抖，停止输入操作才会对接口进行访问

JavaScript代码

/**
* @description 函数防抖触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。
* @param {Function} func 需要执行的函数
* @param {Number} wait 间隔时间默认200ms
* @param {Boolean} immediate 是否立即执行 true(默认) 表立即执行，false 表非立即执行
* @return {*}
*/
export function VueDebounce(func, wait = 200, immediate = true) {
let timeout = null; // 定时器
return function () {
let that = this, // this对象
args = arguments; // 参数
if (timeout) clearTimeout(timeout);
if (immediate === true) { // 立即执行
var callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) {
// func.apply(that, args); // 普通用法
that[func](...args); // vue用法
}
}
else { // 非立即执行
timeout = setTimeout(() => {
// func.apply(this, args); // 普通用法
that[func](...args); // vue用法
}, wait);
}
}
}

用法：

JavaScript代码

import {VueDebounce} from "@/util/index"
methods: {
/**
* 点击事件函数防抖
* 用法：<el-button @click="debounceHandel">点击测试</el-button>
*/
debounceHandel: VueDebounce("handlerFunc"),
/**
* 点击事件：真正执行的函数
*/
handlerFunc(type) {
console.log("测试防抖事件");
this.$emit("click","这是参数"); // 如果用普通用法，则这里会找不到$emit，因为this还往上继承了vue的对象
},
}

3. 节流（throttle）

高频时间触发,但n秒内只会执行一次,所以节流会稀释函数的执行频率，是个固定的过程，如限制1s，则1s内只执行一次，无论怎样，都在会1s内执行相应的操作

使用场景：和防抖使用场景差不多，关键看固定时间内（1s）需要反馈，需要反馈使用节流，即：无论用户是否停下操作，都会固定时间执行函数操作

JavaScript代码

* @description 函数节流
* @param {Function} func 函数
* @param {Number} wait 延迟执行毫秒数,默认200
* @param {Number} type 1 表时间戳版，2 表定时器版
*/
xport function VueThrottle(func, wait=200 ,type) {
if(type===1){
let previous = 0;
}else if(type===2){
let timeout;
}
return function() {
let that= this;
let args = arguments;
if(type===1){
let now = Date.now();
if (now - previous > wait) {
// func.apply(that, args); // 普通用法
that[func](...args); // vue用法
previous = now;
}
}else if(type===2){
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
// func.apply(that, args)
that[func](...args); // vue用法
}, wait)
}
}
}

用法：

JavaScript代码

import {VueThrottle} from "@/util/index"
methods: {
/**
* 点击事件函数防抖
* 用法：<el-button @click="throttleHandel">点击测试</el-button>
*/
throttleHandel: VueThrottle("handlerFunc"),
/**
* 点击事件：真正执行的函数
*/
handlerFunc(type) {
console.log("测试防抖事件");
this.$emit("click","这是参数"); // 如果用普通用法，则这里会找不到$emit，因为this还往上继承了vue的对象
},
}

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(159)

蓝盾发布平台，查看当前的版本号

[

2023/09/13 14:21 | by 刘新修 ]

C#代码

output(normal): BK_CI_GIT_REPO_HEAD_COMMIT_AUTHOR=刘新修
output(normal): BK_CI_GIT_REPO_URL=http://172.16.101.177/health-product/health-front/health-manage-front.git
output(except): bk_repo_type_e-9937698f8027470f86c86096e78e8940=GIT
output(normal): BK_CI_GIT_REPO_NAME=health-product/health-front/health-manage-front
output(except): git.health-product.health-front.health-manage-front.new.commit=c3084bed035f479b0e4419b20c00fe4cd25f0bac

Windows相关 | 评论(0) | 引用(0) | 阅读(155)

Mock的基本语法及使用

[

2023/09/08 15:17 | by 刘新修 ]

JavaScript代码

//定义/mock/index.js
import Mock from 'mockjs'
Mock.mock("/api/login", {
code: 200,
msg: "登陆成功",
user: {
name: "zeng8",
score: 2048,
rank: 10
},
token: "kjkjalsdiiuioayeuryqowierqiwerqowiery"
})
// url可以使用正则匹配
// 拦截get请求，返回评论数据
Mock.mock(/\/api\/feed/, "get", function(config) {
//console.log("config" , config );
//通过config可以获取到前端发给服务器的数据
var po = config.url.indexOf("?"); //获取问号的位置
if (po != -1) {
var query = config.url.slice(po + 1); //获取到查询参数current=4转换为{current: 4}
var arr = query.split("&"); //按&分割为数组
var search = {}; //定义个对象
arr.forEach(item => {
var temp = item.split("="); //把数组每个元素按等于分割[current,4]
search[temp[0]] = temp[1]; //search[ "current"] =4
})
}
// 返回一个随机数据
return Mock.mock({
"code": 0,
"data|4": [{
id: "@id",
msg: "@cparagraph(2,3)", //段落2-3行
name: "@cname", //随机中文名
date: "@datetime" //随机日期
}],
"pagnation": {
"total|10-25": 1,
"size": 4,
"pageTotal|4-10": 1,
"current": search.current,
}
})
})
Mock.mock("/api/test", Mock.mock({
name: "@cname", //随机中文名
"age|100-200": 1, //100-200的随机数
"price|10-50.2-5": 1, //10-50随机数小数点2-5位
"live|1-2": true, //随机true或false
"start|1-5": "⭐", //把字符串重复1-5次
"friend|2": ["小红", "小明", "小刚", "小白", "小蓝"], //1是挑一个大于1是重复n次
"props|1-3": {
name: "mm",
age: 22,
leg: 2,
job: "web",
eye: 2
},
"tel": /13\d{9}/,
"des": function() {
return `大家好，我的名字是${this.name}，今年${this.age}岁`
},
"data|10": [{
"id|+1": 1024,
"ID": "@id",
date: "@date",
time: "@time",
datetime: "@datetime",
name: "@cname",
pic: "@dataImage('200x100')",
description: "@cparagraph(1,3)",
title: "@ctitle(8,12)",
url: /http:\/\/www\.[a-z]{2,8}\.(com|cn|org)/,
email: /[4-8]@\.(126|qq|163)\.(com|cn|org)/,
address: "@county(true)", //省市区地址
}]
}))

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(178)

vue封装定时器

[

2023/09/07 13:29 | by 刘新修 ]

main.js 文件

JavaScript代码

/*** sleep ***/
Vue.prototype.$sleep = time => {
return new Promise((resolve, reject) => {
window.setTimeout(() => {
resolve(true)
}, time)
})
}

增加测试页面

XML/HTML代码

<!--
* @Description: npage.vue
* @Version: 1.0
* @Author: Jesse Liu
* @Date: 2022-08-01 20:32:06
* @LastEditors: Jesse Liu
* @LastEditTime: 2023-09-07 13:24:11
-->
<template>
<div class="wscn-http404-container">
<h2 style="font-weight: normal; line-height: 160%;">userInfo ========= {{ userInfo }}</h2>
<h2 style="font-weight: normal; line-height: 160%;">configInformation ========= {{ configInformation }}</h2>
<h1 style="line-height:300px; text-align:center">npage.vue (新测试文件)</h1>
<div>time:</div>
</div>
</template>
<script>
import { mapState } from "vuex";
import { parseTime } from '@/utils'
import { downloadFile } from "@/utils/getFile";
export default {
name: 'PageTest',
computed: {
...mapState("user", ["userInfo","configInformation"]),
message() {
return 'PageTest'
},
parseTime: parseTime
},
mounted() {
this.$store.dispatch("case/casesList/downloadFile",{}).then((res)=>{
// let data = res.data;
// let headers = res.headers;
// /*** 调用下载文件 ***/
// downloadFile(data, headers)
})
/*** 多定时器同时调用 ***/
this.getStateA();
this.getStateB();
/*** 业务请求接口调用示例 ***/
this.casePage();
},
methods: {
/*** 定时器演示方法 ***/
async getStateA(){
/*** 定时器只管计算时间钩子标记 ***/
console.log('sleepStateA ~~~ 开始')
/*** 多定时处理任务A ***/
console.time('sleepStateA');
let sleepStateA = await this.$sleep(5000);
console.log('sleepStateA ~~~ 结束', sleepStateA)
console.timeEnd('sleepStateA');
return sleepStateA;
},
/*** 定时器演示方法 ***/
async getStateB(){
/*** 定时器只管计算时间钩子标记 ***/
console.log('sleepStateB ~~~ 开始')
/*** 多定时处理任务B ***/
console.time('sleepStateB');
let sleepStateB = await this.$sleep(10000);
console.log('sleepStateB ~~~ 结束', sleepStateB)
console.timeEnd('sleepStateB');
return sleepStateB;
},
/*** 模拟示例业务的状态 ***/
async getCaseState(){
/*** 定时器只管计算时间钩子标记 ***/
let sleepStateCase = await this.$sleep(10000);
return sleepStateCase;
},
/*** 模拟示例业务主方法 ***/
async casePage(state = true, n = 0){
/*** 定义及获取数据状态 ***/
let runling = true;
let getCaseState = await this.getCaseState();
/*** 业务逻辑处理及使用 ***/
if(state && getCaseState) {
/*** 请求接口拿状态和后端约定状态码(根据状态码去更改runling的布尔值) ***/
// 写你的vuex调用方法，如：this.$store.dispatch('user/record', {})
/*** 以下代码是为了演示模拟3次请求后，状态变更，供参考 ***/
/*** 假设后端接口告诉你可以终止执行调用的状态 (比如后端调用3次后就更改了状态) ***/
let index = n;
index +=1;
console.log('第['+ index + ']次调用后端接口~~');
if(index >= 3) {
runling = false;
}
this.casePage(runling, index);
}
else{
console.log('===========================================\n定时器已经结束关停，累计调用共: ' + n + '次~~');
}
}
}
}
</script>
<style lang="scss" scoped>
</style>

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(194)

创建自增ID用户表

[

2023/09/01 16:49 | by 刘新修 ]

SQL代码

CREATE DATABASE example;
USE example;
CREATE TABLE users (
id INT(11) NOT NULL AUTO_INCREMENT,
name VARCHAR(45) NOT NULL,
age INT(11) NOT NULL,
PRIMARY KEY (id)
);

数据库技术 | 评论(0) | 引用(0) | 阅读(171)

获取JSON对象key及vulue

[

2023/09/01 09:29 | by 刘新修 ]

JavaScript代码

var arr = [
{
"原告性别": "女",
"出生日期": "XX1年1月1X日",
"居住地址": "北京市丰台区XXXXX",
"所属民族": "汉族",
"电话号码": "XXXXXX78",
"原告姓名": "XXX"
},
{
"原告性别": "男",
"出生日期": "1992年6月10日",
"居住地址": "北京市通州区XXXXX",
"所属民族": "汉族",
"电话号码": "18701519435",
"原告姓名": "xxx"
}
]
/*** 遍历数组中的JSON对象 ***/
for (var i=0; i<arr.length; i++){
var keys=Object.keys(arr[i]);
console.log('keys:', keys);
}
//keys: (6) ['原告性别', '出生日期', '居住地址', '所属民族', '电话号码', '原告姓名']

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(230)

JS 中如何优雅的使用多层嵌套属性而不会发生报错

[

2023/08/29 10:58 | by 刘新修 ]

平时在写js的时候遇到多层属性嵌套，一般大家敢直接用点使用吗？

有没有开发的时候好好的，某一时刻突然出现一个控制台报错类似：Uncaught TypeError: xxx is not a function

一般这种情况就是没有判断是否有值，如果数据是后端返回的，有可能后端就是没有值或者值的类型不对，这些情况都可能导致出现程序出错，一般我们需要进行判断，常见的判断就是

JavaScript代码

if(obj.a && obj.a.b && obj.a.b.c && obj.a.b.c.d){
// do something
}

如果层级太深或者类似判断逻辑太多，写起来有点烦，能把自己蠢哭。。。下面有一些优雅的方式解决这个问题。

方法1：

扁平化处理：后台处理 / 前端预处理, 防止出现不存在值的情况

方法2：

ES6 使用 CoffeeScript: a?.b?.c?.d

方法3：

JavaScript代码

function checkNested(obj /*, level1, level2, ... levelN*/) {
var args = Array.prototype.slice.call(arguments),
obj = args.shift();
for (var i = 0; i < args.length; i++) {
if (!obj || !obj.hasOwnProperty(args[i])) {
return false;
}
obj = obj[args[i]];
}
return true;
}
var test = {level1:{level2:{level3:'level3'}} };
checkNested(test, 'level1', 'level2', 'level3'); // true
checkNested(test, 'level1', 'level2', 'foo'); // false

方法4：

https://github.com/letsgetrandy/brototype

JavaScript代码

var myURL;
if (Bro(app).doYouEven('config.environment.buildURL')) {
myURL = app.config.environment.buildURL('dev');
}

方法5：

lodash

JavaScript代码

var object = { 'a': [{ 'b': { 'c': 3 } }] };
_.get(object, 'a[0].b.c');
// => 3
_.get(object, ['a', '0', 'b', 'c']);
// => 3
_.get(object, 'a.b.c', 'default');
// => 'default'

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(223)

Object.getOwnPropertyNames()

[

2023/08/28 16:29 | by 刘新修 ]

JavaScript代码

// 类数组对象
const obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.getOwnPropertyNames(obj).sort());
// ["0", "1", "2"]
Object.getOwnPropertyNames(obj).forEach((val, idx, array) => {
console.log(`${val} -> ${obj[val]}`);
});

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(182)

js比较俩个对象是否相等

[

2023/08/28 15:20 | by 刘新修 ]

一、使用Object.getOwnPropertyNames()

该方法和Object.keys()功能一样，不同的地方在于Object.getOwnPropertyNames返回对象本身全部的属性，而Object.keys返回对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）（即返回enumerable为false的属性）

共同点是俩者都不会返回自身原型链上的属性。

JavaScript代码

var obj = {"name":"liuxinxiu","age":18,"info":"1234"}
var obj2 = obj;
var obj3 = {"name":"liuxinxiu","age":18,"info":"123"}
function checkInfo(obj1, obj2){
//判断是否指向同一内存
if (obj1 === obj2) return true;
let bankInfo = Object.getOwnPropertyNames(obj1),
oldBankInfo = Object.getOwnPropertyNames(obj2)
//判断长度不相同直接返回不同
if(bankInfo.length !== oldBankInfo.length) return false
for(let i=0,max=bankInfo.length; i<max; i++){
let prop_name = bankInfo[i]
if(obj1[prop_name] !== obj2[prop_name]){
return false
}
}
return true
}
console.log(checkInfo(obj,obj3))

二、使用Object.keys()或者Object.entries().toString()

Object.keys()是将对象中键先取出来组成数组，然后先比较键。而后通过键在比较值

Object.entries()是将键和值分别组成俩个数组。然后使用toString将键值数组转化为字符串去比较

JavaScript代码

checkInfo() {
// object.keys
let bankInfo = Object.keys(this.params.bankInfo),
oldBankInfo = Object.keys(this.params.oldBankInfo)
if (oldBankInfo.length !== bankInfo.length) return false
for (let i = 0; i <= bankInfo.length - 1; i++) {
let key = bankInfo[i];
if (!oldBankInfo.includes(key)){
return false
}
if (this.params.oldBankInfo[key] !== this.params.bankInfo[key]){
return false
}
}
// object.entries
console.log(Object.entries(this.params.bankInfo).toString() === Object.entries(this.params.oldBankInfo).toString()) //true
console.log(Object.entries(this.params.bankInfo).toString()) //accountType,2,nationality,CHN,bankName,,bankCode,
console.log(Object.entries(this.params.oldBankInfo).toString()) //accountType,2,nationality,CHN,bankName,,bankCode,
}

三、使用JSON.stringify()或。适用于俩个对象属性顺序相同

JavaScript代码

let bankInfo = {
accountType : 2,
nationality:'CHN', //国籍
bankName : '', //银行名称
bankCode : '', //银行code
}
let oldBankInfo = {
accountType : 2,
nationality:'CHN', //国籍
bankName : '', //银行名称
bankCode : '', //银行code
}
let flag2 = JSON.stringify(bankInfo) == JSON.stringify(oldBankInfo)
console.log(flag2)

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(177)

发布专属环境SHELL脚本

Vue (preventReClick)防暴点 +防抖（debounce）和节流（throttle）函数

2. 防抖（debounce）

蓝盾发布平台，查看当前的版本号

Mock的基本语法及使用

vue封装定时器

创建自增ID用户表

获取JSON对象key及vulue

JS 中如何优雅的使用多层嵌套属性而不会发生报错

方法1：

方法2：

方法3：

方法4：

方法5：

Object.getOwnPropertyNames()

js比较俩个对象是否相等

分类

个人简介

Follow me

搜索

最新日志

新浪微博

最新评论

链接

归档

日历

其他

< 2023 > < 11 >
日	一	二	三	四	五	六
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30