前端项目实践
文章平均质量分 68
基于实际工作的项目实践,记录前端开发的疑难点以及提升性能的技巧等。
FloraCat_染小白
前端空城狮爱GIS可视化
展开
-
基于高德地图的轨迹绘制与轨迹回放
load2DMap() { var tableData = this.tableData; var lineArr = this.lineArr; // 路径数组(二维数组,格式如[ [117.139161, 36.667547], [117.139170, 36.667689]]) va...原创 2019-10-26 20:11:16 · 5294 阅读 · 1 评论 -
使用websocket实现浏览器与服务端进行双向通信(Vue springboot)
一、websocket介绍通常服务端想主动给前端推送信息的话,需要使用轮询技术,即在特定的时间间隔(比如每1秒),浏览器通过调用服务端的接口向服务端发送http请求,服务端将最新的数据发送给浏览器。这种方式在性能上有明显的缺点,即浏览器需要不断向服务器发送请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然会浪费很多的宽带资源。而HTML5的websock...原创 2019-10-22 21:27:34 · 2475 阅读 · 1 评论 -
关于前端缓存优化
关于缓存,大概可以分为以下几种:① CDN缓存② DNS缓存③ 客户端缓存(无需请求的memory cache,disk cache;需要发请求验证的Etag/Last-Modified304)④ Service Worker与缓存及离线缓存⑤ PageCache与ajax缓存一、 CDN缓存CDN可以理解为分布在每个县城或乡镇的火车票代售点,用户在浏览网站时,C...原创 2019-07-04 16:59:08 · 2462 阅读 · 0 评论 -
【vue】vue使用x2js解析xml文件
一、功能需求实验室的项目需要添加直播功能,获取到直播流网址如下图所示:这是一个xml网址,需要解析这个xml网址获取到正在直播的rtmp地址,以进行直播展示。jq使用get或ajax解析xml文件在vue框架里似乎行不通了。搜索发现了x2js插件,用于在XML和JavaScript对象之间进行转换的库。二、x2js安装配置可以使用npm安装或者到https://github...原创 2019-02-20 10:57:18 · 13156 阅读 · 4 评论 -
【vue】video结合cyberplayer.js实现flv视频播放
一、原理H5新增的<video>标签可以用于视频播放,但格式有限,播放不了直播生成的.flv视频。那么可以结合cyberplayer.js来实现.flv视频播放,简单粗暴。原理如下:① 下载该库,并在index.html中引入<script type='text/javascript' src="./static/js/cyberplayer-3.4.1/cyb...原创 2019-02-22 15:12:44 · 4837 阅读 · 0 评论 -
【Vue】如何使用脚本架工具vue-cli快速创建vue项目
对于初学小白,webpack迷迷糊糊,写vue已经够辛苦的了,奈何还要自己配置webpack......其实有帮助我们更好更快速开发代码的工具——vue-cli一、安装常用的有cli2和cli3两个版本,至此,cli2非常成熟,cli3相对成熟而更加强大。cli2:npm install -g vue-clicli3:npm install -g @vue/cli...原创 2018-11-29 15:59:44 · 567 阅读 · 0 评论 -
【leetcode】Reverse Integer(整数、字符串和数组之间转换)
Given a 32-bit signed integer, reverse digits of an integer.Example 1:Input: 123Output: 321Example 2:Input: -123Output: -321Example 3:Input: 120Output: 21Note:Assume we are de...原创 2018-12-02 21:49:57 · 1270 阅读 · 0 评论 -
【数据可视化】位置信息坐标转换(GCJ02坐标、WGS84坐标、bd09坐标之间的转换)
现在几乎每一个App都会收集用户位置信息,App得到的坐标大多是通过高德地图等SDK获取的,当使用这些坐标进行webGIS可视化的时候会发现各种偏离状况,坐标不对,叠加错位。这是由于不同SDK获取到的坐标可能属于不同坐标系,想要针对不同地图的地图将手中的坐标数据转换成相吻合的数据,可以采用coordtransform库来解决这一问题。首先,了解现如今互联网坐标系的现状。1. ...原创 2018-10-15 16:05:21 · 31277 阅读 · 0 评论 -
【JavaScript】JS处理32位整型位运算
由上一篇leetcode题目(反转整数)中所涉及到的js整型范围,针对js如何处理32位整数运算原理以作扩展:1、32位整数运算首先要清楚,在JS中无论是整数还是小数都是按照64位的浮点数形式存储,而整数运算会自动转化为32位有符号整数。有符号整数使用 31 位表示整数的数值,用第 32 位表示整数的符号,0 表示正数,1 表示负数。数值范围为 [-2^31 , 2^31-1], 即[...原创 2018-12-03 09:32:20 · 7365 阅读 · 0 评论 -
【Vue】以登录token为例,理解vuex状态管理使用
一、Vuex概念 Vue.js通过Vuex对组件的公共状态进行集中管理。每一个 Vuex 应用的核心是 store(仓库),“store”可以理解为是一个容器,包含着应用中大部分的状态 (state)。这些状态是全局的,但Vuex 和单纯的全局对象有以下两点不同: ① Vuex 的状态存储是响应式的。 Vue 组件从 store 中读取状态时,若 store 中的状态发生...原创 2018-12-21 14:59:48 · 6449 阅读 · 0 评论 -
token实现登录状态保持/身份认证的机制
实现登录状态保持与身份认证的方式通常有两种:session结合数据库、token。两者相比较,token有较多优点。① token可以存储在任何位置(比如cookie或local storage)② token更容易跨域③ token过期时可以通过刷新token,让用户一直保持有效登录④ 如果api在不同终端上,token更方便安全 二、token原理其过程大致...原创 2018-12-19 10:18:32 · 28463 阅读 · 3 评论 -
【采坑之路】 axios 的跨域问题
最近学了一下vue,尝试做一个管理网站,使用axios请求后台接口数据时,又难免掉进了跨域坑中,报错如下403:根据报错提示“XMLHttpRequest has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.”,可以得知...原创 2018-12-12 09:35:15 · 11080 阅读 · 1 评论 -
【Vue踩坑之旅】在element的dialog中显示高德地图
一、问题及解决思路高德地图在页面中引用能够正常显示,但是想在弹框中显示高德地图并进行操作,却显示为空白......很奇怪,为什么在页面中能够显示,在对话框里就不能显示了。首先让弹框一开始就显示,并给地图加载增加了3秒延迟,3秒后地图正常显示。喏,看来是组件初始化的时候容器dom还没渲染,因此需要使用nextTick。其次查看element ui的源码,会发现 <div cla...原创 2019-01-14 16:24:37 · 10622 阅读 · 9 评论 -
【Vue】Vue项目打包发布到服务器,以及空白页或图片不显示问题
一、Vue项目打包Vue项目完成后,需要打包上线。打包只需要执行命令npm run build即可,但有两点需要注意的地方,否则就会出现空白页或图片不显示问题。① 修改路径位置,解决空白页问题。 修改位于项目目录中的config/index.js,将assetsPublicPath: '/'修改为assetsPublicPath: './',注意有两处。如下: ...原创 2019-01-09 09:06:41 · 6596 阅读 · 0 评论