- 博客(25)
- 资源 (6)
- 收藏
- 关注
原创 微前端——组合式应用路由分发
组合式应用路由分发:是实现微前端的一种方式,我们以npm包的形式发布组件,然后在基座按需引入。各个npm包可以由不同的团队分开开发,但是开发时也要遵循一定的规范。
2022-05-23 16:11:20 888 1
原创 vue项目性能优化(二)——首屏加loading
我们之所以进行性能优化,目的是为了提升用户体验。一方面是提高网页的加载速度,另一方面也可以加载引导动画转移用户注意力,让用户觉得快。今天我们要说的就是首屏优化——加loading动画。一般情况下,首屏加载都比较慢。因为chunk-vendors.xxx.js的体积比较大,没有加载之前页面会白屏,这样用户的体验就很差,我们可以在白屏时用动画替代。
2022-04-20 14:25:38 2132
原创 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 8921 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 638
原创 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 725
原创 金额千分位处理——终极方案
金额在展示时需要千分位处理,但是在提交给后台或是计算时又需要转换为数字。展示时要处理成千分位,校验和保存时时数字,所以需要两个变量。金额的校验金额的格式化处理完整代码如下:表单的校验需要借助组件iview。<template> <div class="define-budget-org"> <h4>采购申请</h4> <div class="top"> <Form :label-width="8
2021-04-01 15:59:00 1166
原创 金额千分位处理——适用于只读
在财务软件中,涉及金额的字段需要加千分位分隔符,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 525
原创 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 811
原创 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 2152 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 2420 8
原创 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 1740 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 1451 1
原创 openlayers加载百度地图一——定制百度地图
在开发中,我们常常会用到一些炫酷的地图,尤其是一些大屏项目,其实就是自定义地图。国内的自定义地图服务有①高德自定义地图,②百度自定义地图,③百度地图个性在线编辑器。国外的有mapbox的④mapbox-studio,其中①和②都只能用在自己的平台,④是国外的,地图上会有英文的地名,这里我们重点说下③。一、编辑百度自定义地图1、打开百度地图个性在线编辑器 https://developer.baidu.com/map/custom/2、根据业务定制你需要的地图(下图是我定制的蓝色风格地图)
2020-11-06 17:03:23 3475 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 2853
原创 全国地图钻取(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 2418 5
原创 webstrom编辑的项目无法通过ip访问解决办法
大家在用webstrom开发过程中可能会遇到这样的问题,通过localhost访问没问题,但是,其他人访问你的项目,这是就要通过你的ip访问了。![这里写图片描述]解决办法如下: 一、在webstrom左上角点File——Setting 二、找到debugger,修改端口并勾选 ...
2018-08-18 15:01:15 1010
原创 滚动条每次滚到一定范围触发js一次
最近有一个需求是,每次滚动条滚到一定范围内(800px&lt;n&lt;1200px),开始执行画柱状图的方法draw()一次。但滚动条事件是不停的触发,得到的效果是:滚动条一旦超过800px,就不停的执行draw(),直到距离大于1200px才停止,这显然不是我们预期的效果。改进方案是:$(document).ready(function(){ var flag=true;...
2018-08-11 19:23:36 2804
西安各区县行政区划坐标
2020-10-27
全国各省的边界范围坐标
2020-10-27
上传本地项目到github
2018-08-11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人