yuxinSir的博客

原创 geoserver label换行

【代码】geoserver label换行。

原创 Cesium在Vue中加载Draco压缩后（ion）的gltf/glb模型

首先找到node_modules/cesium/Build/Cesium/ThirdParty目录找到draco_decoder.wasm文件。在项目根目录下的public目录下新建ThirdParty，将draco_decoder.wasm复制进去，然后加载模型的时候什么都不用改，还是model:{ url: '模型目录'}就可以加载Draco压缩后的gltf模型了。其实只是解析压缩模型的js目录问题...

原创 node-sass安装问题

1.避免安装node-sass的坑2.解决了node-sass下载速度慢、本地编译慢的问题// 场景： 让React应用支持sass,由于npm6.9以上支持新功能package alias对包重命名// 可以既满足包名为node-sass，但实际是使用的dart-sass的效果npm install node-sass@npm:dart-sass ...

原创 Cesium之大批量点加载研究

需求：有一个6万4千个点的geojson文件全部加载到Cesium地球上去实现方式：PointPrimitive加载代码：var randomCount = 80000;var pointPrimitives = null;// 申明点渲染集合pointPrimitives = this.viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection()); while (randomCount--) { const dd =

原创 :class 三元运算符出错

好久没看vue官网忘记了 vue中动态绑定class使用三元运算符需加[]:class = '[data.label == '视频监控' ? 'three' : '']'

原创 vue3.0踩坑记录

1.vue3需注意model与ref不能同名，在使用elementplus时发现el-input无法输入，查看后发现由于同名导致2.vue3 中不再支持 extend 方法，可使用vue3中createApp挂载未挂载的组件，未挂载组件中如有使用第三方插件，需重新导入(暂不清楚其他方式)const components = [ElDropdown, ElDropdownItem, ElDropdownMenu];const app = createApp(speedcom);components.f

原创 vue路由懒加载resolve方式与import方式

使用路由懒加载是为了 更好的用户体验，首屏组件加载的速度快一点，解决了白屏的问题懒加载就是延迟加载或者屎按需加载，在需要的时候进行加载常用的懒加载有两种，vue异步组件和es的import1.未使用懒加载的时候vue中的路由代码：//每一个组件都会被加载进来 ，打开首页的时候全部都会加载import Vue from "vue"import Router from "vue-router"import HelloWorld from "@/components/HelloWorld.vue"

原创 el-dialog获取DOM为null

el-dialog第一次打开时，获取dom为null，可将初始值设为true，在created中修改为false。如果想在mounted中获取dom，还需要增加$nextTick

原创 解决“element表单验证输入的数字检测出来是string”的问题

<el-table-column label="最高高度(m)" width="130px"> <template slot-scope="scope"> <span v-show="scope.$index != show">{{scope.row.MaxAltitude}}</span> <el-input v-show="scope.$index == show" type="text" v-mod

原创 使用element-ui表单验证失效的特殊情况

使用template标签并进行v-if判断时，可能会造成el-form验证失效，具体原因未知，可替换div进行判断。

原创 vue el-form 表单对象里还有对象，多层嵌套校验，制定校验规则

<template> <div> <el-form ref="dataFrom" :model="dataFrom" :rules="rules"> <el-form-item label="用户名" prop="userName"> <el-input v-model="dataFrom.userName"></el-input> </el-form-item>

原创 JS替换占位符

根据不同数据格式（例如多家地图所传参数均为经度纬度高度，由于地址链接所传参数形式不同），可以先使用占位符，后续进行依次替换String.prototype.format = function () { // 数据长度为空，则直接返回 if (arguments.length == 0){ return this; } // 使用正则表达式，循环替换占位符数据 for (var result = this, i = 0; i < argume

原创 el-select 清空问题

<el-form-item label="省" prop="cityName"> <el-select v-model="editForm.pid" placeholder="请选择省" class="handle-select mr10" @change="getCity"> <el-option v-for="item in

原创 VSCode设置Vue格式化不自动换行

点开设置，设置页面点开“拓展”，找到“Vetur”，右侧点击“在setting.json中编辑”，加入以下配置："vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_line_length": 220, "wrap_attributes": "auto", "en

原创 HTTP常见状态码（14种）

HTTP状态码表示客户端HTTP请求的返回结果、标记服务器端的处理是否正常或者是出现的错误，能够根据返回的状态码判断请求是否得到正确的处理很重要。 状态码由3位数字和原因短语组成，例如下图所示： 数字中的第一位指定了响应类别，后两位无分类，响应类别有一下5种： 状态码分类表  类别原因短语1xxInformational（信息性状态码）接受的请求正在处理2xxSuccess（成功状态码）请求正常处理完毕3xxRedirection（重定向）需要...

原创 Vue路由动态传参的三种方式

现有如下场景：点击列表中的某一个单元格跳转到对应列表的详情页，并携带参数，便于详情页获取数据<el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" type="primary" @click="goList(scope.row.id)">个人信息表</el-button> </tem

原创 mysql如何取不包含今天的前七天日期

where DATE_SUB(CURDATE(), INTERVAL 7 DAY) <= date(createtime) and date(createtime) < CURDATE()

原创 el-table的type=“selection“的使用

场景：el-table,type="selection"时，重新请求后，设置列表更新前的已勾选项踩坑：在搜索过滤、翻页或者changPageSize之后，table的data会更新，之前勾选的选项会被清掉最快速解决办法：设置reserve-selection=“true” （需指定 row-key）...

原创 自定义echarts中tooltip提示框显示的内容和格式

自定义echarts中tooltip提示框显示的内容和格式公司最近在做的项目里,所有图表全部都是用echarts组件做的,包括柱状图,折线图,雷达图,扇形图,圆环图(饼图),因此tooltip提示框显示的内容及文字是必须涉及到的一点.问题一:显示tooltip显示框只需在option里设置:tooltip:{}问题二:tooltip显示的内容没有自己想要的这里便涉及到重点了:tooltip:{ formatter : function(params){ console.log(p

原创 微信小程序判断是否授权登录（未登录出现弹窗跳转登录页面）

目录 API 代码实现 API 获取用户当前设置wx.getSetting：微信官方文档 获取用户信息wx.getUserInfo：微信官方文档 微信小程序弹窗wx.showToast：微信官方文档 代码实现 onLoad: function (options) { var that = this // 判断用户是否授权登录 wx.getSetting({ success: function (res) { ...

原创 微信小程序顶部swiper切换功能的实现

在微信小程序开发文档中提供了在json文件中配置tab切换的方法，那便是tabBar，其底层原理就是几个页面的来回切换，而且此tab只能放在网页底部或者头部且有个数限制，局限性非常大。那么当我们有一个需求是实现一个页面下tab切换功能而并不局限于在app.json中配置，在微信小程序中又该怎么做呢？话不多说，上源码：WXML:<view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on

原创 genertato-创建属于自己的脚手架

yo命令官网地址：https://yeoman.io/yoyeoman 制作脚手架命令安装npm install -g yoyo 命令的作用是制作脚手架命令yo --version 查看版本号制作脚手架*generater-generator 可以制作脚手架工具npm install -g generator-generator生成脚手架工具yo gennerator-脚手架名称制作中配置项目解释脚手架创建成功将自己的工程代码放入到脚手架中1更改pack.json文

原创 Vue 生命周期

原创 html iframe 子页面调用父页面的方法

还是附上代码吧。不多说，方便日后查看父页面代码：<!DOCTYPE html><html><head> <title>parents</title> <meta charset="UTF-8"></head><body><script language="javascript" type="text/jav...

原创 正则表达式

在很多技术领域（如：自然语言处理，数据存储等），正则表达式可以很方便的提取我们想要的信息，所以正则表达式是一个很重要的知识点！一、概念正则表达式（Regular Expression）是用于描述一组字符串特征的模式，用来匹配特定的字符串。通过特殊字符+普通字符来进行模式描述，从而达到文本匹配目的工具。正则表达式目前被集成到了各种文本编辑器/文本处理工具当中二、应用场景（1）验证：表单提交时，进行用户名密码的验证。（2）...

原创 JS常见问题

1.XHTML和HTML有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。2.什么是语义化的HTML?直观的认识标签 对于搜索引擎的抓取有好处，用正确的标签做正确的事情！html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确

原创 JS事件冒泡与捕获

什么是冒泡与捕获以click点击事件为例。假如我们有一个多层结构标签。如下图，是4个div嵌套。每个div都有点击的监听事件，分别输出1234。当我们点击最里面的div时，点击事件开始传递，传递的全过程是1-2-3-4-4-3-2-1。前半部分，事件从最外面的父div依次传递到最里面的后代div，1-2-3-4这部分我们叫捕获过程。之后事件又从最里层的后代div逐层传出，4-3-2-1这部分我们叫冒泡过程。如果我把捕获监听器和冒泡监听器都加上，如下图这样。这时我们有8个监听器了，在捕获过程和冒

原创 常见的DOM操作方式有哪些

1.背景介绍什么是DOM？DOM全称是Document Object Model(文档对象模型)，是为HTML和XML提供的API。那么为什么DOM可以同时提供给HTML和XML编程接口。虽然他们用来标记的标签不同，但是他们本质的结构是相同的。换句话说，按照DOM的标准，HTML和XML都是以标签为结点构造的树结构，DOM将HTML和XML的相同的结构本质抽象出来，然后通过脚本语言，如Javascript，按照DOM里的模型标准访问和操作文档内容。在Chrome浏览器端，单击右键打开View Page

原创 JavaScript——原型与原型链

一、prototype在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。原型的概念：每一个javascript对象(除null外)创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。让我们用一张图表示构造函数和实例原型之间的关系：二、proto这是每个对象(除null外)都会有的属性，叫做__proto__，这个属性会指向该对象的原型。三、constructor每个原型都有一个constructor

原创 实现深拷贝的两种方法

递归深拷贝首先了解什么是递归 简单来说递归就是函数内部自己调用自己使用递归首先要找规律 然后找出口下面是一个简单的递归demo 帮助大家了解下递归的使用技巧// 计算1+2+3+...+10的和 function fun(i){ if(i==1){ return 1 } return i+fun(i-1) } console.log(fun(10))

原创 简单判断this指向

1.先看this在哪个作用域 全局指window function 函数体中 2.看函数执行 2.1 看是否有call apply bind 有-->看参一是谁 this就指向谁 2.2 看是否是事件处理函数 是-->触发事件元素 2.3 调用函数是否是new 是构造函数 this 指向new 实例的函数 2.4 以上都不满足 谁调用指向谁...

原创 彻底理解JavaScript中的闭包

闭包是js的一个难点也是它的一个特色，是我们必须掌握的js高级特性，那么什么是闭包呢？它又有什么用呢？我们都知道，js的作用域分两种，全局和局部，基于我们所熟悉的作用域链相关知识，我们知道在js作用域环境中访问变量的权利是由内向外的，内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量，反之则不能，也就是说在外层作用域下无法获取内层作用域下的变量，同样在不同的函数作用域中也是不能相互访问彼此变量的，那么我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢？闭包就

原创 js 生成随机整数

需要了解的 Math 对象方法方法描述ceil(x)进行上舍入，即向上取整。floor(x)进行下舍入，即向下取整。round(x)四舍五入。random()返回 0 ~ 1 之间的随机数，包含 0 不包含 1。概率说明Math.ceil(Math.random()*10); // 获取从 1 到 10 的随机整数，取 0 的概率极小。Math.round(Math.random()); // 可均衡获取 0 到 1 的随机整数

原创 简单理解JavaScript预编译

js运行三部曲语法分析预编译解释执行预编译(函数声明 整体提升)(变量 声明提升)如果变量未经声明就赋值，此变量就为全局对象所有。a = 123; -----> window.a = 123;一切声明的全局变量，全是window 的属性。var b = 123; ----> window.b = 123;window 为全局对象，就是全局的域，window 也叫 GO (Global Object)预编译四部曲1.创建AO对象 (Activation Objec

原创 JavaScript中的一些隐式转换和总结

js中的不同的数据类型之间的比较转换规则如下：1. 对象和布尔值比较对象和布尔值进行比较时，对象先转换为字符串，然后再转换为数字，布尔值直接转换为数字[] == true; //false []转换为字符串’’,然后转换为数字0,true转换为数字1，所以为false2. 对象和字符串比较对象和字符串进行比较时，对象转换为字符串，然后两者进行比较。[1,2,3] == ‘1,2,3’ // true [1,2,3]转化为’1,2,3’，然后和’1,2,3’， so结果为true;3. 对

原创 如何将本地仓库添加到远程仓库

git initgit add *git commit -m ‘’配置本机与 GitHub 连接 用ssh密钥1.生成密钥 ssh-keygen -t rsa -C ‘xxx@xx.com’创建密钥文件：将生成的密钥写入到文件中2.查看密钥 cat ~/.ssh/id_rsa.pub xxx.pub 表示密钥文件3.来到GitHub new 一个 ssh 将ssh密钥复制进去 建立电脑与 GitHub 连接如何将本地仓库 添加到 远程仓库方式一第一步 创建一个远程仓库 创建一个本地

原创 简单理解BFC

BFC，block formatting context，直译为“块级格式化上下文”。BFC是什么官方解释为：它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，让HTML元素在这个环境中按照一定规则进行布局。简而言之：BFC的目的就是形成一个完全独立的空间，让空间里的子元素不会影响到外面的布局。如何触发BFC1、根元素（例如HTML文档的根元素是 html 元素，而属于同一个BFC的两个相邻的

原创 用hover操纵单个或多个同级元素

用+拼接单个同级元素 用~拼接多个同级元素<!doctype html><html><head><meta charset="utf-8"><title>如何使用hover同时让多个元素发生变化</title> <link rel="stylesheet" href="css/demo.css"></head><body> <div></div> <

原创 CSS hack方式一览

做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协，虽然这只是个别情况。今天，结合自己的经验和理解，做了几个demo把IE6~IE10和其他标准浏览器的CSS hack做一个总结，也许本文应该是目前最全

原创 如何快速将个人开发包发布到npm上

包：组件库 插件库 ui组件 框架…开源内容，可以被别人使用包管理机制：npm cnpm yarn环境搭建nodenpmwindow + r enter --->输入cmd 按 enter ===> 启动了终端node --version12.16.1--->查看node 版本号成功npm --version6.14.0--->查看npm版本号总结：要想实现发布到npm上，环境需要依赖node npm发布流程npm init 初始