前端
文章平均质量分 77
蓝枫秋千
前人栽树,后人乘凉。既然我乘了前人的树,那么就栽更多的树给后人~共勉!
展开
-
关于css文本换行
css 文本换行原创 2023-03-14 11:37:40 · 645 阅读 · 0 评论 -
chrome插件开发入门-保姆级攻略
chrome插件开发入门攻略原创 2022-08-10 19:20:36 · 9002 阅读 · 2 评论 -
前端解决图片跨域问题:net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin
Control-Allow-Origin' header is present on the requested resource.原创 2022-07-05 13:22:48 · 11498 阅读 · 3 评论 -
form-making爬坑笔记(jeecg项目替换表单设计器)
资料官网在线演示网站-基础版基础版-文档在线演示网站-高级版高级版-文档版本对比基础版本高级版本功能提供了一些基础表单控件,表单校验,获取数据等基础功能。相较于基础版本,高级版本提供了更丰富的功能:页面更加美观通过点击即可快速添加字段;更多的属性设置,包括数据源与表单事件;更多的控件字段(子表单、自定义组件等);更多的布局容器,并且可以相互嵌套(栅格、表格、标签页);更多的API,满足更复杂的业务需求;加入自原创 2022-03-25 21:27:17 · 3336 阅读 · 0 评论 -
fetch请求设置请求头错误导致无法跨域
前言项目中遇到了一个问题,如下,看起来像是跨域问题,但是实际上在服务端设置了Access-Control-Allow-Origin *,并且之前是一直用的好好的,但是这次重新封装了一下请求,就不行了。Access to fetch at '***' from origin '***' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-C原创 2021-12-06 11:32:30 · 8215 阅读 · 6 评论 -
前端禁用f12,右键菜单等
说明: 如果使用vue或者是react项目的话,将代码写在生命周期函数中,组件加载完毕的生命周期中,如果是使用的原生的就写在script标签中禁用f12document.onkeydown = function () { if (window.event && window.event.keyCode == 123) { alert("F12被禁用"...原创 2020-02-26 19:49:08 · 3111 阅读 · 0 评论 -
谷歌浏览器查看web元素绑定的事件及源码位置
F12进入调试控制台找到对应的元素并处于选中状态在控制台右边选择时间监听的选项卡(Event Listen)展开来的就是对应的事件了比如说点击进入这个时间对应的代码位置就进入到了源码和项目代码的界面代码中标红的是定位到的函数位置右键点击函数名,选择在侧边栏显示位置然后就会显示到你项目的位置(很有可能是在node_modules中,所以使用编...原创 2020-01-17 11:54:12 · 1961 阅读 · 0 评论 -
input上传文件限定上传类型
在使用<input type="file" />这个标签来上传文件的时候指定上传文件类型关键: 使用accept属性比如: <input className={styles.fileEle} onChange={this.onImportExcel} type="file" accept=".xls, .xlsx" />注意: 指定多种类型的话, 中间使用,分隔下面...原创 2020-01-16 12:24:10 · 1080 阅读 · 0 评论 -
antd表格筛选功能(排序功能同理)
表格的columns配置添加this.state中添加在render方法中解构出filteredInfo, 并赋初始值编写要用到的3个方法原创 2020-01-15 21:57:24 · 2686 阅读 · 0 评论 -
antd中表单校验正则使用方式
类组件的结构(最外层需要先包裹一层语法糖)const PersonManagement = Form.create()( class extends React.Component{} ) epxort default PersonManagement从form中解构出需要的一些方法const { getFieldDecorator } = this.props.form...原创 2020-01-15 11:31:41 · 6157 阅读 · 0 评论 -
react的img标签路径使用方式
使用import导入import imgURL from './../images/photo.png';<img src={imgURL } />使用require导入(require里面只能写字符串, 不能写变量)<img src={require('./../images/photo.png')} />...原创 2020-01-15 11:24:41 · 2848 阅读 · 0 评论 -
使用react的使用this.props.history.push()报错
使用react进行js方法进行路由跳转的时候,我一个组件要跳转到另外一个路由,但是使用this.props.history.push(“路径名”)的时候给我报错,从别的页面跳转回这里也没问题,去打印this.props是一个form对象,打印this.props.history的时候是undefined,说明父组件并没有传递一个history过来解决方法: 到父组件中传递一个this.props...原创 2020-01-15 11:22:20 · 3769 阅读 · 0 评论 -
vue中响应式布局将字体大小改成自适应
在app.vue的生命周期函数中添加一段代码来设置页面的rem mounted: function() { // 页面开始加载时修改font-size var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.docu...原创 2020-01-06 11:59:06 · 10297 阅读 · 0 评论 -
使用手机查看vue项目
将项目进行打包npm run build打包后找到项目根目录下config目录下的index.js文件将原来localhost替换成0.0.0.0查看本机ipwindows使用cmd进入控制台,输入ipconfig即可查看mac打开终端输入nslookup localhost即可查看将浏览器地址栏的url的0.0.0.0替换成你的本机ip然后复制这个url使用草料二维码生成二维...原创 2020-01-03 19:11:33 · 536 阅读 · 0 评论 -
typeof和instanceof的不同
typof var a = [34,4,3,54], b = 34, c = 'adsfas', d = function(){console.log('我是函数')}, e = true, f = null, g; console.log(typeof(a));//objec...原创 2019-12-23 10:32:31 · 157 阅读 · 0 评论 -
fetch接口的封装
GET方式的封装api = ({ url, args='', callback }) => { let argsStr = ''; if(args!='') { for(let key in args) { argsStr += key + '=' + args[key] + '&'; ...原创 2019-12-18 10:45:53 · 281 阅读 · 0 评论 -
从官方教程导入uni.css正确步骤
创建好你自己的空项目创建一个hello-app的项目将hello-app中common目录拷贝到你自己项目的根目录下在你项目的App.vue的style中添加一行代码@import './common/uni.css';这个时候跑项目的话会报一个error我这里的bug是真的找了好久,说page未注册是什么鬼最后去看一下引入的uni.css终于发现了开头...原创 2019-11-29 14:52:17 · 4666 阅读 · 1 评论 -
简述前端通过php访问数据库拿数据的一些问题
先声明一下,我使用的是mysqli方式,其他方式的话大同小异跨域问题在php文件中最前面添加一行//处理请求跨域header('Access-Control-Allow-Origin:*');字符乱码问题// 设置编码,防止中文乱码mysqli_set_charset($conn, "utf8");传参加号问题使用转义字符,将加号转换成'%2b'字符串存储到...原创 2019-11-22 14:14:40 · 192 阅读 · 0 评论 -
react环境的搭建
本地安装nodejs和淘宝镜像cnpm(参见vue环境搭建)全局安装脚手架工具,安装之后就能够使用r命令eact项目了npm install -g create-react-app到你想创建的目录下开始创建项目create-react-app test01创建完项目之后就能够进行测试了,他会有命令提示cd test01;yarn start这里的yarn是我创建项...原创 2019-10-31 11:32:09 · 85 阅读 · 0 评论 -
前端面试(下篇-javascript)
javascript概念部分XMLHttpRequest请求对于get的封装let xhr = new XMLHttpRequest();xhr.open("get",url);xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.responseType = "json"xhr.s...原创 2019-10-28 22:20:00 · 124 阅读 · 0 评论 -
前端面试(中篇-CSS)
CSS部分CSS选择器有哪些1)核心选择器1.id选择器:#one2.类选择器:.two3.元素选择器:div4.逗号选择器:div,span5.组合选择器:div#one6.通用选择器:*2)层次选择器1.后代选择器:#one .two2.子代选择器:#one>.two3)属性选择器1.[attr=value]2.[attr~=value]3.[attr|=...原创 2019-10-28 20:04:30 · 104 阅读 · 0 评论 -
几个常用的网络协议
概念:网络协议规定了计算机之间连接的相互寻址规则,数据冲突的解决,数据如何传送和接收等TCP/IP协议(传输控制协议)由网络层的IP协议和传输层的TCP协议组成IP层负责网络主机的定位,数据传输的路由TCP层负责数据传输机制,这是网络编程的主要对象UDP(用户数据报协议)是一种无连接的简单的运输层协议不可靠传输速度快TCP和UDP的区别TCP可靠的,有序的,速度...原创 2019-10-28 16:49:57 · 383 阅读 · 0 评论 -
html5,css3,es6新特性总结
html5新特性语义化标签如:header,footer,nav,dialog增强型表单如:date,week,url,time,email,month视频和音频audio和videoCanvas绘图标签只是图形容器,真正绘图的是javascriptsvg绘图它是一种可伸缩的矢量图形和canvas的区别:svg使用xml描述2d图形,canvas使用javascri...原创 2019-10-28 16:32:31 · 924 阅读 · 0 评论 -
vue和jequry区别
1.未来发展● jquery介绍:jquery是一个类库,提供了很多方法,不能算框架。在过去和现在Jquery是最流行的web前端js库,可是现在无论国内还是国外,他的使用率正在渐渐被其他的js库所替代。随着浏览器厂商对H5规范统一遵循以及ECMA6在浏览器端的实现,jquery的使用率会越来越低。● vue的介绍:vue是一个刚兴起不久的前端框架,有一套完整的体系,是一个精简的MVVM。从技...原创 2019-10-28 14:56:08 · 215 阅读 · 0 评论 -
前端面试题(上篇-HTML)
HTML,HTTP,web综合问题seo(搜索引擎优化)html5语义化的理解1).web语义化:通过html标记页面包含的信息,包括标签语义化和css语义化2)标签语义化:通过使用包含语义的标签(如h1-h6)来表示文档结构3)css语义化:为html标签添加有意义的class,id补充未表达的语义好处:去掉样式后页面能呈现清晰的结构文档结构,便于盲人使用读屏器阅读,搜索引擎...原创 2019-10-27 20:48:51 · 148 阅读 · 0 评论 -
vue中对于作用域插槽的理解
vue的作用域插槽部分我觉得是比较难以理解的部分,现在将我对作用域插槽的理解以注释的形式记录下来<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...原创 2019-10-20 10:41:17 · 251 阅读 · 0 评论 -
vue中子组件对父组件的事件传递
vue中的值传递有单向数据流的特性,只能支持父组件改变子组件中的值要想操作子组件改变父组件的值的时候怎么办呢,要通过事件传递<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...原创 2019-10-19 21:37:33 · 542 阅读 · 0 评论 -
es6学习笔记整理
http://naotu.baidu.com/file/1ab1ddc9e3aa1b604accafd57b99cc24?token=5b7195cd93537a37上面是我的百度脑图笔记原创 2019-10-14 17:11:03 · 235 阅读 · 0 评论 -
display:inline-block右侧留白问题
将一个元素设为行内块元素之后会发现元素的右侧有条白边,效果如下实现代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...原创 2019-10-12 09:05:24 · 846 阅读 · 0 评论 -
对于JavaScript中类数组对象的理解
类数组对象的理解1)本质上还是一个对象(即能用对象所有的方法和特性),只是能用一些数组的特性2)此对象的属性部分类似数组里面的index举例子理解:函数里面的arguments是一个标准的类数组对象function demo(a,b){ console.log(arguments);//{0:11,1:22} console.log(arguments[0]);//...原创 2019-08-27 13:10:26 · 494 阅读 · 0 评论 -
在JavaScript中__proto__和prototype的区别与联系
我来说一说我今天在学习构造函数和继承的时候碰到的长得比较像的两个属性首先来说prototype1)这是一个在构造函数中的属性,用于指向这个构造函数的原型对象2)只有函数有这个属性3)这个属性和原型对象中的constructor双生存在,翻译一下就是,A的prototype是B,B的constructor是A接下来说一下__proto__1)只要是对象就会有这个属性(不管是对象,函数还是...原创 2019-08-28 19:53:51 · 123 阅读 · 0 评论 -
关于input和select元素的width和height计算问题
不知道是否有同学在学习input标签的时候或者是做项目碰到过这样的问题:我的input的width和height总是和我想的不一样,就算是把border设置为0后也是这样?其实:很简单的原理(但是困了我好久qaq,当时我还去测了是不是outline的原因) !!!记住:input自有属性:border padding(不同浏览器值可能不一样)只需...原创 2019-09-01 11:07:54 · 429 阅读 · 0 评论 -
JavaScript中原生对象,宿主对象,本地对象,内置对象,自定义对象的总结
1、宿主环境:一般宿主环境由外壳程序创建与维护,只要能提供js引擎执行的环境都可称之为外壳程序。如:web浏览器,一些桌面应用系统等。即由web浏览器或是这些桌面应用系统早就的环境即宿主环境。2、本地对象ECMA-262 把本地对象(native object)定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。再来看一下,“本地对象”包含哪些内容:Object、Functi...原创 2019-09-02 16:31:28 · 313 阅读 · 0 评论 -
使用jQuery移除css属性
注意辨析:元素属性是指标签内的属性 常用的核心属性:id,class,style,title 不常用的属性:alt,src,href,..... ***特殊:布尔属性也是元素属性***写在head标签中style样式中的属性才是标题所说的css属性 如:width,height,color,background....对于元素属性的删除:$.css('width','')对...原创 2019-09-10 22:29:06 · 4588 阅读 · 0 评论 -
HTML5API笔记(百度脑图版)
HTML5API笔记(百度脑图版)上面是之前做的百度脑图的HTML5api的笔记,链接跳转原创 2019-09-22 16:57:38 · 510 阅读 · 0 评论 -
表单中的按钮默认提交事件
form标签中的button默认提交事件对于表单中 input:[type=“submit”] 我们都知道他会提交整个表单,那么为什么对于button来说也会有这个问题呢?我分明是没有指定type为submit的啊?经过代码验证,我发现,只要是表单里面的按钮,你不指定类型的话,他默认就是type=submit类型,如果不想让他提交的话,手动指定type="button"即可解决问题...原创 2019-09-29 11:09:21 · 910 阅读 · 0 评论 -
利用indexOf()封装去重函数
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果不存在,则返回-1实际上,他也能应用于数组,它可返回某个元素在一个数组中首次出现的位置,如果在该数组中不存在这个元素,则返回-1,利用这个特性,能做一个数组的去重封装function de_weight(arr){ var hash=[]; for (var i = 0; i < arr.len...原创 2019-09-29 16:46:43 · 465 阅读 · 0 评论 -
在linux环境下安装nodejs步骤
在linux环境下安装nodejs分以下几步1.下载安装包到nodejs官网下载 https://nodejs.org/en/使用命令行安装(ubuntu用户推荐)$ wget https://nodejs.org/dist/v10.16.2/node-v10.16.2-linux-x64.tar.xz2.解压到你需要的目录(一般是/opt)注意:windows用户需要自己想办法...原创 2019-10-02 12:41:23 · 414 阅读 · 0 评论 -
简单描述缓存的主要方式
缓存是javascript的核心基础知识之一,主要可以氛围本地缓存,应用缓存和离线缓存本地缓存主要有cookie,localStorage和sessionStorage,都是浏览器提供的本地缓存,但是生命周期和缓存大小都不相同大小生命周期cookie一般在4kb一下关闭浏览器窗口就消失了localStorage一般在5mb一下直到手动删除缓存ses...原创 2019-10-08 11:01:30 · 124 阅读 · 0 评论 -
CSS3中过渡和变形的区别和联系
过渡是针对元素的属性进行改变,而变形是针对整个元素进行改变过渡是能够设定过渡的时间,曲线,延迟等,而变形不能够设置,是瞬间完成的变化两者都不会对其他元素的布局产生影响两者一般都会设置触发条件,比如说hover(不像动画就一开始就开始变化)变形能够通过transform-origin设置中心点,过度默认就是左上角不能改变...原创 2019-10-10 12:10:41 · 276 阅读 · 0 评论