- 博客(63)
- 收藏
- 关注
RSS订阅
原创 vue项目中使用antvX6新手教程，附demo案例讲解（可拖拽流程图、网络拓扑图）
用户可以自己拖拽节点，节点之间可以随意连线，保存拓扑图数据后传给后端，然后在另一个页面拿到之前的数据进行渲染展示。
2024-02-28 14:32:14
16748
48
原创 超好用的element的el-table表格组件二次封装-附源码及讲解
前言：在很多后台管理系统开发时总会有很多表格的使用，如果我们每次都用elementui官网的el-table去写的话，调整所有表格的样式就会很麻烦，而且页面内容也会很累赘繁琐。讲解一个我经常使用的二次封装el-table组件，该组件可以容纳很多种特定的需求并且非常简便。所有例子都是使用vue2+elementUI，如要使用vue3稍作修改即可，也可评论问我
2023-10-26 17:17:23
6593
28
原创 uniapp开发微信小程序笔记14-获取当前定位城市（uni.getLocation、腾讯地图的详细使用步骤）
经常有功能需要获取用户当前定位城市，本文介绍了uni.getLocation的使用，但是因为该方法在小程序中只能获取到经纬度，随而介绍了如何使用腾讯地图来获取当前用户的位置信息（国家省市区街）
2025-01-13 15:52:38
4726
4
原创 uniapp开发微信小程序笔记13-uniapp中获取用户头像、昵称、图片上传（uni.uploadFile）、用户定位（uni.getLocation）
在微信小程序的更新过程中，获取用户头像昵称的方式也一直在更新，之前使用的是uni.getUserProfile()方法弹出授权窗口直接获取，现在最新的版本是使用头像昵称填写时获取的方式
2025-01-13 15:52:33
865
原创 uniapp开发微信小程序笔记12-uniapp中使用Pinia
为了方便保存用户登录状态，需要选择使用状态机来存用户信息uni-app项目中默认就已经下载好了Vuex和Pinia状态机，可以直接在项目中进行状态机的配置和使用vue3项目Vuex和Pinia都可以用，vue2项目只能用Vuex。
2024-12-25 15:28:16
1310
原创 uniapp开发微信小程序笔记11-获取手机号授权登录流程
微信小程序通常会有一个一键获取用户手机号的功能，这个功能是前后端配合完成的。先由前端弹起授权界面，用户同意后要将传给后端，后端会拿到这些身份信息去微信官方获取到用户的手机号，再传回给前端。
2024-12-25 15:24:30
1519
5
原创 uniapp开发微信小程序笔记10-触底加载
需求描述：经常在做一些商品列表页的时候，如果一次性加载大量数据会影响性能，一般都是先加载10-20条，等用户向下滑到底部时再加载新的数据并渲染上去。来处理页面滚动到底部的事件，可以看到官方文档中把这个事件归在页面生命周期里，所以可以按照页面生命周期的方式写代码。比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。可以用scrolltolower来触发滚动到底部的事件。可在pages.json里定义具体页面底部的触发距离。2、如果是用的scroll-view渲染。可以用sc
2024-12-02 16:13:44
682
原创 uniapp开发微信小程序笔记9-uniapp中使用uview-plus
因为uview官方没有出vue3版本，所以需要使用一个个人团队开发的uview-plus框架。该框架和vant的对比就是一次性配置之后，使用起来比较方便，很像pc端使用element-UI一样。
2024-12-02 16:12:21
1369
2
原创 uniapp开发微信小程序笔记8-uniapp使用vant框架
前言：其实用uni-app开发微信小程序的首选不应该是vant，因为vant没有专门给uni-app设置专栏，可以看到目前Vant 官方提供了Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护React 版本和支付宝小程序版本。所以我们一般使用的就是微信小程序版本，所以在开发上会有一点不一样。一、下载vant依赖包二、项目中引入vant三、使用vant组件四、使用组件五、 举例使用Rate评分组件，对比官网代码和uni-app代码
2024-11-26 17:48:13
2684
1
原创 uniapp开发微信小程序笔记7-页面跳转、跳转传参、接收参数
uni-app中提供了两种页面跳转方式：组件跳转、API跳转。本文介绍了组件跳转和五种API跳转的方式、以及跳转如何传参和接收参数
2024-11-26 17:48:06
2073
原创 uniapp开发微信小程序笔记6-网络请求
前言：在vue2中我们使用的是axios发起网络请求，在uni-app中也有专门发起网络请求的api，官网介绍地址：uni.request(OBJECT) | uni-app官网uni-app中提供了uni.request()方法来发送网络请求，eg：二、校验合法域名微信小程序中发送网络请求，要验证服务器地址是否合法如果服务器地址不合法，控制台会出现以下报错：微信开发者工具-详情-本地设置-勾选“不校验合法域名”这种方法只适用于开发过程中登录微信公众平台，就是之前看AppID的地方将我们要请求的域
2024-11-20 15:40:38
799
原创 uniapp开发微信小程序笔记5-介绍三类生命周期
应用的生命周期：指的是针对整个小程序的生命周期，写在App.vue中；页面的生命周期：指的是项目pages目录中每一个页面的生命周期；组件的生命周期：指的是项目compontents目录中自定义的每一个组件文件的生命周期。
2024-11-20 15:40:14
1232
原创 uniapp开发微信小程序笔记4-自定义组件
前言：本文重点记录的是uniapp如何封装一个自定义组件，以swiper组件为例。一、创建组件目录二、写自定义组件代码三、使用自定义组件四、插件市场的组件也可以直接使用
2024-11-18 17:21:46
739
原创 uniapp开发微信小程序笔记2-开发静态页面（新建页面、内置组件、设置编译模式、样式、SCSS的使用）
本文从新建页面、认识内置组件、设置编译模式、样式、SCSS的使用来逐步形成对微信小程序开发结构的认识。
2024-11-15 16:26:53
875
原创 antvG6如何实现节点动画、连线动画、切换节点图标
antvG6是一个简单、易用、完备的图可视化引擎，官网上有很多图表示例，大家可以选用不同的布局来进行开发。本篇主要讲解的是antvG6的节点和连线的动画、以及不同节点展示不同图标如何实现
2024-10-25 15:29:17
1826
原创 封装echarts组件，即插即用（附源码）
最近一个项目刚收工，分享一个常用的封装echarts的组件。如果想用饼图、柱状图之类的就可以直接传相应的配置即可，这样可以灵活控制每个图的不用样式。之前我封装过几个组件都是把echarts的配置写进组件里面，但是后面发现如果一个页面需要七八个echarts图表，并且样式都是不一样的，那么就比较适用该文介绍的封装方法。
2024-10-25 15:26:42
294
原创 前端使用Canvas实现网页电子签名（撤销、下载）
前言：一般在一些后台的流程资料以及审核的场景中会需要电子签名，介绍一种用canvas实现的电子签名，此案例用的是原生js。1、需要定义三个值：是否按下、当前的x坐标和y坐标，鼠标按下的时候就开始画。/4、鼠标移入并且status状态为true的时候就是可以画的。整个电子签名的流程无非就是按下鼠标、画线、松开鼠标、停止画线。二、js实现逐步分析：（如果着急实现功能可以直接下滑到三）2、鼠标松开时就改变status的值为false。这样就已经可以绘制了。
2024-10-16 15:29:19
701
原创 前端实现下载功能汇总（下载二进制流文件、数组下载成csv、将十六进制下载成pcap、将文件下载成zip）
该篇文章介绍了前端实现下载功能的五种情况，可复制源码直接使用。将后端传过来的二进制流文件下载（需要提取headers里面的文件名）、将后端传过来的二进制流文件下载（不需要提取文件名，前端来决定下载下来的文件叫什么）、将表格数据（数组）下载成csv文件、将16进制转化为pcap包并下载、将两个文件合成zip下载
2024-10-16 10:38:11
1447
原创 js将对象的键和值分别归纳进对象，并将多层对象转化成数据的方法
后端传给我一个没有处理过的json串，但是我要传入el-tree做渲染，此篇来记录一下整个数据处理过程以及el-tree的使用。需求描述：一、树结构可以展开可以收缩，默认全部展开二、有一些关键词需要高亮展示红色三、树结构左边加线条，使得树结构看起来更直观
2024-09-30 17:20:52
1091
原创 超好用的element的el-pagination分页组件二次封装-附源码及讲解
前言：在很多后台管理系统开发时总会有很多分页组件的使用，如果我们每次都用elementui官网的el-pagination去写的话，调整所有分页的样式就会很麻烦，而且页面内容也会很累赘繁琐。一般来说listQueryFn函数需要在页面刚加载的时候就调用一下、页面按搜索按钮的时候也要调用一下，再就是用户点击下一页的时候调用。listQueryFn是放前端请求接口的函数，我这里红框只是个示意，用的时候写成自己的接口就行。（我一般都是搭配el-table去使用的，表格组件封装请看我的另一篇帖子）
2024-09-30 16:08:58
1832
原创 TypeScript学习笔记2---ts的函数定义详解
TS中函数定义和JS是一模一样的，可以是普通函数申明，也可以函数表达式但是在TS中针对函数做了很多的约束、函数的参数进行约束、函数的返回值进行了约束一、函数的参数在函数形参进行了约束，在传递值的时候，就必须按照指定的参数类型传递参数个数必须满足要求每个位置参数，数据类型一定要匹配参数是数字和字符串时：二、函数的返回值你在TS中定义每个函数都应该有返回结果。就算函数不需要返回，我们也应该告诉调用者，当前函数没有返回结果
2024-08-20 15:14:39
404
原创 TypeScript学习笔记1---认识ts与js的异同、ts的所有数据类型详解
TypeScript编程语言是微软推出的一款开源的开发语言TypeScript是JavaScript的超集。TypeScript也是基于JavaScript来进行开发的，具备JavaScript所有特性，支持完整的ES6\ES5等等语法。学习TypeScript就相当于在学习JavaScript，更多要学习的TypeScript中编程规范比如TypeScript中我们可以进行数据类型约束，一旦有了约束后我们程序设计会更加规范
2024-08-20 15:01:26
1392
原创 antv X6--实现节点旁添加多个text标签
如何在节点旁添加多个标签方法一：使用换行符将不同的标签连接在一起。这种方式简单，但不够灵活。方法二：通过在节点的 attrs 中添加自定义 SVG 创建多个文本标签。你可以根据需要调整这些标签的位置和样式。
2024-08-19 17:47:26
1328
3
原创 登录框用Google浏览器的记住密码时，输入框背景色会改变的解决办法
在写好输入框背景色样式之后，正常输入账号密码时样式显示正常，但是使用了google浏览器记住的账号密码时，浏览器自动填充账户和密码后会自动添加背景色，如下图。
2024-08-19 11:08:45
676
原创 mongoose的API总结
专栏的上篇文章只写了一个find（）用来查询，实际上mongoose的api还有很多，为了后续更方便操作MongoDB数据库，本篇总结一下常用的api合集。
2024-05-22 17:01:33
326
原创 node.js（express）+MongoDB快速搭建后端---新手教程
Node.js是一个基于 Chrome V8引擎的JavaScript运行环境，是对于前端工程师来说学习成本最小的后端实现方法，本篇文章总结如何从0-1写一个后端的登录接口。
2024-05-22 16:43:33
3229
原创 在vue.config.js中优化webpack配置的方法（持续更新）
在日常开发中我们离不开打包工具webpack，但是不同的配置会影响我们项目的运行构建时间，也会影响打包之后项目包的大小，这篇文章记录一下我使用过的可以优化webpack的配置。2、在vue.config.js的module.exports上面先定义设置值。注：以本专栏上篇文章里面的vue.config.js为基础，去加配置。①默认设置：（4M的图片使用默认设置压缩成1.4M）2、在vue.config.js的第一行引入依赖。options中可以切换使用默认还是自定义。三、对代码进行压缩，并移除控制台输出。
2024-05-13 17:19:52
802
原创 vue项目中vue.config.js中配置webpack详解
vue-cli3以前的版本中把webpack的配置都写在config文件中，可以vue-cli3以上的版本中没有了config目录，可以将配置webpack的文件写在vue.config.js文件里面。是一个可选的配置文件，如果项目的 (和同级的) 根目录中存在这个文件，那么它会被自动加载。你也可以使用中的vue字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
2024-05-13 09:30:57
5477
1
原创 前端基础知识-ES6解构赋值（将数组内元素、字符串内字符、对象内属性值快速赋值给其他变量）
将数组、字符串、对象进行展开，并将展开的数据赋值给指定变量，以达到语法简化的目的，日常开发中可以大大提升我们的效率。
2024-05-09 14:06:37
544
原创 前端基础知识-ES6扩展运算符(快速实现数组添加新元素、字符串转为数组、对象添加新属性)
扩展运算符又称为Rest运算符，可以实现数组、对象、字符串在语法层面上的展开，达到简化语法的目的，使得我们提高开发效率。在需要解构的变量前加三个点（...xxx）
2024-05-09 11:09:55
586
原创 前端如何将接口传来的列表数据（数组）直接下载成csv文件
由前端直接调列表的git接口，把后端传给我们的数组直接下载成csv文件，tableData.value的数据格式：[{aaa:1,bbb:2},{aaa:3,bbb:4}]下载下来的csv文件：aaa bbb1 23 4
2024-04-29 11:17:50
682
原创 前端可以掌握的nginx相关操作
在日常开发中，前端工程师可以把打好的前端包直接放到测试服务器上，自己再验证功能是否改好，这样可以提高开发效率，写篇笔记记录一下我个人用到的命令。用MobaXterm完成相关操作，直接可以在官网下载，下载后解压，运行.exe文件即可listen 80表示监听服务器端口为80，第二个有【：：】的表示的是IPV6地址的监听器server_name是服务名root后面放的就是我们打包好的前端代码，一般我们就要根据这个路径去放，要确保在该目录下有index.html
2024-04-29 10:16:16
503
2
原创 前端提高性能——使用Intersection Observer API对图片视频进行懒加载
在用户选择一页五十条时，页面加载速度会比较慢。为了提高性能，选择用Intersection Observer API实现图片懒加载。调整webpak配置，在chainWebpack方法中查找到处理 SVG 文件的规则，类似地，可以添加相应的规则来处理其他类型的图片文件
2024-03-15 17:38:23
686
原创 使用css的transition属性实现抽屉功能
使用css手写一个抽屉，并且不能遮挡住原来的页面1、这里主要使用了transition属性，transition属性是css3中的一个重要属性，可以为一个元素在不同样式之间变化添加补间动画。相较于传统的js实现的动画，transition属性实现的动画效果更细腻而且内存开销小。（1）所有数值属性都可以参与过度，比如width,height,left,top,border-radius。2、transition属性有4个基本要素，分别是要过度的属性，动画时长，动画演变速度，延迟时间。
2024-03-01 17:19:57
2082
原创 介绍几种antvX6常用的方法或配置（使用数据渲染节点和连线、图像居中完整展示、节点不可移出画布、节点图片和标签变化）
接本专栏的上一篇antv X6新手教程，补充一些新的需求实现，丰富巩固antv X6的使用。此篇是以上一篇为基础的，如有初学者可以看本专栏的上一篇。将编辑好的拓扑图展示在其他页面、根据节点数据来改变节点的图片和标签等
2024-03-01 16:22:59
6293
6
原创 js如何将对象转为数组（Object.values、Object.entries、Object.fromEntries区别举例）
有时候后端传给前端的数据格式不是我们想要的，需要自己处理一下数据。后端传的{aaa: "one" ,bbb: "two" ,ccc: "three" },需要将这个对象改成一组键和值成为一个数组，这个时候就可以用Object.entries()，例如：let obj1={aaa: "one" ,bbb: "two" ,ccc: "three" }let obj2=Object.entries(obj1);//obj2:[["aaa", "one"],["bbb", "two"],["ccc"
2024-01-29 17:02:30
1154
1
原创 vue3用reactive定义的对象直接赋值{}没用的解决办法
前言：在项目开发时，有很多弹窗里面放的表单，如下图这个新增数据的弹窗，在每次打开弹窗时需要给表单定义的数据置空，否则你第二次打开弹窗的时候，表单还显示着上一个新增的数据。需要在打开弹窗是将上面那个对象置空，但是vue2一般直接={}就可以，vue3的话这样不行，所以需要用到object.assign
2024-01-26 16:14:04
3095
原创 vue3项目用vite打包时，如何将部分特定的js文件不要进行合并打包
最近拿到一个需求是用户有可能想自己修改前端项目的公司名称和系统名称等，这个时候就需要做一个配置文件来存放这些配置：功能不难，其实就是一个js文件而已，所有页面上都直接用这里定义的变量即可。用户只需要在部署前把相应的变量修改成自己想要的。但是在我打包之后发现，我的这个js文件被整合在了一个js文件里。这就导致修改titleConfig内的参数根本没有用，浏览器都没有去加载titleConfig.js
2024-01-17 16:33:38
3533
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人