第一页 上页 1 2 3 4 5 6 7 8 9 10 下页 最后页 [ 显示模式： 摘要 | 列表 ]

Mock的基本语法及使用

[不指定 2023/09/08 15:17 | by 刘新修 ]
JavaScript代码
  1. //定义/mock/index.js  
  2.   
  3. import Mock from 'mockjs'  
  4. Mock.mock("/api/login", {  
  5.     code: 200,  
  6.     msg: "登陆成功",  
  7.     user: {  
  8.         name: "zeng8",  
  9.         score: 2048,  
  10.         rank: 10  
  11.     },  
  12.     token: "kjkjalsdiiuioayeuryqowierqiwerqowiery"  
  13. })  
  14. // url可以使用正则匹配  
  15. // 拦截get请求，返回评论数据  
  16. Mock.mock(/\/api\/feed/, "get", function(config) {  
  17.     //console.log("config" , config );  
  18.     //通过config可以获取到前端发给服务器的数据  
  19.     var po = config.url.indexOf("?"); //获取问号的位置  
  20.     if (po != -1) {  
  21.         var query = config.url.slice(po + 1); //获取到查询参数current=4转换为{current: 4}  
  22.         var arr = query.split("&"); //按&分割为数组  
  23.         var search = {}; //定义个对象  
  24.         arr.forEach(item => {  
  25.             var temp = item.split("="); //把数组每个元素按等于分割[current,4]  
  26.             search[temp[0]] = temp[1]; //search[ "current"] =4  
  27.   
  28.         })  
  29.     }  
  30.   
  31.     // 返回一个随机数据  
  32.     return Mock.mock({  
  33.         "code": 0,  
  34.         "data|4": [{  
  35.             id: "@id",  
  36.             msg: "@cparagraph(2,3)", //段落2-3行  
  37.             name: "@cname", //随机中文名  
  38.             date: "@datetime" //随机日期  
  39.         }],  
  40.         "pagnation": {  
  41.             "total|10-25": 1,  
  42.             "size": 4,  
  43.             "pageTotal|4-10": 1,  
  44.             "current": search.current,  
  45.         }  
  46.     })  
  47. })  
  48.   
  49. Mock.mock("/api/test", Mock.mock({  
  50.     name: "@cname", //随机中文名  
  51.     "age|100-200": 1, //100-200的随机数  
  52.     "price|10-50.2-5": 1, //10-50随机数 小数点2-5位  
  53.     "live|1-2": true, //随机true或false  
  54.     "start|1-5": "⭐", //把字符串重复1-5次  
  55.     "friend|2": ["小红", "小明", "小刚", "小白", "小蓝"], //1是挑一个大于1是重复n次  
  56.     "props|1-3": {  
  57.         name: "mm",  
  58.         age: 22,  
  59.         leg: 2,  
  60.         job: "web",  
  61.         eye: 2  
  62.     },  
  63.     "tel": /13\d{9}/,  
  64.     "des": function() {  
  65.         return `大家好，我的名字是${this.name}，今年${this.age}岁`  
  66.     },  
  67.     "data|10": [{  
  68.         "id|+1": 1024,  
  69.         "ID": "@id",  
  70.         date: "@date",  
  71.         time: "@time",  
  72.         datetime: "@datetime",  
  73.         name: "@cname",  
  74.         pic: "@dataImage('200x100')",  
  75.         description: "@cparagraph(1,3)",  
  76.         title: "@ctitle(8,12)",  
  77.         url: /http:\/\/www\.[a-z]{2,8}\.(com|cn|org)/,  
  78.         email: /[4-8]@\.(126|qq|163)\.(com|cn|org)/,  
  79.         address: "@county(true)", //省市区地址  
  80.     }]  
  81. }))  
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(1266)

vue封装定时器

[不指定 2023/09/07 13:29 | by 刘新修 ]

main.js 文件

JavaScript代码
  1. /*** sleep ***/  
  2. Vue.prototype.$sleep = time => {  
  3.   return new Promise((resolve, reject) => {  
  4.     window.setTimeout(() => {  
  5.       resolve(true)  
  6.     }, time)  
  7.   })  
  8. }  

增加测试页面

XML/HTML代码
  1. <!--  
  2. * @Description: npage.vue  
  3. * @Version: 1.0  
  4. * @Author: Jesse Liu
  5. * @Date: 2022-08-01 20:32:06  
  6. * @LastEditors: Jesse Liu  
  7. * @LastEditTime: 2023-09-07 13:24:11  
  8. -->  
  9. <template>  
  10.   <div class="wscn-http404-container">  
  11.       <h2 style="font-weight: normal; line-height: 160%;">userInfo ========= {{ userInfo }}</h2>  
  12.       <h2 style="font-weight: normal; line-height: 160%;">configInformation ========= {{ configInformation }}</h2>  
  13.       <h1 style="line-height:300px; text-align:center">npage.vue (新测试文件)</h1>  
  14.       <div>time:</div>  
  15.   </div>  
  16. </template>  
  17.   
  18. <script>  
  19. import { mapState } from "vuex";  
  20. import { parseTime } from '@/utils'  
  21. import { downloadFile } from "@/utils/getFile";  
  22. export default {  
  23.   name: 'PageTest',  
  24.   computed: {  
  25.     ...mapState("user", ["userInfo","configInformation"]),  
  26.     message() {  
  27.       return 'PageTest'  
  28.     },  
  29.     parseTime: parseTime  
  30.   },  
  31.   mounted() {  
  32.   
  33.     this.$store.dispatch("case/casesList/downloadFile",{}).then((res)=>{  
  34.         // let data = res.data;  
  35.         // let headers = res.headers;  
  36.           
  37.         // /*** 调用下载文件 ***/  
  38.         // downloadFile(data, headers)  
  39.     })  
  40.   
  41.     /*** 多定时器同时调用 ***/  
  42.     this.getStateA();  
  43.     this.getStateB();  
  44.   
  45.     /*** 业务请求接口调用示例 ***/  
  46.     this.casePage();  
  47.   },  
  48.   methods: {  
  49.     /*** 定时器演示方法 ***/  
  50.     async getStateA(){  
  51.   
  52.         /*** 定时器只管计算时间钩子标记 ***/  
  53.         console.log('sleepStateA ~~~ 开始')  
  54.   
  55.         /*** 多定时处理任务A ***/  
  56.         console.time('sleepStateA');  
  57.         let sleepStateA = await this.$sleep(5000);  
  58.         console.log('sleepStateA ~~~ 结束', sleepStateA)  
  59.         console.timeEnd('sleepStateA');  
  60.   
  61.         return sleepStateA;  
  62.     },  
  63.     /*** 定时器演示方法 ***/  
  64.     async getStateB(){  
  65.   
  66.         /*** 定时器只管计算时间钩子标记 ***/  
  67.         console.log('sleepStateB ~~~ 开始')  
  68.   
  69.         /*** 多定时处理任务B ***/  
  70.         console.time('sleepStateB');  
  71.         let sleepStateB = await this.$sleep(10000);  
  72.         console.log('sleepStateB ~~~ 结束', sleepStateB)  
  73.         console.timeEnd('sleepStateB');  
  74.   
  75.         return sleepStateB;  
  76.     },  
  77.   
  78.     /*** 模拟示例业务的状态 ***/  
  79.     async getCaseState(){  
  80.   
  81.         /*** 定时器只管计算时间钩子标记 ***/  
  82.         let sleepStateCase = await this.$sleep(10000);  
  83.         return sleepStateCase;  
  84.     },  
  85.     /*** 模拟示例业务主方法 ***/  
  86.     async casePage(state = true, n = 0){  
  87.   
  88.         /*** 定义及获取数据状态 ***/  
  89.         let runling = true;  
  90.         let getCaseState = await this.getCaseState();  
  91.   
  92.         /*** 业务逻辑处理及使用 ***/  
  93.         if(state && getCaseState) {  
  94.             /*** 请求接口拿状态和后端约定状态码(根据状态码去更改runling的布尔值) ***/  
  95.             // 写你的vuex调用方法，如：this.$store.dispatch('user/record', {})  
  96.   
  97.   
  98.             /*** 以下代码是为了演示模拟3次请求后，状态变更，供参考 ***/  
  99.             /*** 假设后端接口告诉你可以终止执行调用的状态 (比如后端调用3次后就更改了状态) ***/  
  100.             let index = n;  
  101.                 index +=1;  
  102.                 console.log('第['+ index + ']次调用后端接口~~');  
  103.   
  104.                 if(index >= 3) {  
  105.                   runling = false;  
  106.                 }  
  107.             this.casePage(runling, index);  
  108.         }  
  109.         else{  
  110.             console.log('===========================================\n定时器已经结束关停，累计调用共: ' + n + '次~~');  
  111.         }  
  112.     }  
  113.   
  114.   }  
  115. }  
  116. </script>  
  117.   
  118.   
  119. <style lang="scss" scoped>  
  120. </style>  

 

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

创建自增ID用户表

[不指定 2023/09/01 16:49 | by 刘新修 ]
SQL代码
  1. CREATE DATABASE example;  
  2.   
  3. USE example;  
  4.   
  5. CREATE TABLE users (  
  6.   id INT(11) NOT NULL AUTO_INCREMENT,  
  7.   name VARCHAR(45) NOT NULL,  
  8.   age INT(11) NOT NULL,  
  9.   PRIMARY KEY (id)  
  10. );  
数据库技术 | 评论(0) | 引用(0) | 阅读(1068)

获取JSON对象key及vulue

[不指定 2023/09/01 09:29 | by 刘新修 ]
JavaScript代码
  1. var arr = [  
  2.     {  
  3.         "原告性别": "女",  
  4.         "出生日期": "XX1年1月1X日",  
  5.         "居住地址": "北京市丰台区XXXXX",  
  6.         "所属民族": "汉族",  
  7.         "电话号码": "XXXXXX78",  
  8.         "原告姓名": "XXX"  
  9.     },  
  10.     {  
  11.         "原告性别": "男",  
  12.         "出生日期": "1992年6月10日",  
  13.         "居住地址": "北京市通州区XXXXX",  
  14.         "所属民族": "汉族",  
  15.         "电话号码": "18701519435",  
  16.         "原告姓名": "xxx"  
  17.     }  
  18. ]  
  19.   
  20.   
  21. /*** 遍历数组中的JSON对象 ***/  
  22. for (var i=0; i<arr.length; i++){  
  23.     var keys=Object.keys(arr[i]);  
  24.     console.log('keys:', keys);  
  25. }  
  26.   
  27. //keys: (6) ['原告性别', '出生日期', '居住地址', '所属民族', '电话号码', '原告姓名']  
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(1068)

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

[不指定 2023/08/29 10:58 | by 刘新修 ]

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

有没有开发的时候好好的，某一时刻突然出现一个控制台报错类似：Uncaught TypeError: xxx is not a function
一般这种情况就是没有判断是否有值，如果数据是后端返回的，有可能后端就是没有值或者值的类型不对，这些情况都可能导致出现程序出错，一般我们需要进行判断，常见的判断就是
 
JavaScript代码
  1. if(obj.a && obj.a.b && obj.a.b.c && obj.a.b.c.d){  
  2.     // do something  
  3. }  
 

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

方法1：

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

方法2：

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

方法3：

JavaScript代码
  1. function checkNested(obj /*, level1, level2, ... levelN*/) {  
  2.   var args = Array.prototype.slice.call(arguments),  
  3.       obj = args.shift();  
  4.   
  5.   for (var i = 0; i < args.length; i++) {  
  6.     if (!obj || !obj.hasOwnProperty(args[i])) {  
  7.       return false;  
  8.     }  
  9.     obj = obj[args[i]];  
  10.   }  
  11.   return true;  
  12. }  
  13.   
  14. var test = {level1:{level2:{level3:'level3'}} };  
  15.   
  16. checkNested(test, 'level1', 'level2', 'level3'); // true  
  17. checkNested(test, 'level1', 'level2', 'foo'); // false  

方法4：

https://github.com/letsgetrandy/brototype

JavaScript代码
  1. var myURL;  
  2. if (Bro(app).doYouEven('config.environment.buildURL')) {  
  3.     myURL = app.config.environment.buildURL('dev');  
  4. }  

方法5：

lodash

JavaScript代码
  1. var object = { 'a': [{ 'b': { 'c': 3 } }] };  
  2.    
  3. _.get(object, 'a[0].b.c');  
  4. // => 3  
  5.    
  6. _.get(object, ['a', '0', 'b', 'c']);  
  7. // => 3  
  8.    
  9. _.get(object, 'a.b.c', 'default');  
  10. // => 'default'  

 

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

Object.getOwnPropertyNames()

[不指定 2023/08/28 16:29 | by 刘新修 ]

 

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

 

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

js比较俩个对象是否相等

[不指定 2023/08/28 15:20 | by 刘新修 ]

一、使用Object.getOwnPropertyNames()

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

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

JavaScript代码
  1. var obj = {"name":"liuxinxiu","age":18,"info":"1234"}  
  2. var obj2 = obj;  
  3. var obj3 = {"name":"liuxinxiu","age":18,"info":"123"}  
  4. function checkInfo(obj1, obj2){  
  5.     //判断是否指向同一内存  
  6.     if (obj1 === obj2) return true;  
  7.     let bankInfo = Object.getOwnPropertyNames(obj1),  
  8.         oldBankInfo = Object.getOwnPropertyNames(obj2)  
  9.   
  10.     //判断长度不相同直接返回不同  
  11.     if(bankInfo.length !== oldBankInfo.length) return false  
  12.    
  13.     for(let i=0,max=bankInfo.length; i<max; i++){  
  14.         let prop_name = bankInfo[i]  
  15.         if(obj1[prop_name] !== obj2[prop_name]){  
  16.             return false  
  17.         }  
  18.     }  
  19.     return true  
  20. }  
  21. console.log(checkInfo(obj,obj3))  

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

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

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

JavaScript代码
  1.    
  2. checkInfo() {  
  3.     // object.keys  
  4.     let bankInfo = Object.keys(this.params.bankInfo),  
  5.         oldBankInfo = Object.keys(this.params.oldBankInfo)  
  6.     if (oldBankInfo.length !== bankInfo.length) return false  
  7.     for (let i = 0; i <= bankInfo.length - 1; i++) {  
  8.         let key = bankInfo[i];  
  9.         if (!oldBankInfo.includes(key)){  
  10.             return false  
  11.         }   
  12.         if (this.params.oldBankInfo[key] !== this.params.bankInfo[key]){  
  13.             return false  
  14.         }   
  15.     }  
  16.    
  17.     // object.entries  
  18.     console.log(Object.entries(this.params.bankInfo).toString() === Object.entries(this.params.oldBankInfo).toString()) //true  
  19.     console.log(Object.entries(this.params.bankInfo).toString())  //accountType,2,nationality,CHN,bankName,,bankCode,  
  20.     console.log(Object.entries(this.params.oldBankInfo).toString()) //accountType,2,nationality,CHN,bankName,,bankCode,  
  21.    
  22. }  

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

JavaScript代码
  1. let bankInfo = {  
  2.     accountType : 2,  
  3.     nationality:'CHN',  //国籍  
  4.     bankName : '',      //银行名称  
  5.     bankCode : '',      //银行code  
  6. }  
  7. let oldBankInfo = {  
  8.     accountType : 2,  
  9.     nationality:'CHN',  //国籍  
  10.     bankName : '',      //银行名称  
  11.     bankCode : '',      //银行code  
  12. }  
  13.    
  14. let flag2 = JSON.stringify(bankInfo) == JSON.stringify(oldBankInfo)  
  15. console.log(flag2)  

 

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

shell(bash)替换字符串大全

[不指定 2023/08/16 11:13 | by 刘新修 ]

1. 替换（只替换一个）

用varrB=${varA/str1/str2}

C#代码
  1. $ var="AAAszip_BBB.zip";var2=${var/zip/ZIP};echo $var2};  
  2. AAAsZIP_BBB.zip  
  3. $ var="AAAszip_BBB.zip";var2=${var/.zip/.ZIP};echo $var2;  
  4. AAAszip_BBB.ZIP  

2. 替换（替换所有）

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

C#代码
  1. $ var="AAAszip_BBB.zip";var2=${var//zip/ZIP};echo $var2;  
  2. AAAsZIP_BBB.ZIP  

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

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

C#代码
  1. $ var=".zipAAAszip_BBB.zip_CCC";var2=${var/#.zip/.ZIP};echo $var2;  
  2. .ZIPAAAszip_BBB.zip_CCC  

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

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

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

C#代码
  1. $ var="AAAszip_BBB.zip_CCC.zip";var2=${var/%.zip/.ZIP};echo $var2;  
  2. AAAszip_BBB.zip_CCC.ZIP  

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

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

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

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

C#代码
  1. $ a="aaa=bbb";b=${a%=*};echo $b  
  2. aaa  
  3. $ a="http://localhost:3000/china/shanghai.html";b=${a%/*};echo $b  
  4. http://localhost:3000/china  

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

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

C#代码
  1. $ a="http://localhost:3000/china/shanghai.html";b=${a%%/*};echo $b  
  2. http:  

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

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

C#代码
  1. $ a="aaa=bbb";b=${a#*=};echo $b  
  2. bbb  
  3. $ a="http://localhost:3000/china/shanghai.html";b=${a#*/};echo $b  
  4. /localhost:3000/china/shanghai.html  

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

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

C#代码
  1. $ a="http://localhost:3000/china/shanghai.html";b=${a##*/};echo $b  
  2. shanghai.html  
Linux/Unix | 评论(0) | 引用(0) | 阅读(1109)

SHELL替换字符串内容

[不指定 2023/08/11 17:22 | by 刘新修 ]
C#代码
  1. //http://dl.ktm1234.com/injured/work-litigation/  
  2. //http://dl.ktm1234.com/XXX/jiaye/injured/work-litigation/  
  3. 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) | 阅读(812)

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:
vue | 评论(0) | 引用(0) | 阅读(1222)
第一页 上页 1 2 3 4 5 6 7 8 9 10 下页 最后页 [ 显示模式： 摘要 | 列表 ]