WEB前端开发工程师
文章平均质量分 58
Delicia_Lani
这个作者很懒,什么都没留下…
展开
-
原生实现图片点击放大,点击消失
原生实现图片点击放大,点击消失原创 2022-06-15 17:37:15 · 468 阅读 · 0 评论 -
小白的晋级之路--Git
一、删除远程分支现在在feature1分支上,想删除远程的feature1分支 1 先切换到别的分支: git checkout develop 2 删除本地分支: git branch -d feature1 3如果删除不了可以强制删除,git branch -D feature1 4 有必要的情况下,删除远程分支:git push origin --delete...原创 2019-12-18 18:16:50 · 205 阅读 · 0 评论 -
如何用promise封装axios方法
axios:易用、简洁且高效的http库支持promise:使用Promise管理异步,gaob原创 2021-06-06 17:57:55 · 6081 阅读 · 2 评论 -
Get/Post请求的区别,你不知道的都在这里
日常开发过程中,get/post请求是不可避免的操作,那他们两个之间有什么区别的?这是老生常谈的问题了,今天有时间整理一下,来具体看看吧。参考:https://www.cnblogs.com/logsharing/p/8448446.html原创 2021-06-06 11:03:00 · 209 阅读 · 0 评论 -
js时间转换,亲测可用
1、时间戳转换成YYYY-MM-DD HH:mm:ssfunction addZero(m) { return m < 10 ? '0' + m : m }//时间戳转化成时间格式function timeFormat(timestamp){ //timestamp是整数,否则要parseInt转换,不会出现少个0的情况 var time = new Date(parseInt(timestamp) * 1000); var year = time.getFull原创 2021-05-08 17:36:11 · 326 阅读 · 0 评论 -
使用DataTables组件,前端分页转为服务端分页,只需添加一行代码
最近接触的项目中使用了DataTables组件库,越使用,越发地感觉该库的强大。该库的的官网地址:https://datatables.net/reference/api/在使用该组件的时候,种种原因吧,最终写成了前端分页,但是服务端提供的接口是服务端分页,当然,服务端分页是最合理的。因此我需要将该表格改为服务端分页。有人可能会问,为什么不直接把写法改一下呢?我这里涉及了十几个表格,我查了一下由目前的写法改为服务端分页的写法改动还挺大的,实在是不想改。因此去查API看有没有合适的,毕竟分页是比较典型的吗原创 2021-04-20 19:42:22 · 285 阅读 · 1 评论 -
webpack性能优化详解,你想知道的webpack都在这里
webpack性能优化开发环境性能优化;生产环境性能优化;开发环境性能优化:优化打包构建速度-HMR;优化代码调试-source-map;生产环境性能优化:优化打包构建速度:oneOf;babel缓存;多进程打包;externals;dll;优化代码运行的性能:缓存(hash-chunkhash-contenthash);tree shaking;code split;懒加载/预加载;pwa;...原创 2021-04-12 19:58:20 · 628 阅读 · 4 评论 -
亲测有效,vue项目中调用微信的预览图片接口
近期用vue框架开发了一个微信公众号,现在需要实现点击图片,放大查看。以前浏览公众号的时候,点击图片放大查看觉得很普通,近期开发的时候我一度以为是微信自带的,今天才知道,需要调用微信提供的预览图片接口。...原创 2021-04-12 17:41:19 · 738 阅读 · 0 评论 -
服务端返回的字段是html标签,使用v-html进行渲染并修改样式
服务端同学返回了这样的数据:scene: "<p>通用</p>↵"需要将scene字段解析出来,将“通用”二字正确地渲染出来。原创 2021-04-07 10:10:06 · 1418 阅读 · 0 评论 -
前端小萌新看过来,这里记录了我从0到走向前端岗位的历程
之所以现在来写这样一篇文章,是因为我很欣慰,有很多小伙伴陆陆续续地关注了我,每次看到点赞,每次看到关注,每次看到私信,都很开心。在这里我想声明一下,我不是大佬,只是用心记录敲代码过程中遇到问题及解决方案的程序猿,所以有小伙伴在跟我交流的时候,直接喊我东东吧,嘿嘿。或许,还有一部分迷茫的小伙伴,不了解前端,或者不知道未来要从事什么职业,今天,我用这篇文章记录下我与前端的故事,希望对正在阅读的你有所帮助。那一年,我还没有毕业,对于未来有些迷茫,不知道将来从事什么职业,包括到现在,说实话,我还没有找到可以原创 2021-04-06 23:07:47 · 116 阅读 · 0 评论 -
JS判断两个数组是否相等
今天在实现一个算法题的时候,用到判断两个数组中的元素是否相等,这里的相等指的是两个数组A,B,判断这两个数组中对应的元素是否相等,即顺序和数值要分别对应相等。具体来自这个题目:https://leetcode-cn.com/problems/leaf-similar-trees/那判断两个数组是否相等有哪些方法呢?第一种方法,挨个遍历,所以我是这样写的:let arr1 = [1,2,3,4,5], arr2 = [3,4,5,6];for (let i = 0; i <= arr原创 2021-04-04 17:10:50 · 5513 阅读 · 1 评论 -
玩转Echarts-使用Echarts开发过程中的配置项总结
本文将介绍自己在工作中遇到的小问题;每次遇到需要动态扩展的内容,都需要去查找官方文档,现将常用的几个API进行总结,便于后期查找使用。legend:图例 配置项 默认值 其他值 效果图 type:类型 plain:普通图例 scroll:可滚动翻页的图例。默认横向滚动。 设置orient: 'vertical',实现纵向滚动 legend: { type: 'scro原创 2021-04-02 16:31:44 · 442 阅读 · 0 评论 -
typeof 可以判断哪些类型?instanceof 做了什么?null为什么被typeof错误的判断为了‘object‘
一、typeoftypeof操作符唯一的目的就是检查数据类型 类型 typeof 结果 基本类型 undefined "undefined" Boolean "boolean" Number "number" String "string" BigInt (ECMAScript 2020 新增) "bigint" Symbol "symbol" null...转载 2021-04-01 09:39:01 · 738 阅读 · 0 评论 -
webpack总结
一、什么是webpack?这张图片并不陌生,同时很好地解释了什么是webpack。webpack官方给出的解释是:webpack是一个用于现代JavaScript应用程序的静态模块打包工具。如何理解呢?静态模块?在入口文件中,比如index.js文件中,引入了sass文件,less文件等,其实这些就是静态模块,每个文件都可以看做是一个模块。打包?将静态模块引入文件之后形成代码块,然后做处理--less编译为css等,这个过程叫做打包。二、为什么需要webpack?(1)上述.原创 2021-03-29 18:36:52 · 155 阅读 · 0 评论 -
浏览器兼容,当为IE浏览器时需要给出相关提示
(function (window) { var userAgent = window.navigator.userAgent; var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; var isIE11 = userAgent.indexOf('Trident') > -1 && userAgen.原创 2021-03-25 15:48:20 · 281 阅读 · 0 评论 -
使用jsplumb绘图,实现连线
近期有个需求,实现节点之间的连线,选用的jsplumb来绘制。我自己在实现过程中,遇到了重绘问题/加载顺序问题/自动刷新过程中保持连线正确等很多问题,查了好多资料后,得以解决,有问题的小伙伴可以一起交流。jsplumb涉及的几个重要网址,可以作为研发过程中的依据:jsplumb官网:https://jsplumbtoolkit.comjsplumb中文(这个中文网站列出的API还是比较完善的):https://github.com/wangduanduan/jsplumb-chinese..原创 2021-03-10 16:51:01 · 5025 阅读 · 2 评论 -
超级全面-深拷贝与浅拷贝的实现方式
一.数据类型:(1)基本数据类型:number,string,Boolean,null,undefined,symbol(ES6),BigInt(ES10);(2)引用数据类型:对象,数组,函数等;引用数据类型的存储:名存于栈,值存于堆;栈内存会提供一个引用的地址指向堆内存中的值。二.用实例来看深浅拷贝:(1)浅拷贝:a =[1, 2, 3, 4] b = a;进行拷贝操作的时候,复制的是a的引用地址,不是堆里面的值;a[0] = 0;对数组a进行修改操作,a,b指向的是同...原创 2021-03-10 16:40:45 · 1303 阅读 · 0 评论 -
NEST
一、Nest搭建项目:https://www.cnblogs.com/duanyiwen/p/11828125.html二、原创 2020-10-16 10:24:09 · 106 阅读 · 3 评论 -
async函数
async函数返回一个promise对象;async函数内部的return语句返回的值,会成为then方法回调函数的参数。async function f() { return 'hello'}f().then(v => { console.log(v)})async函数返回的promise对象,必须等到内部所有的await命令后面的promise对象执行完,才会发生状态改变,除非遇到return语句,或者抛出错误。也就是说,只有async函数内部的所有异步操作执行原创 2020-10-11 22:29:26 · 122 阅读 · 0 评论 -
windows系统安装node后设置node_global和node_cache
在全局安装angular的时候,总是安装不成功,全局安装的node,也能查看到其版本,安装angular命令能够正确执行,只是查看其版本总报不是内部或外部命令。经过排查,发现安装的node目录中并没有node_global和node_cache文件夹。采用下述方式,讲问题解决了。使用npm安装模块分为本地安装和全局安装。本地安装:npm install express 会安装到当前项目全局安装:npm install express -g 会安装到指定的目录(node_global)...原创 2020-10-09 15:09:56 · 3977 阅读 · 1 评论 -
angular发送post请求,下载文件
downloadFile(data, type) { this.downloadInfo.tid = data.id; if (data.savedReports.length !== 0) { data.savedReports.map(item => { this.downloadInfo.rid = item.id; }); ...原创 2020-03-18 10:27:42 · 904 阅读 · 0 评论 -
使用vscode通过sftp插件上传代码到服务器出现断连情况
1.ctrl+shift+p,打开sftp:config修改sftp.json文件2.ctrl+shift+p,打开SFTP:download project,输入账号密码即可。可实现在服务器上自动上传修改的代码这是整个上传代码的过程。但是我在上传的过程中,出现断连,就是上传到某个文件的时候,会不停的loading,但是上传不了。这个时候VPN会断连一下,以为是VPN的原因,...原创 2020-02-27 12:29:32 · 1324 阅读 · 0 评论 -
使用gitLab clone代码报错:error: RPC failed; curl 56 OpenSSL SSL_read: Connection was reset
在clone代码的时候,报错如下:并且在报错的时候,VPN自动断线,之后自动连接。原本以为是VPN不稳定的缘故。重启之后,还是不行。经过搜索,发现有人给出了解决方案,我也是在此基础上解决了该问题。解决方式连接:http://www.manongjc.com/detail/14-ccijrthtnqtadxx.html错误原因由于Http协议错误,当 pull 或者 clon...原创 2020-02-24 11:33:35 · 5173 阅读 · 1 评论 -
Angular实现路由跳转并传参
<a[routerLink]="['/tabChange']"[queryParams]="{code:buttonCode}">点击获取代码</a>在跳转后页面的代码中:import{ActivatedRoute}from'@angular/router';constructor(publicroute:ActivatedRoute){...原创 2020-01-16 09:48:43 · 424 阅读 · 0 评论 -
Angular项目中遇到的小问题集锦
1.添加form表单的时候,报错Can't bind to 'formGroup' since it isn't a known property of 'form'.解决方式连接:https://blog.csdn.net/cnwyt/article/details/848589452.angular-cli修改端口号,ng serve --host localhost --port ...原创 2020-01-14 11:54:11 · 688 阅读 · 0 评论 -
Angular项目中添加全局样式ng-zorro
自己在创建angular项目的时候,使用ng-zorro UI组件库,遇到安装之后,不生效的问题,是没有正确引入,其实官方文档也提到了。官网地址:https://ng.ant.design/docs/getting-started/zh1. 安装脚手架工具#使用@angular/cli前,务必确认Node.js已经升级到 v12.1 或以上,强烈建议升级至最新版本的@ang...原创 2020-01-05 20:36:50 · 3490 阅读 · 0 评论 -
Angular8封装基础url(适用于其他框架项目)
创建全局变量的ts文件,我在app目录下创建了global.ts文件,代码如下:// 无内网的环境export const basePath = 'https://www.easy-mock.com/mock/**********';在使用的文件中引入,并拿到全局定义的全局变量,代码如下:import * as globals from '../global';baseU...原创 2020-01-05 10:43:40 · 521 阅读 · 0 评论 -
Angular--Pipe管道理解及用法及自定义管道
1.什么是Pipe?就是管道,简单来说,管道的作用就是传输。并且不同的管道具有不同的作用。(其实就是处理数据)2.pipe用法{{ 输入数据 | 管道 : 管道参数}} (其中‘|’是管道操作符)3.Angular自带的pipe函数管道 功能 DatePipe 日期管道,格式化日期 JsonPipe 将输入数据对象经过JSO...原创 2019-12-31 10:03:59 · 1702 阅读 · 2 评论 -
Angular8--表单
官网地址:https://angular.cn/guide/forms-overview目录一、表单简介建立表单模型在响应式表单中建立在模板驱动表单中建立表单中的数据流响应式表单中的数据流模板驱动表单中的数据流表单验证实践一、表单简介1.Angular提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。两者都从视图中捕获用户输入事件...原创 2019-12-30 14:22:10 · 693 阅读 · 0 评论 -
RxJs快速入门(转载)
异步与“回调地狱”我们都知道 JavaScript 是个多范式语言,它既支持过程式编程,又支持函数式编程,两者分别适用于不同的场合。在同步环境下,两者各有优缺点,甚至有时候过程式会更简明一些,但在异步环境下(最典型的场景是一个 Ajax 请求完成后紧接着执行另一个 Ajax 请求),由于无法控制执行和完成的顺序,所以就无法使用传统的过程式写法,函数式就会展现出其优势。问题在于,传统的函数式...转载 2019-12-25 10:14:48 · 181 阅读 · 0 评论 -
Angular--Zorro中InputNumber数字输入框禁止输入非法字符(英文,标点等)
组件来源地址:https://ng.ant.design/components/input-number/zh我在项目中遇到的问题:使用nz-input-number组件,若用户输入非法字符,input框立马变为红色,表示警告。我第一反应就是一旦监听到用户输入了非法字符(除数字之外的),立马给予警告,同时input框就是这样实现的校验,但是在实际操作的过程中就会发现,我们无法实时监听用户的输入...原创 2019-12-24 13:10:43 · 4072 阅读 · 0 评论 -
Angular8--父子组件之间的传值
目录一、通过输入型绑定把数据从父组件传到子组件。二、父组件监听子组件的事件三、通过 setter 截听输入属性值的变化四、通过ngOnChanges()来截听输入属性值的变化五、父组件调用@ViewChild()https://angular.cn/guide/component-interaction官方文档https://blog.csdn.net/u0129678...原创 2019-12-20 14:57:00 · 2159 阅读 · 0 评论 -
ES6-Object.keys()方法
在实际开发中,我们有时需要知道对象的所有属性;ES5 引入了Object.keys方法,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键名。传入对象,返回属性名var data={a:1,b:2,c:9,d:4,e:5}; console.log(Object.keys(data));//["a", "b", "c", "d", "e"] ...转载 2019-12-20 11:40:17 · 869 阅读 · 0 评论 -
ES6-Object.assign()方法详解
基本用法Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。const target = { a: 1 };const source1 = { b: 2 };const source2 = { c: 3 };Object.assign(target, source1, source2);target /...转载 2019-12-20 10:29:50 · 150 阅读 · 0 评论 -
从gitlab拉取代码、提交代码、提MR流程
以前在小公司实习,只需要简单提交代码,没有涉及代码分支,请求合并分支等,现在入职到大公司,代码规范要求较高,且多人协作开发,这一必须的技能要会,手忙脚乱之余,终于搞懂了整个流程。第一个疑问:我从gitlab上面拉代码的时候要不要切分支?git clone代码之前,可以直接拉取master分支上的代码,master分支的代码要求时刻处于部署的状态,是完整的。代码拉下来之后,本地代码也...原创 2019-12-18 10:09:10 · 20176 阅读 · 0 评论 -
如何生成SSH key
如何生成SSH keySSH key提供了一种与GitHub通信的方式,通过这种方式,能够在不输入密码的情况下,将GitHub作为自己的remote端服务器,进行版本控制步骤检查SSH keys是否存在 生成新的ssh key 将ssh key添加到GitHub中 gevin-essay-how-to-generate-SSH-key.png 1. 检查SS...转载 2019-12-18 09:23:25 · 285 阅读 · 0 评论 -
Vue+TypeScript入门学习,含详细项目代码,vuex状态管理
之所以写下这篇文章,是因为最近的项目需求,使用Vue,TypeScript实现项目,对我而言,是一个全新的挑战,因此,是零基础,不过各语言之间都是相通的,学起来也没有那么难。只是在真正实现项目的过程中,踩过了好多坑。一,该链接中讲到Vue对typescript的支持:https://cn.vuejs.org/v2/guide/typescript.html二,typescript是什么?...原创 2019-07-05 15:27:29 · 1957 阅读 · 0 评论