大乌鸦

原创 js中?.、??、??=的用法及使用场景

上面这个错误，相信前端开发工程师应该经常遇到吧，要么是自己考虑不全造成的，要么是后端开发人员丢失数据或者传输错误数据类型造成的。因此对数据访问时的非空判断就变成了一件很繁琐且重要的事情，下面就介绍ES6一些新的语法来方便我们开发。

原创 你不知道的获取上传进度的好方法

前端使用axios实现监听上传进度，前端使用ajax获取上传进度，前端使用fetch API获取上传进度，多文件上传展示一个进度条，大文件分片上传展示进度条

原创 分析一下vue3下会造成响应式丢失的情况

我们一开始接触vue3的时候，会对这个问题十分的不解，只是知道有这个问题而不知其根，今天就来讲讲这个问题。obj = test;//在vue2的响应式中，人们习惯直接赋值了。在进入到vue3的时候，大部分的开发者没有看文档或者基于vue2的习惯，会进行这样的赋值情况。比如对象的再次初始化的情况。通过reactive()包含的对象是进行了内部的proxy代理，因此具有响应式。但是像test这个对象，它是没有进行数据劫持的，而对象赋值的时候实际上是引用地址赋值。

原创 Vue缓存字典值减少网络请求次数，解决同样参数并发请求多次

在一些项目里，我们可能有着大量的下拉框，而这些下拉框的数据就来源于我们后端接口返回的字典信息。于是，画风可能是这样的，每次下拉，你都需要请求一次字典接口拿到这些数据，于是每次组件刷新都会重复请求接口，造成性能上的浪费，如下图所示：那么，我们可不可以把这些字典值缓存起来，只在第一次加载时请求一次呢?

原创 vue.config.js的全部配置

【代码】vue.config.js的全部配置。

原创 强制缓存这么暴力，为什么不使用协商缓存

总的来说,强制缓存是通过在请求中添加缓存策略,判断缓存是否有效,避免发送请求到服务器。而协商缓存是通过条件请求与服务器进行通信,验证缓存是否仍然有效,并在服务器返回适当的响应状态码和缓存策略。强制缓存可以减少对服务器的请求，加快资源加载速度，但可能无法获取到最新的资源。协商缓存能够验证资源的有效性，并在需要时获取最新的资源，但会增加对服务器的请求。选择使用哪种缓存策略取决于具体的应用场景和资源的特性。

原创 2023年了，v-if和v-for的优先级千万别怼错了，可尴尬的...

v-if和v-for到底是谁的优先级更高呢？在vue3版本出来之前你直接说v-for更高，我无法反驳你，但是老哥现在是2023年了，咱可不兴这样回答了，可尴尬的...显然，在V2当中，v-for的优先级更高，而在V3当中，则是v-if的优先级更高。在V3当中，做了v-if的提升优化，去除了没有必要的计算，但同时也会带来一个无法取到v-for当中遍历的item问题，这就需要开发者们采取其他灵活的方式去解决这种问题。

原创 easyui表格中表头显示错位的问题解决

这种问题其实就是easyui的框架问题，就是你在配置columns的时候，其中有个字段title这个字段不能既有中文又有英文，尽量保持一致，所有的title要么就是中文要么就是英文（hidden隐藏的也要改）。我在我的项目已经解决，希望能够帮助大家！好久没写过博客了，以后会经常更新，分享精神常在！如果实在不行就把autoColWidth设置为false。就像下图这种表头错位的问题。

原创 最好用的水印vue指令封装

【代码】最好用的水印vue指令封装。

原创 今天解封了，该递交作业了，我做了个智能机器人

首先介绍一下这个库有什么功能它是一个用程序来玩QQ的库，你自己在手机上玩QQ聊天的一些功能它都能轻松胜任。Install:> npm i oicq # or > yarn add oicq复制代码Usage:const { createClient } = require("oicq")const account = 147258369const client = createClient(account)client.on("system.onlin...

原创 vue的bus自动销毁的封装

import Vue from 'vue'// 存储所有的事件const EventStore = {}const Index = new Vue()const destoryHandler = function() { // this 为调用此方法的vue组件 const currentEventObj = EventStore[this._uid] if (!currentEventObj) { return } for (const.

原创 统一注册组件

const test = require.context('./models', false, /\.vue$/);var testfile = []test.keys().forEach(key => { var a = { fileName:'', file:'' } const fileName = key.slice(2, -4); const file = test(key).default; a.fileName.

原创 VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误

问题现象项目使用vue/cli3脚手架搭建的前端项目，vue版本为2.6.10。ie11报错问题如下：（当时的报错没有截图，用的别人的图）像这种根本就没法排查错误，很恼火百度了一堆，全是抄来抄去，关键还没有能解决问题的，艹！万能的谷歌走起其实对于这个问题很明显就是语法错误，就是ie不支持的问题，ie垃圾既然是语法的问题，那就是编译的问题，那么咱们就直接编译对应的包，但是那是哪个包呢重点来了：点开报错信息，会发现断点在的地方就是报错的地方，那肯定就是这里的问题了，...

转载 微信支付，H5支付，支付宝支付对接

https://blog.csdn.net/qq_36710522/article/details/90483194

原创 axios二次封装全局拦截

先看一下目录结构首先要下载axiosnpm i axios -S创建一个api文件夹在api文件夹下面创建一个service.js，名字你们随意，代码如下：import axios from 'axios'import util from "../util/util"import qs from "qs";import axiosConfig from "./axiosConfig";/** * @description 创建请求实例 */function cre.

原创 原型链关系图

原创 js实现一键复制功能

原生实现function copy(data){ var oInput = document.createElement("input"); oInput.value = data; document.body.appendChild(oInput); oInput.select(); document.execCommand("Copy"); oInput.className = "oInput"; oInput.style.display .

原创 vue cli3.0项目vue.config.js的配置（有注释）

const path = require('path')// 拼接路径function resolve(dir) { return path.join(__dirname, dir)}const CompressionPlugin = require('compression-webpack-plugin')const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginmodule.

原创 vue-cli3.0使用引入tailwindcss步骤

第一步 看文档文档地址：https://www.tailwindcss.cn/第二步 安装@vue/clinpm install -g @vue/cli第三步 安装Tailwind CSSnpm install tailwindcss第四步创建Tailwind配置文件npx tailwindinit//或者自己创建js文件也行 tailwind.config.js这里面生成的js是没有配置的，这也是tailwindcss提供的私有化定制样式，如果...

原创 实现选中复制时不触发点击事件

实现原理，获取当前是否有选中内容，如果有就不进行触发函数事件，反之函数如下export function getSelected() { if (window.getSelection) { return window.getSelection().toString(); } else if (document.getSelection) { return document.getSelection().toString(); } else

原创 vue项目中使用@babel/plugin-proposal-optional-chaining的?.语法，防止字段没有报错

第一步：下载@babel/plugin-proposal-optional-chainingnpm install --save-dev @babel/plugin-proposal-optional-chaining或者cnpm install --save-dev @babel/plugin-proposal-optional-chaining第二步：在你的vue项目里的babel.config.js添加如下代码来拓展解析器plugins:[["@babel/plugin-...

原创 vue项目使用预渲染，提高seo优化

这里预渲染使用到的工具是prerender-spa-plugin接下来我们第一步就是安装prerender-spa-pluginnpm i prerender-spa-plugin -S然后就是在你的项目vue.config.js里面进配置相关参数const PrerenderSPAPlugin = require('prerender-spa-plugin');const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;const

原创 前端一键启动本地服务，随启随用，方便快捷

第一种就是大家应该都知道的live-server了使用如下：一款npm工具，全局npm i -g live-server后，项目目录使用live-server命令行命令便可直接在浏览器中预览（默认找index.html，其他请自行带上文件名空格后跟在后面），并且自动全局监听实时更新。安装：npm install live-server -g命令行常用配置表然后打开项目直接在命令行里面进行live-server更高阶请看链接https://github.com/tapio

原创 原来让网站一键变成全灰色是这么的简单

html{ filter: grayscale(100%); }

原创 修改原生的上传文件按钮「input type=“file“ /」

直接贴代码<!-- 上传按钮的div --> <span class="fileinput-button"> <span>点击上传</span> <input type="file" /> </span><!-- 上传按钮的div -->然后直接复制css即可.fileinput-button { position: relative; display: inli

原创 Ant Design Vue的a-table怎样在操作里面添加多余的操作按钮

文档是这样的<template> <a-table :columns="columns" :data-source="data"></a-table></template><script>const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', scopedSlots: { customRender: 'name' },

原创 Ant Design Vue 中 DatePicker 日期选择框 placeholder 改成中文设置

关于怎样让日期里面全是中文的操作<a-range-picker @change="onChange" />首先你要引入相关js然后改成中文的操作是在main.js里面这样写import moment from 'moment';import locale from 'ant-design-vue/lib/locale-provider/zh_CN';import 'moment/locale/zh-cn';moment.locale('zh-cn');这样你的日

原创 能用的vue-cli3关闭eslint语法检查

关闭方法，在根目录创建vue.config.js文件然后把下面的代码放进去，重启项目就ok了module.exports = { lintOnSave: false, devServer: { overlay: { warnings: true, errors: true } }}

原创 小程序开发的内容安全审核

关于小程序没有调用内容审核导致不通过的问题然后进行了相应的查找最终看到了云开发的方法 现在讲述的我的云开发初探调用小程序内容安全API还挺全，我主要用到了图片和文字审查，所以对security.imgSecCheck和security.msgSecCheck的使用做记录。开通云开发在微信开发者工具打开你的小程序工程，点击“云开发”菜单进去，之前没开的按照提示填写云开发...

转载 Express脚手架generator快速搭建项目

https://www.jianshu.com/p/0905937ce8ce

转载 vuecli3 + pdfjs-dist实现简单的pdf预览

地址：https://blog.csdn.net/weixin_44402694/article/details/100152174

原创 下载文件功能

npm i file-saver文档地址：https://www.npmjs.com/package/file-saver自己实现代码this.$api .download(item.downloadId) .then(data => { let userAgent = navigator.userAgent; ...

转载 小程序通用http请求模块,模块化封装

地址：https://github.com/langyuxiansheng/MyProject/tree/master/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%B1%BB/%E9%80%9A%E7%94%A8http%E8%AF%B7%E6%B1%82%E6%A8%A1%E5%9D%97%2C%E6%A8%A1%E5%9D%97%E5%8C...

转载 Axios进度条插件

地址：https://github.com/rikmms/progress-bar-4-axios

原创 axios取消前面的接口发起的请求，执行当前发起的请求（搜索提示里面可以用到）

首先可以看一下axios源码里导出的这几个函数首先引入axios源码里面的导出的实例var CancelToken = axios.CancelToken;let cancelRequest;export function get(url, config = {}) { return instance.get(url, config);}export function...

原创 使用webpack打包单个js文件

一、基础打包1.1 创建项目目录,使用npm init初始化mkdir webpack-demo && cd webpack-demonpm init初始化完成后，目录下会生成package.json1.2 按照 webpack 4以上还需要安装webpack-clinpm install --save-dev webpack webpack-cl...

原创 echarts中国地图根据数据对省份渲染不同的颜色

完整代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>echarts中国地图</title> <style> .centerItem { width: 856px; ...

原创 上传附件方法记录

<input @change="fileData" ref="fileData" type="file" name="file" />编写方法fileData(e) { console.log(e.path[0].files[0]);//要传给后端的数据 _addfujian({ file: e.path[0].files[0] }) ...

原创 websocket的使用封装

现在目录创建一个socket.js，代码如下var websock = nullvar globalCallback = null // 初始化weosocketfunction initWebSocket () { // ws地址 -->这里是你的请求路径 var ws= 'wss://*********/webSocket'; websock = new Web...

转载 vue 使用i18n实现多语言包国际化网站

前言有些项目我们需要支持多种语言切换，满足国际化需求。 vue-i18n是一个vue插件，主要作用就是让项目支持国际化多语言，使用方便快捷，能很轻松的将我们的项目国际化。本文主要介绍使用vue-i18n实现切换中英文效果。安装vue-i18n我们使用npm安装vue-i18n。npm install vue vue-i18n --save引入vue-i18n首先在 mai...