- 博客(69)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 微信小程序实现海报功能经历
前言大家好，我是《前端发现》。发现前端，发现技术，让前端变得更加容易。实现海报？你想到的应该是html2canvas吧，但，这里是小程序，好像并不通用。只能用canvas一笔一划去描述了吗？答案肯定是不对的，今天介绍一个Painter插件，它可以帮助你快速完成小程序上的海报功能。前期准备去github下载插件需要的文件。下载地址：[https://github.com/Kujiale-Mobile/Painter]。下载好找到文件里面的components/painter,复制整个painter文件
2022-04-11 15:49:11
2716
3
原创 除夕最炫烟花代码
每到过年是不是希望做一个放烟花的代码网页出来证明一下自己的代码水平。这不源码已经撸好了，开箱即用。原理：使用canvas绘制烟花的动态效果。核心代码：function initSpark() { var x = Math.random() * range * 3 - range * 1.5 + center.x; var vx = Math.random() - 0.5; var vy = -(Math.random() + 4); var ax = Math.random
2022-01-27 10:25:57
13748
4
原创 虎年微信封面红包免费送
虎年即将到来，我不允许你还没有一款属于自己的微信红包封面只要对准下方公众号发送“封面”即可领取一份封面红包数量有限，先到先得
2022-01-26 09:50:22
284
转载 面试官刁难系列一：手写图片懒加载代码
前言今天是跟面试官开撕的第一天，当你过五关斩六将终于来到面试官面前时，他可能在面试你之前写过如下的代码:<el-image :src="url" lazy></el-image>没错，就是这么轻描淡写的一句代码，他心里却有了不一样的想法。lazy 这个属性它是如何实现图片懒加载的？请说说你的思路。头脑顿时一场空。"只怪我平时只复制粘贴写业务代码了，草率了！"你可能此时是这样想的。幸运的是，今天是开撕的一天，今天就甩出你自信的代码给面试官。element-plus实现思路
2021-08-26 11:29:31
539
原创 最新Vue3+Vite+Setup开发秘籍(包含源代码)
前言大家好，我是《前端发现者》，发现前端，发现技术，让前端变得更加容易。今天给大家带来一篇Vue3的开发文献，供大家在开发过程中查阅，一时看不完 收藏 点起来✌️Vue3就在前几天尤大大发布了 V3.2.2 的版本了，此次更新在前端程序员看来可谓是皆大欢喜、欢呼雀跃。那么问题来了？旧项目要不要从Vue2升级为Vue3呢？新项目要使用Vue3吗？答：旧项目暂且不考虑升级。新项目可以尝试用Vue3开始搞起（纯属个人意见，仅供参考！）这个怎么说呢？旧项目需要考虑稳定，毕竟是已经在使用的产品，要
2021-08-20 18:01:35
1189
原创 盘点Vue3那些有趣的API
从开始的Vue到Vue2再到现在的Vue3，前端开发人员一直被迫营业，永远也追不上尤大大写代码的脚步????今天我们放慢追赶的脚步，一起来看看尤大大在Vue3书写了哪些有趣的API，有些可能说不上哪里有趣，但是看起来就是比之前舒服一些（强迫症在线发作…）。文末有尤大大连夜写的新需求data选项？回想在Vue2中我们创建响应式数据是这样的:...data() { return { num:1 }}...而Vue3会 setup 组合式API这个选项了，为此引入了ref、r
2021-08-17 13:21:52
347
1
原创 JS数组reduce的妙用，收藏等于学会！
说到处理数组的方法，想必大家都不陌生了，今天我们一起来学习下理数组常见场景下的????方法。首先来看看 reduce 方法可以传入哪些参数function(pre,cur,index,arr)pre:必需，初始值或计算结束后的返回值cur:非必需，当前处理的元素index:非必需，当前处理元素的索引arr:非必需，当前元素所属的数组对象直接看看????const list = [1,2,3,4,5]const result = list.reduce(function (pre, c
2021-08-17 13:16:44
320
原创 你正在使用哪个版本的JS特性？
相信JS的新特性我们都一直在使用，不得不说，每个版本的新特性都能给我们带来不一样的"爽"体验。那么，你知道你使用的JS特性是哪个版本发布的呢？❝面试官:你都在用哪个版本的JS新特性？蔡姬我:别急，我先总结一番。❞那就让我们一起来回顾下那些年使用过的JS特性。ES2015(ES6)let/const关键字字符串模版语法函数传参默认值箭头函数导入导出解构赋值rest参数class类Promiselet/const解决之前只有函数才有作用域的问题{ var a
2021-08-05 13:18:37
1250
原创 Vue2与Vue3组件通信方式总结
我们都知道Vue作为一个轻量级的低门槛入门前端框架，其核心就是 组件化开发 。Vue就是由多个组件组建成的，组件化是它的精髓，更是它的强大之处。各组件实例之间是相互独立的，这也就意味着不同组件之间数据是无法相互共用。但实际项目开发中，我们时常需要其他组件的数据，为此诞生了组件通信的问题。针对组件之前的关系：父子、兄弟、子孙的不同选用的数据传输方式也不一样，今天就来做个总结。Vue2组件通信父组件向子组件传值props父组件以属性的方式传值给子组件子组件通过props方式接收数据在父组件中引
2021-08-02 09:40:13
793
原创 一文搞定Vue3中使用Vuex
伴随着Vue3的出现，基于Vue3的各种插件和框架也都陆续开发出来了。如Vue3对应的Vue-Router4.x和Elementui-plus等等，今天来聊聊基于Vue3的Vuex4.x。vuex4.x的官网如下：https://next.vuex.vuejs.org/安装Vuexnpm方式npm install vuex@next --saveyarn方式yarn add vuex@next --save可以看到现在是使用vuex@next来安装next的版本的，使用以上命令安装的最新版
2021-07-26 16:41:16
937
原创 Vue3新的script setup语法糖，拿来吧你！
大家好，我是小佑@小佐https://blog.csdn.net/Smell_rookie，是一名页面仔工程师，我会不定时在CSDN更新我的博客，有兴趣的可以点个关注来逛逛我的主页。作为一名前端程序员，说起Vue3相信大家都不会陌生，它是当下最火热的前端人员必备的框架。虽然Vue3已经发布很长的一段时间了，但是真正使用在项目中确是比较少的，大家或许都还在尝鲜阶段，还不是特别熟悉新的写法，尤其是从Vue2的组件式API更改为Vue3的Composition API，刚开始尝鲜的小伙伴可能还在吐槽Vue3中
2021-07-21 10:59:33
5574
10
转载 免费送！素材库网站会员兑换码
今天小编给大家带来一波福利 ，免费送各大素材库网站的一个月期限的会员兑换码???? ???? ，那都有哪些素材库网站会员呢？没错，小编给大家带来8大网站有效期一个月的会员(前两个太火爆目前没有兑换码了，小编会持续跟踪…)，这8大网站的会员对于苦苦追求设计图素材和在线公众号文章排版的小伙伴来说，可谓是巨大的福利。每个网站只有一个兑换码，先到先得，送完即止哦。要是迟到没拿到兑换码的小伙伴不要灰心，可以找我免费下载图司机网站的无水印无损高清素材图。领取方式：关注<贩卖前端仔>公众号，发送“领
2021-04-16 09:31:57
3792
89
原创 element的el-table列标题添加自定义图标
大家好，我是小佑@小佐https://blog.csdn.net/Smell_rookie，是一名页面仔工程师，我会不定时在CSDN更新我的博客，有兴趣的可以点个关注来逛逛我的主页。需求：开发中我们会遇到在el-table的列标题那添加操作图标，如下图：实现：其实el-table有提供一个render-header方法，但是没有提供具体的案例，今天遇到了就做个小总结。<el-table-column label="操作" fixed="right" width="100" :render-
2021-04-06 14:32:16
4928
2
原创 vue+element使用sortable拖拽实现行排序
大家好，我是小佑@小佐https://blog.csdn.net/Smell_rookie，是一名页面仔工程师，我会不定时在CSDN更新我的博客，有兴趣的可以点个关注来逛逛我的主页。需求：有时我们想要做成这么一个效果——对ele的表格实现行排序，可以拖动！借助sortable我们可以完成上述需求。安装sortablejsnpm install sortable.js --save 或 yarn add sortable引入并使用 在需要使用拖拽的.vue页面引入sortablejs 也可
2021-04-01 16:47:09
769
4
原创 CSDN花里胡哨的自定义模板
大家好，我是小佑@小佐：https://blog.csdn.net/Smell_rookie，是一名页面仔工程师，我会不定时在CSDN更新我的博客，有兴趣的可以点个关注来逛逛我的主页。一次偶然的机会让我获得了一个月的CSDN会员，从此我便发现了这个有趣的玩法！在内容管理模块里面的自定义模块只要你CSDN的会员你就有权限去设置这个东西，先来看看它张什么样子吧！旧版时展示的样子：新版时展示的样子：总的来说就是博主的想给粉丝展示的东西，可以说是博主的一个变现手段，让粉丝最直观地发现博主展示的东
2021-03-02 10:42:47
732
原创 人人都可免费定制微信红包封面，无需审核！
目前，微信再次玩出新花样——任何微信用户都可以定制自己专属的微信封面红包，并且无需审核，提交即可使用。如你想制作DIY的封面红包，你只需满足以下两个条件即可：1、开通视频号。2、发表一个视频号内容并获赞10个这两个条件比起之前的个人视频号认证、企业资质认证简单的太多了，现在就让我教你如何操作吧。1、满足以上两个条件的基础下2、再次去视频号发布一段视频或者几张图片，作为红包封面图片的备用图3、点击链接：https://sourl.cn/2pQuLi（微信打开）4、点击【开始制作】，添加图片
2021-02-08 01:54:49
5983
2
原创 集齐支付宝福卡秘籍来了！
临近过年????，大家都在开始集支付宝的福卡活动了吧，下面就让我为你揭秘下快速并保证能集齐无福的方式吧1、打开支付宝，点击“一起集福”，进入后可以通过AR扫福和写福字获得福卡2、2月4日起蚂蚁森林和2月7日芭芭农场做任务也能得福卡3、在“支付宝”里点开以下链接，可以开福气盲盒，随机获得福卡⚠️：链接请复制到支付宝里面点击1、天猫精灵：https://render.alipay.com/p/c/17yq18lq3slc?source=JING_LING2、飞猪：https://render
2021-02-03 14:04:21
1646
2
原创 基于ElementUI的el-upload组件二次封装
大家好，我是小佑@小佐 https://blog.csdn.net/Smell_rookie，是一名页面仔工程师，我会不定时在CSDN更新我的博客，有兴趣的可以点个关注来逛逛我的主页。前言：开发工作中我们都会遇到图片上传的问题，虽说ElementUI已有提供图片上传的组件，但我们用到图片上传的地方肯定不止一处的，并且框架自带的组件并不能完全满足我们的需求，为此我对原有组件做了二次封装，做到一次封装，到处使用！直接上代码：组件：**uploadImg.vue**<template>
2021-01-26 10:09:01
1873
3
原创 CSDN会员免费拿，实现CSDN会员自由的机会到了！！！
最近，CSDN官方已推出最新版本V2.7.1的浏览器插件，此次更新主要是添加了活动——每周五领取CSDN会员。其实对于经常使用CSDN的我发现这个插件是非常不错的，它连自己站内的广告都屏蔽了，可谓是勇气可嘉呀????。这是在谷歌浏览器扩展应用中安装插件后的样子。这是在浏览器打开时的样子，界面可以是比较漂亮的了，背景图可以点击右下角的风车图标随时更换，可以自行添加网址并生成以上自定义图标，方便开发者打开经常打开的网页。这是官网的宣传网页：以上活动只要下载插件就可以参与。最新插件地址：点击下
2021-01-26 10:06:24
40103
222
原创 [记录九]Vue+node+koa2+mysql+nginx+redis，全栈开发小程序和管理员管理系统项目——在服务器清除小程序上传的废弃图片
大家好，我是小佑@小佐，是一名页面仔工程师，我会不定时在CSDN更新我的博客，有兴趣的可以点个关注来逛逛我的主页。前言：首先，实现小程序上传与下载的逻辑我这里是这么实现的：小程序点击图片调服务器提供的api——服务器收到此请求获取图片文件的信息并读取和写入本地，比如写到项目的某个文件中去——然后在api中返回一个映射地址，此地址就是上传的图片的服务端项目的相对位置——小程序拿到地址直接显示，并在最终请求的时候已数组的形式发回给服务端——期间服务端会将小程序显示的图片地址对应的图片文件返回去。正常业务是这样
2020-12-08 14:47:16
2016
3
原创 爬取线上小程序源码看这一篇就够了！
前言：前段时间看到某某小程序做得还不错，对于开发者来说肯定想搞一搞接口和源码啥的，但是我用抓包软件发现抓不了，反扒了。所以就直接撸源码撸。前期准备以下都是在电脑上装的：手机模拟器：MUMU模拟器 / 夜神模拟器 推荐使用MUMU模拟器文件管理器：re文件管理器装好上面的模拟器后，打开模拟器，在里面安装re管理器和微信：打开微信，访问你想要爬下来的小程序后使用RE管理器打开路径你会看到像c31ad******es72这样类似的文件，这是多个微信号产生的文件。怕找不到的话先删除掉这些类似的文件
2020-11-06 13:11:17
5534
41
原创 做自带流量的微信小程序，看这一篇就够了
第一步：注册一个邮箱账号备用。在微信公众平台上点立即注册，选择小程序填好刚才注册的邮箱和其他信息。点注册，然后去邮箱验证激活，之后信息登记，输入提示的内容。完成后登录在微信公众平台上扫码登录。手机上选择刚才注册的邮箱账号的小程序登录。我的是这个：进来后你可以对小程序的一些信息就行补充：我这里已经填写完了。接下来你需要在设置里面的开发设置中获取你的小程序appid这个AppID复制下来备用。第二步：打开微信开发者工具点击第一个框添加一个小程序—新建项目的信息：填好后点击新
2020-10-29 14:35:41
13406
67
原创 小程序接入vant Weapp组件的详细步骤
刚创建的项目的文件结构首先在你项目的根目录下打开终端，输入npm init 对项目初始化这时会生成pachage.json文件。继续在终端运行以下命令我这里用这个：npm i vant-weapp -S --production运行完如图所示：安装成功后 回到小程序开发工具 点击 工具 => 构建npm运行完截图：完成后在编辑器右边的详情把红框内的打勾上使用组件在你想使用组件库的的json文件内引入组件。比如你想在fundIncome页面内使用button组件
2020-10-26 11:18:07
3024
27
原创 h5购物车功能实现里程碑祭奠1024
前言：本文实现购物车的思路是：获取后端的商品列表——前端本地缓存添加的商品数据——从缓存中获取数据渲染到购物车页面——从缓存中获取数据并提交订单。所以主要是购物车数据的存和取以及清除。商品选择页面分析：考虑到商品列表会多处使用，并且增加、减少商品数量的操作都是一样的，所以将右侧的列表做成组件。/*shopListRight.vue*/<template> <div class="shopListRight"> <div class="view-box"&g
2020-10-24 00:36:34
1291
37
原创 项目中总会用到的方法，即开即用（持续更新ing）
前言：你是否有这样的烦恼，每构建一次项目都会用到很多过滤器？本篇将为你解决这个烦恼，这里整理了很多在开发中需要用到的过滤器或方法，都是复制即用的。时间过滤器// 对Date的扩展，将 Date 转化为指定格式的String// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) // 例子： // (new Date()).Format("yyyy-MM-dd
2020-10-18 21:33:25
351
1
原创 基于php的校园失物招领平台系统（自动化匹配招领启事）
最近开发了一个php后台的校园失物招领平台系统，实现了以学生为中心的快速做到失物招领的效率和准确率。只要同个学院的人进入网站即可查阅目前现在其他学生丢失了什么东西和谁捡到什么东西都是一目了然，更可以作为目击者提供发布启事的人一些有用的线索，帮助他人快速找回失物。其中，当发布的启事与招领的信息相似度高的话系统会自动匹配给用户，提高准确度。有兴趣的朋友可以直接到我的github下载源码查看！去查看如有其他问题可以直接wx：huang009516...
2020-10-15 16:55:48
2726
3
原创 基于php的酒店预订信息管理系统（自动化管理）
这是我的一个毕设项目，当初不懂java和node.js，所以选择了入门门槛较低的php，总体上达到了毕设系统的要求。涉及了多个模块，开发过程也慢慢得解决问题，一步一个脚印地去完成。这个系统可以说是在线预订客房和浏览酒店最新动态信息以及酒店管理员对酒店客房、用户信息、入住信息、餐饮预订等模块集于一身。界面也是自己的DIY审美（勿吐槽）。更多信息和源码可以直接去我的github地址查看。基于php的酒店预订信息管理系统...
2020-10-15 16:53:54
2178
7
原创 你想要的js正则表达式都在这！
一、校验数字的js正则表达式1、数字：^[0-9]*$2、n位的数字：^\d{n}$3、至少n位的数字：^\d{n,}$4、m-n位的数字：^\d{m,n}$5、零和非零开头的数字：^(0|[1-9][0-9]*)$6、非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$7、带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$8、正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$9、有两位小数的正实数：^[0-9]+(
2020-10-10 12:37:46
1567
39
原创 小程序实现索引栏遇到的坑
最近在做小程序项目的时候遇到了索引栏功能的东西，该项目是选择车型的需求。先看效果图：实现上面的功能大概有自定义弹框、点击索引字母跳转到对应的位置、搜索关键字高亮等。下面一个个来实现。特别说明：刚开始看到这种索引栏组件，就想到了使用vant的indexBar组件，但是后面使用popup组件indexBar共用的时候，点击索引字母是失效的，原因是因为popup的弹出层需要定位导致跳转对应的字...
2020-10-10 12:33:32
2337
1
原创 Mac的MxSrvs切换php版本报错解决方案
相信进来的你也是无奈才选择这个MxSrvs集成环境软件，这里建议去MxSrvs官网下载最新版的，旧版坑太多了。但你会发现MxSrvs软件会自带7.*以上的php版本，这时候因为项目的需要或者其他原因想要修改php版本，当你开开心心得去官网下载好版本之后，拷贝进去会发现php运行报错了。大概是这样子的：崩溃吧！下面将提供解决方案（我花费????从大佬那亲测有效的办法，网上的全是需要付费的，如解决了你的问题，请给个小星星鼓励一下）注：下载好MxSrvs先不要打开软件。还不知道怎么切换版本的小伙伴直接往下
2020-10-10 12:30:00
2987
6
原创 [记录八]Vue+node+koa2+mysql+nginx+redis，全栈开发小程序和管理员管理系统项目——使用定时任务执行脚本
前言：系统的日常维护必然不能单靠人24小时守着电脑去操作系统；像数据的同步、交易流水的校验、订单号的初始值等等需要在晚上或者系统使用量最低的时候去做，避免数据的丢失。为此选好时间让系统自动在那个时间去执行脚本就显得非常重要了。本节介绍定时执行脚本。下载node-schedule依赖yarn add node-schedule导入使用//app.jsconst schedule = require('node-schedule')const script = require('./util/s
2020-10-08 22:40:28
1550
29
原创 [记录七]Vue+node+koa2+mysql+nginx+redis，全栈开发小程序和管理员管理系统项目——生成请求日志
前言：日志是系统非常重要的东西，倘若生成环境中突然报错或异常，要想快速知道哪里出现了问题，最快的方式就是查看系统日志。日志不仅仅是系统异常后帮助定位错误的作用，也可以了解用户操作了什么请求，客户端ip和所在地址都是可以知道的，将用户的操作信息保存下来供系统管理员查看。下面来看看node是如何将日志信息保存下来并提供api给前端查看。日志表结构这是数据库的其中一张数据表，我将请求日志信息保存在这，方便管理员可以查看。创建生成日志的中间件//app.js// 日志app.use(async (ct
2020-10-08 17:04:39
1360
59
原创 [记录六]Vue+node+koa2+mysql+nginx+redis，全栈开发小程序和管理员管理系统项目——服务端图片上传与下载
本项目需要涉及前端上传图片与显示图片，为此自己实践一下图片相关的东西，挺有意思所以就分享出来。实现思路：服务端的处理方式是将前端上传的文件保存在服务端本地，然后重命名该文件名字，再将图片在服务端的路径存入表中，前端请求图片地址的时候去服务端找出文件并返回给前端显示。在routes文件夹下新建一个common.js文件//common.js//导入所需模块const router = require('koa-router')()const api = require('../controller
2020-09-30 15:56:18
3494
48
原创 [记录五]Vue+node+koa2+mysql+nginx+redis，全栈开发小程序和管理员管理系统项目——使用swagger自动生成接口文档
因为我们是异地对接接口文档，为此有对接文档是非常必要的，经过对比我选用swagger，但是node使用swagger有很多坑（细节）需要注意，我花费了两天时间才将文档展现出来，尤其是对注释部分需要严格按照格式去写。我这里选用swagger-jsdoc和koa2-swagger-ui去实现。首先我们在routes文件夹中另起一个文件swagger.js，为什么在routes文件下呢？因为在给到别人看文档的时候你是打开127.0.0.1:300/swaggger这样的网址的，所以它相当于node的其中一个路
2020-09-26 09:27:06
4156
61
原创 Vue中移动端使用postcss-px2rem和lib-flexible解决自适应
前端页面移动端免不了需要自适应高度宽度字体大小等等，如果直接写rem的话那会很麻烦，前端还需要根据设计图自己去转rem写样式，那样会非常麻烦且不易维护。本文将介绍前端写px像素单位自动转为rem单位。添加依赖postcss-pxtoremyarn add postcss-pxtorem 或 nmp install postcss-pxtorem添加依赖lib-flexibleyarn add lib-flexible 或 npm install lib-flexible在package.j
2020-09-22 14:13:10
1592
30
原创 [记录四]Vue+node+koa2+mysql+nginx+redis，全栈开发小程序和管理员管理系统项目——token控制接口权限
上节我们已了解后端是如何将数据加密成token以及如何解密回用户数据的，但是并没有做到用户没有登录就不可以请求某个接口（需要用户信息的api），这样不控制的话就直接请求那就会报错了，当然为了安全是肯定要对大部分接口进行登录后才能调用的控制的。这里我采用中间件去控制。在utils文件夹下新建一个whiteList.js文件这里就写免登录的接口路由，这些是客户端不传登录态token也是可以调用成功了，后面需要不登录就能调用接口就直接在这个数组后面加多个接口的路由。在app.js中编写一个中间件，根据上面
2020-09-21 13:58:20
2747
45
vue搭建的服装类商城手机模板
2021-01-11
新年烟花代码(纯js和html)
2021-01-02
可以直接安装的vue-devtools调试工具.zip
2020-05-07
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人