自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

@Grapefruit的博客

前端技术总结

  • 博客(46)
  • 资源 (7)
  • 收藏
  • 关注

原创 nodeJS 连接数据库,写接口,Postman或者浏览器测试,详解

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)1、首先要安装node,这个就不做详细安装方式了,直接去node官网下载就可以了,可以装一个淘宝镜像。2、安装依赖 新建一个文件夹,选中此文件夹,shift+鼠标右键,选择在此处打开powershell窗口。 cnpm install expr...

2020-01-16 10:16:02 1245

原创 vue引入全局过滤器,引入全局公共方法,引入全局变量

多读多写多记录,多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)一、首先我们先看vue项目中引入全局过滤器的方式: 1、先在src文件夹下新建JS文件夹,用来存放我们新建的js文件 2、在我们新建的JS文件夹下新建filters.js文件,存放过滤器的代码 // 时间戳转年月日时分秒fun...

2019-07-29 10:37:02 2446 3

原创 vue中使用axios封装接口,对api统一管理

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)1.首先先安装axiosnpm install axios -S2.安装成功后,在src目录下新建一个axios文件夹,用来存放封装接口的js文件, 在axios/axios.js文件中写入代码:import Vue from 'vue'impor...

2019-07-12 10:02:57 2955 10

原创 vue+swiper实现轮播效果 一个页面放多个轮播

多读多写多记录,多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) vue页面实现用swiper的轮播,话不多说,直接开始贴代码: 一 、首先要先安装swiper插件: npm install swiper --save-dev (安装淘宝镜像的也可以cnpm更...

2019-05-23 13:44:57 7718 2

原创 解决js浮点型数值乘法运算后出现很多小数位的问题

相信很多朋友都遇到过带小数位乘法运算之后会有一排的小数位的问题,今天就来解决下这个问题。

2022-09-23 13:46:57 1597 1

原创 微信小程序云开发——实现 线上注册,登录的逻辑,并保存账号到云数据库( 五 ):云函数调用

微信小程序云开发:云函数的上传和调用

2022-07-05 10:22:54 1164 2

原创 微信小程序云开发——实现 线上注册,登录的逻辑,并保存账号到云数据库( 四 ):修改密码

微信小程序云开发:注册,登录,修改密码

2022-07-05 09:47:04 1497 2

原创 javascript 找出数组的最大值和最小值的方法 (6种方法)

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)求数组的最大值和最小值,方法还是挺多的,我会一一列举出来: //首先我们声明一个不规则的数字数组 var arr = [1,7,3,1,5,8,9,0,15,10,6,5]; //第一种方法: // 最小值 Array.prototype.min = function () { let min = this[0

2021-06-23 09:55:37 11990

原创 javascript判断元素数据类型

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)就说一个最常用的方法:typeof typeof可以正确识别:Undefined、Boolean、Number、String、Symbol、Function等类型的数据, 但是对于其他的都会认为是object,比如Null、Date等, 所以通过typeof来判断数据类型会不准确。 但是可以使用Object.pro...

2021-06-23 09:36:52 1682

原创 微信小程序封装api

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)经常写小程序的项目,今天讲一下小程序封装接口管理的步骤吧话不多说,我直接上代码

2021-04-23 15:10:23 500

原创 微信小程序分包处理操作

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)大家都知道,微信小程序的项目是有大小限制的,不能超过2M,超过2M的我们就要实行分包处理。温馨提示:我们在写小程序的项目的时候,不能等项目写完了看着太大才去决定要分包,而是要在写之前就要去判断项目的大小,后期实行分包过分麻烦。不要问柚子是怎么知道的,问就是猜的......下面开始讲解操作第一步,我们要先创建一个文件夹,跟pages同级,用来放我们的分包,如图所示,packa

2021-04-22 10:15:28 1334 3

原创 微信小程序首页展示轮播图模板

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)wxml:<view class="container"> <swiper class="banner" indicator-dots="true" current="0" autoplay="true" interval="3000" duration="1000"> <swiper-item wx:for="{{brands}}" w

2021-04-19 14:35:52 701 2

原创 微信小程序上传图片和文件

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)今天讲解一下微信小程序上传图片或者上传文件的步骤:首先第一步我们要先在wxml页面文件中写入一个图标或者按钮,用来触发微信调起手机相册和拍照功能,供你选择图片<image src="/static/images/addimg.png" bindtap="chooseImage"></image>然后给这个图标或者按钮写上点击事件chooseImag

2021-03-09 15:12:21 10776 8

原创 vue + element-ui 使用ex-table-column插件实现el-table的内容自动撑开表格且不换行的功能

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)首先安装element-ui并实现引入,这个相信大家都会,柚子就不啰嗦了。下面开始第一步:安装ex-table-column插件 npm install ex-table-column --save //有条件可以使用c...

2020-05-07 09:44:51 7279 26

原创 微信小程序云开发——实现 线上注册,登录的逻辑,并保存账号到云数据库( 一 ):新建云服务小程序项目

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)首先要实现的是用微信开发者工具新建一个项目:我们先要做的是注册一个小程序,用测试号注册的小程序是不能进行云开发的,要用正式邮箱注册的小程序生成的appid才可以新建项目时,后端服务那里我们可以直接选择小程序云开发,但是这样会自动生成一些文件,有云函数等其他文件,与...

2020-04-02 15:02:30 2612

原创 微信小程序云开发——实现 线上注册,登录的逻辑,并保存账号到云数据库( 二 ):注册

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)这一章讲解的是用户注册的逻辑:继上一章节开通云服务之后,首先要做的就是创建一个数据库集合,用来存放用户的注册的数据,比如,用户名、密码等按照步骤,点击数据库,然后点击加号,输入数据库集合表名称即可创建完成之后,我们就要写页面了,新建注册页面:在我们写页面之...

2020-04-02 15:00:28 5131 41

原创 微信小程序云开发——实现 线上注册,登录的逻辑,并保存账号到云数据库( 三 ):登录

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)继上一章节柚子完成了注册的逻辑代码,这一章节讲解登录逻辑代码:下面是柚子写的登录页面,仅供参考:wxml:<view class="container"> <image src="https://7069-pintu-game-52d2a...

2020-04-02 14:57:28 5555 36

原创 HTML引入 Echarts实现地图的联动效果,默认展示省下所有市,点击某市会跳到本市下所有县的效果

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)首先我们要先画一个省级的地图,展示出这个省下面对应的所有市,这里柚子选择的是安徽省 直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset=...

2020-03-31 11:00:04 1682 2

原创 微信小程序开发拼图小游戏

闲来无事,自己用微信小程序开发了一个拼图小游戏玩,大概效果就是这样的:大概效果就是这样,感兴趣的小伙伴可以看一下,需要代码请留言自己的微信。...

2020-01-13 14:06:13 2111 26

原创 es6箭头函数

多读多写多记录,多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)先来说说为什么要用箭头函数吧: 首先使用箭头函数可以大大的缩减我们的代码, 其次可以改变this的指向问题。下面我们来看一下是如何缩减代码的://我们先写一个函数const double1 = function(number){ r...

2019-11-28 13:49:08 164

原创 es6详解模板字符串

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)模板字符串: 模板字符串相当于加强版的字符串,用反引号`,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式。基本用法: 普通字符串 let string = `Hello'\n'world`;...

2019-11-28 13:28:44 213

原创 es6详解数组的各种用法:forEach、map、filter、find、every和some、reduce​​​​​​​

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)一、forEach var colors = ["red", "blue", "green"];// ES5遍历数组方法,这种方法学过代码的应该都了解for(var i = 0; i < colors.length; i++) { consol...

2019-11-27 11:08:42 440

原创 微信小程序播放背景音乐,关闭背景音乐的操作

多读多写多记录,多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)微信小程序打开某个页面播放背景音乐,离开此页面时关闭背景音乐一、首先在app.json中配置一下{ "pages": [ "pages/index/index" ], "requiredBackgroundModes":["audio"],}二、要在...

2019-10-23 16:52:04 9756 5

原创 微信小程序使用Echarts全步骤

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)今天分享一个小程序使用Echarts插件的步骤,下面开始讲解:1、首先要想在微信小程序中使用Echarts,就要先去下载Echarts包并引入, 下载地址:https://github.com/ecomfe/echarts-for-weixi...

2019-10-22 16:15:13 3528 14

原创 微信小程序仿支付宝年账单页面滑动的效果展示

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)近来要做一个年账单页面,类似于支付宝年账单,就是对一年下单的总结,但是支付宝页面滑动的效果在小程序上是有些bug的,柚子也是研究了很久了,但自认还算完美吧,下面把过程说一下,希望能对某些朋友有所帮助:1、首先要有页面滑动动画的效果,就必须要监听页面的滚动,监听你手指是向上...

2019-10-21 11:15:44 3856

原创 微信小程序实现打开并下载服务器上面的pdf文件到手机

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)谈一谈ios的bug: 关于ios系统的bug这块也是快把柚子给逼疯了啊,ios系统是没有文件管理的,柚子用了很多办法,最后终于确定不管用什么办法ios都是实现不了下载的,只能实现在线查看。所以没办法,如果不考虑兼容ios的话,是很简单就能解决的,但是我想没...

2019-09-18 14:52:39 17300 13

原创 移动端经常出现的兼容问题,谈谈移动端应用或者wap站的一些优化技巧和心得

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)安卓浏览器看背景图片,有些设备会模糊。因为手机分辨率太小,如果按照分辨率来显示网页,字会非常小,安卓手机devicePixelRatio比较乱,有1.5的,有2的也有3的。想让图片在手机里显示更为清晰,必须使用2x的背景图来代替img标签(一般情况都是用2倍),或者指定 b...

2019-09-06 15:38:53 525

原创 http 状态码有那些,分别代表什么意思

多读多写多记录,多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) http状态码我们分为两个版本来看: 简单版: 100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送 ...

2019-09-06 15:14:37 348

原创 谈一谈 Html5 中本地存储sessionStorage 、localStorage的概念,优点,与cookie的区别

多读多写多记录,多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)html5 中的 Web Storage 包括了两种存储方式: sessionStorage 和 localStorage。sessionStorage: sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中...

2019-09-06 15:05:29 270

原创 谈谈 var , let , const 几种声明变量方式的区别

多读多写多记录,多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)关于声明变量,我们有var , let , 和 const几种方式,这次就来简单说一下他们之间的区别所在:var: 通过一个简单的小例子来看一下var ,var a = 30;if(true){ var a = 50; conso...

2019-09-03 11:31:49 530

原创 js对数组的一些用法总结,数组遍历,forEach,map,filter,find,every,some,reduce

多读多写多记录,多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) 今天柚子总结了一些数组的用法,分享给大家1、数组遍历: 遍历数组是项目中经常遇到的需求,遍历数组的方法也有很多种下面列举几种常见的遍历数组的方法: 最常见的就是for循环遍历了,i = 0, i 就为下标 ...

2019-08-28 15:46:30 310

原创 windows下nginx的安装并使用,资源文件配置等

多读多写多记录,多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)一、首先要下载 nginx 下载地址:http://nginx.org/en/download.html二、解压下载好的文件,并打开cmd窗口指向解压后的文件夹三、启动nginx 输入命令 nginx.exe 或者...

2019-08-14 16:14:06 337

原创 js获取本地excel文件单元格的内容

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)首先我们需要两个文件,一个是jquery-3.4.1.js,一个是xlsx.core.min.js新建html文件,在页面中引入这两个js文件 <script src="./js/jquery-3.4.1.js"></script>...

2019-08-13 10:26:11 3645

原创 js实现多个小方格输入验证码,一格输入完成后自动聚焦到下一格

多读多写多记录,多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) js实现输入四位或者六位验证码,四个或者六个的小方格样式的需要多个input框,四位就是四个input,六位就是六个input,下面开始上代码: <div class="code_box" on...

2019-08-05 10:29:55 4385 5

原创 js 自定义吐司 toast 组件

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮) js实现自定义的一个吐司,很简单,直接上代码: 一 、 首先写布局和样式 html<div class="toast_box"> <p id="toast"></p&gt...

2019-08-01 09:41:41 2114

原创 vue自定义获取验证码组件,倒计时60秒

多读多写多记录,多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)自定义一个获取验证码的组件,点击按钮实现倒计时60秒1.首先在页面html中写两个按钮,用v-show指令控制其显示隐藏//页面按钮 <button @click="getCode" id="d" class="getphone" v-show="show"&...

2019-07-08 11:17:07 1667

原创 微信小程序自定义picker弹框组件

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它的样式不可操控,当picker的选择项的内容过长时,会显示省略号,但是我的需求是换行展示全部的,但是查了很多博客资料发现,不管怎么操作都是不能更改picker组件的样式,最后没办...

2019-06-20 09:52:16 8366 5

原创 vue页面跳转添加动画效果,实现页面跳转时左右平推的动画效果

多读多写多记录,多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) vue项目,为页面跳转添加动画效果app.vue文件<template> <div id="app"> <transition :name="transitionName"> <router-view>...

2019-06-17 14:37:37 7863 7

原创 vue 移动端物理返回键

柚子写过一个Vue的移动端项目,当时遇到一个问题,就是按手机上的自带的物理返回按钮时,会直接退出应用程序,后来百度了一些关于手机物理返回键的文章,也终于是解决了,现在分享给大家,希望能帮助到一些朋友,最终实现的效果就是按返回键退回上一页,当退回到栈的第一页之后再按返回键才退出页面:首先新建js文件:document.addEventListener('plusready',...

2019-06-14 11:07:54 6927 13

原创 vue 页面缓存keep-alive 使用include动态实现页面缓存 根据栈的推进和返回为页面设置缓存

多读多写多记录,多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) vue项目中为页面设置缓存,可以大大的节省性能,a页面跳转到b页面时,保留a页面的操作,b页面返回a页面时,a页面之前的操作不会发生改变,数据不会重复渲染。 vue页面缓存使用的是keep-alive,具体使用方法: app.v...

2019-06-12 11:44:19 3662 9

前端CSS规范整理.doc

前端CSS规范整理

2021-08-18

全国所有省/市的层级地图geoJson.rar

全国所有省/市的层级地图的JSON文件下载,echarts画中国地图

2021-08-17

软考初级程序员资料.rar

软考初级程序员资料

2021-08-17

html+css实现雪花飘落动画.rar

html+css实现雪花慢慢向下飘落的动画效果

2021-08-17

双层旋转立方体.rar

用html+css写的双层旋转立方体照片墙动画,内六外六一共十二张图片,可随意替换。

2021-08-17

微信公众号菜单跳转关联小程序.docx

微信公众号底部菜单点击跳转到此公众号关联的某个小程序中 微信公众号底部菜单点击跳转到此公众号关联的某个小程序中

2020-12-02

xlsx.core.min.js

用于获取本地excel文件中每个单元格内的内容的javaScript插件

2019-08-13

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除