RSS订阅原创 js处理后端文件流自动下载excel
export function getTableExcel(params, fileName, url) { return new Promise((resolve, reject) => { excel(params, url).then(res => { let blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
2022-04-27 14:56:37
1406
原创 element 复杂表格，表格合并
element ui 复杂表格，表格合并效果图:<template> <div style=""> <el-table :data="tableData" :span-method="objectSpanMethod" border :header-cell-style="head" :hea
2022-03-25 18:33:19
2732
1
原创 javascript代理模式
什么是代理模式？举个例子：比如有小明，小王，小红三个人， 小明需要向小红传递信息，但是两人不熟悉，他们有个共同的朋友小王，可以通过小王把信息传递给小红，小王就充当了代理的角色 代理模式案例：图片预加载var myImg = (function () { const img = document.getElementById('img') return { setSrc: function (src) { img..
2022-03-25 17:52:31
1219
原创 js 回溯实现全排列
给定一个不含重复数字的数组 nums ，返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。输入：nums = [1,2,3]输出：[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]/** * @param {number[]} nums * @return {number[][]} */var permute = function(nums) { let result = [] let used = {}
2022-03-14 17:44:36
473
原创 leetcode记录-学生分数的最小差值
给你一个 下标从 0 开始 的整数数组 nums ，其中 nums[i] 表示第 i 名学生的分数。另给你一个整数 k 。从数组中选出任意 k 名学生的分数，使这 k 个分数间 最高分 和 最低分 的 差值 达到 最小化 。返回可能的 最小差值 。输入：nums = [90], k = 1输出：0解释：选出 1 名学生的分数，仅有 1 种方法：[90] 最高分和最低分之间的差值是 90 - 90 = 0可能的最小差值是 0解题思路：滑动窗口先将数组排序好，在窗口中，最高分和最低分，一定是
2022-02-11 10:28:52
197
原创 leetcode记录-最简分数
给你一个整数 n ，请你返回所有 0 到 1 之间（不包括 0 和 1）满足分母小于等于 n 的 最简 分数 。分数可以以 任意 顺序返回。实例：输入：n = 4输出：[“1/2”,“1/3”,“1/4”,“2/3”,“3/4”]解释：“2/4” 不是最简分数，因为它可以化简为 “1/2” 。思路：解题关键在于什么样的分数才是最简分数，如果一个分数的最大公因数为1，则是最简分数，求最大公因数最常规方法就是使用辗转相除法。 /** * @param {number} n * @
2022-02-10 11:05:15
265
原创 leetcode记录-找出数组中幸运数
在整数数组中，如果一个整数的出现频次和它的数值大小相等，我们就称这个整数为「幸运数」。给你一个整数数组 arr，请你从中找出并返回一个幸运数。如果数组中存在多个幸运数，只需返回 最大 的那个。如果数组中不含幸运数，则返回 -1 。/** * @param {number[]} arr * @return {number} */var findLucky = function(arr) { arr = arr.sort((a,b)=>a-b) let result = -
2022-02-07 18:28:03
271
原创 leetcode记录-轮转数组
给你一个数组，将数组中的元素向右轮转 k 个位置，其中 k 是非负数。输入: nums = [1,2,3,4,5,6,7], k = 3输出: [5,6,7,1,2,3,4]解释:向右轮转 1 步: [7,1,2,3,4,5,6]向右轮转 2 步: [6,7,1,2,3,4,5]向右轮转 3 步: [5,6,7,1,2,3,4]/** * @param {number[]} nums * @param {number} k * @return {void} Do not return a
2022-02-07 18:25:47
400
原创 记录一个关于盒子模型的问题
1.标准盒模型：content = width + padding2 +border22.IE盒模型：触发条件： box-sizing: border-box;当宽度大于 border*2 + padding 2 content = width当宽度小于 border + padding content = border2 + padding *2<!DOCTYPE html><html lang="en"><head> <meta
2021-12-20 22:44:51
250
原创 js 手写Promise
/** 自定义Promise函数模块*/(function (window){ /* * Promise构造函数 * excutor:执行器函数(同步执行) */ const PENDING = 'pending' const RESOLVED = 'resolved' const REJECTED = 'rejected' function Promise_(excutor) { this.status =
2021-12-14 17:36:04
910
原创 vite 中配置别名
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'const { resolve } = require('path')// https://vitejs.dev/config/export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve(__dirname, 'src'),
2021-12-02 17:54:56
1190
原创 vue3 provide,inject
当跨级传递数据,用传统的props需要逐层传递太过于繁琐,vue3中使用provide,inject很方便的解决这个问题第一级组件中:<script>import child from "./components/child.vue";import { reactive,provide,inject} from 'vue'export default { components:{ child, }, setup() { let person = reacti
2021-11-30 16:54:29
569
原创 vue3.0其他Composition Api
shallowReactive 和 shallowRefshallReactive:只处理对象最外层数据的响应式(浅响应式)shallRef: 只处理基本数据类型的响应式，不进行对象的响应式处理如果有一个对象数据，结构比较深，但是变化时只是外层属性变化，使用shallReactive，如果有一个对象数据,后续功能不会修改该对象中的属性，而是生成新的对象来替换，使用shallRefreadonly 和 shallowReadonlyreadonly: 让一个响应式数据变为只读的(深只读)s
2021-11-29 18:11:01
279
原创 vue3生命周期
对比下面两张生命周期可以看出，vue3使用beforeUnmount和unmounted替代了beforeDestroy和destroyed。vue3在初始化的时候已经挂载到容器，无需在beforeMount判断是否有根节点项配置。vue3生命周期：对比vue2生命周期代码验证生命周期：vue3生命周期有两种配置方式：第一种：通过配置使用生命周期钩子函数，在setup()外面配置第二种：在组合式api中使用生命周期钩子函数，其中beforeCreate()、 created()相当于setu
2021-11-29 11:51:19
7723
原创 vue3.0 watch
使用方式对比2.x版本需要引入import { watch } from 'vue'1.处理基本数据类型import { ref,reactive,computed,watch } from 'vue'<template> 姓：<input type="text" v-model="person.firstName"> <br/> 名：<input type="text" v-model="person.lastName">
2021-11-25 17:50:25
578
原创 vue3.0学习笔记（computed）
vue3.0 计算属性需要单独引入（兼容2.0版本写法）<template> 姓：<input type="text" v-model="person.firstName"> <br/> 名：<input type="text" v-model="person.lastName"> <br/> <span>{{person.fullName}}</span> <br/>
2021-11-25 14:53:15
356
原创 vue3学习笔记（vue3响应式原理）
vue3实现响应式原理1.通过Proxy(代理):拦截对象中任意属性的变化，包括属性的读写、属性的添加、属性的删除等。2.通过Reflect(反射): 对被代理对象(源对象)的属性进行操作 let person = { name: '张三', age: 18 } let p = new Proxy(person,{ // 读取时候调用 get(target,prop){ return Reflec
2021-11-25 11:06:08
483
原创 下班倒计时改进版页面渲染
<div class="count-box" id="count-box"> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .count-box{ width: 100%; display: flex; margin-top: 200px;
2021-09-23 15:52:21
97
原创 要放假了，利用js写个下班倒计时
function getEndTime() { let s = Math.ceil((new Date(new Date().toLocaleDateString()+'/18:00').getTime() - new Date().getTime())/1000) let timer = setInterval(()=>{ s-- if(s>0) { console.log(`距离下班还剩${s}秒`)
2021-09-18 16:35:48
300
原创 js之手写promise.all
let p1 = new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve(1) },1000) }) p1.then((res)=>{ console.log(res) }).catch((err)=>{ console.log(err); }) let p2 = new Promise((resolve, reject)=>{ setTimeo
2021-09-03 09:30:19
146
原创 数组去重（map和set）
//[false,true,undefined,null,NaN,0,0,1,1,{},{},'a','a',NaN] 为Array对象添加一个去重方法（仅限 Map和Set） //[false, true, undefined, null, NaN, 0, 1, {…}, {…}, "a"] let arr = [false,true,undefined,null,NaN,0,0,1,1,{},{},'a','a',NaN] Array.prototype.unique1 = func
2021-09-02 09:47:45
229
原创 js数组扁平化
let arr = [1,[2,3],[4,[5,6]]] // 递归 // let newArr = [] // let deepFlat = function (arr) { // if(!Array.isArray(arr)) return // for(let i=0;i<arr.length;i++) { // if(Array.isArray(arr[i])) { // deepFlat(arr[i]) // }else{
2021-09-01 11:09:09
93
原创 js堆栈练习
// var obj = {} // var [a,b] = ['0',0] // obj[a] = '张三' // obj[b] = '李四' // console.log(obj[a],obj[b]) // 李四 李四 // var [a,b] = [{name:'a'},{name:'b'}] // var obj = {} // obj[a] = '张三' // obj[b] = '李四' // console.
2021-08-31 16:52:17
90
原创 node学习案例留言板
1.初始化项目：npm init2.安装项目依赖cnpm i body-parser ejs express moment morgan --save3.项目结构app.js:const express = require('express')const bodyParser = require('body-parser')const morgan = require('morgan')const moment = require('moment')const path = requi
2021-08-25 11:32:20
122
原创 解决uniapp微信小程序使用腾讯地图视野变化标记闪烁问题
此外腾讯地图还有个坑，经过本人测试在开发工具上第一次不会触发regionchange事件，但是在真机上会触发/ 解决标注位置闪烁问题var distance = this.getDistance(res.latitude, res.longitude, this.latitude, this.longitude)if ((res.latitude == this.latitude && res.longitude == this.longitude) || distance <
2021-08-09 10:31:00
3336
原创 css三角形案例
<style> *{ margin: 0; padding: 0; box-sizing: border-box; } .left { width: 250px; height: 100px; background-color: red; } .left::after{ .
2021-08-06 11:26:42
51
原创 css实现三栏布局
<style> *{ margin: 0; padding: 0; box-sizing: border-box; } .box{ height: 200px; width: 100%; background-color: grey; display: flex; } .box .box1{ width: 2.
2021-08-06 11:21:57
45
原创 uniapp微信小程序新版本获取用户的头像和昵称，手机号
新版本微信小程序通过getUserInfo获取到用户的头像是灰色，昵称显示为微信用户，这是微信版本更新了，现在需要用getUserProfile来获取用户的头像和昵称，并且只能页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，也就是说你不能在一个方法里面去触发这个事件，这是需要值得注意的。详见微信官方文档说明<button @click="logins">测试登录</button>logins() { uni.getUserProfile({
2021-08-06 10:23:51
6470
3
原创 uniapp实现导航栏随着滚动淡入淡出效果
实现思路:默认导航栏其实一直存在，只需初始时把导航栏透明度设为0，随着滚动，改变透明度即可onPageScroll(res) { //获取距离顶部距离 const scrollTop = res.scrollTop; if (scrollTop >= 0) { // 导航条颜色透明渐变 if (scrollTop <= 20) { this.opacityNum = 0 } else if (20 < scrollTop && scrollTop
2021-08-05 10:00:56
3858
原创 uniapp微信小程序获取手机状态栏高度
uni.getSystemInfo({ success: function(data) { // 将其赋值给this _this.height = data.statusBarHeight; let custom = wx.getMenuButtonBoundingClientRect() //导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度。 _this.navHeight = custom.bottom +
2021-08-05 09:53:51
1222
原创 uniapp微信小程序支付
uni.requestPayment({ provider: 'wxpay', package: res.data.map.package, nonceStr: String(res.data.map.nonceStr), timeStamp: String(res.data.map.timeStamp), paySign:res.data.map.paySign, signType: 'MD5', success: (result)=> {.
2021-08-05 09:48:44
167
原创 uniapp 发布app生成keystore
1.下载jdk安装，安装成功之后找到java目录中jre的bin目录下，然后以管理员模式打开cmd2.输入一下命令keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore（testalias：对应证书别名，密码自己设置，test.keystore为证书名称）...
2021-07-07 18:21:33
623
原创 uniapp跳转到tabbar页并刷新页面
uni.switchTab({ url:'/pages/Dynamic/main', success: (res) => { let page = getCurrentPages().pop(); if (page == undefined || page == null) return; page.onLoad(); } })
2021-06-17 10:38:31
6199
原创 微信小程序使用高德SDK获取天气
import amapFile from '@/libs/amap-wx.js' this.myAmapFun = new amapFile.AMapWX({key: 'your key'}); this.myAmapFun.getWeather( { city:'地区行政编码', success: (data)=>{ //成功回调 console.log(data,'天气') .
2021-06-11 14:36:39
562
原创 js数组中对象去重
let obj = [] targetArr = targetArr.reduce(function(item, next) { obj[next.id] ? '' : obj[next.id] = true && item.push(next); return item; }, []);
2021-06-11 14:29:14
53
原创 从0到1打造属于自己的vue项目并实现一个简易购物车案例
1.初始化项目：npm-init项目结构：2.webpack配置:参考webpack入门完整实例：(1)webpack.config.jsconst path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin') // 插件：生成随机名称的文件自动引入在对应文件中const {CleanWebpackPlugin} = require('clean-webpack-plugin') //每
2021-05-27 14:43:19
421
原创 js深浅拷贝
// var obj1 = {// name: '李四'// }// var obj2 = obj1// obj1.name = '张三'// console.log(obj1,obj2);// 实现 1.Object.assign()var person = { name: '张三', age: '12', relation: { farther:'张以某' }}var p1 = {}Object.assign(p1,person
2021-05-10 22:54:24
42