- 博客(46)
- 收藏
- 关注
RSS订阅原创 react中高阶函数的使用
高阶组件定义高阶组件是个纯函数。 接受一个组件参数，然后在return里面是返回一个组件。高阶组件使应用场景目的： 把常用的逻辑独出来进行多次复用业务场景： 在一个多页H5中，部分页面有查看权限，比如新闻列表，详情，不需要进行任何操作就可以看。但是比如活动抽奖页，如果想参加就需要验证手机号登录，当一些新用户通过分享出去的链接进入活动页时，需要弹出手机号登录验证消息弹窗，同理也有其他的页面需要弹出这个弹窗常规方式： 每个需要弹出弹窗的页面都写一遍逻辑，但是当页面数比较多时，就比较麻烦了，而且代码有很
2020-12-12 10:24:31
789
1
原创 Javascript 各种数据类型深拷贝
一. 基础知识1.1 数据类型javascript有几种数据类型。这是一个很简单的问题，但是也是面试官喜欢问的致命问题，因为基本上答错一个就印象分大打折扣了。在Javascript中一共只有以下7种数据类型。NumberStringBooleanNullUndefinedSymbolObject其中前面6种类型是原始数据类型，而Object是引用数据类型。我更喜欢把前面6种称之为简单数据类型，而把Object称之为复杂数据类型。因为简单数据类型没有子类型了，不可以再进行拆分了，而复杂数据
2020-11-07 10:58:37
911
1
原创 将npm包发布在私有仓库（nexus）中操作步骤
有时候需要将自己写的一些前端项目（插件等）打包发布到公司内部的nexus仓库中供其他项目使用。在nexus中新建一个 repository打开nexus,登录以后，按照下图操作选择 npm (hosted)填写 repository 相关信息1.这里的 Blob store最好选择为 npm 专属的2.如果没有需要在Blob Stores新建3.在Hosted选择：Allow redeploy否则在后面上传的时候会报错npm ERR! code E400npm ERR! 40
2020-10-19 17:19:39
5405
原创 echarts中legend,xAxis,yAxis及datazoom常用参数配置
因项目需要使用 echarts 开发移动端数据统计图表部分配置项如下，希望能帮助他人及方便以后查阅 ，有关更多配置请移步 我的demolegend 图例的常用配置 legend: { width：100, //图例宽度设置 type: 'scroll', //分页类型 icon: 'stack', //分页按钮图标 itemWidth: 10, //图例标记的图形宽度 itemHeight: 10, //图例标记的图
2020-09-16 16:51:45
5068
原创 Git恢复之前版本的三种方法reset、revert、rebase 及其他操作
一. 问题描述在利用github实现多人合作程序开发的过程中，我们有时会出现错误提交的情况，此时我们希望能撤销提交操作，让程序回到提交前的样子，本文总结了三种解决方法：回退（reset）、反做（revert）、回扣（rebase）。二. 解决方案方法一：git reset原理： git reset的作用是修改HEAD的位置，即将HEAD指向的位置改变为之前存在的某个版本具体实现：查看版本号 使用命令“git log”查看：使用“git reset --hard 目标版本号”命令将版
2020-07-24 15:30:30
7351
2
原创 JS常见内置对象和方法总结
JS中常用的内置对象：Array对象、Date对象、正则表达式对象、string对象、Global对象Array对象中常用方法：includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。concat（） 表示把几个数组合并成一个数组join（） 设置分隔符连接数组元素为一个字符串pop（） 移除数组最后一个元素shift（） 移除数组中第一个元素slice（s
2020-07-22 11:22:31
269
原创 js高效快速排序
快速排序（Quicksort）是对冒泡排序的一种改进。基本思路：1.以一个数为基准(中间的数)，比基准小的放到左边，比基准大的放到右边2.再按此方法对这两部分数据分别进行快速排序（递归进行）3.不能再分后退出递归，并重新将数组合并代码实现: function quickSort(arr) { // 如果数组元素长度小于等于1则直接返回 if (arr.length <= 1) { return arr } // 找到基准 let pivo
2020-07-21 09:53:29
239
原创 响应式表单校验方法汇总
一 .创建一个响应式表单1.引入模块import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';2.注入 public storyForm: FormGroup; constructor(private fb: FormBuilder) { this.storyForm = this.fb.group({ sonsName: [null, [Validators.require
2020-06-29 21:51:16
438
原创 iframe 跨域页面之间传值
父页面向子页面传值通过H5的postMessage方法传值首先，在父页面A中建立一个iframe，其中src要写好子页面B的地址，然后在A页面中写如下方法：<iframe [src]="iframeSrc" id="overviewView" width="100%" height="100%" frameborder="0"></iframe>var iframeSrc= "https://www.baidu.com";var iframe: any = documen
2020-06-06 16:01:38
1290
原创 vue项目在webpack2实现移动端字体自适配
使用vue开发移动端页面时，往往需要实现页面根据不同设备屏幕进行尺寸的适配，实现将px自动换算成rem单位，其实只需要安装下面的两个插件即可快速实现移动端适配问题。1 准备工作：a. 安装 px2rem-loader 插件：npm install px2rem-loader --save；b. 安装 lib-flexible 插件：npm install lib-flexible --save;2 插件的作用：px2rem-loader插件的作用：我们通过配置基准，实现将px自动换算成rem，l
2020-05-31 21:39:52
883
原创 Vue路由中3种常见导航守卫：全局守卫，独享守卫，组件内守卫
正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。1. 全局前置守卫你可以使用 router.beforeEach 注册一个全局前置守卫：当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resol
2020-05-31 21:13:36
4787
原创 Vue路由元信息、页面跳转、验证登录时，path与meta有何不同？
在做网站登录验证的时候，使用到beforeEach 钩子函数进行验证操作，如下面代码 ，如果页面路径 path为/goodsList，那么就让它跳转到登录页面，实现了验证登录。如果需要登录验证的网页很多，怎么办？1.这里是对比path。如果需要验证的网页很多，那么必须在 if 条件里得写下所有的路由地址，非常麻烦。2.因为路由是可以嵌套的。有 ‘/goodsList’，那么可能会有子路由children（/online）,也就是’/goodsList/online’，再或者还有’/good
2020-05-31 20:56:46
924
原创 在vue中使用i18n实现国际化
前言： 要实现多语言切换，这时候接触到国际化，前端框架无数，其中几种热门的框架都有相匹配的国际化插件工具。比如：vue + vue-i18nangular + angular-translatereact + react-intljquery + jquery.i18n.property在实际项目中使用的前端框架为Vue，故而我们将使用vue-i18n这个插件进行国际化功能的实现...
2020-03-07 16:29:11
519
原创 Angular 响应式表单-FormArray 和 FormGroup的多层嵌套
由于在工作中需要做多层的表单提交校验功能，但一直没有好的方法 ，查找了一下网上资料刚好有解决的办法 ， 所以借鉴了一下并收藏下来 ， 做以后再次使用有时候，在FormArray中，不仅仅是一个控件，有可能是多个，这个时候，这个FormArray中的元素就是一个FormGroup，并且这个FormGroup中的某一个实例又是一个FormArray，这样FormGroup和FormArray就会产生...
2020-03-06 09:12:22
2336
7
原创 vue中watch， computed 的详细用法及对比
1.computed1.1 get用法 data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } }注意 fullName不可在data里...
2020-03-05 15:51:41
372
原创 Angular formGroup 响应式表单及多条件校验
由于前段时间使用angular框架并在其中使用到了formGroup响应式表单多条件校验功能所以总结一下前段时间的收获及成果 ，方便以后查阅Angular 支持非常强大的内置表单验证，maxlength()、minlength()、min()、max()、required 以及 pattern。使用 Angular 的内置表单校验能够完成绝大多数的业务场景的校验需求，但有时我们还需要实现更为复杂...
2020-01-14 15:38:26
3149
原创 Vue中 this.$router.push（） 实现页面跳转及传参
我们在执行点击按钮跳转页面之前还会执行一系列方法，这时可以使用 this.$router.push(location) 来修改 url，完成跳转。push 后面可以是对象，也可以是字符串：// 字符串this.$router.push('/viewAgent')// 对象this.$router.push({ path: '/viewAgent' })// 命名的路由this.$r...
2020-01-06 20:54:58
4068
原创 Vue 中 axios 拦截器的封装
在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等。一 . 安装npm install axios;二 . 引入在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js...
2020-01-02 16:42:16
1429
原创 vue中使用 echarts 多条折线图使用及相关配置
自己在工作中经常用到echarts来实现一些统计功能和效果，在这里对自己使用较多的做简单的记录，方便自己后期查阅。同时希望帮助更多人。首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。1.首先在官网 选择合适的下载版本2.引入Echartsimport echarts f...
2019-12-31 16:45:28
3248
原创 angular6 中路由守卫 CanActivate和CanDeactivate
1. CanActivate 路由进入新建守卫 auth-guard.service.ts 文件import { CanActivate } from '@angular/router';export class LoginGuard implements CanActivate { canActivate () { let loggedIn: boolean = Math...
2019-11-29 10:46:36
1051
原创 iView表格中输入框验证问题
需求： 验证前两行的姓名不能为空；解决方案：判断是否前两行，如是则增加校验规则；需在<FormItem>前加<Form>标签否则失效；在fules里加条件判断那些行，需激活校验规则，如果不加判断条件则可全部激活(true)。如需在Input输入框前方加 * 必填提示，则只需在，label内容最好为空字符串。代码实现：<template> /...
2019-11-21 19:36:47
2521
1
原创 通过npm 和 yarn 缓存策略 解决前端打包慢的问题
npm特性：串行安装它是按照包的排序，也就是队列挨个下载，一个下载完成后，再下载另一个缓存命令npm cache 提供了三个命令，分别是npm cache add, npm cache clean, npm cache verify。npm cache add官方解释说这个命令主要是 npm 内部使用，但是也可以用来手动给一个指定的 package 添加缓存。(This command...
2019-10-30 16:51:56
4767
原创 纯 js 实现系统间自动登录功能
一 . 此方法使用的前提条件各系统间域名必须是相同的 .例如 http:// vue.deppontest.com:9000/#/ 自动登录到 http:// angular.deppontest.com:8080/#/需要登录的系统是以 cookie 与后端校验登录二 . 若满足以上条件可复制此代码使用 // 查看是否登录过有cookie con...
2019-10-28 10:54:21
2739
5
原创 iview 可编辑表格与表格验证
在日常的开发过程中，可编辑表格的应用场景还是很多的。在尝试实现该功能时，发现没有很便捷的实现方式，官方文档也没有具体案例；于是自己动手简单写了个demo 仅供参考具体代码如下所示 :<template> <div style="padding:50px;"> <Divider> <Button @click="addRow"&...
2019-08-14 11:09:44
1925
3
原创 vue引入外部字体包报错(You may need an appropriate loader to handle this file type.)
vue项目引入外部字体包，然后报这个错解决方案
2019-08-12 18:41:49
13861
原创 vue中使用外部字体
有时候为了个性化，可能需要为部分字体添加特殊的font-family1.在static文件夹中创建font文件夹将字体文件放入2. 在font文件中新建font.csscss内容如下：@font-face { font-family: 'SourceHanSans'; //自定义文字名 src: url('./SourceHanSansCN-Normal.otf')...
2019-08-12 16:52:55
594
原创 WebSocket 实时保持数据连接 的使用及详解
WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。特点包括：（1）建立在 TCP 协议之上，服务器端的实现比较容易。（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因...
2019-08-05 10:57:34
1739
原创 CSS实现禁用状态 及 扩展
一：为input框添加禁用状态1、readonly表示此域的值不可修改，仅可与 type=“text” 配合使用，可复制，可选择,可以接收焦点，后台能接收到传值.代码演示<input type="text" name="firstname" value="" readonly="readonly" />2、鼠标不可点状态鼠标不可点击时的显示状态：cursor: not-a...
2019-07-31 09:06:20
1001
原创 Vue项目中根据用户权限 控制按钮 之 自定义指令
由于按钮权限和用户登录角色相关，因此在用户登录后，我们首先要根据用户角色查询到当前用户权限下所拥有的全部数据。由于按钮分布于不同的页面，所以我们要把查询到的数据存储在 localstorage 或 sessionstorage 中，用于后面进行验证。具体操作如下 :一 : 存储角色权限查到的数据 // "bb"查询到的角色数据 sessionStorage.setItem("btnPe...
2019-07-18 17:29:59
2256
2
原创 Angular6+ 父子组件以及组件之间通讯
一、父组件给子组件传值 – @input父组件不仅可以给子组件传递简单的数据，还可把自己的方法以及整个父组件传给子组件1. 父组件调用子组件的时候传入数据<app-header [msg]="msg"></app-header>2. 子组件引入 Input 模块import { Component, OnInit ,Input } from '@angular...
2019-07-12 18:22:59
487
原创 Angular6+ 自定义模块以及配置路由实现模块懒加载
一、Angular 创建一个默认带路由的项目ng new angualrdemo --skip-install二 、创建带路由模块：ng g module module/user --routingng g module module/article --routingng g module module/product --routing三、在对应的模块中创建组件：ng ...
2019-07-12 18:00:05
1061
原创 Angular6+ 学习心得之动态路由及路由传值问题
一、Angular 创建一个默认带路由的项目命令创建项目ng new angualrdemo --skip-install创建需要的组件 ng g component home ng g component news ng g component newscontent找到 app-routing.module.ts 配置路由引入组件 ...
2019-07-10 19:20:08
856
原创 在Apple Macbook中 npm i 报错 Maximum call stack size exceeded
在vue-cli npm i 下载依赖时报错Maximum call stack size exceeded 网上查了很多资料依然无法解决这个报错问题最后在不懈的努力下发现了 , 问题是由于在windows 系统下载依赖时项目会生成一个package-lock.json 文件而这个文件在Macbook中 Mac OS X操作系统解析时会出现这个报错解决办法删除本地项目中的 package-...
2019-07-04 17:19:18
5079
1
原创 vue-quill-editor富文本编辑器的汉化版 及 使用心得
现在网上上有很多的富文本编辑器，但我个人还是非常喜欢Vue家族的vue-quill-deitor，虽然说它只支持IE10+好 , 废话不多说直接上代码，现在是见证奇迹的时刻, 在vue中使用quill呢，我们需要npm进行安装，安装命令如下：第一步下载 :npm i vue-quill-editor -D第二步安装依赖 :npm i quill -D第三步全局引用//在mai...
2019-07-03 19:27:17
11236
7
原创 在vue中全局组件的封装与使用
一 . 写组件新建 button.vue 组件 <template> <button> <slot> <slot/> <!-- 插槽 --> </button></template> <script>export default { // 传入子组件的参数...
2019-06-12 18:30:23
995
1
原创 Vue SSR 服务端渲染深度解析及实践
一 . SSR 的优缺点更利于SEO不同爬虫工作原理类似，只会爬取源码，不会执行网站的任何脚本（Google除外，据说Googlebot可以运行javaScript）。使用了Vue或者其它MVVM框架之后，页面大多数DOM元素都是在客户端根据js动态生成，可供爬虫抓取分析的内容大大减少。另外，浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异...
2019-06-03 17:33:50
4629
1
原创 vue预渲染项目报错webpackJsonp is not defined
在vue单页面应用中，我们大概都会使用CommonsChunkPlugin这个插件。但是在项目经过本地测试没有任何问题，打包上线后却会报错 webpackJsonp is not defined。这是因为公共文件必须在自己引用的js文件之前引用。方案一可以手动改文件引用，但是推荐以下解决办法：找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin...
2019-05-29 15:00:38
7193
7
原创 在vue预渲染项目在history模式下刷新无法正常页面
在vue预渲染项目在history模式下刷新无法渲染页面的问题刷新css样式不生效报错404const router = new Router({ mode: 'history', routes: [ { path: '/', component: mall, name: 'mall' ...
2019-05-29 14:42:50
3511
1
原创 在vue预渲染项目中JS代码无法运行
我在vue.js项目中使用了prerender-spa-plugin做预渲染,代码如下现在的情况是打包出来貌似没有问题,html里面的内容也确实预渲染了,如图修改部分大功告成!原因解析:预渲染打包出来的html少了id="app"的元素 ,一般来说main.js里面是挂载到id="app"的元素上的....
2019-05-29 14:12:58
1986
1
原创 vue中使用moment把时间戳 格式化为 时间格式 (YYYY-MM-DD)
1 首先在vue项目中npm install moment --save2. 定义时间格式化全局过滤器在main.js中或组件中导入该组件 import moment from 'moment'3. 用法一在全局中定义时间格式化在main.js中引入moment// 定义一个全局过滤器实现日期格式化Vue.filter('datefmt', function (input,...
2019-05-25 17:23:57
26521
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人