
大全栈#大前端
文章平均质量分 75
大前端
fanjianglin
诗歌是灵魂,数学是血液!数据是我的素材,开发是我的工作!
展开
-
Web应用开发中的【下拉框选项列表抽象】
1. 需求描述在Web应用开发中,经常需要操作表格,或是填写表单。在这些操作过程中,有一类通用的操作:下拉框选项列表。为什么说通用呢,通用在于,表格的显示过程中,如果存储的是另一张表格的id或者编码,就像学生表中,存储了所在班级的编号一样。学生表和班级表是两张表,而在学生表中,并不直接存储班级名称,而是存储的班级ID,或是班级编码。这个时候,如果前端并不修改对应的班级,则后台请求的时候,直接关联查询,把对应的班级名称关联上去即可。然而,大多数时候,前端是需要对班级进行修改的。这个时候,不管是通过表格编辑原创 2021-10-13 18:38:57 · 918 阅读 · 0 评论 -
element-ui的table使用fixed错位的解决方法
问题描述在element-ui的table使用fixed固定列的时候,发现切换后返回,固定列会出现错位的情况。如下图所示:解决方法遇到问题,去百度啊。百度一下,你就知道!而在此之前,查阅官网,补充一下table的方法的一些知识,如下图所示。table表格有一个doLayout的方法,该方法会对table由隐藏变为可见进行重新布局。下面,对百度收集到的内容,进行整合:/* 监听table数据对象 */watch: { tableData(val) { this.doLayout()原创 2021-09-05 15:34:51 · 12339 阅读 · 3 评论 -
百度经纬度和高德(腾讯)经纬度互转
1. 需求描述因前端展示需要,同时用到了高德地图和百度地图,而数据库中存储的是高德地图采集的POI经纬度,前端需要在不同的页面,或是用高德地图展示,或是用百度地图展示。于是,借用强大的百度一下,搜索到对应的转换公式,整理记录如下(后期如有问题,再行调整):// 将百度地图经纬度转换为 ==> 腾讯/高德地图经纬度export function bMap2QQMap (lng, lat) { let xPi = 3.14159265358979324 * 3000.0 / 180.0原创 2021-03-02 10:21:58 · 1784 阅读 · 2 评论 -
Vue动态路由的前端实现
1. 需求描述最近开发的一个项目,涉及到这样一个需求:随着项目的不断推进,后台管理功能逐渐增多,与此同时,静态路由表也逐渐扩大,需要把静态路由方式转换为动态路由方式。要完成这样一个转换,有几个技术要点需要解决,其中一个就是前端的实现方式。那么,前端如何实现呢?2. 实现Vue动态路由的前端实现,网上有不少参考资料。但大多存在代码冗余,思路模糊不清的情况。现在整理一下思路。当前端发送登录请求login向后台请求数据后,后台会返回一个user对象至前端,前端把该对象保存至vuex中,同时,保存user中的原创 2021-01-30 19:58:57 · 5358 阅读 · 1 评论 -
Vue动态加载组件的两类方式(import和require)
1. 需求描述最近开发的一个项目,涉及到这样一个需求:随着项目的不断推进,后台管理功能逐渐增多,与此同时,静态路由表也逐渐扩大,需要把静态路由方式转换为动态路由方式。要完成这样一个转换,有几个技术要点需要解决,其中一个就是需要Vue动态加载组件,那么,Vue动态加载组件的常用方式有哪些呢?2. Vue动态加载组件的两类方式Vue加载组件主要有正常加载和懒加载,示例代码如下://正常加载import index from '../pages/index.vue'import view from '原创 2021-01-30 15:21:08 · 20832 阅读 · 6 评论 -
前端展示Web地图选择之路(从混沌中吸取经验)
1. 需求描述最近正在开发的一个项目,涉及到这样一个需求:在一个页面的主体中央区域,需要展示一个城市分布于不同地理位置的硬件设备站点的实时数据信息和对应站点的统计信息。2. 选择之路需求大意很明确,那么,选择什么方式来完成呢?由于是一个展示页面,首先想到的是Echarts。如下图所示:从官网的demo,点击进入进去,就可以看到如下所示的源码及效果:尝试了几个小时,发现存在几方面的问题:(1)指定区域的json矢量数据不容易找到;(2)在设置效果的时候,Echarts地图的api文档是5.x的;原创 2021-01-19 00:23:22 · 1498 阅读 · 2 评论 -
Springboot整合WebSocket初探
1. 需求描述最近正在开发的一个项目,客户端需要实时获取远程硬件设备通过Socket传给系统后台服务器的状态信息,并在客户端实时展示出来。该描述属于传统的拉取消息的实现方式。根据这个需求,查阅相关资料,该类问题更应该归入Web服务器消息推送类问题。换成推送消息的实现方式大意为:客户端需要实时展示系统后台服务器实时推送的状态信息。2. 消息推送技术主要方式概述目前,消息推送技术常用实现方式主要有以下几种:2.1 短连接轮询客户端采用定时器(setInterval或者setTimeout)的方式,每间原创 2021-01-17 20:30:28 · 566 阅读 · 0 评论 -
Node中数组的forEach方法探讨
1.问题描述在Node中,经常存在异步执行的情况。如下代码片段所示:let k=1;let sum=0;let array=[2,4,6,8,10];array.forEach(x=>{ //模拟forEach中存在异步操作的情况。 setTimeout(()=>{ sum+=x; },2000) })console.log...原创 2019-06-28 23:07:52 · 2549 阅读 · 0 评论 -
vue-awesome-swiper挖坑填坑之路
1. 挖坑填坑之路因项目需要,在页面的某个位置,需要轮播10组统计数据。如下图所示:于是,查阅相关资料。找到了 两种解决方案。ElementUI的Carousel走马灯组件。vue-awesome-swiper考虑到vue-awesome-swiper实现的定制效果更强大些。选择了vue-awesome-swiper。百度到vue-awesome-swiper的npm官方文档。参考其Demo。具体过程如下:(1)Install:npm install swiper vue-awesome原创 2021-01-15 14:14:44 · 394 阅读 · 1 评论