自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 React.js实现一个todo-list案例

一、创建项目首先通过create-react-app todo-list命令创建一个名为todo-list的项目,前提是react基本环境已安装好。结构目录如下所示:二、新建父组件如上图所示,在src下新建views文件夹,在该文件夹下添加todo-list.js文件。代码如下所示:import React, { Component, Fragment } from 'react';import '../css/style.css';import TodoItem from '..

2020-06-17 10:54:08 57

原创 leetcode算法题8:字符串转换整数 (atoi)

题目:请你来实现一个atoi函数,使其能将字符串转换成整数。首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止。接下来的转化规则如下:如果第一个非空字符为正或者负号时,则将该符号与之后面尽可能多的连续数字字符组合起来,形成一个有符号整数。假如第一个非空字符是数字,则直接将其与之后连续的数字字符组合起来,形成一个整数。该字符串在有效的整数部分之后也可能会存在多余的字符,那么这些字符可以被忽略,它们对函数不应该造成影响。注意:假如该字符串中的第一个非空格字符不是..

2020-05-14 17:58:59 50

原创 leetcode算法题7:整数反转

题目:给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转。示例1:输入: 123输出: 321示例 2:输入: -123输出: -321示例 3:输入: 120输出: 21注意:假设我们的环境只能存储得下 32 位的有符号整数,则其数值范围为[−231,231− 1]。请根据这个假设,如果反转后整数溢出那么就返回 0。解析:方法一:转字符串反转var reverse = function (x) { x=x.toStr...

2020-05-14 16:25:39 53

原创 微信小程序wxParse插件解析html

1、在app.json中添加插件 "plugins": { "wxparse": { "version": "1.0.10", "provider": "wx5d60c080635009b1" } }2、在需要使用的页面.json文件中添加组件{ "navigationBarTitleText":"商品详情", "...

2020-04-07 17:58:17 157

原创 跨域请求携带cookie的实现

跨域时,前端向服务器发起请求时,需要将XMLHttpRequest 对象的withCredentials 属性设置为 true,如下所示: $.ajax({ type: "POST", url: url, data:{}, dataType: '...

2020-04-03 16:30:28 136

原创 使用js实现将有父子关系的数据转换成树形结构数据

1

2020-03-27 16:16:09 268

原创 vue中的全屏事件,按esc退出全屏

1、vue页面中根据是否全屏判断当前显示icon图标,isFull为true时表示全屏,默认值为false,并绑定click事件 <div class="screen-icon-box"> <i :class="isFull?'el-icon-crop':'el-icon-full-screen'" @click="fullScreenEven...

2020-03-23 21:54:56 754

原创 Vue通过递归实现多级菜单展示

1、模拟后台返回的菜单JSON数据如下data.json文件{ "data": { "router": [ { "path": "", "name": "Home", "component": "Layout", "r...

2020-03-17 11:27:32 395

原创 git本地仓代码推送到远程仓报错:refusing to merge unrelated histories

当从远程仓库拉取代码到本地时,报错拒绝合并不相关的历史,如下图所示:发生上图原因是由于本地仓库和远程仓库实际上是独立的两个仓库,可以通过使用命令:$git pull origin master --allow-unrelated-histories合并两个独立启动仓库的历史。上面是将远程仓库的文件拉取到本地仓库了。接着将本地仓库的提交推送到远程github仓库上:$...

2020-03-11 22:32:02 34

原创 vue项目打包后字体文件路径出错的解决办法

打包后,css里加载的font文件路径变成了:rootpath/static/css/static/fonts,而期望的应该是rootpath/static/fonts。修改方式:在build/utils的ExtractTextPlugin.extract里加上 publicPath: '../../':// generate loader string to be used with ...

2019-06-27 09:21:32 1336

原创 vue-cli webpack打包开启Gzip报错

在根目录config/index.js中build内找到productionGzip: false,把false改为true。与productionSourceMap 刚好相反。  然后npm run build。此时会提示找不到"Cannot find module 'compression-webpack-plugin'"。   npm install --save-de...

2019-05-26 21:56:49 149

原创 vue视图刷新的几种方法

更新数组时,如果直接通过下标修改数组属性的话,vue页面不会更新。通过以下几个方法更新数组push()、pop()、shift()、unshift()、splice()、sort()时,vue才能检测到数组更新。如果想直接通过下标修改数组的话,可使用vm-set 方法来通知vue更新了这个数组。语法为:vm.$set( target, key, value );数组修改:Vue.se...

2019-05-19 20:09:49 2338

原创 微信小程序开发步骤(二)页面搭建

在上一章中讲述了如何创建项目,这一章主要讲述小程序中代码目录架构,以及创建新页面。一、目录架构1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。//app.jsApp({ onLaunch: function () { // 展示本地存储能力 v...

2019-05-07 22:00:58 175

原创 时间戳转为年月日时分秒格式

1、小于10前面补0function add0(m){ return m<10?'0'+m:m }2、转为年-月-日 时:分:秒格式function timeFormat(ts){ var time = new Date(ts); var y = time.getFullYear(); var m = time.getMonth()+1; ...

2019-04-29 23:22:34 1396

原创 百度地图的常用事件和方法

1、滚轮缩放 map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用 map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用2、拖拽 map.enableDragging(); //开启拖拽 map.enableInertialDragging(); //开启惯性拖拽3、事...

2019-04-29 22:56:21 2041

原创 vue项目报错Uncaught SyntaxError: Unexpected token <

vue项目在引入第三方依赖的 JS 文件时,报如下错误:Uncaught SyntaxError: Unexpected token &lt;检测后发现原来我的 JS 文件是放在 /src/utils 文件夹下的,但引入 /src 和 /static 的文件是有区别的。解决办法是将第三方依赖的 JS 文件放到 /static/utils 目录下。因为src目录下的资源只能impo...

2019-04-23 09:26:23 929

原创 微信小程序开发步骤(一)项目创建

一、申请账号进入小程序注册页注册自己的小程序帐号,如下图所示:登录小程序后台,可在菜单 “设置”-“开发设置” 看到小程序的AppID了 。二、安装开发工具前往开发者工具下载页面,根据自己的操作系统下载对应的安装包进行安装。下载完成之后,打开小程序开发者工具,用微信扫码登录开发者工具。三、建立项目新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请...

2019-04-21 23:01:29 335

原创 已知某一点坐标、线段长度和旋转角度,求另一点坐标

/** 已知某一点坐标,旋转角度,长度,求另一点坐标 */export const calculateCoordinatePoint = (originPoint, degree, len) =&gt; { let rotate = (degree - 90 + 360) % 360; //这里是因为一开始以y轴下方为0度的 let point = { x:...

2019-03-31 21:39:06 4151 1

原创 计算某一点绕另一点旋转一定角度后的坐标

/** * 计算某一点旋转后的坐标点 * @param point * @param degree */export const calculateRotate = (point, degree) =&gt; { let x = point.x * Math.cos(degree * Math.PI / 180) + point.y * Math.sin(degree * Ma...

2019-03-31 21:22:31 2570

原创 高阶函数之sort

1、排序算法是在程序中经常用到的算法。无论使用冒泡排序还是快速排序,排序的核心是比较两个元素的大小。通常规定,对于两个元素x和y,如果认为x &lt; y,则返回-1,如果认为x == y,则返回0,如果认为x &gt; y,则返回1(升序)。这样,排序算法就不用关心具体的比较过程,而是根据比较结果直接排序。如下所示:var arr = [10, 20, 4, 6];arr.sort(fu...

2019-03-23 21:20:59 123

原创 Vue和Element-UI做一个简单的登录页面

如下所示,是vue+ElementUI写的一个登录页面:Login.vue部分&amp;lt;template&amp;gt; &amp;lt;el-form :model=&quot;loginForm&quot; :rules=&quot;loginRules&quot; ref=&quot;loginForm&quot; label-position=&quot;left&quot; label-width=&quot;0px&quot; class=&quot;d

2019-03-01 11:09:19 4997 4

原创 Element组件之Form表单

这里主要介绍Element组件中的Form表单,它是由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。典型表单:在 Form 组件中,每一个表单域由一个 Form-Item 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。行内表单:设置inline属...

2019-03-01 11:08:13 7855

原创 vue中的 ref 和 $refs

1.ref 加在普通的元素上,用this.$refs.refName 获取到的是dom元素2.ref 加在子组件上,用this.$refs.refName 获取到的是组件实例,可以使用组件的所有方法。 &amp;lt;el-form :model=&quot;loginForm&quot; :rules=&quot;loginRules&quot; ref=&quot;loginForm&quot; label-position=&quot;left&quot; label...

2019-03-01 09:48:16 199

翻译 vue中的 render: h => h(App) 具体含义

render: h =&amp;gt; h(App)是下面内容的缩写:render: function (createElement) { return createElement(App);}进一步缩写为(ES6 语法):​​​​​​​render (createElement) { return createElement(App); }...

2019-03-01 09:33:47 463

原创 let 和 const 命令与var的区别

1、基本用法ES6 新增了let和const命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1而const声明一个只读的常量。一旦声明,常量的值就不能改变。对于const来说,只声明不赋值,...

2019-02-28 15:50:59 86

原创 vue项目中配置title图标和文字

在项目的index.html 中引入图片:&amp;lt;head&amp;gt; &amp;lt;title&amp;gt;标题&amp;lt;/title&amp;gt; &amp;lt;link rel=&quot;icon&quot; href=&quot;./favicon.ico&quot; type=&quot;image/x-icon&quot;&amp;gt;&amp;lt;/head&amp;gt;其中,favicon.ico图片在项目根目录下。接着就是修改 buil

2019-02-28 11:25:06 1145

原创 VUE+ElementUI开发后台功能,隐藏左侧菜单栏再展开有白框问题解决方法

在methods里的collapse 函数里增加监测左边导航栏offsetWidth值为0则修改,如下所示://折叠导航栏 collapse:function(){ this.collapsed=!this.collapsed; var menuWidth = document.getElementById('menuClass'); if(menuWidth.o...

2019-02-28 09:32:04 8234

原创 vue中引入font-awesome报错

npm install --save font-awesome   之后在main.js中这样引入import 'font-awesome/css/font-awesome.css'报错如下图 This dependency was not found:* font-awesome in ./src/main.jsTo install it, you can run...

2019-02-27 14:45:49 1123

转载 2018年最值得关注的30个Vue开源项目

NO.1Element:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 [Github star:22004]。NO.2iView:一套高质量的UI组件库 [Github star:12175]。NO.3Best-resume-ever:用Vue和LESS简单、快速建立许多漂亮的简历,并创建你最好的简历。[Github star:8839]。NO....

2019-02-26 09:07:51 175

原创 npm install报错之解决方法

npm install时报错如下图所示:D:\Vue\demo&amp;gt;npm installnpm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist &amp;gt;3.0 config used in other tools.npm WARN deprecated bfj...

2019-02-24 20:33:32 1442

原创 浏览器工作原理之树的构建

一、DOM树的构建       DOM 输出的树,也就是解析树,是由DOM元素及属性节点组成的。DOM是文档对象模型的缩写,它是html文档的对象表示,作为html元素的外部接口供js等调用。树的根是“document”对象。  DOM和标签基本是一一对应的关系,例如,如下的标签:&amp;lt;html&amp;gt;&amp;lt;body&amp;gt;&amp;lt;p&amp;gt;Hello DOM&amp;lt;/p...

2019-01-27 22:30:17 61

原创 浏览器工作原理

一、浏览器的主要功能浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包括PDF、image及其他格式。用户用URI(Uniform Resource Identifier统一资源标识符)来指定所请求资源的位置。  HTML和CSS规范中规定了浏览器解释html文档的方式,由W3C组织对这些规范进行维护,W3C是...

2019-01-27 22:16:13 54

原创 http和https介绍

一、基本概念http: 超文本传输协议,是互联网上应用最为广泛的一种网络协议, 是一个客户端和服务器端请求和应答的标准(TCP), 用于从WWW服务器传输超文本到本地浏览器的传输协议, 它可以使浏览器更加高效,使网络传输减少。https: 是以安全为目标的HTTP通道,简单讲是HTTP的安全版, 即HTTP下加入SSL层,HTTPS的安全基础是SSL, 因此加密的详细内容就需要SSL。 h...

2019-01-13 21:48:57 71

原创 CSS之水平垂直居中布局的实现方法

前端HTML部分代码如下:&amp;lt;div class=&quot;parent&quot;&amp;gt; &amp;lt;div class=&quot;child&quot;&amp;gt;Test&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;里面的容器和外面的容器宽高是不确定的,实现这三种布局的方法如下:一、水平居中布局1、inline-block+text-align这种方法下IE6、IE7不支持inline-block...

2019-01-13 21:24:55 75

原创 apply, call和bind的区别

三者都可以把一个函数应用到其他对象上,注意不是自身对象。apply和call是直接执行函数调用,bind是绑定,执行需要再次调用。 apply和call的区别是apply接受数组作为参数,而call是接受逗号分隔的无限多个参数列表。function Person() { }Person.prototype.sayName() { alert(this.name); } ...

2018-12-31 19:33:54 50

原创 Vue的生命周期

1、什么是Vue的生命周期?Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。2、简介beforeCreate(创建前):在数据观测和初始化事件还未开始 。created(创建后):完成数据观测,属性和方法的运算, 初始化事件,$el属性还没有显示出来。beforeMou...

2018-12-31 19:25:12 59

原创 cookies,sessionStorage 和 localStorage 的区别

cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。 cookie数据始终在同源的http请求中携带(即使不需要),且会在浏览器和服务器间来回传递。sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。 存储大小: cookie数据大小不能超过4k。 sessionStorage和localStora...

2018-12-31 19:12:29 57

原创 clone

题目:实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。方法一:Object.prototype.clone = function() {var o = this.constructor === Array ? [] : {};for (var e in this) {o[...

2018-12-31 19:04:31 64

转载 前端资源汇集

1、综合类:前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.com/JacksonTian/fks Web前端开发大系概览 https://github.com/unruledboy/WebFrontEndStack Web前端开发大系概览-中文版 h...

2018-12-05 08:33:15 86

原创 leetcode算法之数组篇(题88): 合并两个有序数组

题目:给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组。说明:初始化 nums1 和 nums2 的元素数量分别为 m 和 n。 你可以假设 nums1 有足够的空间(空间大小大于或等于 m + n)来保存 nums2 中的元素。示例:输入: nums1 = [1,2,3,0,0,0], m = 3     ...

2018-11-24 16:24:13 72

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