- 博客(271)
- 资源 (23)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 vue2+openlayers6 项目实战示例详解【目录】
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动OpenLayers是一个JavaScript 类库包，主要是用于开发Web GIS客户端。这就是说，要先在网页中引用OpenLayers的JavaScript文件以及相应的css样式表和资源，根据其提供的功能接口，直接调用。
2023-09-15 11:34:25
4107
1
转载 uni-app 微信小程序根据角色动态的更改底部tabbar
文章目录1. 需求背景1.1 源码下载2. 问题前提及思路3. 开始撸3.1 设置 `tabbar.js` 配置不同角色不同的菜单3.2 设置 `page.json`3.3 vue 配置3.4 tabBar组件代码3.5 setRole方法1. 需求背景公司要求开发一个小程序，要求二种不同权限的人群都可以使用，使用时根据不同的权限，获取不同的tabbar，以及展示对应不同的内容。登录页面分为 用户登录 及 管理员登录1.2 用户登录和管理员登录的 tabbar 根据账号角色进行对应展示1.1
2020-10-14 15:44:48
99997
140
原创 Vue Shop Vite官网、Vue Admin Plus官网、前端框架、演示地址、源码、文档
是一个基于vue3和vite的前端快速开发平台，它使用了最新的前端技术和架构。下面是【vue-shop-vite】项目的一些截图，需要可以评论。
2024-11-15 14:51:33
916
1
原创 解决使用阿里云DataV Geo在线地图路径访问403问题
但是，接口之前请求会403。疯狂google中后，终于找到解决方法。关键一步，添加完这行代码后一定要重启项目！去动态获取GeoJSON 省市的数据，如下代码。最近在写一个省市下钻的demo，用到的是。中添加阿里云权限如下图。再次查看，已经200了。
2024-09-18 00:06:59
854
2
原创 echarts map地图动态下钻,自定义标注,自定义tooltip弹窗【完整demo版本】
在数据可视化中，地图是很重要的一个环节，很多时候需要展现的不仅是国家地图，还需要能从国家进入到省市。这个逐级进入的过程就是我们今天说的地图下钻。地图下钻看起来很屌、很高大上，但是仔细琢磨一下，技术实现上真的很简单。文章目录1. 本章主要功能介绍1. 地图下钻实现思路（本章核心）2. 下钻代码实现（本章核心）3. 完整代码3.1 vue部分3.2 mapData.js 部分4. 接口数据1. 本章主要功能介绍自定义标注样式&自定义tooltip弹窗样式（上章内容） echarts 自定义标注
2024-09-17 23:54:44
1468
1
原创 echarts 实现中国geo地图自定义贴图实例
先需要把上面的两张图片转成base64的文本格式，然后在mounted初始化图片的dom，如下，注意一定要在mounted里面，不然获取不到data() {return {mapImg: null, //地图底色mapActiveImg: null, //地图悬浮移入后的底色},// 地图底色"100px";// 地图悬浮移入后的底色"100px";},
2024-09-17 23:04:00
1589
原创 echarts 自定义标注样式&自定义tooltip弹窗样式
设置symbol属性为图片地址即可，注意前面跟image://特有的写法baseData是经纬度数据，这里不贴了tooltip: {.... //省略},geo: {.... //省略},series: [.... //省略},},tooltip: {},},${require`,z: 9999,},],结合上面代码，设置tooltip为自定义的一个函数formatHtml，内容如下，主要是自定义css样式即可return `
2024-09-17 22:18:33
2321
原创 vue数字滚动插件vue-countTo
vue-countTo 是一个无依赖的轻量级 vue 组件，可以自行覆盖 easingFn，可以设置 startVal 和 endVal，自动判断加减计数，支持 vue-ssr，借鉴 countUp.js；这是一个 vue 组件，它会在指定的时间内计数到目标数字。
2024-09-05 13:54:33
1372
原创 H5实现第三方分享功能，(WhatsApp,Facebook,Messenger,Instagram,Telegram,Zalo,Twitter/X)
【代码】H5实现第三方分享功能，(WhatsApp,Facebook,Messenger,Instagram,Telegram,Zalo,Twitter/X)
2024-06-25 15:17:23
2729
原创 解决vite打包只生成了一个css和js文件问题
这样肯定是不行的，因为这样这个文件的包大小很大，第一次访问会。今天整了一个项目，试了下打包，发下打包后只生成了。我看了我的页面路由代码，果然是这样引入的。原因是因为这种写法是路由懒加载（已经根据页面分js和css了。
2024-05-23 15:04:04
1153
1
原创 vue3 ts问题 找不到模块“@/views/home/index.vue”或其相应的类型声明。
今天帮同事看了一个问题，他尝试用vite+vue3+ts+pinia创建项目，结果刚上来就遇到这么一个问题。
2024-05-22 16:42:32
2075
原创 vue3 使用css实现一个弧形选中角标样式
在前端开发中，ui同学经常会设计这样的样式，用于区分选中的状态下面抽空简单些了一下，记录下，后面直接复制用。
2024-05-22 11:05:55
1780
原创 vue3 使用unplugin-auto-import自动导入模块
模块化已经是现代 Web 开发必不可少的开发方式，频繁引入依赖包是一个常见的操作。但是，手动引入依赖包往往繁琐，尤其是当依赖包数量较多时，会显著降低开发效率。插件，可以帮助我们在项目中，自动导入常用的使用的第三方库的 API，就可以方便我们开发，提升开发效率。如果项目中使用eslintrc校验则需在vite.config.ts中的AutoImport添加配置。配置完成，运行项目会在根目录生成auto-import.d.ts文件。
2024-05-15 11:04:16
810
原创 js 函数节流和函数防抖及区别详解
浏览器中总是有一些操作非常耗费性能。所以就有了函数节流和函数防抖来提高浏览器性能。函数节流：频繁触发一个事件时候，每隔一段时间，函数只会执行一次。函数防抖：当触发一个时间后的n秒内，如果该事件没有被第二次触发，则执行。否，则重新开始计时。不论是函数防抖还是函数节流，都是性能优化的一种手段，都是为阻止函数无意义的执行，减小dom压力，避免不必要的性能浪费。以上是封装好的防抖，节流函数。大家可自取。
2024-04-20 20:33:25
616
原创 ajax轮询 websocket SEE 实现实时消息推送与优缺点详解
在很久很久以前，前端一般使用轮询来进行服务端向客户端进行消息的伪推送，为什么说轮询是伪推送？因为轮询本质上还是通过客户端向服务端发起一个单项传输的请求，服务端对这个请求做出响应而已。通过不断的请求来实现服务端向客户端推送数据的错觉。并不是服务端主动向客户端推送数据。显然，轮询一定是上述三个方法里最下策的决定。首先轮询需要不断的发起请求，每一个请求都需要经过http建立连接的流程（比如三次握手，四次挥手），是没有必要的消耗。客户端需要从页面被打开的那一刻开始就一直处理请求。
2024-04-20 20:12:58
1331
原创 js事件循环机制（event loop）宏任务 微任务详解
用简单的流程解释事件循环。在了解什么是事件循环之前我们需要先行了解 javascript是一个单线程语言 和 javascript的事件分类。
2024-04-20 11:25:31
956
原创 js try catch用法详解 异常处理 异步捕获
这2段代码try，catch都不会捕获到错误信息，因为promise内部的错误不会冒泡出来，而是被 promise 吃掉了，只有通过。catch 包裹了计划要执行的函数，该函数有延迟，这时js引擎已经离开了 try…为了捕获到计划的函数中的异常，那么 try…能工作，代码必须是可执行的。块中的语句执行完毕，或者没有发生任何错误try块中的语句执行完毕，最后将执行。块中的语句首先被执行。try语句包含了由一个或者多个语句组成的try块，和至少一个。块中语句，其中括号中的err参数被作为例外变量传递。
2024-04-19 17:51:04
6493
1
原创 vue3 van-list van-pull-refresh实现上拉加载，下拉刷新
用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。用该组件可实现上拉加载。两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将。事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将。此时可以发起异步操作并更新数据，数据更新完毕后，将。若数据已全部加载完毕，则直接将。// 如果返回数据为空，表示已加载完成。
2024-04-12 17:35:46
4738
原创 vue3 Pinia详解使用详解
通过创建数据仓库vuex 中的 state 在 pinia 中可以引用ref和reactive创建响应式数据vuex 中的getters在 pinia 中可以引用computed创建计算属性vuex 中的mutations和actions在 pinia 中就是普通函数, 同步异步都可以。
2024-04-11 15:01:39
2686
原创 vue结合纯CSS实现蛇形流程图/步骤条
** 偶数行旋转箭头，步骤倒序排列（使用transform交换位置） */隐藏多余的箭头（如果container设置了overflow。// 给每行最后一个步骤（除最后一行）添加向下的连接箭头。/** 可配置的参数 可以调整试试 */
2024-04-11 10:10:05
2584
2
原创 css3 实现文本与图片横向无限滚动动画
文章目录1. 实现效果2.html结构3. css代码1. 实现效果gif录屏比较卡，实际很湿滑，因为是css动画实现的2.html结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
2024-04-03 14:42:14
2475
1
原创 使用nvm管理nodejs版本
这个是每个全能前端经常会用到的，之前用过现在重装了，又要去看博客安装，索性自己总结下记录下来，方便以后更快捷开发nvm是一个node版本管理工具，通过它可以安装多种node版本并且可以快速、简单的切换node版本。
2024-03-29 16:43:27
977
原创 css的active事件在手机端不生效的解决方法
需求：需求就是实现点击图中的 “抽奖” 按钮，实现一个按钮Q弹的放大缩小动画。上面是实现的效果，pc端，点击触发。问题：但是这种方式在模拟器上可以，解决方案：在页面body添加一个。，下面是简单的demo代码。
2024-03-22 20:09:53
916
原创 css3 实现html样式蛇形布局
文章目录1. 实现效果2. 实现代码1. 实现效果2. 实现代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>蛇形布局</title> <style> html, body { height: 100%; display: flex; flex-direction: column; align-i
2024-03-15 16:08:56
1742
原创 vue3 使用实现签到活动demo静态布局详解
虽然这个功能看上去比较简单，但是着仅仅是一个简单的demo，还要很多细节处理判断，比如当天已签到时，展示已签到图标当天未签到时，金币添加光圈旋转并且左右晃动动画签到天数为8天时候，进去后默认横向滚动到第8天动画实现。
2024-03-01 11:25:31
1615
1
原创 react 使用react-seamless-scroll实现无缝滚动
项目地址拉下来跑起来效果（gif录屏有点卡，实际很丝滑）可以支持多种无缝滚动方案，如向下滚动向左滚动滚动速度鼠标悬停单布停顿单行停顿时间数组属性更新数组添加数据图表滚动等react-seamless-scroll 无缝滚动有两种实现方式，一种是，另外一种是。
2024-02-03 10:38:23
2390
原创 uni-app 微信小程序之红包雨活动
/ 处理红包点击事件，可以增加分数或显示提示等操作。// 或者：this.showTip = true;// 例如：this.score += 1;// 可以根据实际需求自行添加逻辑。// 更新红包位置，约 60 帧。GIF录屏有点卡，实际比较丝滑。// 每秒创建一个红包。// 4秒后移除红包。// 点击后移除红包。
2024-01-26 16:50:10
2570
4
原创 vue结合el-table实现表格小计总计需求（summary-method）
/ 调用后端接口table数据。// 调用后端接口返回的总计数据。
2024-01-17 09:44:37
3517
原创 vue结合el-table实现表格行拖拽排序（基于sortablejs）
/ 需要在odEnd方法中处理原始eltable数据，使原始数据与显示数据保持顺序一致。// 略去数据，与前段代码一直。
2023-12-28 11:03:32
3166
1
原创 vue通过CSS实现手机充电效果
文章目录1. 实现效果2. index.vue 页面3. VabCharge.vue 组件代码1. 实现效果2. index.vue 页面<template> <div class="home"> <div class="body"> <vab-charge :end-val="endVal" :start-val="startVal" /> </div> </div></templa
2023-12-08 10:04:35
892
原创 uni-app 微信小程序之好看的ui登录页面（四）
文章目录1. 页面效果2. 页面样式代码1. 页面效果2. 页面样式代码<!-- 简洁登录页面 --><template> <view class="login-bg"> <br /><br /><br /><br /><br /><br /><br /> <view class="t-login"> <form class="cl">
2023-12-07 14:32:14
5350
1
原创 uni-app 微信小程序之好看的ui登录页面（三）
文章目录1. 页面效果2. 页面样式代码1. 页面效果2. 页面样式代码<!-- 简洁登录页面 --><template> <view class="login-bg"> <image class="img-a" src="https://zhoukaiwen.com/img/loginImg/bg1.png"></image> <view class="t-login"> <view class="t-
2023-12-07 14:31:52
6347
原创 uni-app 微信小程序之好看的ui登录页面（二）
文章目录1. 页面效果2. 页面样式代码1. 页面效果2. 页面样式代码<!-- 蓝色登录页面2 --><template> <view style="height:100vh;background: #fff;"> <view class="img-a"> <view class="t-b"> 您好， <br /> 欢迎使用，XXX小程序 </view> </v
2023-12-07 14:30:24
7537
4
原创 uni-app 微信小程序之好看的ui登录页面（一）
文章目录1. 页面效果2. 页面样式代码1. 页面效果2. 页面样式代码<!-- 蓝色简洁登录页面 --><template> <view class="t-login"> <!-- 页面装饰图片 --> <image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image> <image class="img-b" src
2023-12-07 14:30:07
10359
【Vue Shop Vite 模板源码】采用 Vite5.x + Vue3.x + Element Plus 前后端分离开发模式
2024-11-15
源码uni-app 微信小程序根据角色动态的更改底部tabbar
2022-03-24
Export2Excel和Blob的js文件.rar
2020-08-07
SM4Util.js 【前端JS sm4加密解密工具类】
2020-07-14
echarts 省级地图联动下钻(放在服务器下访问).zip
2020-03-31
echarts大屏设计图（7680-3240）分辨率.rar
2020-01-03
JQuery颜色渐变插件jquery.color.js
2018-12-10
JFreeChart生成图表数据所需的Jar包
2018-05-31
Echart报表实现的Demo案例
2018-05-31
vm10keygen注册机秘钥获取
2018-01-25
Java生成条形码所需的barcode4j-light.jar包
2018-01-13
MyBatis逆向工程代码
2017-12-15
包含jstl-api-1.2.1.jar，jstl-1.2.jar，jstl-impl-1.2.jar，standard-1.1.2.jar
2017-08-29
24套java项目源码及视频教学
2017-07-21
Java实现物流跟踪查询+Demo+Word
2017-07-07
tomcat7官方版apache-tomcat-7.0 正版
2017-06-19
淘淘商城Spring注入报错求大神帮看看啊！！！跪求，看了好久了没解决
2018-01-16
TA创建的收藏夹 TA关注的收藏夹
TA关注的人