山谷里的杂货铺

原创 CancelToken中断请求

CancelToken中断请求

原创 uni-app封装request请求及get、post、put等方法

uni-app封装request请求及get、post、put等方法

原创 搭建nodejs后端环境及测试

搭建nodejs环境

原创 单点登录+待办跳转

单点登录+待办跳转

原创 获取url地址中携带的参数

获取url地址中携带的参数

原创 百度地图实现热力图的添加、移除

实现热力图和医院点图叠加显示。

原创 采用html2canvas插件，截取百度地图

html2canvas插件，百度地图截图

原创 git commit -m “备注“报错

git commit -m "备注"报错

原创 JS获取当前所在城市的地址及气温

需求：页面需要展示当前登录用户的所在地及当地气温

原创 vue项目打包生成外部配置文件修改后端访问地址

前端打包需要向后台问一个接口访问地址，测试环境、生产环境都需要一个地址，每次打包时都要前端切换地址，感觉很麻烦，现在这个方法是打包后，在配置文件中修改地址。1、在public 文件下新建一个config.js文件，并进行编辑 2、找到你请求接口的地方3、修改Index.html文件，引入config.js文件 4、dist包 只要修改dist包下的config.js文件的url就可以了...

原创 获取当前所在的城市及气温

获取当前所在的城市及气温

原创 动态修改浏览器图标和标题

系统支持修改系统的名称和图标，并且图标同步展示为浏览器页签的图标

原创 Promise.all()调用接口，并处理错误

Promise.all()调用接口

原创 微信小程序通过省市区获取经纬度

1、在腾讯位置服务注册-完善个人信息-应用管理-创建应用并申请key2、在微信公众平台，配置request路径和添加地图插件添加request路径：https://apis.map.qq.com3、下载js文件因为是根据位置获取经纬度，所以下载第二个文件4、代码把导入JS文件var QQMapWX = require('../../utils/qqmap-wx-jssdk.min');// 实例化API核心类var qqmapsdk = n..

原创 微信小程序textarea层级过高(盖住其他元素)问题的解决办法

问题：extarea层级过高会在弹窗上显示思路：1、当条件为true时显示假的输入框，点击的时切换条件为false，显示textarea，然后失去焦点之后条件又改为true2、弹出框的问题解决了，但是又发现新的问题，输入框要点击两次才能获取焦点3、解决办法，textarea的focus属性绑定条件，当条件为false时获取焦点代码：data() { return { showTextarea :true // 默认显示假输入框 ...

原创 js:浮点数相加失去精度的解决办法

我们常常会看道0.1+0.2 = 0.30000000000000004由于Js的所有数字类型都是双精度浮点型(64位)由于Js的所有数字类型都是双精度浮点型(64位)，所以0.1转化为二进制计算为：0.1 => 0.0001 1001 1001 1001…（无限循环）解决办法：1、先把小数转化为整数，然后相加（减乘除），再除以10的N次幂let len1 = this.num1.toString().split('.')[1].length // 获取有几位小数

原创 vue+js+xlsx解析导入xlsx表格、解决el-upload只上传一次问题

需求：前端导入xlsx表格，并解析成table数据传参给二级页面最后解决代码：导入插件： npm install xlsx --savethis.$toast({})是封装的信息弹窗组件<el-upload ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :auto-upload="false" :show-fil...

原创 动态修改路由的meta.title

需求：从一级页面跳转到多个二级页面，发现二级页面大体相同，只有面包屑的title不一样解决办法：在二级页面使用beforeRouteEnter查看从那个按钮跳转过来一级页面：index.vue// 批量启用\批量停用操作 toPage(item) { this.$router.push({path: '/equipment/distribute/batch',query: {type: item}}) },二级页面：batch.vuebeforeR

原创 深拷贝、浅拷贝

深浅拷贝都只针对于引用数据类型；基本数据类型：Number、String、Boolean、Null、Undefined、Symbol(ES6);引用数据类型：Object(在JS中除了基本类型以外都是对象，包括数组、函数、正则)；1、区别：浅拷贝：只复制对象的第一层属性，只复制只想指向某个对象的指针，而不复制对象本身，新旧对象共享同一个内存；深拷贝：对对象的属性进行递归复制，创造一个一摸一样的对象，新旧对象不共享内存，修改新不会修改原对象；2、浅拷贝实现方式：（1）、自定义函数

原创 谷歌浏览器按F12或者右键检查打开控制台很慢

最近突然发现谷歌浏览器按F12或者右键检查打开控制台很慢，明明之前很好用的，实在没找到原因，最后转用IE浏览器，发现他还是没有谷歌好用，只能找办法解决，最后发现解决办法很简单，具体原理是啥我也不清楚...

原创 el-tree树实践

1、弱关联+全选按钮 和强关联 <el-dialog title="选择参与对象" v-model="orgVisible" :append-to-body="false" :before-close="closeDia" > <div class="main-container"> <div class="left-container"> &...

原创 el-table前端批量删除

效果：代码：template:<el-table class="tipsTable" @click.stop ref="tipsTable" :data="formDetail.tipsTable" highlight-current-row @selection-change="handleSelectionChange" .

原创 vue日历日程组件

要求：开发一个日历日程组件：包含回到今天、选择年度、选择月份及日期切换等功能，数据为静态数据。效果：代码：<template> <div class="calendar-container"> <div class="schedule-head"> <div class="today" @click="toToday">回到今天</div> <div class="select o..

原创 vue鼠标悬浮弹窗

<div class="mouse" @mouseenter="enter" @mouseleave="leave">悬浮弹出所有参会人员 <div class="hover" v-if="show">姓名姓名姓名姓名姓名姓名姓名姓名姓名</div> </div>$w:100vw/1920;.mouse { position: relative; .hover { max-width: 300*$w; .

原创 el-select关于@blur失去焦点的坑

今天使用el-select的@blur方法,发现第一次选择失去焦点后,没获取到选择的值(e.target.value)解决方法:1 采用计时器<el-select v-model="scope.row.targetId" :disabled="disabled" clearable placeholder="请选择" filterable

原创 localStorage储存Boolean类型时出现的问题

页面首次进入能取到Boolean类型，当刷新页面之后，取不到Boolean类型解决办法，我们可以在存boolean类型时转换为字符串类型 store.commit('account/setSecretary',res.data.ifSecretary ? 'true' : 'false')...

原创 常用地代码简化方法

1、避免 if 过长if (value === 'a' || value === 'b' || value === 'c') { ... }简化：if (['a', 'b', 'c'].includes(value)) { ... }2、双 ！操作符将任何变量转换为布尔值const toto = null!!toto // falseBoolean(toto) // falseif (!!toto) { } // toto is not null or undefined3

原创 常见的数组遍历方法及其异同点(map、forEach、filter)

forEach、map、filter的区别一、相同点（1）都会循环遍历数组中的每一项（2）map()、forEach()和filter()方法里每次执行匿名函数都支持3个参数（3）只能遍历数组二、不同点（1）map()和filter()会返回一个新数组，不对原数组产生影响；forEach()不会产生新数组，无返回值1、Array.forEach()介绍：将数组循环一遍，函数参数有三个入参，不返回任何数据格式：[].forEach((item, index,

原创 vue动态菜单路由配置

通过调用后台接口来配置导航栏菜单import router from './router'import store from './store'import { Message } from 'element-ui'import NProgress from 'nprogress' // progress barimport 'nprogress/nprogress.css' // progress bar styleimport { getToken } from '@/utils/aut

原创 vue项目部署配置（hash,history模式）

1、history模式配置vue.config.jsrouter.js2、hash模式

原创 推荐安装vscode 的插件

1、Vetur VUE语言包VUE是时下最流行的js框架之一，很多公司都会选择基于VUE来构建产品，Vetur对VUE提供了很好的语言支持。没有安装该插件之前之前编写后缀名为.vue的文件时代码是白色的。2、Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code对于用不惯英文的可以安装这个插件3、Live Server 实时预览按Ctrl+S保存，修改效果就会实时同步，显示在浏览器中，再不用手动刷新.

原创 最容易理解的数组去重方法

数组去重

原创 文件的上传、下载、删除

因为文件下载时，接口未返回一个code来判断文件是否下载成功，所以要全局配置，在request.js文件中配置。接口方法：import request from '@/utils/request'// 附件下载export function downloadFile(params) { return request({ url: '/szdj-eval/evalTask/download', method: 'get', responseType: 'blob.

原创 el-form嵌套el-table，表格必填

效果图：目的：实现表格中每一项都是必填项，如果没填，在提交时会发出警告。代码：<el-form ref="detailForm" :model="detail" label-width="0"> <el-table v-loading="loading" :data="detail.appear" border highlight-current-row .

原创 post请求时总是报Error: timeout of 5000ms exceeded错误

post请求时总是报Error: timeout of 5000ms exceeded错误，但是get请求没问题，前端使用的框架是vue-element-admin框架。解决办法：// 使用mock数据用before，使用后端接口用after，否则会请求失败报超时5000ms 或者直接删除掉它...

原创 el-table带多选框、序号的动态合并单元格

效果图：代码：<el-table ref="table" v-loading="loading" :data="tableData" border highlight-current-row size="small" style="width: 100%" :span-method="objectSpanMethod" @selection.

原创 cors err跨域问题

配置vue.config.js文件proxy: { "/api": { // 将域名映射到"/api" // target: "http://localhost:8101", // 目标服务器接口 ws:true, target: "http://192.168.20.103:8301/", // 目标服务器接口 changeOrigin: true, // 设置是否允许跨域，默认false pathRe...

原创 设置系统标题

原创 scroll 进入页面，默认滑动到底部，并对滑动跳进行修改

刚进入页面时，使得页面滑动到盒子底部<div class="swapper" ref="scroll"> <div class="item" v-for="(item, index) in signInList" :key="index" @click="toPage"> <img class="avatar" :src="item.avatar" alt="头像" /> <div cl...

原创 el-table实现单选操作

<el-table-column label width="80" align="center"> <template slot-scope="scope"> <div v-if="scope.row.ifRegister" /> <el-radio v-else v-model="radioId" :label="scope.row.orgName" @change....