基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面,逐步掌握各种前端知识的.本篇随笔主要以实际应用场景为例介绍一些Vue前端技术的拓展,供大家参考学习.…
$(function() { //$("#bgAddTime").datebox("setValue", getTimeString()+" 00:00:00"); //$("#endAddTime").datebox("setValue", getTimeStringS()+" 23:59:59"); $("#queryPointCptGrid") .datagri…
第一种是一组json数据实现分页的效果,也就是每一次展示5条数据.第二种场景是每一秒展示4条数据,直到全部显示完.两种思路都做个笔记记录下. var nums = 5; //每页出现的数量 var pages = Math.ceil(data.length/nums); //得到总页数 var thisDate = function(curr){ //此处只是演示,实际场景通常是返回已经当前页已经分组好的数据 var str = '', last = curr*nums - 1; last =…
经常有这样的需求, 有一组数据, 每次展示其中的1条或N条,希望每条数据展示量可以做到平均. 一开始想依次展示每条数据并做记录,整组数据全展示一遍之后清除记录, 然后一直循环下去. 实现的过程中又觉得这个方法太麻烦, 可以每次先打乱数组, 然后取其中的前N条来显示, 这样应该可以保证每条数据被选中的概率差不多吧. 我果然很蠢...…
目录结构 1.前言 2.完整的操作步骤 2.1.第一步:查看ModelAdmin类和BaseModelAdmin类的源码 2.2.第二步:查看表animal对应的列表展示页面默认的数据展示 2.3.第三步:对表animal对应的列表展示页面的数据展示进行相关优化 2.4.第四步:重启服务 2.5.第五步:退出登录并再次成功登陆admin管理后台 2.6.第六步:查看表animal对应的列表展示页面最新的数据展示 3.调试过程中相关报错信息的解决方案 1.前言 对admin管理后台里的列表展示页面…
Echart是百度开发的一个javascript图表库,可以流程运行于pc和移动端,底层依赖轻量级的 Canvas 类库 ZRender. ECharts 提供了常规的折线图,柱状图,散点图,饼图,K线图,用于统计的盒形图,用于地理数据可视化的地图,热力图,线图,用于关系数据可视化的关系图,treemap,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭. 支持: 多个坐标系:直角坐标系,极坐标系,地理坐标系: 移动端的优化:可以按需打包,支持移动端手指缩放:…
近期做1功能,Gis地图 基于百度地图api , 会遇到的问题的, 如后台接口给的数据很多,大几千上万的,如果拿了数据直接渲染dom ,这滋味爽爽的. 再遇上 客户端浏览器悲催的,这卡顿就来了... 前端大量数据渲染的一个弊端. 想到的处理方式: 1. 数据的去重合并 基于当前可是屏幕范围,拿到baidu对应的 经维度区域,baidu api 里有 getBounds 和 getZoom 方法 var viewArea = map.getBounds(); // 可视区域 var mapScal…
需求:展示中国地图,鼠标点击显示对应的省份 在echart的github上下载需要的 地图文件China.js,各个省份的json文件 遇到的问题:直接在浏览器打开报错,跨域问题,用webstrom打开是localhost的方式,是可以的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</ti…
1.vue 安装 echart 库 npm install echarts --save 2.vue代码 引入 let echarts = require("echarts/lib/echarts"); require("echarts/lib/chart/line"); // 以下的组件按需引入 require("echarts/lib/component/tooltip"); // tooltip组件 require("echart…
vue集成高德地图 前言 二.使用步骤 1.注册高德开发平台 2.vue 结尾 前言 之前玩Thymeleaf的时候玩过高德地图,现在无聊Vue项目也整个地图进去~ 二.使用步骤 1.注册高德开发平台 来一发传送门,地址:https://amap.com/ 首先得取高德开发平台注册个账号,然后去控制台创建应用如下图: 创建的时候选择web端,如上图的第一条记录(第二条记录不用管~) 2.vue 编写组件之前,先安装一下,执行下面命令: npm install vue-amap --save 下一…