- 博客(68)
- 收藏
- 关注
RSS订阅原创 VUE3+TS+VITE的一些经验总结
主要是一些和vue2版本差异较大的方面，持续更新中。配置资源路径，在env环境变量中设置VITE_PUBLIC_PATH = './'即可。 获取环境变量中定义的全局属性，获取环境用process.env.NODE_ENV，获取其他全局属性用import.meta.env.xxx。 获取页面跳转携带的查询参数，需要在页面组件中引用vue-router中的useRoute，通过useRoute的query属性获取。 import { useRoute } from 'vue-router'for
2022-05-25 17:45:44
1099
原创 JS数组合并的8种常见方法
1.ES6 解构[...arr, ...array]不改原数组值，生成新的数组。2.遍历添加array.forEach(item => { arr.push(item)})遍历方法：forEach、map、filter、every、for、for in、for of等。添加方法：push（后追加）、unshift（前追加）等。arr值改变成追加后的样子，array值不改变3.concatarr.concat(array)不改原数组值，生成新的..
2022-05-17 17:23:39
62676
原创 经典布局问题——两边定宽，中间自适应的6种布局方法
左右浮动float: left | right;对两边元素分别设置float为left、right。浮动元素后面记得清浮动，不然页面布局会混乱，兼容性好。绝对定位容器设置position为relative，内容均设置position为absolute，用left=0，left=firstContentWidth，right=0控制左中右位置。脱离文档流，兼容性较好。.container { position: relative;}.item { posit
2022-05-17 16:36:47
572
原创 localStorage、sessionStorage和cookie
cookie失效时间服务器设置默认到窗口关闭，localStorage不手动清除就一直在，sessionStorage在页面关闭时消失； 数据共享都遵循同源策略，sessionStorage还有同一页面的限制； cookie常用于存储登录验证信息，localStorage常用于存储改动少的数据减轻请求次数，sessionStorage常用于检测页面是否刷新； 前端给后端发送请求自动带cookie，可能浪费资源，storage不会自动带； cookie由服务器写入浏览器，storage由前端写入浏览器
2022-05-17 15:39:21
131
原创 js的事件轮循
执行过程普通的js代码是单线程同步执行的，从上到下的顺序。遇到异步代码，把异步代码交到其他线程处理，继续同步指定后续的单线程代码。异步代码分为宏任务和微任务，分别进入各自的等待队列。主线程代码执行完，开始检索执行微任务等待队列，完事检索执行宏任务等待队列。微任务宏任务都执行完，主线查询还有没有没执行的任务，给提到主线程上来执行。常见微任务process.nextTickPromiseMutationObserverObject.observe常见宏任务setTimeout
2022-05-17 15:21:10
222
原创 vue spa websockt 实现站内消息的发送和接收
几个基本的流程检查浏览器是否支持websocket，即判断'WebSocket' in window和'MozWebSocket' in window值是否为true，true就是浏览器支持websocket，这一步骤可以发生在mounted当中。 客户端与服务器建立连接。new WebSocket(url)即创建新的websocket实例，url为服务端提供，用来和服务器建立websocket连接。注意这个连接的过程中使用的协议不是http，https，而是ws协议。new WebSocket(ur
2020-11-13 10:16:09
1028
原创 js中可代替switch case的两种方法
普通的switch case代码普通的switch case代码替换方法1----Maplet playMap = new Map()playMap.set(1, '正常播放')playMap.set(2, '播放2分钟')playMap.set(3, '播放5分钟')playMap.set(5, '禁播')item.playType = playMap.get(parseInt(item.playType))? playMap.get(parseInt(item.playType
2020-09-02 11:01:54
3768
1
原创 区分[],{},‘‘,和false
JSON.stringify()用JSON.stringify（）把要比较的内容都转成字符串，再进行相等比较===用‘===’代替‘==’比较Object.is()用Object.is()比较但注意Object.is([],[]) // false ; Object.is({},{}) // false
2020-08-05 10:45:38
295
原创 备份一些indexedDB的写法
mounted() { let request = window.indexedDB.open('tengxiTest', 1) let that = this request.onerror = function (e) { console.log('goes wrong') console.log(e) } re...
2020-06-18 15:07:35
471
1
原创 Array Flatten By Javascript
Note: doing test in vue cli 3.x enviromentMethod One: RecursionflatFunc (arr) { arr.forEach((item, index) => { if(item.length && item.length >= 0) { this.flatFunc(item) } else { this.emptyAr...
2020-05-19 16:07:40
105
原创 一个vue 项目常用的cdn资源
<!-- vue --> <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> <!-- vue router --> <script src="https://unpkg.com/[email protected]/dist/vue...
2020-01-10 17:00:03
672
原创 vue多图片上传组件
<template> <div class="uploader-zone"> <el-row> <!-- 开始上传的按钮 --> <el-col :span="2"> <div class="mutiple-upload">...
2019-12-12 13:51:24
281
原创 node+socket+express实现多人聊天的聊天室
app.js中需要做的额外处理，开始使用socketvar server=require('http').createServer(app);var socket=require('socket.io')(server);var realServer = server.listen(3600, function () { var host = realServer.addres...
2019-12-10 12:00:43
327
原创 检查是不是回文数
回文数：1234321,12344321，一位的数不是回文数：1234673234,不为0且0结尾的数，负数方法一：通过内置函数判断，需要判断奇数位和偶数位的中间位置function checkPalindrome (data) { let midPos, firstHalf, secondHalf data = data + '' if(data.length == 1...
2019-12-05 13:17:59
210
原创 node js 实现桌面截屏
参考：https://www.npmjs.com/package/desktop-screenshot安装：npm idesktop-screenshot使用：var screenshot = require('desktop-screenshot')screenshot("./../screenshot.png", {width: 1920, height: 1080, qu...
2019-12-03 16:41:09
4693
1
原创 windows环境下安装rabbitmq教程
需要安装erlang和rabbitmqrabbitmq-server.bat // 启动服务的命令guest guest // 登录的用户名和密码'http://localhost:15672' // 浏览器中访问的地址安装教程地址 https://blog.csdn.net/zhm3023/article/details/82217222...
2019-12-03 15:33:07
92
原创 Promise 简洁应用模板
function pTest () { let pro = new Promise((resolve, reject) => { setTimeout(() => { resolve('谁知道是个什么玩意呢') }, 1000) }) return pro}function pTry () { let prom = new Promis...
2019-12-03 15:29:57
161
原创 node + mysql 爬取网页数据并写入数据库（Promise 优化，发邮件优化）
// 连接使用数据库import {connection} from './../../common/dbConnect.js'import {senderMsg} from './../../common/mailer.js'// 引入爬虫需要的网络请求模块const https = require('https')const fs = require('fs')// 需要被爬的...
2019-12-03 15:26:13
214
原创 interval in javascript
let count = 0let intervalFunc = function (word) { // 需要被周期性调用的函数 console.log(word) count += 1 console.log(count) if(count >= 10) { console.log('到了极限了') clearInterval(testInterval)...
2019-12-02 10:42:28
133
原创 node 错误信息写入log
// 打开指定文件并写入错误信息let writeLog = function (string) { fs.open(logPath, 'a', (err, fd) => { if(err) { throw err } else { fs.write(fd, string, (err, written, string) => { ...
2019-11-29 14:17:22
333
原创 node.js 发邮件
安装依赖nodemailer：npm install nodemailer -s配置发件终端：let senderMsg = nodemailer.createTransport({ host: 'smtp.qq.com', // qq邮箱的服务器 port: 465, // qq邮箱对应的端口 secureConnection: true, // 不写这句会报错：Greeti...
2019-11-29 13:29:16
421
原创 node + mysql 爬取网页数据并写入数据库
思路：1.从需要被爬的网站里获取数据2.依据获取到的数据结构（字段）创建数据库表结构3.创建数据表4.插入数据前整理数据5.将整理好的数据插入到数据库中6.插入操作结束后关闭数据库连接或者收集错误信息待优化部分：1.特殊字符（如表情符号）存入数据库中时会报错，需要优化编码方式2.错误信息可以通过邮件发给管理员3.优化同步异步操作，把好多层callback换成...
2019-11-28 16:33:44
524
原创 node.js 中对url的处理
const url = require('url')const URL = require('url').URLconst querystring = require('querystring')// console.log(url)// const myUrl = new URL('http://cmstest.cnlive.com:8768/witness/witnessTagList...
2019-11-27 10:28:57
254
1
原创 node.js 中的压缩与解压缩
const fs = require('fs')const zip = require('zlib')const gzip = zip.createGzip()const inFile = fs.createReadStream('./../in.txt')const outFile = fs.createWriteStream('./../outFounder.txt.gz')/...
2019-11-27 10:28:05
332
原创 node.js 中的console
const fs = require('fs')const { Console } = require('console')// 不需要引入console模块哦// console.log('普通的信息')// console.error(new Error('错误信息'))// console.warn('警告信息')// const output = fs.createWrit...
2019-11-27 10:26:13
372
原创 node.js 中的加密解密算法
const crypto = require('crypto')const fs = require('fs')// let secret_key = 'My name is Tengxi'// // 加密// const hash = crypto.createHmac('sha256', secret_key).update('Happy new Year').digest('hex...
2019-11-27 10:24:44
399
原创 mysql中的连接查询
实现情景：在多张表中查询数据并组合成新的查询结构连接分类：等值连接，左连接，右连接等值连接（内连接）：INNER JOIN a表中的指定项和b表中的指定项符合指定的关系时（一般判断相等）查取a，b表中的若干指定项。左连接：LEFT JOIN 查取a表中所有记录，不管b表中有没有对应项。右连接：RIGHT JOIN 查取b表中所有记录，不管a表中有没有对应项。举例：app.g...
2019-11-26 16:28:56
77
原创 node + mysql 分页请求列表数据
// 获取列表数据 带分页app.get('/user', (req, res) => {// 获取分页参数，当前页码和每页数据量，没有的话给默认值 let curPage = req.query.curPage? req.query.curPage: 1 let pageSize = req.query.pageSize? req.query.pageSize: 10/...
2019-11-25 18:02:42
416
原创 mysql operation with node.js
Part One: Add data to databaseconst querystring = require("querystring")app.post('/useradd', (req, res) => { // 'useradd' is the name of this interface, 'post' is the method of this interface...
2019-11-25 15:47:47
86
原创 LIKE in mysql database
// LIKE 用在where字句中，可以用AND 和 OR 指定一个或者多个条件// 模糊查询// 如果 LIKE 后面的参数不加% 则和等号作用相同 即为精准查询// SELECT * FROM tmusic WHERE title LIKE '%一%'; // title中包含‘一’的记录// SELECT * FROM tmusic WHERE title LIKE '%一'; /...
2019-11-25 15:05:47
181
原创 true or false in js
// or 或运算，返回第一个真值，如果所有值都是假值，返回最后一个值// let orTest = 12 || false// console.log(orTest) // 12// let orTest1 = false || 45// console.log(orTest1) // 45// let orTest2 = undefined || false || null// c...
2019-11-19 11:57:53
77
原创 Symbol in js
// 对象的属性键只能是string类型和symbol类型// “Symbol”值代表用给定名称作为唯一标识// 存在系统级symbol// 用于区别对待对内操作和对外选择性输出// let id = Symbol('id')// let ids = Symbol('id')// console.log(id)// console.log(ids)// console.log(id...
2019-11-18 17:56:04
142
原创 try catch error in js
// try里面抛出异常，会在catch中捕获，刨，走catch，finally，不抛，走try和finally// Error异常对象// throw new Error('创造一个新的错误类型的错误信息', '文件名', '行号')// 系统异常：都是构造函数（包括基类Error）// EvalError：eval()函数没被正确执行// RangeError：范围错误//...
2019-11-18 14:56:40
105
原创 yield in js
// yield IE浏览器不兼容哦 但是IE edge兼容// 碰到yield就停止，生成yield对象，对象的value属性是yield后面的值function* yieldTest () { let array = [5, 4, 3] for (let i = 0; i < array.length; i++) { yield array[i] // yield使生...
2019-11-18 14:36:22
206
原创 js promise object
use strict'// 异步计算，队列化，类比callback// 都不是单纯的普通方法，都是promise对象才生效，对象可以保存状态，函数只有通过闭包才能保存状态// 异步操作的常见方法：回调和事件监听// 异步回调容易层次过深，可读性差，维护性差// 异步回调剥夺了return的能力// promise的三个状态：pending初始状态，fulfilled操作成功，rejec...
2019-11-15 17:16:54
1118
原创 js map
// 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，不会改变原始数组// 方法按照原始数组元素顺序依次处理元素，不会对空数组检测，空数组返回[]// map中保存的是键值对，比较键的时候NaN和NaN是相等的，-0和+0是相等的，其他值遵循===标准let originArray = [4, 6, 3, 5, 2, 1]let anotherArray = [5, 23...
2019-11-15 13:33:26
163
原创 数组去重算法总结
const testArray = [{ label: 'Banana', color: 'yellow', taste: 'sweet', price: 4.38, hometown: 'Tailand', id: 5},{ label: 'Apple', color: 'red', taste: 'crisp', price: 3.99, hom...
2019-11-13 18:04:43
369
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人