自定义博客皮肤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将文本渲染为html的方式

如下述代码,使用属性:dangerouslySetInnerHTML,将内容渲染为html。 import React, { Component } from 'react' class Header extends Component { constructor(p...

2020-06-02 11:38:01 9 0

原创 Chrome浏览器安装vue-devtools工具的方法

1)github上下载vue-devtools库,使用git下载 git clone https://github.com/vuejs/vue-devtools 2)项目根目录下安装项目依赖 cd vue-devtools yarn run build 3)打包之后的扩展程序文件...

2020-05-29 14:35:40 35 0

原创 react中使用路由react-router进行页面跳转的方式,以及参数传递方式

方式一,使用withRouter,进行跳转 import React, { Component } from 'react' import { withRouter } from 'react-router-dom' import layoutCss f...

2020-05-28 14:47:58 62 0

原创 如何使用IIS管理器上部署react项目,支持history和hash模式路由部署

在windows上使用IIS管理器可以很方便部署我们的项目文件,前端往往是部署一些静态资源文件。当我们需要部署react项目打包之后的build文件夹中的代码时,我们该如何去操作呢? 前期准备 本文假设你已具备react的基本使用能力,以及你已经在你的设备上配置好了IIS管理器,并已经能独立创...

2020-05-27 10:43:44 38 0

原创 一文彻底弄明白module.exports和exports的区别

在我们使用nodejs引入模块时,我们往往在模块文件中可能会纠结module.exports和exports他们究竟是什么区别?为了彻底明白其区别,我们来看一个例子。在模块中,只输入下述三行代码: // module.js console.log('module', mod...

2020-05-25 10:19:55 59 0

原创 使用create-react-app构建的react项目在IE浏览器打开白屏的问题解决

我们在使用create-react-app创建react项目之后,将项目在IE11/10/9浏览器打开时,发现页面白屏,打开控制台发现如下报错: 出现此问题的原因是:create-react-app默认只支持现代浏览器,具体可参考https://create-react-app.dev/do...

2020-04-13 09:27:40 243 0

原创 react中利用构造函数与利用class关键字创建组件的区别,以及使用的选择

在react中,我们通常在创建组件时有以下两种形式: //class关键字创建组件 importReactfrom'react'; exportdefaultclassAppDemoextendsReact.Component{ render(){ return( <...

2020-02-14 19:07:51 79 0

原创 npm 运行时报错“因为在此系统上禁止运行脚本”解决办法

在控制台运行npm指令时遇到如下报错信息:“因为在此系统上禁止运行脚本” npm : 无法加载文件 C:\Users\Pathliu\software\nodejs\npm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/...

2020-02-13 14:31:56 1481 0

原创 使用vuecli3 构建的项目,修改项目webpack配置

今年vuecli已经升级到了vuecli3+,和以往vuecli构建的项目不同,在新版本的vuecli构建的项目中,默认是无配置文件的。如果我们想修改server的端口号,打包输出文件的资源,我们该怎么处理呢? 按照官方文档,https://cli.vuejs.org/zh/config/#%E...

2019-12-02 11:13:42 453 0

原创 vue3.0项目中eslint检查时,Unexpected console statement (no-console)报错解决

在利用vue-cli3+构建的项目中引入eslint进行语法检查时,使用console.log('xxx')时,控制台抛出了Unexpected console statement (no-console)异常,解决办法是: 在项目的package.json文件中,eslin...

2019-12-02 11:03:21 239 0

原创 理解js中apply,call,bind的区别

首先我们需要明白的是,apply,call,bind: 1)它们三者都可以修改函数调用时this的指向 2)第一个参数都是修改后this指向的对象 3)都可以在后续参数中进行传参 var userFunc = { name: '张三', age: 24, say...

2019-08-31 14:55:29 75 0

原创 Vue项目build打包之后,背景图路径错误问题解决方式

在vue项目中,npm run build之后,得到的项目输出文件部署到服务器之后,图片无法找到,发现是图片路径不对。处理和修改方式如下: index.js中修改 // 在index.js中 assetsPublicPath: './', bulid文件下,utils中...

2019-04-25 11:21:17 240 0

原创 小程序登录机制的剖析

在分析小程序登录机制之前,需要明确几个问题: 1. 微信小程序是什么 2. 微信公众平台、微信开放平台以及商户平台的区别 3. 微信openid与unionid的区别 4. 小程序unionid的机制 1. 小程序是什么 官方给出的解释是:小程序是一种新的开放能力,开发者可以快速地开发一个...

2019-02-24 11:58:30 369 0

原创 mac如何安装tomcat并部署vue项目

1. 安装tomcat 官网下载tomcat,download目录下,下载对应的tomcat资源文件,下载zip或者tar.gz文件 在资源库文件夹下,新建文件夹 Tomcat并将下载的文件拷贝至该文件夹下 修改项目文件的读写权限,在tomcat文件夹下打开终端,并执行 su...

2019-02-19 11:29:35 242 0

原创 git提交代码到线上库的详细步骤

在我们使用github作为我们代码管理仓库时,我们需要利用git提交我们的代码到线上仓库,具体提交的方式方法如下:(备注:提交的方式方法不尽相同,但是博主建议按如下方式提交) 1. git stash 目的是,缓存本地的修改,避免代码同步时候代码丢失 2. git pull  (或者 git ...

2019-02-06 21:19:07 770 3

原创 mac上如何将python2.7修改为python3

mac会默认安装python,默认python的版本为python2.7。但通常我们在使用python的时候会应用python3,如何将我们默认的python环境变量修改为python3? 1)打开终端 输入  python -V  可查看mac当前python的版本  // 显示为 pytho...

2018-12-12 10:22:31 1933 0

原创 微信小程序开发如何选择获取unionid方案

在微信小程序开发过程中,我们通常有获取用户unionid的需求。首先,何为unionid? 对于这个问题,举个例子,在微信授权的各个登陆应用中,能区分用户唯一的标识就是微信授权用户的unionid。这一点有点类似于用户的微信号,是唯一的。 对于如何获取用户的unionid 官方文档给了四种方式(...

2018-12-03 17:37:15 1864 0

原创 微信小程序中如何有效的修改app.js中全局变量的值,并能在页面中进行动态响应

提供一种有效的方式,在app.js中定义全局变量,以及获取和修改全局变量的方法如下: let userInfo = { username: test, email: '' } App({ // 获取数据 getUserInfo () { return...

2018-11-22 09:34:36 13968 0

原创 微信小程序点击事件传递参数的方法

小程序在组件上绑定事件后,传递参数的方式不同于前端开发其他场景中直接加参数的方式,小程序在参数的传递时,采用事件对象的自定义属性的方式,具体实现如下: wxml: &lt;view bindtap="passQuery" data-index="1&qu...

2018-11-13 13:49:50 33069 1

原创 手机端h5页面利用rem进行适配的有效方案

关于H5页面的适配方案,有很多很多,各种方法有各种方法的优势。在博主做项目的实际开发过程中,常用的方案是利用rem进行适配。具体的适配原理如下: 需要明确的一点,各种浏览器对字体默认的大小为16px. 通常UI设计师给到前端开发的设计稿是以iphone6 手机大小设计的,前端开发时也是参照ip...

2018-10-11 17:28:34 1449 0

原创 vue项目中富文本编辑器vue-quill-editor的使用

前端开发过程中,会遇到在页面上加入富文本编辑器,在vue项目中开发遇到这一需求的时候,我们可以使用富文本编辑器vue-quill-editor,话不多说,先上一张效果图: 1)安装vue-quill-editor 依赖 npm installvue-quill-editor --sa...

2018-09-30 15:07:24 2427 8

原创 vue中对数组值变化的监听与重新响应渲染的方法

在我们项目开发过程中,实例中的数据类型可以是对象、数组等。在对象中,某个属性值发生更改时,我们可以通过对象的深度监听,以达到重新渲染页面的需求。或者查阅博主的文章 https://blog.csdn.net/weixin_37861326/article/details/81034231; 例如...

2018-09-29 10:32:10 13458 0

原创 图示vscode修改缩进为2个空格

此外可以对 settings.json文件做出修改亦可。图示如下:

2018-09-26 12:37:28 2629 0

原创 vue状态管理vuex使用之项目中如何合理引入vuex

在前端开发过程中,状态的管理是一件很令人头疼的事情。尤其是在项目中,涉及同一状态的组件越多,在组件状态管理上,通过父子组件之间通信来更新状态将变的复杂。Vue项目开发过程中,借助vuex进行状态管理将极大的减轻我们在开发过程中对于组件状态的维护。 vuex: vuex 是一个专为 Vue.js...

2018-09-26 11:29:35 777 1

原创 margin与padding值设置为百分数时,其值的计算参照最近父级元素width

在前端开发过程中,设置样式参数margin 与 padding 值为百分数时,其具体值的计算方法需参照最近父级的width计算。 1)exp1: margin-top 为百分数 其中标签的嵌套关系为: &lt;div class="boxparent"&am...

2018-09-21 14:55:16 604 0

原创 Vue项目中如何使用Echarts 及Echarts中echarts-liquidfill水晶球插件

在博主的前述的一篇文章当中,有写到如何在vue项目引入Echarts插件,Echarts插件的应用方法可参考博主之前的文章。在本文中,博主将结合实际开发过程中的操作,介绍一下如何引入echarts-liquidfill插件,并使用它。echarts-liquidfill在github上的链接是ht...

2018-09-12 14:17:27 7628 0

原创 如何修改input输入框placeholder文字颜色

开发过程中在使用input、textarea标签placeholder作为提示性文字时,往往文字颜色达不到我们的预期效果,因此需要对placeholder属性提示文字默认颜色进行修改,修改的过程也很简单添加样式即可。 input::-webkit-input-placeholder { ...

2018-09-06 11:15:14 2778 0

原创 vue项目中路由不匹配或者路径错误,添加默认404页面的方法

在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白。然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面。处理方法如下,在router中添加方法: router.beforeEach((to, from, next) =&g...

2018-09-04 14:50:27 11262 0

原创 react引入router提示,The prop `history` is marked as required in `Router`, but its value is `undefined`

关于react项目中,按照下述方式,在引入路由Router、Route、Link时: import { Router, Route, Link } from 'react-router' 运行出现下述错误 The prop `history` is marked as ...

2018-09-02 19:06:49 4927 0

原创 关于react中使用browser.js转译JSX的操作方法,并附react.js,react-dom.js,browser.js文件下载链接

在初学react这个框架时,可采用在文件中引入react.js,react-dom.js,browser.js库来编写代码。JSX在React中是一种非常常见的写法,具体JSX的解释很难说的清楚,但通常可以理解为JavaScriptXML或者是JavaScript Syntax eXtension...

2018-09-01 16:00:10 1630 1

原创 react.js、react-dom.js、browser.js文件包下载(github链接)

React.js与React-dom.js版本号均为V0.14.7,链接:github:https://github.com/cirsyou/plugins/tree/master/react-packages 用法示例: <!DOCTYPE html> <html l...

2018-08-30 17:39:23 6842 0

原创 js的http请求中请求头和响应头包含哪些内容

1)请求(客户端-&gt;服务端[request])      GET(请求的方式) /newcoder/hello.html(请求的目标资源) HTTP/1.1(请求采用的协议和版本号)      Accept: */*(客户端能接收的资源类型)      Accept-Language...

2018-08-30 09:29:16 4441 0

原创 js算法题库(数组)

1)题目描述找出元素 item 在给定数组 arr 中的位置 输出描述:如果数组中存在 item,则返回元素在数组中的位置,否则返回 -1 示例 输入  [ 1, 2, 3, 4 ], 3 输出   2 function indexOf(arr, item) { return arr...

2018-08-28 17:32:21 1112 0

原创 利用js实现杨辉三角队列

所谓‘杨辉三角’,如下图: 其分布直观上很清晰明了,但在用编程语言实现这一图案时,方法各有异同,在s实现‘杨辉三角’代码如下: // param: max 行数 function triangles(max) { var arr = [1]; va...

2018-08-23 17:39:01 248 0

原创 vue项目中,js根据文件名后缀,判断文件图片、视频、文档、pdf等类型的方法

vue项目中,在获得文件名信息,需要根据文件名的后缀来区分文件类型的方法如下:其中,文件后缀可自由拓展。 // 根据文件名后缀区分 文件类型 /* * @param: fileName - 文件名称 * @param: 数据返回 1) 无后缀匹配 - f...

2018-08-15 12:21:47 10118 0

原创 关于js事件对象(DOM中的事件对象、IE中的事件对象、跨浏览器的事件对象)的详解

在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息。所有浏览器都支持event 对象...

2018-08-12 12:14:35 703 0

原创 关于js事件5种事件处理程序的详解

  事件就是用户或浏览器自身执行的某种动作。诸如click、load 和mouseover,都是事件的名字。而响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以"on"开头,因此click 事件的事件处理程序就是onclick,load 事件的事件处理...

2018-08-10 16:39:14 455 1

原创 浏览器不支持attachEvent事件解决方案及跨浏览器的事件处理程序方法

浏览器在事件处理程序上,根据现有及过往浏览器类型,总共有5种形式:查看5种事件处理程序详情 1)HTML事件处理程序 2)DOM0 级事件处理程序 3)DOM2 级事件处理程序 4)IE事件处理程序 5)跨浏览器的事件处理程序 在我们使用IE事件处理程序时,我们会用到两个函数attachEve...

2018-08-10 15:40:33 3953 0

原创 什么是js的事件流、事件冒泡、事件捕获以及DOM事件流

理解事件流,我们先来理解“事件”。什么是事件?在javascript高级程序设计中,有这么一段话: javaScript 与HTML 之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码。这种在传统...

2018-08-10 11:39:43 273 0

原创 js中offset、client、scroll的区别

偏移量:offset dimensionoffsetHeight: 元素在垂直方向上占用的空间大小,以像素计。包括元素的高度、(可见的)水平滚动条的高度、上边框高度和下边框高度。offsetWidth: 元素在水平方向上占用的空间大小,以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽...

2018-08-06 14:33:27 3192 1

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