- 博客(29)
- 收藏
- 关注
原创 vue项目中如何配置vue.config.js解决跨域问题
最近写vue项目请求自定义接口时,出现了跨域问题。报错代码如下:Access to XMLHttpRequest at 'http://localhost:5001/index' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.查了很多很多解决方案都没有用。这
2022-04-28 18:27:53
1945
原创 input file修改样式
input file的样式比较丑,直接进行修改时,无法修改其中按钮的样式。只需简单的三步就可以搞定:第一步:将input file进行隐藏:#file { display: none;}第二步:添加button按钮:<input id="file" type="file"/><br /><input type="button" value="上传文件" class="btn"/>第三步:点击按钮时,调用input file的点击函数:<
2022-04-22 16:40:37
5283
1
原创 利用JavaScript上传读取文件(附源代码)
本文仅以文本(text)文件为例。最近需要使用到js读取到文本内容,并检查是否成功取到文件内容。查阅资料了解到,可以利用FileReader对文件进行读取:const reader = new FileReader()reader.readAsText(input.files[0],'utf8') // input.files[0]为第一个文件reader.onload = ()=>{ document.body.innerHTML += reader.result // reader.
2022-04-22 16:27:43
3276
原创 PHP基础语法篇
php这里默认有HTML,JavaScript基础咯。一、基础1、客户端和服务端客户端(用户端):享受服务的【前端,客户端运行代码】服务端(远程):提供服务的【后端,服务端运行代码】2、什么是phpPHP(全称:以前叫Personal Home Page,现在改名为Hypertext Preprocessor,即"PHP:超文本预处理器"),是一种通用开源脚本语言。PHP是服务器端的语言,对于web开发(html),非常友好,能嵌入在html文档里面;可以跟html,css和JavaScr
2022-04-14 10:17:36
3207
2
原创 JavaScript将数字格式化为千分位字符串
问题描述就是,将数字格式化为千分位字符串,同时保留两位小数。比如:123456->123,456.00123456.7890-> 123,456.78这类问题可以使用三种方法,不只是针对以上问题。先从简单的入手,如果不考虑保留小数位数。【方法一】可以使用num.toLocaleString('en-US')方法,不过该方法的弊端就是只能用于数字。var num = 12345.6789;var str = num.toLocaleString('en-US');consol
2021-11-06 16:14:37
2906
4
原创 ES6是什么?var、const、let有什么区别?解构?箭头函数?
ES6简介及部分新增语法一、ES6简介1、什么是ES6?ES的全称是ECMAScript,它是由ECMA国际标准组织制定的一项脚本语言的标准化规范。年份版本2015年6月ES20152016年6月ES20162017年6月ES20172018年6月ES2018…………ES6实际上是一个泛指,泛指ES2015及后续的版本。2、为什么使用ES6?每一次标准的诞生都意味着语言的完善,功能的加强。js语言本身也有一些令人不满意的地方。变量提
2021-10-27 20:32:55
200
原创 一文带你入门正则表达式
正则表达式入门一、正则表达式概述1、什么是正则表达式正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在js中,正则表达式也是对象。正则表达式常用于检索、替换那些符合某个模式(或规则)的文本。比如:表单验证(匹配)过滤敏感词(替换)从字符串中获取特定部分(提取)2、特点灵活性、逻辑性和功能性非常强可以迅速地用极简单的方式达到字符串的复杂控制但对于初学者来说,比较晦涩二、正则表达式在js中的使用1、创建正则表达式(1)利用RegExp对象创
2021-10-26 09:03:55
153
原创 一文带你搞清楚JavaScript中函数this指向、高阶函数、闭包、递归
一、函数的定义和调用1、函数的定义(1)函数声明方式function关键字(命名函数)function fun () { };(2)函数表达式(匿名函数)var fun = function() { };(3)new Function()new Function('arg1', 'arg2', '函数体');// 使用 new Function() 定义 var f = new Function('console.log(123)'); f(); var
2021-10-24 10:04:47
342
原创 构造函数和原型
一、构造函数1、概述在典型的OOP语言中(如java/c++),都存在类的概念。类就是对象的模板,对象就是类的实例。但在ES6之前看,js并没有引入类的概念。ES6,全称ECMAScript6.0,2015.06发布。在ES6之前,对象不是基于类创建的,而是用一种称为构造函数的特殊函数来定义对象和它们的特征。创建对象可以通过以下三种方式:对象字面量new Object()自定义构造函数2、构造函数(1)概述构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与
2021-10-23 09:47:40
342
原创 ES6面向对象
ES6面向对象一、面向对象1、面向过程编程POP面向过程(Process-oriented programming)就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个地依次调用就可以了。2、面向对象OOP面向对象(Object Oriented Programming)是把实务分解成一个个对象,然后由对象之间分工合作。先找出对象,并写出这些对象的功能。面向对象是以对象功能来划分问题,而不是步骤。3、面向对象的优点在面向对象程序开发思想中,每个对象都是功能
2021-10-21 16:17:35
324
原创 Promise入门
Promise入门(一)Promise的理解和简单使用一、Promise是什么?1、理解(1)抽象表达Promise是一门新的技术(ES6规范);是js中异步编程的新解决方案(旧方案中是单纯使用回调函数)异步编程:1.fs 文件操作require(‘fs’).readFile(’./index.html’, (err, data)=>{})2.数据库操作3.AJAX$.get(’/server’, (data)=>{})4.定时器setTimeout(()=>{
2021-10-12 15:36:40
430
原创 jQuery中的Ajax
jQuery×Ajaxjquery提供多个与ajax有关的方法,通过jquery ajax方法,能够使用HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或JSON,同时能够把接收的数据更新到DOM对象。代替XMLHttpRequest,但其实jquery还是封装的异步对象。(1)$.ajax()$.ajax()是jquery中ajax请求的核心方法,所有的其他方法都是在内部使用此方法。语法: $.ajax({key: value, key: value, ...})
2021-10-11 17:15:19
4525
原创 jQuery常用API及jQuery事件
jQuery基本概述请戳:jQuery概述及基本使用一、jQuery常用API1、jQuery选择器$('选择器')(1)基本选择器:ID选择器:$("#id");全选:*类:.标签:div并集:div, span交集:li.current(2)层级选择器:子代:$("ul>li");后代:$("ul li");(3)隐式迭代(重要)遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代,简单理解就是,给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们自
2021-10-11 17:13:16
435
原创 jQuery概述及基本使用
一、jQuery概述1、JavaScript库(1)什么是js库?即library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,也就是说在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。简单理解,JavaScript库就是一个js文件,里面对原生js代码进行了封装,这样就可以快速高效使用这些封装好的功能了。比如jQuery就是为了快速方便地操作DOM,里面基本都是函数(方法)的一个JavaScript库。(2)常见
2021-10-11 17:01:31
261
原创 for...in和for...of的区别
for…in 和 for…of的区别简单来说,for...in遍历的是键key,而for...of遍历的是值value。举个栗子就是说:let arr = ["a","b"];for (a in arr) { console.log(a);//1,2} for (a of arr) { console.log(a);//a,b}还有就是,for...of是ES6新增的遍历方法,它可以正确响应break、continue和return语句。不仅支持数组,还支持大多数类数组对
2021-09-30 14:57:32
155
转载 什么是同源策略?以及如何进行跨域访问?
同源策略以及跨域(1)同源策略?作用?同源策略是一种约定,在浏览器tab页执行一个脚本的时候,会检查这个脚本属于哪个页面,即检查是否同源。同源是指协议、域名、端口号都相同。如果同源才会执行这个脚本;否则在请求数据时,浏览器会在控制台报一个异常,提示拒绝访问。同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但无法被浏览器接收。(2)跨域由于同源策略,不是同源的脚本不能执行其他源下的对象。
2021-09-30 14:48:22
636
原创 移动端触屏事件 + classList属性
移动端网页特效1、触屏事件移动端浏览器的兼容性较好,不需要考虑以前的js兼容性问题。但移动端有自己的独特之处,比如触屏事件touch(也称为触摸事件),Android和ios都有。touch对象代表一个触摸点。常见触屏事件如下:触屏事件说明touchstart手指触摸到一个DOM元素时触发touchmove手指在一个DOM元素上滑动时触发touchend手指从一个DOM元素上移开时触发2、触摸事件对象TouchEvent触摸事件用于描述一个或多个触点,
2021-09-14 15:44:28
197
原创 JavaScript Offset, Client, Scroll系列以及动画函数
一、元素偏移量offset系列offset相关属性可以动态得到该元素的位置(偏移)、大小等。获得元素距离带有定位的父元素的位置获得元素自身大小(宽度和高度)返回的数值都不带单位offset系列常用属性:offset系列属性作用e.offsetParent返回作为该元素带有定位的父级元素,如果父级没有定位则返回bodye.offsetTop返回元素相对带有定位父元素上方的偏移e.offsetLeft返回元素相对带有定位父元素左边框的偏移e.offse
2021-09-11 10:20:14
230
1
原创 js BOM
js基础:js基础入门语法jsDOM:js DOM五、BOM浏览器对象模型1、BOM概述BOM(Browser Object Model) 即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。由一系列相关对象构成,且每个对象都提供了很多方法和属性。BOM缺乏标准,js语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape(网景公司)浏览器标准的一部分。所以有些兼容性较差。(1)DOM vs BOMDOM文档对象模型DO
2021-09-10 09:41:21
127
原创 js DOM
JS基础:js入门基础戳这里三、Web APIs 简介1、Web APIs 和 JS基础 的关联性JS的组成js分为ECMAScript(JavaScript语法) DOM(页面文档对象模型) BOM(浏览器对象模型)其中,ECMAScript 是js基础DOM 和 BOM属于Web APIsJS基础阶段学习的是ECMAScript标准规定的基本语法,但还无法做出网页交互效果Web APIs阶段是W3C组织的标准,是JS所独有的部分;主要学习页面交互功能2、API和We
2021-09-09 10:14:38
298
原创 JavaScript基础入门语法
JavaScript基础入门语法文章目录JavaScript基础入门语法一、初识JavaScript1、编程语言和标记语言的区别2、JavaScript是什么3、JavaScript的作用4、浏览器执行js简介5、js的组成6、js初体验(1)书写位置(2)注释(3)输入输出语句(4)变量二、JavaScript基础1、数据类型(1)为什么需要数据类型(2)js数据类型的一些特点(3)简单数据类型1.Number2.String3.Undefined4.Null5.Boolean(4)typeof 检测变
2021-09-07 09:29:25
505
原创 移动WEB开发
移动WEB开发一、移动端基础1、浏览器现状(1)PC端常见浏览器360、谷歌、火狐、QQ、百度、搜狗、IE(2)移动端常见浏览器UC、QQ、欧朋Opera、百度手机、360安全、谷歌、搜狗、猎豹等国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。总结:兼容移动端主流浏览器,处理Webkit内核浏览器即可。2、手机屏幕现状移动端设备屏幕尺寸非常多,碎片化严重Android设备有多种分
2021-09-04 16:59:41
349
1
原创 CSS提高和CSS3新增
(二)CSS高级技巧(序号接上一篇)CSS基础十八、精灵图1、为什么需要精灵图一个网页中往往会应用很多小背景图作为装饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称为CSS Sprites、CSS雪碧)核心原理:将网页中的一些小背景图像整合到一张大图里,这样服务器只需要一次请求就可以了。精灵技术的目的:为了有效减少服务器接收和发送请求
2021-09-04 16:44:46
528
原创 元素的隐藏
元素的隐藏display: none; 和 visibility: hidden; 和 opacity: 0;的区别:属性是否出现在渲染树上是否造成回流和重绘是否占有页面空间可否点击子元素可否显示transition是否有效display: none;否回流和重绘否否否否visibility: hidden;是重绘是否可以通过设置visibility: visible;显示否opacity: 0;是重绘是是否是总结来说,
2021-09-03 10:25:39
92
原创 CSS基础
一、CSS简介CSS主要使用场景就是美化网页、布局页面的。HTML只关注内容的语义,但都比较丑。虽然HTML可以做一些简单的样式,但非常冗余困难。CSS是层叠样式表(Cascading Style Sheets)的简称,有时也会称之为CSS样式表或者级联样式表,同样也是一种标记语言。主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图形的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。结构(HTML)与样式(CSS)相分离。二、CSS语法规范 <style>
2021-09-03 10:10:01
905
原创 HTML5新增标签及属性
(二)HTML5新增HTML5的新增特性主要是针对以前的不足,增加了一些新的标签、新的表单属性和新的input类型等。但这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。1、HTML5新增的语义化标签以前布局,我们基本用div来做,但div对于搜索引擎来说,是没有语义的。常用新标签:标签语义<header>头部标签<nav>导航标签<article>内容标签
2021-09-03 09:25:58
570
原创 HTML基础总结
HTML基础总结学习前端有一段时间了,最近要对学过的东西进行总结和复习。就记录在这里,也希望能够帮助到需要的小伙伴们。本文主要是HTML的基础,包括HTML基础和HTML的基本标签。(I)HTML基础1、网页1.1 网站是网页的集合,网页是HTML格式的文件,需要通过浏览器来阅读。网页是构成网站的基本元素,通常由图片、链接、文字、声音、视频等元素组成。1.2 HTML是超文本标记语言Hyper Text Markup Language,是用来描述网页的语言,不是编程语言,而是一种标记语言。标记语
2021-09-02 15:30:53
106
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人