- 博客(58)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 前端开发好用的必备的vsCode插件
综合插件Chinese适用于 VS Code 的中文（简体）语言包此中文（简体）语言包为 VS Code 提供本地化界面。HTML CSS Support设置中添加以下代码："editor.parameterHints": true,"editor.quickSuggestions": { "other": true, "comments": true, "strings": true}Mithril Emmet编写HTML+CSS必备的插件，代码快速编写工具
2020-05-19 16:28:18
1007
原创 openlayers 在地图上绘制三角形、矩形、扇形、圆形、半圆、空心圆环等图形
Openlayers是一个基于Javacript开发，免费、开源的前端地图开发库，使用它，可以很容易的开发出WebGIS系统。目前Openlayers支持地图瓦片、矢量数据等众多地图数据格式，支持比较完整的地图交互操作。
2022-12-04 21:14:31
3581
1
原创 金三银四前端面试题准备
HTMLHTML5 有哪些新特性？拖拽释放(Drag and drop) API；语义化更好的内容标签（header,nav,footer,aside,article,section）；音频、视频 API (audio,video)；画布 (Canvas) API、矢量图SVG；地理 (Geolocation) API；本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除；
2022-02-22 15:27:16
2469
2
原创 制定自己团队的前端开发规范文档
没有规矩，不成方圆，对于团队来说，如果有一个大家的统一的愿意遵守的代码规范，肯定事半功倍，提高效率，避免代码Review和重构。。
2022-02-14 14:57:33
451
原创 vue3 + threejs 实现仿iView官网大波浪特效
一、效果图先上最终效果图：具体效果可参考iview官方界面iView - 一套高质量的UI组件库大波浪效果，使用的是three.js的官方例子，需要先安装three.js支持,具体可以看官方实例 three.js examples (threejs.org)二、代码1.安装threejsnpm install --save three2.代码（复制可用）components文件夹新建组件waves.vue，直接复制代码如下，可直接运行：<template> <di
2021-12-15 13:59:17
3998
7
原创 使用【微信云托管】当后台服务器调用接口，运行 node+express 项目
微信云托管是什么？官方文档 ：微信云托管 是微信团队提供的以云原生为基础的，免运维、高可用服务上云解决方案。微信云托管支持目前绝大多数语言/框架项目，开发者可以从服务器平滑迁移；并且微信云托管的自动运维和扩缩容特性，无需开发者关心服务的可用性，专注于业务，极大节省人力和服务资源成本…微信云托管部署node项目一、登录微信云托管，创建服务1.这里以微信小程序为例，登录后选择账号2.创建服务如果是第一次使用云托管的话，选择账号后会进入如下页面，选择第一个Express Server等待部署完
2021-12-10 17:39:37
2769
2
原创 JavaScript 数组去重常用的三种方式
数组去重需要去重的数组：const arr = [1, 1, 2, 3, 3]1. Set 去重const newArr= [...new Set(arr)]console.log(newArr) //[1, 2, 3]2. Array.filter去重function resetArr(arr) { let obj = {}; return arr.filter((ele) => { if (!obj[ele]) { obj[ele] = tru
2021-12-07 11:18:52
208
原创 js 构造函数和原型、原型链
JavaScript规定，每一个构造函数都有一个prototype属性，指向另一个对象。注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有 。我们可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法。 重新 render<template> <el-select
2021-11-18 16:44:22
9523
6
原创 javaScript null与undefined的区别
1.nullnull 表示"没有对象"，即该处不应该有值。典型用法是：（1） 作为函数的参数，表示该函数的参数不是对象。（2） 作为对象原型链的终点。 Object.getPrototypeOf(Object.prototype) // null2.undefinedundefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：（1）变量被声明了，但没有赋值时，就等于undefined。 var i; i // undefined（2) 调用函数时，应该
2021-11-18 15:33:53
700
原创 微信小程序访问图片服务器报错403 Failed to load image
微信小程序访问图片服务器报错403 Failed to load image使用uni-app 写微信小程序的时候，渲染服务器上的图片时报错如下：可以这样解决：在图片地址前面加上这个 https://images.weserv.nl/?url=（你的图片地址链接）...
2021-07-13 15:19:18
2408
原创 CSS 宽高度百分比数减去固定像素值无效的解决办法（例：100%-60px）
uniapp 想设置列表栏高度不同设备自动切换，结果发现下面这样写没有效果。//uni-app .item-list { height: calc(100vh-120rpx) ; }查资料发现 calc（ x - y ） 减号两边要有空格才生效//uni-app .item-list { height: calc(100vh - 120rpx) ; }...
2021-07-13 11:35:04
1067
原创 如何让 uni-app 页面中的背景图片高度和宽度自适应
如何让 uni-app 页面中的背景图片高度和宽度自适应在今天做项目的时候突然遇到一个问题，我给页面加一个背景图片，但是当页面高度超过100%时，图片会覆盖不到， 如图所示：写的代码是这样的（错误的代码）// App.vue 页面<style lang="scss">page,body { overflow-y: scroll; overflow-x: hidden; background-image: url(static/login_bg2.jpg) ; backgrou
2021-07-07 17:06:57
8749
2
原创 Vue 导出excel 表格方法封装
首先需要安装导出excel所需的插件，不会的可以借鉴这篇 link.1.新建文件exportExcel.vue<template> //导出按钮名称及格式 <el-button size="small" type="primary" @click="handleClick" icon="el-icon-download" >{{name}}</el-button ></template><
2021-07-05 17:24:58
457
2
原创 uni-app H5端获取位置
H5端使用 uni.getLocation() 获取位置时，会根据手机浏览器不同有差异。1. Android 手机浏览器在安卓浏览器上运行。获取位置时，会有一个获取位置的提示，只要点同意就可以获取精准位置。2. IOS 手机浏览器在IOS浏览器上运行,获取位置。首先 打开 manifest.json 文件，找到h5配置。划到最后，输入腾讯地图H5版的sdk（一定要配置需要的域名的白名单，要不然获取不到位置信息，并会报如下错误信息）...
2021-05-25 18:27:52
6312
原创 Upload 组件一次请求上传多张图片，并携带参数
注：使用的uview 的upload 组件，其他框架upload 类似。 <u-upload :max-count="10" //最大选择图片的数量 multiple //是否可以多选 :auto-upload="false" //关闭自动上传 ref="uUpload" :action="'#'" //因为<upload>的action属性是必须的，所以如果不用默认上传，这里随便设置一个字符串就可以了。 @on-list-change="uploadChange
2021-05-24 11:37:34
1918
1
原创 Vue使用百度地图绘制人员历史轨迹
Vue使用百度地图绘制人员历史轨迹使用1.index.html 中引入百度地图在线链接<!DOCTYPE html><html lang="zh-CH"><head> <meta charset="utf-8"> <!--必须要加 启用360浏览器的极速模式--> <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1" /> <meta
2021-04-21 11:02:38
2572
1
原创 Vue3 使用天地图绘制车辆历史轨迹
Vue3中使用天地图，自定义出车辆历史轨迹如下1. 引入在index.html 中引入天地图在线链接<!DOCTYPE html><html lang=""><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-widt
2021-04-21 10:16:27
3647
3
原创 Vue 将选中的数据导出为excel
1、安装插件npm install file-saver --savenpm install script-loader -Dnpm install xlsx --save2、在src目录，utils文件夹下新建 Blob.js 和 Export2Excel.js（文章结尾处附 Blob.js 和 Export2Excel.js 代码）3、使用（1） 如果项目中有很多地方用到导出数据成表格，则在 main.js中引入 Blob.js 和 Export2Excel.js//在main.js中
2021-04-19 16:25:06
1535
2
原创 Vue3 常用功能及问题
Vue3路由跳转方式vue3.x中路由跳转不能使用 this.$router 。引入 ctx，使用ctx.$router.push()的话，打包后会出现各种各样的报错问题。要这样来：1.首先导入router.js2.router.push实现跳转Vue3使用 this（即ctx）我们都知道在Vue2的任何一个组件中想要获取当前组件的实例可以通过this 来得到，而在Vue3中我们大量的代码都在 setup 函数中运行，并且在该函数中 this 指向的是 undefined，那么该如何获取到当前
2021-04-15 15:02:48
846
3
原创 解决 new Date(date).getTime()在ios上不兼容问题
今天在ios 手机上测试app的时候发现new Date(e.startdate).getTime() 的值在手机上就是NaN，在Google浏览器就是没有问题可以正常使用。查询了许多资料发现new Date(date).getTime()在苹果手机上是不兼容的。 解决办法：new Date(data.replace(/-/g,'/')).getTime()data是字符串，格式类似于：‘2020-09-09 23:23:23’// new Date(data.replace(/-/g,'/
2021-02-01 16:51:21
1597
原创 vue 动态显示实时时间，并将Date 转化为指定的格式
效果如下此为一款仿钉钉打卡效果，时间动态显示，并且按指定格式yyyy-MM-dd hh:mm:ss显示。// An highlighted blockexport default { data() { return { t: '', showTime: '', }; }, methods: { time() { /** *对Date的扩展，将 Date 转化为指定格式的String *月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q)
2021-02-01 16:30:02
898
原创 Vue 三种首页加载等待动画，避免首次加载白屏时间过长
先看效果第一种第二种代码如下注意：代码需要在index.html 中书写第一种效果代码// index.html <!DOCTYPE html><html lang="en"><head> <style type="text/css"> html, body, #app { height: 100%; margin: 0px; padding: 0px; }
2021-01-28 13:57:19
4714
5
原创 百度地图去除地图要素，建筑物等标记
使用到的方法map.setMapStyle()。 设置地图样式，样式包括地图底图颜色和地图要素是否展示两部分 // 在百度地图容器中创建地图实例 let map = new BMap.Map("container"); // 设定地图的中心点和坐标 let point = new BMap.Point(this.centerLng, this.centerLat); // 设置中心点坐标和地图级别 this.map.centerAndZoom(
2020-12-23 17:59:55
2470
1
原创 Echarts 多个图表随屏幕的宽度变化自适应
Echarts 图表随屏幕的宽度自适应只需要在图表数据初始化函数之后，再resize()下就可以了。drawLine() { //折线图 let leftchart1 = echarts.init(document.getElementById("leftchart1")); leftchart1.setOption(this.leftchart1); let leftchart2 = echarts.init(document.getElementById("lef
2020-12-22 14:53:07
710
原创 Vue 配置本地代理解决跨域问题
.一、为什么会出现跨域问题出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。二、什么是跨域当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。当出现跨域问题时浏览器会报如下错误：三.如何解决跨域问题在vue中使用proxy进行跨域的原理是：将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地
2020-12-21 18:05:19
2875
原创 Vue项目中element-ui 上传文件upload与form一起提交
需求：提交表单数据和上传文件同步进行，请求一次接口。elementui中的upload组件上传文件时能附带额外的参数，所以可以把表单数据作为上传时附带的额外参数提交给后台。<el-dialog class="add_box" :title="title" :visible.sync="editFormVisible" width="25%" style="min-width:1100px;" @click="closeDial
2020-11-05 13:52:09
7267
2
原创 Vue+element-table组件将选中的数据导出为excel（导出的是当前页选中的数据）
1.安装插件npm install file-saver --savenpm install xlsx --savenpm install script-loader -D如果想详细看前两个插件使用，地址如下。https://github.com/SheetJS/sheetjs.https://github.com/eligrey/FileSaver.js.2.在src文件夹下新建 excel文件夹，并在excel文件夹下新建 Blob.js 和 Export2Excel.js 文件..
2020-10-28 15:14:22
2944
2
原创 Vue项目 播放m3u8格式视频
1.安装依赖npm install --save video.js;npm install --save videojs-contrib-hls;2.在main.js引入全局样式和js文件，或者在需要使用的单页面按需引入import 'video.js/dist/video-js.css'import videojs from 'video.js';import 'videojs-contrib-hls'3.页面里面使用注意：一定要加 class=“video-js vjs-defau
2020-10-14 17:44:06
2101
1
原创 ElementUI中的 el-table 怎样格式化显示1和0为男和女
场景数据库中存储的是int型的1和0。从数据中取出来的也是1和0。怎样将其格式化为男和女实现//table 表格<el-table><el-table-column prop="type" label="案件类型" :formatter="sfktFormate"></el-table-column></el-table>添加formatter属性对应的sfktFormate是一个方法//table表格格式化 sfktForma.
2020-09-29 16:48:49
4943
原创 Vue 中使用echarts 绘制地图
图形如下第一步，下载echartsnpm install echarts --save-dev第二步，创建echarts.js文件，按需导入echarts//echarts.jsimport echarts from 'echarts/lib/echarts';//引入地图import 'echarts/lib/chart/map';//引入柱状图import 'echarts/lib/chart/bar';//引入饼图import 'echarts/lib/chart/pie';
2020-09-22 00:21:25
3997
2
原创 在页面刷新的时候清除 sessionStorage 里面的值
使用 onbeforeunload 事件onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。//检测浏览器刷新window.onbeforeunload = function() //author: meizz{ //清除sessionStorage值 sessionStorage.removeItem('type')}...
2020-09-02 17:07:43
4874
原创 vue 中如何less/sass 中使用深度选择器
问题当给vue组件的style样式加上scoped时， vue组件编译后，会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局，但如果引用了第三方组件：默认只会对组件的最外层（div）加入这个 [data-v-xxxx] 属性，但第二层开始就没有效果了。 如图所示： 第一层还有 data-v-635d6c02, 但第二层的就没有了。所以，如果你期待通过如下方式修改 input 的样式。是没有任何效果的：.choos
2020-09-01 16:19:22
3588
原创 页面退出时，清空Vuex中的数据
点击退出时，需要做的操作有：1.清空sessionStorage里面的值2.删除vuex中的值，让当前的页面刷新3.跳转回登录页sessionStorage.clear();this.$router.push('/login')//想清空vuex中的数据，让页面重新加载就行了window.location.reload()...
2020-08-17 13:25:05
8917
7
原创 Vue计算属性和监听器
计算属性模板内使用计算属性是很方便的，设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着 即便你重新渲染组件，但是计算属性的值没有发生改变时，就不会去执行。这个改变基于计算属性中的被计算值最后是否发生。<div id="demo">{{ fullName }}</div>var vm = new Vue(
2020-08-17 11:36:59
192
1
原创 前端所需 mysql数据库操作基本语句
一. MySQL的基本命令需要注意的是:以下所有命令中如过结尾有分号(;)的一定不能省略, 否则不是一条完整的命令, 系统会提示你继续输入命令1. 连接数据库格式：mysql -u 用户名 -p示例：mysql -u root -p// 此处会提示你输入密码(安装时设置的)2. 远程连接链接他人或其他服务器的数据库 格式：mysql -h ip地址 -u 用户名 -p 输入对方mysql密码 3. 其他命令// 查看版本（连接后可以执行）select version(
2020-06-15 16:04:02
486
原创 使用 Express 应用程序生成器 生成框架步骤
进入express官网.进入官网后找到快速入门，然后点击其中的Express生成器，里面有步骤。如果不想去官网根据下面的步骤也可以实现1.安装步骤1.新创建一个你需要的文件夹，然后在文件夹里面初始化项目npm init -y2.你可以通过 npx （包含在 Node.js 8.2.0 及更高版本中）命令来运行 Express 应用程序生成器。npx express-generator对于较老的 Node 版本，请通过 npm 将 Express 应用程序生成器安装到全局环境中并执行即可
2020-06-10 21:38:11
306
原创 前端面试题 总结及答案 （持续更新）
Html5 Css 部分1.行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）答：行内元素：同类型的标签排在同一排，内容撑开宽度，不能包含块级元素，设置width，height无效（可以设置line-height），padding上下无效，margin上下无效，代码换行被解析，解析宽度和父级的字体大小有关。块级元素：会独占一行，垂直方向排列，默认宽度是父级100%的宽，支持所有css的样式。2.清除浮动有哪些方式？比较好的方式是哪一种？答：1.父级也浮动。弊端：通篇都浮动，ma
2020-06-09 17:27:07
585
原创 React 知识点详解（全）文档
React.js - 第1天1. React简介React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram（照片交友） 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。Angular1 2009 年 谷歌 MVC 不支持 组件化开发由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来
2020-06-08 16:18:26
599
2020京东618叠蛋糕全自动一键完成软件
2020-05-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人