- 博客(41)
- 收藏
- 关注
RSS订阅原创 Raphael 实现手绘海南省三沙市地图
在支持SVG的浏览器中，它将代码渲染成SVG格式，在不支持SVG的浏览器中则会渲染为VML格式。raphael.js是一个很小的javascript库，它可以在网页中实现绘制各种矢量图、各类图表、以及图像裁剪、旋转、运动动画等等功能。前言：由于引用的GIS地图只对三沙市进行块标识，并未对其岛屿进行详细标会，所以想要研究一下手绘三沙市的群岛信息。第三步：将复制的svg数据粘贴到 Raphael的方法中。第二步：打开下载好的svg文件，复制path后的内容。逐级点击，找到三沙市，并将其坐标转成svg文件下载。
2023-03-13 09:58:23
327
原创 一文看懂Sass常见的用法
简介：Sass是css扩展语言，可减少重复代码，提高工作效率。文件后缀是.scss,兼容css,扩展了css3,增加了变量、嵌套、混入、继承、函数等属性。1、嵌套可读性强，层次分明// 1、常规用法div { margin:0; span { padding:10px; }}//======等价于=======div { margin: 0;}div span { padding: 10px;}// 2、属性嵌套text: { align: center;
2022-05-17 14:32:08
218
原创 浏览器调试小技巧
合理使用浏览器进行调试，可以有助我们提高开发效率1、打开调试窗口：F12 或 鼠标右键---检查2、浏览器截图：ctrl+shift+p,输入capture就可以截图3、箭头按钮：点击后可快速找到页面元素并查看其信息（样式、元素等）4、设备指标：切换成手机模式，调试h5样式或者是小程序可用到5、Elements 元素：左侧是元素列表，右侧是选中元素的css样式computed：盒模型以及所有的样式列表6、console控制台（1）可在此调试js或...
2022-05-17 12:26:30
3346
原创 vue-router基础知识总结
背景： vue是构建单页面应用，为了便于切换不同页面功能，因此引入了路由的概念，vue-router是路由管理器。1、路由模式（vue默认使用hash）hash: 浏览器地址栏中会有 #，改变地址不会给服务器重新发送请求history: 初次访问和刷新都会发请求(前进、后退不发请求)，若请求不到会报404,所以需要在服务器端配置访问不到资源返回index.html页面。原理是根据html5的history接口,所以只兼容支持html5 history的浏览器abstract: 用得少，node
2022-05-13 16:05:36
552
原创 vue-router结合顶部进度条NProgress的使用
简介：顶部进度条，用于动态展示切换路由加载页面的效果使用1、安装插件npm install nprogress -S2、使用// 在路由守卫拦截中引入import NProgress from 'nprogress' // progress barimport 'nprogress/nprogress.css' // progress bar styleNProgress.configure({ showSpinner: false }) // 禁⽤进度环 若为true右侧会出现一个进度
2022-05-13 10:11:27
530
原创 vue-router ------用addRoutes 实现动态权限路由加载
背景： 不同角色展示不同菜单，不同菜单对应的路由实现动态加载。即不在router.js去配置菜单对应的路由，二根据后台返回的菜单路径动态配置组件及其他信息。备注：此文很长，但都是干货前提条件：和后端约定好返回的菜单数据格式页面组件命名规范 (比如：功能名/操作名/index.vue）无菜单的子页面、其他页面需自己手动配置具体实现第一步： 创建基础版router （在项目router文件夹下建index.js）import Vue from 'vue'import Router fro
2022-05-12 14:11:49
810
原创 快速搭建qiankun微前端
简介微前端基于后台微服务衍生的前端应用架构，是将一个项目按不同模块、不同功能分解成能够独立开发、测试、部署的子项目，最后再合并运行qiankun是阿里基于single-spa开发的微前端框架，功能更完善使用场景同一个项目不同团队使用不同的技术栈旧项目的迁移，需要保留部分旧代码相同模块（用户管理）不同项目反复使用优点子应用高度自治，独立开发、独立部署、独立运行无关技术栈（子应用可以是react、vue、anglar、html）可实现业务解耦（将大应用拆解成多个小应用）依赖资源复用补
2022-05-11 12:37:29
732
原创 ES6实用小技巧
1、合并多个对象const a = { name: '张三', age: 20}const b = { address: '西藏', sex: '男'}let person = {...a, ...b}console.log(person) // 打印出 {name: '张三', age: 20, address: '西藏', sex: '男'}// 相同属性会被后面的所覆盖const c = { name: '李四'}perso
2022-04-20 17:40:27
1783
原创 element 开发中常见问题
1、el-row写表单，在屏幕缩放时，出现样式紊乱有空白的情况，如上图，A理论上应该在第三排第一个，确跑到了第三排第三个。解决办法：修改el-row为flex布局，即使无论你如何缩放都不会有此类问题.el-row { display: flex; flex-wrap: wrap; justify-content: left;}...
2022-04-18 11:24:08
696
原创 登录加密方式详解
前言用户名和密码如果明文传输，会导致安全问题，一旦密码泄露，数据就有可能会被盗取，所以需要加密传输。1、 加密算法简介可逆加密算法：加密后可以解密得到密码原文对称加密：加密、解密用相同的秘钥。优点是算法公开、加密速度快、效率高；缺点是不安全使用场景：保存手机号等需解密的信息常见算法： AES、DES、RC4、RC5、RC6非对称加密：加密使用公钥，解密使用私钥。私钥签名，公钥可验证是否被篡改优点是安全性高；缺点是加密解密时间长、速度慢使用场景：用于签名或认证常见算法：RSA、DSA
2022-04-12 20:26:01
12686
原创 正则表达式语法大全
前言：一般开发中都会接触到正则表达式，作为一名合格的前端，也应该了解一下正则表达式编写原则，便于自己也能快速编写想要的正则表达式。
2022-04-06 21:21:01
77511
1
原创 如何用循环遍历树结构
前言：作为前端，经常遇见要处理树形结构的数据（比如菜单、树形结构的人员组织），之前常规的操作就是使用递归遍历，但最近发现递归容易出现栈溢出，所以开始思考有没有其他方式来实现遍历，既能提高性能又能避免栈溢出。1、首先写个方法生成一个简单的树结构function createTree(deep){ var children={}; var tree={id:0,children}; for(var i=1;i<=deep;i++){ children.id=i; children.
2022-03-30 14:33:02
5214
原创 使用vue-cli创建uni-app的常见问题
用vue-cli安装// 第一步，安装vue-clinpm install -g @vue/cli// 安装正式版 my-uni-project可自定义项目名称vue create -p dcloudio/uni-preset-vue my-uni-project选择hello uni-app,并回车项目创建完后，执行以下命令运行// 打开项目cd my-uni-project// 运行npm run dev:h5报错：GG，居然报错了(Error: Can..
2022-03-18 18:54:29
2190
1
原创 uni-app开发之编辑器HBuilderX（一）
前言：一直想要研究uni-app，苦于没有合适的项目和时机，最近帮同事解决一些小程序的bug，终于下定决心好好整理一下笔记，开始入坑uni-app一、编辑器（HBuilderX）uni-app需要真机模拟，所以使用专业的编辑器会事半功倍。1、下载地址：HBuilderX-高效极客技巧 （建议使用正式版----app开发版）说明：Alpha更新频率高，不稳定，所以最好下载正式版标准版可用来开发web，和vs code 、webstrom差不多，要运行uni-app需要装对应插件...
2022-03-18 17:51:40
2489
原创 vue3.0与vue 2.0区别（更新中。。。）
1、初始化vue 2 是用的是new Vue()vue3使用的是creatApp()// vue2import Vue from 'vue'import App from './App.vue'import router from './router' new Vue({ router, render: h => h(App)}).$mount('#app')// vue3 import { createApp } from 'vue'import App f
2022-02-28 16:06:59
379
1
原创 用innerHTML动态插入的script没有执行的问题
原因：浏览器会将通过innerHTML动态插入的当成普通文本，不会维护到DOM里面，所以会存在调用的时候找不到。解决办法：首先嵌入后，通过DOM找到所有的script标签，然后一一创建script标签，并将script里面的内容重新赋值，将这个新的script节点追加到页面的head节点中，这样就可以调用里面的函数了。...
2021-07-08 16:01:56
4581
1
原创 js取整数、取余数的方法总结
1、去掉小数部分，只取整数部分（正数、负数都支持）parseInt(5/2) // 返回2 -正数parseInt(-5/2) // 返回-2 -负数2、向上取整数，即有小数，就+1Math.ceil(5/2) // 返回3 -正数Math.floor(-5/2) // 返回-3 -负数3、向下取整数，同1Math.ceil(-5/2) // 返回-2 -负数Math.floor(5/2) // 返回2 -正数4、四舍五入Mat
2021-07-06 15:51:09
7140
原创 nginx部署vue项目路径添加前缀
背景：近日客户提出希望在部署后的路径上添加一个项目前缀dist,原来访问地址是http://192.168.11.186:8888，现希望改成http://192.168.11.186:8888/dist才能正常访问查阅诸多资料，从nginx部署多个前端项目中找到灵感 server { listen 8081; server_name localhost; location / { #不修改此处，确保用户直接输入ip+端口无法访问到
2021-04-08 17:15:43
9334
3
原创 window系统下nginx部署与使用，以及在ngnix中部署vue项目
1、下载nginx(http://nginx.org/en/download.html)下载后，直接解压，解压后如下图：2、启动nginx(1)双击nginx.exe,在浏览器输入http://localhost:80回车，出现以下画面即成功（2）打开cmd，进入到nginx目录，输入命令start nginx 或nginx.exe，回车即可3、关闭nginx使用cmd命令窗口，输入如下命令taskkill /f /t /im nginx.exe 或 ngi...
2021-04-08 15:59:38
936
原创 使用js实现一个getIntersection函数，可获取多个区间的交集
前言：今天同事发给我一张截图，是阿里的笔试题，初看分析了一下规律，然后就动手开始写了解析：此题并不是找数组中重复的数组，二是以数组的两个值分别为最大值和最小值，来求取其中的数字，并取多个区间的交集方法一：使用argument的最大最小值来比较,相较简单function testFn(){ if(!arguments.length){return null}//若无参数，直接返回null // 只有1个成员的情形，仅判断2个数组成员是否不是数值 if(argument
2021-03-18 16:32:14
1897
1
原创 vue-cli4从0开始搭建一个项目
前言：公司项目一直都是复制原来的框架修改后再加入新的业务逻辑，最近做了一个新的架构设计，所以自己尝试开始用vue-cli4从0到有开始搭建自己的项目环境：（1）node 安装（2）vue-cli安装npm install -g @vue/cli# ORyarn global add @vue/cli安装完成后，输入命令vue -V搭建项目：...
2021-01-12 18:16:14
202
2
原创 vue-element-admin配置全局样式
背景：最近做一个管理平台，为了方便，我们使用了vue-element-admin，但是UI设计的整体主题是红色，为了方便维护和减轻其他页面的工作量，遂决定配置全局的一个样式覆盖原有的element样式。1、全局组件样式，覆盖原有的element自带样式（1）找到styles文件，新建一个custom-element文件夹，新建一个index.scss文件，引入需要的组件样式，最好是一个组件一个文件名（2）将index.scss引入到styles/index.scss中，将styles/ind
2020-11-23 18:00:50
4349
3
原创 echarts柱状图数值差异过大和最小值无法选中的问题解决
背景：最近做了一个多维的柱状图，数据差值过大，导致最小值无法选中，用户希望优化一下。用户诉求1：单个柱子 悬浮显示tooltip,不要整体悬浮解决：设置tooltip: { trigger: 'item'},设置成item，则根据图形触发，但axisPointer不生效，即无法实现悬浮有阴影的效果用户诉求2：最后那个数据太小，悬浮和点击时很难选中，要求做到点击空白区域解决:查询资料后发现myChart.getZr().on('click',function (params) {}..
2020-11-23 17:37:52
6328
8
原创 浏览器渲染相关知识
1、浏览器渲染原理2、浏览器渲染过程（1）渲染引擎解析html生成dom树（读取html,将字节转换成字符，确定标签，再将标签转换成节点，以节点构建dom）（2）解析css样式成css规则树（读取css文件，将字节转换成字符，确定标签，将标签转换成节点，构建css规则树）（3）根据dom树和css规则树生成渲染树（render tree）（一边加载、一边解析、一边渲染）（4）对渲染树进行布局处理，确定显示的位置（5）遍历渲染树将每个节点绘制出来加载js:解析时遇到js,会阻塞
2020-11-06 14:06:47
170
原创 判断一个对象为空对象的几种方法
经典面试题，研发时也经常遇见的一个问题：如何判断一个对象是空对象？方法一：将对象转换成字符串，再判断是否等于“{}”let obj={};console.log(JSON.stringfy(obj)==="{}");//返回true方法二：for in循环let result=function(obj){ for(let key in obj){ return false;//若不为空，可遍历，返回false } return true;}
2020-11-05 16:49:38
42233
4
原创 nvm、nrm的安装与使用
1、nvm(node version management)node的版本管理工具，可以安装和切换不同的node版本。2、使用背景：多个项目使用不同的node版本，需要来回切换而不是卸载后重新安装。3、下载地址：https://github.com/coreybutler/nvm-windows/releases这是免配置环境的安装包，个人建议安装此版本4、安装：傻瓜式安装，下一步即可。安装完后打开cmd,输入nvm,出现如下界面表明成功。5、常用操作安装指定版本node：nvm
2020-09-28 16:25:21
240
原创 nuxt自动生成面包屑导航
前言：最近做公司官网的项目，考虑到seo,因此采用了nuxt框架进行研发。由于nuxt是根据pages里的目录结构自动生成路由地址，为了便捷需要自动生成面包屑，网上的资料千奇百怪，本来都想着写死面包屑，但考虑未来的拓展性，还是硬着头皮 去研究nuxt的路由。思路：解决办法就是根据中间件来配置每个页面的中文名，然后动态获取显示。具体方案：1、配置中间件，在middleware文件夹下新建一个metaTitle.js的文件，将页面的meta属性取出来放到route里存起来。export defau
2020-09-23 14:17:33
3171
23
原创 关于JSON.stringify()需要了解的几个点
1、作用：将对象或数组转换成字符串//转换对象var s={a:'1',b:'2',c:'3'};var data=JSON.stringify(s);console.log(data)//结果：{"a":"1","b":"2","c":"3"}//转换数组var a=[10,20,30];var data2=JSON.stringify(a);console.log(data2)//结果：[10,20,30]console.log(typeof data2)//结果：string
2020-08-19 11:06:44
493
原创 [‘1‘,‘2‘,‘3‘].map(parseInt)涉及的map、parseInt知识点
['1','2','3'].map(parseInt)//[1,NaN,NaN]//等价于 //['1','2','3'].map((item,index)=>{// return parseInt(item,index)//})parseInt('1',0);//1parseInt('2',1);//NaNparseInt('3',2);//NaN1、map函数：创建一个新数组，其结果是该数组中每个元素执行指定函数后返回的结果。//例：[1,2,3].map(x=>.
2020-08-11 14:44:19
208
原创 tomcat运行vue项目，刷新后报404
背景：打包后的项目发给后台部署到tomcat/webapps/dist中，刷新页面报404解析：一般项目放tomcat/webapps/ROOT/,因为里面有默认的WEB-INF,若放外面，需修改conf/server.xml中的配置才会打开页面；vue是单页面应用，当router使用history模式，URL是和正常的url差不多的，但vue-router设置的路径是虚拟路径，当后台没有配置支持时，刷新会返回404错误。解决办法：tomcat的dist牡蛎添加WEB-INF文件夹，并添加文件w
2020-07-13 18:04:42
1353
原创 echarts地图点击某区域高亮的问题
背景：地图点击某个区域高亮。解析：通过查找api，我找到一种既可以实现点击高亮，又可以不更改其他区域的值的方法。获取到数据后，手动给数据添加itemstyle属性设置正常颜色和强调颜色，点击时，通过点击的地市名匹配数据，将其itemstyle设置成高亮颜色，其他地市设置为浅色。这样既不更改原数据，也能实现高亮的功能。代码如下：mapData.forEach(item=>{ item.itemStyle= { normal: { areaColor:'#AADDFF'}, .
2020-07-02 17:42:54
12686
10
原创 经典js面试编程题
1、请在一个数组中找到和为目标值的两个整数，并返回其下标；找出其中一种组合即可。例 arr=[1,2,3,4],target=4,返回结果[0,2]//方法一：遍历,缺点是时间复杂度为O（N^2）function add(arr,target){ let obj=[]; for(let i=0;i<arr.length;i++){ for(let j=i+1;j<arr.length;j++){ if(arr[i]+arr[j]
2020-05-21 16:51:46
813
2
原创 js中new操作符都做了些什么事情
new创建了一个对象类型的实例或具有构造函数的内置对象的实例。第一步它会创建一个空对象{}；第二步：链接该对象的构造函数到另一个对象；第三步：将空对象作为this的上下文，并执行构造函数；第四步：返回构造函数的值或this下面用一个方法来实现new的效果：function myNew(f,...args){ //创建空对象 let obj=Object.create(null); //将空对象指向构造函数的原型链 Object.setPrototyp
2020-05-21 15:38:49
1305
原创 判断一个数字是否为偶数的几种方式
第一种：取余function isOdd(n){ if(n%2==0){ console.log(n+'是偶数'); }else if(n%2==1){ console.log(n+'是奇数'); }else{ console.log(n+'不是整数'); }}console.log(isOdd(3))第二种：位运算符&function isOdd(n){ if(n&1){
2020-05-21 15:08:16
15149
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人