刘新修

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) | 阅读(1092)

创建自增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) | 阅读(994)

获取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) | 阅读(992)

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) | 阅读(927)

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) | 阅读(833)

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) | 阅读(763)

shell(bash)替换字符串大全

[

2023/08/16 11:13 | by 刘新修 ]

1. 替换（只替换一个）

用varrB=${varA/str1/str2}

C#代码

$ var="AAAszip_BBB.zip";var2=${var/zip/ZIP};echo $var2};
AAAsZIP_BBB.zip
$ var="AAAszip_BBB.zip";var2=${var/.zip/.ZIP};echo $var2;
AAAszip_BBB.ZIP

2. 替换（替换所有）

用varB=${varA//str1/str2}

C#代码

$ var="AAAszip_BBB.zip";var2=${var//zip/ZIP};echo $var2;
AAAsZIP_BBB.ZIP

3. 替换（替换开头一个）

用varB=${varA/#str1/str2}

C#代码

$ var=".zipAAAszip_BBB.zip_CCC";var2=${var/#.zip/.ZIP};echo $var2;
.ZIPAAAszip_BBB.zip_CCC

不存在
varB=${varA//#str1/str2}

4. 替换（替换结尾一个）

用varB=${varA/%str1/str2}

C#代码

$ var="AAAszip_BBB.zip_CCC.zip";var2=${var/%.zip/.ZIP};echo $var2;
AAAszip_BBB.zip_CCC.ZIP

不存在
varB=${varA//%str1/str2}

而且可以很好地匹配到“.”点号

5. 截取，删除右边，保留左边，从右起最短匹配

用$varB=${varAa%<pattern>}，

C#代码

$ a="aaa=bbb";b=${a%=*};echo $b
aaa
$ a="http://localhost:3000/china/shanghai.html";b=${a%/*};echo $b
http://localhost:3000/china

6. 截取，删除右边，保留左边，从右起最长匹配

用$varb=${vara%%<pattern>}从右起最长匹配

C#代码

$ a="http://localhost:3000/china/shanghai.html";b=${a%%/*};echo $b
http:

7. 截取，删除左边，保留右边，从左起最短匹配

用$varb=${vara#<pattern>}

C#代码

$ a="aaa=bbb";b=${a#*=};echo $b
bbb
$ a="http://localhost:3000/china/shanghai.html";b=${a#*/};echo $b
/localhost:3000/china/shanghai.html

8. 截取，删除左边，保留右边，从左起最长匹配

用$varb=${vara##<pattern>}从左起最长匹配

C#代码

$ a="http://localhost:3000/china/shanghai.html";b=${a##*/};echo $b
shanghai.html

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

SHELL替换字符串内容

[

2023/08/11 17:22 | by 刘新修 ]

C#代码

//http://dl.ktm1234.com/injured/work-litigation/
//http://dl.ktm1234.com/XXX/jiaye/injured/work-litigation/
var="http://dl.ktm1234.com/injured/work-litigation/";var2=${var//com/com\/XXX\/jiaye};echo $var2;

结果：http://dl.ktm1234.com/XXX/jiaye/injured/work-litigation/

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

uniapp创建项目脚手架的区别

[

2023/08/09 11:49 | by 刘新修 ]

vue-cli 构建 uniapp 项目：

优点：

vue-cli 是一个强大的工具，可以快速构建出各种类型的项目，配置灵活，便于维护和管理。同时，其支持 TypeScript 等最新技术，可以提高开发效率和代码质量。

vue-cli 集成了丰富的插件和模板，可以帮助您快速搭建 uniapp 项目，并提供了丰富的功能和组件。

vue-cli 社区活跃度高，得到广泛应用和支持，很多开发者都已经熟悉了 vue-cli 的使用和优化。

缺点：

基于 vue-cli 构建 uniapp 项目需要一定的前端开发经验和技能，对初学者来说可能会有些困难。

构建出来的项目大小比较大，需要考虑如何压缩和优化代码，以提升页面加载速度。

HBuilderX.exe 构建 uniapp 项目：

优点：

HBuilderX.exe 是一款专门为 uniapp 开发提供的开发工具，可以快速搭建 uniapp 项目，支持调试、运行等功能，适合初学者或没有前端开发经验的开发者使用。

HBuilderX.exe 集成了丰富的组件和模板，可以快速搭建出各种类型的 uniapp 项目，并且自带了一些 UI 组件，方便快速开发。

HBuilderX.exe 教程和文档详尽，易于上手，初学者可以快速掌握。

缺点：

HBuilderX.exe 对于更高级的定制和优化需要进行配置和扩展，需要一定的前端开发经验和技能。

在使用 HBuilderX.exe 构建 uniapp 项目时可能会有一些限制，例如只支持部分平台等问题，需要根据项目需求选择适合的构建方式。

创建uni-app项目（步骤流程）

方式一：直接在HBuilder X上创建（常用）

在窗口栏找到“文件”=>新建=>项目

会在HBuilder X会在右下角提示项目创建成功，成功之后的项目目录结构如下：

方式二：使用命令行（vue-cli）创建

vue create -p dcloudio/uni-preset-vue my-project

创建成功之后，运行即可。

cd my-project

npm run serve

项目目录结构：

Tags: uniapp

vue | 评论(0) | 引用(0) | 阅读(1140)

Vue实现倒计时组件(可自定义时间倒计时功能的组件)：

[

2023/07/27 14:12 | by 刘新修 ]

一、创建countDown.vue（倒计时组件）：

XML/HTML代码

<template>
<span :endTime="endTime" :endText="endText">
<slot>{{content}}</slot>
</span>
</template>
<script>
export default {
data(){
return {
content: '',
}
},
props:{//接收父组件的数据
endTime:{type:String,default:''},
endText:{type:String,default:'活动已结束'},
},
watch: {//监听时间的变化
endTime() {
this.countdowm(this.endTime)
}
},
mounted () {
this.countdowm(this.endTime)
},
methods: {
countdowm(timestamp){
let self = this;
let timer = setInterval(function(){
let nowTime = new Date();
let endTime = new Date(timestamp * 1000);
let t = endTime.getTime() - nowTime.getTime();
if(t>0){
let day = Math.floor(t/86400000);
let hour=Math.floor((t/3600000)%24);
let min=Math.floor((t/60000)%60);
let sec=Math.floor((t/1000)%60);
hourhour = hour < 10 ? "0" + hour : hour;
minmin = min < 10 ? "0" + min : min;
secsec = sec < 10 ? "0" + sec : sec;
let format = '';
if(day > 0){
format = `${day}天${hour}小时${min}分${sec}秒`;
}
if(day <= 0 && hour > 0 ){
format = `${hour}小时${min}分${sec}秒`;
}
if(day <= 0 && hour <= 0){
format =`${min}分${sec}秒`;
}
self.content = format;
}else{
clearInterval(timer);
selfself.content = self.endText;
}
},1000);
}
}
}
</script>

二、vue倒计时组件的使用方法（父组件里面）：

XML/HTML代码

<template>
<count-down :endTime="endTime" :endText="endText " />
</template>
<script>
import countDown from '@/components/countDown'//引入路径，可更改
export default {
data() {
return{
endTime:new Date("2022/04/18 08:00:20").getTime() / 1000 + ' ',
// console.log(endTime)=>得到毫秒 1658030420 可在方法里面放入后台数据,new Date('放后台数据').getTime() / 1000 + ' ',但要记得调用方法
endText:'',
}
},
components: {
countDown
},
}
</script>

说明一下：

XML/HTML代码

1）endTime是一个时间戳，而且是字符串数据类型，需要处理下
let endTime = new Date("2022/04/18 08:00:20").getTime() / 1000 + ' '
2）endText是倒计时结束显示的内容

三、vue倒计时组件效果如下：

vue | 评论(0) | 引用(0) | 阅读(1179)

vue封装定时器

创建自增ID用户表

获取JSON对象key及vulue

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

方法1：

方法2：

方法3：

方法4：

方法5：

Object.getOwnPropertyNames()

js比较俩个对象是否相等

shell(bash)替换字符串大全

1. 替换（只替换一个）

2. 替换（替换所有）

3. 替换（替换开头一个）

4. 替换（替换结尾一个）

5. 截取，删除右边，保留左边，从右起最短匹配

6. 截取，删除右边，保留左边，从右起最长匹配

7. 截取，删除左边，保留右边，从左起最短匹配

8. 截取，删除左边，保留右边，从左起最长匹配

SHELL替换字符串内容

uniapp创建项目脚手架的区别

Vue实现倒计时组件(可自定义时间倒计时功能的组件)：

分类

个人简介

Follow me

搜索

最新日志

新浪微博

最新评论

链接

归档

日历

其他

< 2024 > < 12 >
日	一	二	三	四	五	六
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	31