- 博客(23)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 微前端——组合式应用路由分发
组合式应用路由分发：是实现微前端的一种方式，我们以npm包的形式发布组件，然后在基座按需引入。各个npm包可以由不同的团队分开开发，但是开发时也要遵循一定的规范。
2022-05-23 16:11:20
825
1
原创 vue项目性能优化(二)——首屏加loading
我们之所以进行性能优化，目的是为了提升用户体验。一方面是提高网页的加载速度，另一方面也可以加载引导动画转移用户注意力，让用户觉得快。今天我们要说的就是首屏优化——加loading动画。一般情况下，首屏加载都比较慢。因为chunk-vendors.xxx.js的体积比较大，没有加载之前页面会白屏，这样用户的体验就很差，我们可以在白屏时用动画替代。
2022-04-20 14:25:38
2025
原创 vue项目性能优化(一)——压缩chunk-vendors.xxx.js
项目在第一次加载时响应很慢，打开控制台会发现，chunk-vendors.xxx.js和chunk-vendors.xxx.css体积较大，占用了大量时间。chunk-vendors.xxx.js保存的是相关依赖的文件，如vue、vue-router、view-design等。一、按需引入依赖，删除package.js中不用的依赖，这里我们不用国际化，故删除vue-i18n。二、区分开发依赖和线上依赖。package.js有dependencies和devDependencies两处放置依赖的位置。
2022-04-02 10:44:46
8643
6
原创 网站搭建与部署（二）——Nginx部署服务与代理
这里我用的后端语言是node.js，所以需要先安装node.js、mysql以及数据库工具Navicat。重点是Nginx的使用。一、安装Nginx。1、Nginx官网下载，这里我选择的是windows版本。2、解压之后，双击nginx.exe，控制台一闪而过，其实已经启动了，浏览器输入http://localhost，显示Welcome to nginx!则表示启动成功。3、关闭Nginx服务。nginx安装目录下输入命令：taskkill /f /t /im nginx.exe 可以彻
2022-04-01 17:42:57
604
原创 js实现元素气泡
当表格中文本过多时，我们往往采用省略号的代替，鼠标滑过时用气泡展示全部内容。iview等UI框架自带有改组件，今天我们将用原生js实现改功能。1、最终效果如下：2、HTML<div class="has-select-dropdown"> 出发地：<input type="text" v-model="searchForm.start" class="city" placeholder="出发地"/> 目的地：<input type="text" v-model="
2021-09-03 15:23:57
672
原创 金额千分位处理——终极方案
金额在展示时需要千分位处理，但是在提交给后台或是计算时又需要转换为数字。展示时要处理成千分位，校验和保存时时数字，所以需要两个变量。金额的校验金额的格式化处理完整代码如下：表单的校验需要借助组件iview。<template> <div class="define-budget-org"> <h4>采购申请</h4> <div class="top"> <Form :label-width="8
2021-04-01 15:59:00
1133
原创 金额千分位处理——适用于只读
在财务软件中，涉及金额的字段需要加千分位分隔符，accounting.js 就是这样一个工具。1、npm安装包。npm install accounting --save2、引入。import accounting from 'accounting';3、通用配置。import accounting from 'accounting';accounting.settings = { currency: { symbol: '￥', // default currency symbol
2021-03-31 17:25:05
487
原创 npm下载时使用淘宝代理
npm下载时使用淘宝代理1、永久使用淘宝镜像 npm config set registry https://registry.npm.taobao.org2、验证淘宝镜像是否配置成功 npm config get registry 或者 npm info express3、将淘宝镜像恢复为原来官网镜像 npm config set registry https://registry.npmjs.org4、使用cnpm npm install -g cnpm --registry=https://
2021-03-30 14:11:06
741
原创 openlayers6绘制点线面圆
gis中点线面的绘制是常用功能。一般在交通项目中会用来绘制限行区，公安项目会用来绘制辖区，以及在资源搜索时，会用到点选、圈选、多边形选等。1、HTML——用到了iview框架的下拉框组件<template> <div class="box"> <div class="operation"> <Dropdown style="margin-left: 15px" trigger="click" @on-click
2020-11-12 14:27:01
2072
2
原创 openlayers加载百度地图四——ol6加载百度地图
当把openlayers从5升级到6时，发现加载百度地图就发生瓦片错位的情况。ol6加载瓦片的方式是从中心点依次向右下角递增，二ol5是从中心点依次向右上角递增，所以，需要把tileUrlFunction中的y坐标改为相反数即可：<template> <div class="box"> <div id="container"></div> </div></template><script
2020-11-09 15:30:26
2260
7
原创 openlayers加载百度地图三——ol5加载百度地图，解决偏移问题
偏移问题，我首先想到的是，百度地图采用的是bd09II坐标系，那是不是我们把wgs84坐标转换成bd09II再加载就好了呢？经过坐标转换之后发现，坐标偏移还是很严重。其实根本原因是：我们需要根据bd09II坐标系，生成baiduMercator投影。怎么把3857投影转化成baiduMercator呢，在giuhub中tschaub给出了方法 projzh下面我们就利用projzh加载百度地图：<!-- * @Author: yang xiunan * @Date: 2020-10-31 1
2020-11-09 11:15:09
1641
5
原创 openlayers加载百度地图二——ol5加载百度地图
对于一般瓦片来说，origin在左上角，X轴从左至右递增，Y轴是从上往下递增（先计算左上角，然后计算右下角）但是，百度瓦片Origin在[0,0]，X轴从左至右递增，Y轴从下往上递增（从左下角到右上角）所以，就要在tileUrlFunction上下点功夫了，废话不多说，直接撸代码吧：<!-- * @Author: yang xiunan * @Date: 2020-10-31 16:03:42 * @LastEditTime: 2020-11-09 09:51:18 * @LastE
2020-11-09 09:58:36
1370
1
原创 openlayers加载百度地图一——定制百度地图
在开发中，我们常常会用到一些炫酷的地图，尤其是一些大屏项目，其实就是自定义地图。国内的自定义地图服务有①高德自定义地图，②百度自定义地图，③百度地图个性在线编辑器。国外的有mapbox的④mapbox-studio，其中①和②都只能用在自己的平台，④是国外的，地图上会有英文的地名，这里我们重点说下③。一、编辑百度自定义地图1、打开百度地图个性在线编辑器 https://developer.baidu.com/map/custom/2、根据业务定制你需要的地图（下图是我定制的蓝色风格地图）
2020-11-06 17:03:23
3266
4
转载 vue创建项目自定义配置
一 . 安装 vue cli npm install -g @vue/cli 二 . 创建项目 vue create ‘项目名’ vue create hello-world 1、选择 Manually select features (自选项目配置) Vue CLI ...
2020-11-02 10:33:59
2778
原创 全国地图钻取（openlayers6+高德地图api行政区划）
全国地图钻取（openlayers6+高德地图api行政区划）1、用的是两种方式加载行政范围：全国、陕西、西安用的是本地数据，其他各区域用的是高德行政区划数据。2、用高德的web服务——行政区划，需要先申请key，个人账户每天可调用3000次。3、效果如下：4、完整代码。<!-- * @Author: yangxiunan * @Date: 2020-10-20 17:06:42 * @LastEditTime: 2020-10-27 10:20:26 * @LastEdito
2020-10-27 13:51:49
2083
3
原创 webstrom编辑的项目无法通过ip访问解决办法
大家在用webstrom开发过程中可能会遇到这样的问题，通过localhost访问没问题，但是，其他人访问你的项目，这是就要通过你的ip访问了。![这里写图片描述]解决办法如下： 一、在webstrom左上角点File——Setting 二、找到debugger，修改端口并勾选 ...
2018-08-18 15:01:15
988
原创 滚动条每次滚到一定范围触发js一次
最近有一个需求是，每次滚动条滚到一定范围内（800px&lt;n&lt;1200px），开始执行画柱状图的方法draw（）一次。但滚动条事件是不停的触发，得到的效果是：滚动条一旦超过800px，就不停的执行draw（），直到距离大于1200px才停止，这显然不是我们预期的效果。改进方案是：$(document).ready(function(){ var flag=true;...
2018-08-11 19:23:36
2746
西安各区县行政区划坐标
2020-10-27
全国各省的边界范围坐标
2020-10-27
上传本地项目到github
2018-08-11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人