web前端
~小仙女~
会很厉害的菜鸟
展开
-
52版本火狐的安装问题-以及日常问题
关于52版本的火狐浏览器的安装问题,资源信息包含安装说明资源地址https://download.csdn.net/download/baidu_41604826/79670376原创 2022-02-08 11:08:19 · 567 阅读 · 0 评论 -
前端使用layui结合canvas实现图片验证码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="./plugin/layui/css/layui.css" /> </head> <body> <fieldset class="layui-elem-field layui-fi转载 2021-05-10 10:23:52 · 1212 阅读 · 0 评论 -
uni-app根据城市匹配对应的天气
uni-app根据城市匹配对应的天气类似如图功能;1.引入cityInfo.jsonconst cityInfo = require('@/components/al-weather/city.json');声明变量:city:'', //本地城市名称weather:'', //天气信息2.获取城市名称——匹配城市的code值uni.getLocation({ type: "gcj02", altitude: false, geocode: true, succes原创 2020-08-26 11:32:47 · 1111 阅读 · 0 评论 -
vue报错之Duplicate keys detected: ‘0‘. This may cause an update error.
vue报错之Duplicate keys detected: ‘0’. This may cause an update error.如上错误可能性:1.嵌套循环出现了相同的key值;2.key的值不存在原创 2020-08-24 14:44:55 · 424 阅读 · 0 评论 -
apicloud——微信第三方登录、apple登录
apicloud中微信第三方登录的问题混合开发移动应用很火啊现在,多数公司都要求是必备技能,或者加分技能,所以学习来了如下是作为前端工作者应该了解的内容,更加详细的前往官方示例*** 结合apicloud官方提供的模块——wxPlus或者是wx(新旧版本而已)a.wxPlus.isInstalled判断是否安装了微信,如果有再进行下一步,没有就给与相应的提示;b.wxPlus.auth去...原创 2020-05-18 14:53:26 · 1133 阅读 · 0 评论 -
iconfont图标的使用——超级简单,方便
iconfont图标的使用1.iconfont:官方地址2.如果自由使用不是某一个项目,可以选择加入购物车——下载至本地——解压如果是某个项目中使用,可以创建一个项目,把购物车中的图标添加至某个项目——下载至本地——解压图示:或者创建项目——下载至本地3.解压之后的文件:4.项目中用到的只有iconfont.css文件,把该文件在对应的html或者对应的文件中引入就可以了5...原创 2020-04-08 15:59:01 · 834 阅读 · 0 评论 -
vue项目中代码暴露问题
vue项目中代码的暴露问题由于vue使用的不够熟练,所以在使用的过程中还是存在好多细小的问题,近日碰到的会做个整理,给自己备用我这里是在使用apicloud的过程中,直接通过script来引入vue包,所碰到的问题,如果是前后分离可能有更好的方式html页面代码诸如此类的mustache语法的方式来展示变量内容,会出现代码暴露的情况也就是说在页面还没有完成渲染的时候,{{}}会直接暴露...原创 2020-04-07 10:19:44 · 1082 阅读 · 0 评论 -
前台关于跨域的警告A cookie associated with a cross-site resource at .........,代理服务器
A cookie associated with a cross-site resource at …解决该警告的方法:在配置文件中添加配置如下: "proxy": { "/api": { "target": "http://112.125.26.100:8000/", "changeOrigin": true, "pathRewrite": { "^/api" ...原创 2019-12-26 16:34:51 · 44036 阅读 · 3 评论 -
dva+react中的CDN缓存
所谓CDN缓存已经放在服务器的项目,如果做了调整重新打包上传之后发现,不会及时更新,刷新没用,必须清除缓存才有用。就是因为CDN缓存,这个缓存的存在是为了减轻服务器的请求压力,但是无疑也造成了困扰,怎么结局?调整配置文件:此处是使用dva+react,使用的打包工具是roadhog,所以调整.webpackrc文件1.添加配置: "hash": true, "html": { ...原创 2019-12-26 16:05:01 · 687 阅读 · 0 评论 -
dva+react 设置启动端口
dva+react 设置启动端口根据需要,一个电脑会同时运行多个项目,如果不设置默认端口的话,都是8000,那么如果有一个项目正在运行,重新启动一个的话,会提示是否需要重新开启一个,选择yes之后就没有下文了。所以需要给项目设置相应的默认端口方法找到package.json做如下操作即可:...原创 2019-12-18 11:28:16 · 573 阅读 · 0 评论 -
CSS3_animation实现红包雨的版本2
CSS新属性实现红包雨需要结合该文:https://blog.csdn.net/baidu_41604826/article/details/103422370CSS部分新增 .Move1{ animation:myfirst 5.3s linear 0s infinite ; } .Move2{ animation:myfir...原创 2019-12-11 16:28:32 · 1062 阅读 · 0 评论 -
JS——红包雨(抢红包)
JS实现红包雨这里只是一个效果的实现,没有添加更多复杂的业务逻辑,方便直接拿来使用页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...原创 2019-12-06 14:28:19 · 2564 阅读 · 0 评论 -
vant组件库的全局样式配置
官方地址:https://youzan.github.io/vant/使用vant时全局样式配置问题前提:使用vue-cli搭建了项目,想结合vant组件库练习,发现跟着官网操作出现了一点问题:官方推荐的是按需引入所需要的组件,使用方式如下:首先安装babel-plugin-import,然后在.babelrc文件中添加配置后如下:之后在main.js中添加import Vant...原创 2019-06-04 17:30:54 · 14812 阅读 · 14 评论 -
使用JS+html2canvas把html页面转化为一张图片
前端把HTML页面转化为一张图片近日项目有一个需求:把需要分享页面生成一张图片(内容是动态的,生成img格式方便用户操作)思路:1.创建canvas元素,按照需要设置该元素的宽高;2.获取目标元素的宽高;3.获取画布环境,进行适当的缩放(为了图片的清晰度)4.使用html2canvas()方法,在其回调中获取处理后的canvas元素,同时在回调中得到画布转化后的src地址,生成新的im...原创 2019-06-03 17:45:56 · 5007 阅读 · 4 评论 -
vue-cli3项目搭建——有点顺眼
使用vue-cli3搭建项目官方地址:https://cli.vuejs.org/zh如果安装过旧版本(vue-cli)建议删除重新安装新版本(@vue/cli)删除指令:npm uninstall vue-cli -g || yarn global remove vue-cli``安装指令```npm install -g @vue/cli || yarn global...原创 2019-06-05 18:00:28 · 730 阅读 · 0 评论 -
vue-cli 项目运行自动在浏览器打开的设置
vue-cli项目运行之后自动在浏览器打开在目录config——>index.js中修改如下设置:autoOpenBrowser: true, 原本是false,改为true即可PS.更多index.js设置的问题可前往:https://www.cnblogs.com/ye-hcj/p/7077796.html...原创 2019-06-05 10:22:32 · 3819 阅读 · 0 评论 -
微信小程序:自定义组件、组件之间的信息传递
官方地址:https://developers.weixin.qq.com/miniprogram/dev/framework/微信小程序中的自定义组件自定义组件:通常我们也叫它子组件。为了方便起见,我们把一些可能会重复用到的模块封装成一个可以随时拿来用的“标签”示例:在index.wxml页面(下称:父页面)中引入自定义组件tips(下称:子组件)知识点包括:基本子组件的创建引用、父组件...原创 2019-06-11 15:33:30 · 824 阅读 · 0 评论 -
Vue项目搭建
快速搭建Vue项目1:安装Vue(如果没有cnpm也可以用npm ,或者安装cnpm :npm i cnpm)cnpm i vue2:安装全局的cue-cli开发环境cnpm i --global vue-cli查看是否安装成功:vue --version 显示版本号就可以了3:创建项目(在需要的地方黄建一个文件夹,在该文件夹下打开终端cmd或者是powerShell执行以下命令)...原创 2019-05-28 10:36:37 · 354 阅读 · 0 评论 -
Vue解决用户点击事件延迟的300ms
用户点击被延迟了?移动设备上,浏览器通常会在用户点击事件触发后的300ms才执行,是因为在检查用户是否在做双击为了可以立即响应用户的点击事件,fastclick插件出现了使用方法1.下载:npm install fastclick2.引入:import FastClick from 'fastclick' 3:应用:FastClick.attach(document.body...原创 2019-05-28 10:20:29 · 2791 阅读 · 0 评论 -
通过JS添加的class,怎么通过该class绑定事件
通过JS添加的class,怎么绑定事件使用场景:有时候根据需要会通过JS给元素动态添加class,然后通过该class给元素绑定事件,这时候我们通常使用的事件绑定方法会无效。HTML<button id="subBtn">给box添加class</button><div id="pox"> <div>box</div>...原创 2019-05-10 14:18:21 · 8627 阅读 · 2 评论 -
react+less切换皮肤
项目需求——呈现亮、暗两种风格思路:通过改变最外层div的class结合less的参数来实现。简单使用容易理解实例:页面<div className={styles.theme_dark}> <div>我是内容...</div></div>.less.theme_dark{ @bg-color: black; ...原创 2019-09-16 18:04:31 · 1326 阅读 · 0 评论 -
文字的展开和收起
列表式的文字的展开和收起的实现需求:1:当文字超出目标值,则截取目标值,其他隐藏,同时显示“展开”二字和下拉箭头;2:点击“展开”显示所有文字,同时改为“收起”和上拉箭头3:如果文字本身就没有超过目标值,则显示所有文字即可之前想过使用css设置超出多少行隐藏,或者给Li标签设置高度隐藏,但都无法满足以上第三条,所以想到了下边一种方法将就可以使用思路:1:初始遍历需要展开和收起的元素,...原创 2019-05-15 09:59:41 · 1552 阅读 · 0 评论 -
js把时间戳转化为时间
时间戳转化为时间项目中经常会用到时间戳转化时间等类似的时间操作,自定义一个自己经常使用的方法,很方便方法// 通过时间戳获取正常的时间显示function getTime(data,type){ var _data = data; //如果是13位正常,如果是10位则需要转化为毫秒 if (String(data).length == 13) { _data = d...原创 2019-06-26 10:43:19 · 6635 阅读 · 1 评论 -
小程序中的路由配置以及底部导航
小程序的路由配置及底部导航的实现目标如图:创建对应的页面:在pages中添加2:配置路由:在app.json中配置如下代码{"pages": [ "pages/index/index", "pages/search/search", "pages/shopCart/shopCart", "pages/mine/mine" ]}底部导航的...原创 2019-06-26 11:07:01 · 1231 阅读 · 0 评论 -
Or maybe you meant to call this function rather than return it.
Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.同事碰到如上的报错,后来我们讨论出了解决方法,记录如下...原创 2019-07-12 18:08:06 · 938 阅读 · 0 评论 -
ES6——魅力片之‘声明方式’
同样都是声明方式,要这么多能吃吗?那么为什么ES6还新增了const 、let两种声明方式呢…可以重复声明;无法限制修改,(有的常量是不需要改变的,但是var不能满足);没有快级作用域;**变量可以被重复声明是其他语言所不接受的,(虽然我也没用过几种语言,但是相信我,这是真的…)**无法限制修改,简直非人类嘛!!!人家代码中还不能有个固定不变、唯一存在的数学常量吗**没有块级作用域...原创 2018-09-21 18:51:22 · 200 阅读 · 0 评论 -
react+dva+antd打包运行,项目时常出现报错:Loading chunk n failed.——求解决
react+dva+antd ,webpack打包后运行,项目时常出现报错:Loading chunk n failed.表现的形式:页面空白,控制栏报错如下:除非强制刷新页面才可以正常展示。不是每个页面都会出现,偶尔出现找遍全网,没有解决【-_-】。有解决的欢迎评赐教哦…...原创 2019-10-09 15:19:13 · 3198 阅读 · 2 评论 -
vue路由的重定向
路由的重定向——在进入页面之前做的处理需求:项目的某些页面没有登录(本地没有账号密码)是不允许查看的,需要退出到登录页面之前写react项目都是在对应页面的willMount周期中处理的,近日学vue学到一个统一处理的方式1.单独生成一个redirect.js文件,内容如下://路由重定向,在跳转之前确认是否确认跳转到该页面import router from './router';i...原创 2019-09-18 15:33:08 · 503 阅读 · 0 评论 -
vue@cli3结合vant搭建初始项目模板
vue@cli3结合vant搭建初始项目模板包含内容:1:rem的引入、配置2:vant组件库的引入、配置一. vue@cli3项目搭建地址补充:手动选择插件内容:项目展示:二.安装vant组件库1.可以手动:npm i vant -S 也可以根据官方推荐:通过工具,如下:(选择)2.配置:找到babel.config.js文件,修改为如下方式:module.ex...原创 2019-08-15 16:06:18 · 2222 阅读 · 0 评论 -
vue结合vant实现联动效果
vant中提供的选择器结合弹出框来实现联动效果、1:用到的组件:Picker、Popup2:引入:在main.js也好、页面中也好全局也好,正确的引入;此处在main.js中按需引入;main.jsimport { Picker, } from 'vant';Vue.use(Picker).use(Popup )test.vue<template> <di...原创 2019-08-20 15:15:44 · 2243 阅读 · 2 评论 -
Chrome中禁止input表单自动填入账号密码
Chrome中禁止input表单自动填入账号密码登录记住密码后,所有的type=“password”的input,都会被自动填充:如下图解决:适当的时候改变type的类型state={ pwd:'', type:'text', } changeInfo = (str,val) =>{ if(str==="pwd"){ this.setS...原创 2019-07-23 10:19:18 · 2839 阅读 · 0 评论 -
弹框中的小问题
弹框中的小问题-关闭遮罩层问题:如上图是一个弹框,需要点击遮罩层或者右上角的叉号关闭弹框,但是给遮罩层添加了关闭事件之后,点击弹框中的任何内容都会关闭文档结构:<div className="mask" onClick={this.closeMask}> <div className="loginBox" onClick={e => e.stopPropagat...原创 2019-07-11 18:20:31 · 122 阅读 · 0 评论 -
React定时器造成的内存泄漏问题:This is a no-op, componentWillUnmount method.
Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the compon...原创 2019-07-10 12:01:41 · 1308 阅读 · 0 评论 -
关于取反运算符"!"和"!!"
关于"!“和”!!"“!”——一个叹号在JS中表示取反的意思,通常我们使用在布尔值中做判断,如果不是布尔值,都会对应的转化为相对应的布尔值之后取反,那么基本规则如下:取反返回true的如下:!undefined!null!0!false!""!NaN除此之外其他任何数据取反都返回false“!!” ——两个叹号表示把目标值转化为布尔值,相当于使用Boolean()方法...原创 2019-05-07 17:15:48 · 7973 阅读 · 0 评论 -
JS原生点击按钮防重复点击效果
JS原生利用异步实现简单的防重复点击使用场景:项目中涉及后台交互的按钮,例如:确认转账、提交认证等等;第一次点击正常提交,但是如果在后台请求还没有返回的情况下,用户点击要给与适当的提示,如果后台数据返回了之后,又可以根据业务需求再次执行HTML<button id="subBtn">确认转账</button>JSvar boo = true;$("#...原创 2019-05-10 11:56:39 · 1784 阅读 · 1 评论 -
CSS写一个正方形
CSS写正方形width: 25%;padding: 25% 0 0;原创 2018-12-21 15:01:34 · 579 阅读 · 0 评论 -
前端根据银行卡号获取该银行卡的信息
由银行卡号获取银行信息现如今用户体验真心重要,当然我们也是跟着客户的需求在不断提升使用场景:前台页面会出现一种情况就是,用户的银行卡号输入完成之后,会自动识别到该银行卡的信息并且显示出来具体使用我们使用的是一个bankcardinfo的一个插件1:下载 npm install bankcardinfo;2:实例化:var BIN = require('bankcardinfo');...原创 2018-12-21 14:57:01 · 4113 阅读 · 0 评论 -
上传图片
上传图片的方法目前在使用的有formData或者是base64** 据了解base64相对好用一点,个人感觉也简单H5提供了一个FileReader对象方法:该对象用来主要用来读取各种文件,同时调用不同的方法来转化为不同的类型传递给后台,此处使用readAsDataURL(file)事件:事件包括:读取之前、读取发生错误时、读取被终止时、读取成功时、读取操作完成时(不管成功或者失...原创 2018-12-21 14:32:58 · 160 阅读 · 0 评论 -
输入银行卡号,可以自动识别到银行卡类型的方法
根据银行卡号信息可以自动识别到银行卡类型下载依赖:npm install bankcardinfo使用方法:1: var BIN = require(‘bankcardinfo’);2:调用:两个参数,一个是卡号,一个是报错,以及返回的信息BIN.getBankBin("卡号",(err,data)=>{ if(!err){ console.log(data) }...原创 2018-11-30 17:57:42 · 12217 阅读 · 0 评论 -
React 中的state和props
关于state 和props的简单理解总结Props:1.更像一个介质(是组件对象的一个属性),用来传递组件对象;2.传递的过程中是只读的,如果要修改,只能通过该组件的父组件来修改,即(状态提升:就是说我们一般建议state是从父组件往下传递的,如果要用子组件变更父组件的state,需要通过调用父组件中的方法来实现);State:1.组件的渲染是根据state状态来的,也可以说是一个组...原创 2018-10-20 16:40:46 · 536 阅读 · 0 评论