+Frontend Practices/前端实战
文章平均质量分 50
GuoyeZhang
全栈工程师(大前端方向)
展开
-
vue2项目webpack3.x打包文件分割优化加载
本文使用 3 种方案进行叠加优化,有 gzip、懒加载、拆分 vendor 和 app 体积原创 2024-05-03 20:40:07 · 1728 阅读 · 3 评论 -
css3各种阴影方向的写法
css3 各种方向阴影的书写方式原创 2024-04-29 14:36:35 · 366 阅读 · 0 评论 -
Vue项目动态加载图片
vue 动态加载图片资源的正确写法原创 2024-04-02 09:27:26 · 503 阅读 · 0 评论 -
ES6类定义方法的两种式及调用方式-class - function
类的实例调用方法会报一个错误,是发生在方法的内部调用自身的方法产生的错误, `refresh`方法不存在。` Cannot read property 'refresh' of undefined`原创 2022-11-18 10:31:02 · 1039 阅读 · 0 评论 -
phantomjs-prebuilt报错解决方案
phantomjs-prebuilt 报错解决方案解决方案执行命令即可解决npm install phantomjs-prebuilt@2.1.16 --ignore-scriptsoryarn add phantomjs-prebuilt@2.1.16 --ignore-scripts原创 2022-01-10 10:41:07 · 998 阅读 · 0 评论 -
讯飞语音识别webApi angular ionic typescirpt web版本
参考讯飞的js demo iat_ws_js_demo.zip,将代码转换成基于angular typescrirpt的语言风格官方demo下载地址:demo下载关键字讯飞语音听写,语音识别typescript web workerhtml chrome 浏览器语音识别/*********************home.html**************************** */<ion-content padding> <p> <b原创 2021-09-01 17:07:18 · 650 阅读 · 0 评论 -
Error: connect ETIMEDOUT at TCPConnectWrap.afterConnect [as
Error: connect ETIMEDOUT at TCPConnectWrap.afterConnect [as oncomplete] (net.js在前端开发过程中会遇上使用nodejs proxy代理的情况,偶尔就会遇上此问题Error: connect ETIMEDOUT at TCPConnectWrap.afterConnect [as oncomplete] (net.js,如何解决?...原创 2021-06-02 15:29:27 · 47045 阅读 · 3 评论 -
Parsing error: Unexpected token < at ... Vue CLI3
在控制台打印信息发现Parsing error: Unexpected token < at ...,以下是解决方案:使用vue-eslint-parser解析安装插件npm i eslint-plugin-vue -S -D更改.eslintrc配置根节点增加{ // ... parser: "vue-eslint-parser"}重新启动项目生效配置...原创 2021-04-21 09:44:29 · 2118 阅读 · 0 评论 -
Vue element中的el-select如何获取选中的整个对象
element中的el-select如何获取选中的整个对象注意下面代码几项value-key=“id”:key=“item.id”:value=“item”<el-select v-model="selectionArr" value-key="id" multiple placeholder="请选择" style="width: 100%" @change="selectChange($event)"> <el-option v-for="item in .原创 2020-12-17 15:59:26 · 8852 阅读 · 3 评论 -
Vue3.0 directive的使用说明
1. 指令生命周期关键字变更在3.0中指令的注册和其生命周期是这样的import { createApp } from 'vue'const app = createApp({})// 注册app.directive('my-directive', { // Directive has a set of lifecycle hooks: // called before bound element's parent component is mounted beforeMount原创 2020-09-10 11:41:53 · 14279 阅读 · 0 评论 -
用vue实现秒杀倒计时组件
下面是使用Vue实现秒杀倒计时组件- 1.请求服务器获取这一刻的服务器时间(统一以服务器时间为基准)- 2.获取用户当前电脑时间与服务器时间比对,获取时间差。以当前电脑时间-减去时间差为最终时间(定义为服务器当前时间)- 3.设置秒杀开始时间- 4.秒杀时间与服务器当前时间比对,获取时间差(共X秒)- 5.根据X秒计算出离秒杀开始时间还有x天x小时x分钟x秒原创 2020-09-09 15:34:16 · 5084 阅读 · 2 评论 -
Vue的todolist示例
下面基于Vue写的Todolist示例涉及到Vue的知识点有创建组件和组件的使用单文件组件子组件自定义组件使用v-modal循环指令v-for条件指令v-if子组件向父组件通信主页 App.vue<template> <div id="app"> <h1>My Todo App!</h1> <TodoList/> </div></template><script>im原创 2020-09-09 10:20:01 · 314 阅读 · 0 评论 -
几行代码实现原生js实现图片预览
原生js实现图片预览使用原生js实现对图片选择后的预览更多的更详细的使用说明,可浏览MDN的FileReader:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader实现步骤监听input file的 onchange事件新建FileReader对象fr,并对此fr对象进行onload监听fr对象使用readAsDataURL读取文件,触发onload事件在onload事件获取文件base64信息并使用img src渲染&原创 2020-09-01 15:12:44 · 439 阅读 · 0 评论 -
前端的抖动与节流
debounce 防抖动,触发多次事件只执行一次。throttle 节流,触发多次事件,只在指定时间内会执行一次。原创 2020-08-21 16:26:01 · 1015 阅读 · 0 评论 -
Vue使用export、export default和import说明
下面是可运行的代码示例说明示例1使用export default的vue。在Import时不需要大括号export defaultService.vue<script>import axios from 'axios'import Utils from '@/share/utils';const Service = { getProductInfo: function (to) { return axios.get(`${Utils.SERVER_SECURITY_U原创 2020-08-13 12:02:54 · 1139 阅读 · 0 评论 -
Angular 8降级到Angular 7
ng --versionnpm uninstall -g @angular/clinpm cache clean --forcenpm install -g @angular/cli@7.2.12ng --version原创 2019-10-31 10:48:14 · 2994 阅读 · 0 评论 -
修改embed的层级wmode的作用
修改embed的层级 wmode网页加插入falsh或者视频的时候,在IE浏览器上如果有个弹出层在视频上会被视频挡住的。要是加上wmode="opaque"就没有问题了手动在标签上加wmode="opaque"是没有问题的。但是使用javascript动态地增加上wmode="opaque"属性,就不可行的。因为embed是传递给flash的参数,如果flash都已经渲染好了,再改这个就没有用...原创 2019-05-02 00:08:34 · 933 阅读 · 0 评论 -
如何使用css3进行图片灰白处理,兼容IE(如何使用滤镜)
如何使用css3进行图片灰白处理兼容IEchrome和firefox浏览器可使用CSS3的滤镜进行实现img{ -webkit-filter:grayscale(1);}在IE下可以尝试这个方法img { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }再详细的filter滤镜参考下面的网址: ht...原创 2019-07-07 16:09:36 · 2438 阅读 · 0 评论 -
Vue如何设置动态宽度高度或者动态样式
Vue如何设置动态宽度高度或者动态样式1. 添加样式绑定2. 添加属性计算在开发过程中,很多时候都会用到动态的计算的样式,比如宽度,高度。特别是开发后台管理系统。那么首先你务必看Vue的官方文档。涉及到的基础知识有:绑定内联样式的使用computed的使用文档写的都是基础使用。那么在项目实战中如何使用,2步就能实现,下面提供一个参考方案:需求场景:获取当前手机屏幕高度,设置cont...原创 2019-07-26 12:12:27 · 53406 阅读 · 0 评论 -
vue eslint简要配置
vue eslint简要配置1. 修改rules2. eslintConfig说明2.1 关闭eslint(方案1)2.2 关闭eslint(方案2)3. eslint 规则配置说明3.1 规则值3.2 规则参数在前端开发过程中,难免习惯了console.log。但是刚入门vue时,基于vue-cli 3.x,运行时终端老抛出error。一看信息,发现是不能使用console.log,另外im...原创 2019-07-27 00:06:00 · 1168 阅读 · 0 评论 -
Vue项目配置跨域访问和代理proxy设置
Vue项目配置跨域访问和代理设置vue-cli代理Nodejs做中间时行路由转发后端跨域访问在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题。有2种常用的解决方案后端设置允许跨域访问前端通过代理进行访问后端下面我们只说说如何配置vue-cli代理访问:vue-cli代理最简单就是配置vue conifg进行实现下面配置3个请求的后端,分别是:请求htt...原创 2019-08-20 14:55:11 · 23059 阅读 · 1 评论 -
Mac修改hosts,域名与ip绑定,vue Invalid Host header
在移动开发过程中,有时候需要使用域名进行访问(如微信网页开发)本地ip地址服务,或者使用域名访问本地ip地址服务等。这时候可以修改host进行实现。1. 修改host文件在命令终端,使用root用户修改host文件。域名使用root用户打开/etc/hosts host文件进行修改。添加ip及对应的域名$ sudo vi /etc/hosts127.0.0.1 localh...原创 2019-08-12 14:38:15 · 2533 阅读 · 1 评论 -
Vue之在methods中使用filter的方法
Vue之在methods中使用filter的方法全局定义filter在html使用filter在methods使用filter相关资料:过滤器(Vue官方使用说明)全局定义filter在main.js或者其他定义全局filterVue.filter('capitalize', function (value) { if (!value) return '' value = v...原创 2019-09-05 15:49:27 · 17066 阅读 · 5 评论 -
Vue刷新/重载当前路由获取数据
Vue刷新/重载当前路由获取数据Vue如何刷新或重载当前路由来更新数据?Vue如何监听同一路由加载事件?方案:可以利用路由的quey参数,使用watch进行检测router的变化实现监听。下面是一个实践示例vue刷新数据当然简单,直接调用合数据的方法就行。但是,往往业务需求的不同,实现流程或思路也会不同。下面有一个业务需求场景头部下拉列出仓库,切换仓库,左侧的菜单不变,都是...原创 2019-09-29 09:50:29 · 2869 阅读 · 0 评论 -
px,em,rem
px,em,remPX特点EM特点所以我们在写CSS的时候,需要注意两点:rem特点注意国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?PX特点IE无法调整那些使用px作为单位的字体大小;国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏...原创 2019-07-05 10:14:25 · 134 阅读 · 0 评论 -
ie6/7 display:inline-block
IE6/IE7下对display:inline-block的支持性不好,体现下面2点inline元素的display属性设置为inline-block时,所有的浏览器都支持;block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的;对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行,允许空格。(准确地说,应用此特性的...原创 2019-07-04 09:46:49 · 231 阅读 · 0 评论 -
datatables增加跳转指定页功能, datatable自定义分页
datatables增加跳转指定页功能, datatable自定义分页1. 初始化DataTable2. 扩展功能DataTable使用方便,快捷。但有时候用户需求对分页有需求,例如输入页数进行分页跳转。这样就需要扩展功能了,datatable也支持自定义扩展,下面以使用DataTable bootstrap分页为例1. 初始化DataTablevar $table = $('#listTa...原创 2019-05-12 08:12:47 · 2046 阅读 · 0 评论 -
移动端的text-overflow多行文本溢出显示省略号(…)
移动端的text-overflow多行文本溢出显示省略号…WebKit浏览器或移动端的页面跨浏览器兼容的方案JavaScript 方案1.Clamp.js2.jQuery插件-jQuery.dotdotdot大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。overflow: hidden;tex...原创 2019-05-09 22:11:14 · 1929 阅读 · 0 评论 -
2分钟通过javascript的opener方式实现调用父窗口方法示例
父窗口的JS代码:// 打开上传文件窗口function uploadImgFile(id){ // open里面的参数详情,查看MDN,更系统的详情资源 window.open("${base}/ajax/picupload.action?parentImgUrlId="+id,"","height=300, width=500, toolbar =no, menubar=no...原创 2019-05-08 09:51:51 · 1897 阅读 · 0 评论 -
flex布局中某个行内元素居右并垂直居中
flex布局中某个行内元素居右并垂直居中首先父盒子设置成display: flex子元素(行内元素)设flex: 1和text-align: right<div class="flex-box"> <div>1</div> <div>2</div> <div>3</div> ...原创 2019-04-25 16:15:52 · 5160 阅读 · 1 评论 -
js对html转义和反转义以及编码和解码
js对html转义和反转义以及编码和解码在项目开发过程中,我会有时候遇上这样的一个业务需求:对从数据库中读取出来的html数据进行反转义,才能在当前网页当前进行渲染。或者另一个需求,对编辑器中的文本进行编码再传进数据库,或者从库中读取的数据需要进行解码才能渲染到网页上。这时候,我们常常就会使用到转义与反转义,编码和解码。下面就是我一些项目中的代码片断,供参考,希望能给你提供个思路进行问题的解...原创 2019-05-04 09:41:20 · 1885 阅读 · 0 评论 -
typehead ajax format relay
异步搜索提示的实现/** * 异步搜索 * @type {Bloodhound} */var bestPictures = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('data'), queryTokenizer: Bloodhound.tokenizers.whitespa...原创 2019-04-26 22:20:28 · 161 阅读 · 0 评论 -
form 表单提交前验证 onsubmit 原生javascript
form 表单提交前验证 onsubmit使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验。onsubmit指定的方法返回true,则提交数据;返回false不提交数据。在不使用JQuery的情况下(js原生),是提交表单前拦截的较好方法。js验证form表单,示例代码:<!DOCTYPE html><html><...原创 2019-04-22 09:10:57 · 2348 阅读 · 1 评论 -
transform导致的border-radius失效
在写一个移动端的类似进度条的动画时遇到了一个问题,父元素设置了border-radius属性,然后overflow:hidden,子元素最初没有问题,但是加上了一个animate动画后,原先边界处圆角应该隐藏的地方溢了出来,最开始以为是position定位的问题,但是改用了margin方式定位还是不行,后来发现可能是由于transform的问题,在父元素上加上一行-webkit-transf...原创 2019-04-17 09:38:45 · 1364 阅读 · 0 评论 -
原生JS与Jquery删除iframe并释放内存(IE)
当项目以tab页签方式打开多个iframe窗口时,关闭tab页签同时也需要关闭iframe并释放内存资源,使用js与jquery如何写代码呢,主要是针对IE浏览器原创 2019-04-03 09:48:20 · 7532 阅读 · 11 评论 -
如何正确设置npm start PORT端口(windows/mac)
正确设置PORT端口(windows/mac)在跑lesson5的时候,有部分同学会遇到以下错误,这是由于不同系统,所执行的命令代码有所差异。MAC/linux环境:$ PORT=8081 npm start使用上面命令每次都需要重新设置如果想设置一次永久生效,使用下面的命令。$ export PORT=8081 $ npm startWin...原创 2017-12-11 11:00:00 · 6949 阅读 · 0 评论 -
在anuglar中使用ng-if else
使用 else :<div *ngIf="isValid;else other_content"> content here ...</div><ng-template #other_content>other content here...</ng-template>你也可以使用 then else :<div *ngI...原创 2019-05-20 14:34:59 · 6782 阅读 · 0 评论 -
ng-alain重置表单cascader不生效
ng-alain 使用SF formReset重置搜索表单时,级联组件cascader不生效,文字没被清空?在使用ng-alain生成的列表模板中,上面是由动态表单组件SF构成。下面是由ST表格组件构成。下面说说ST表格的上方的搜索表单组件SF。在使用过程中,SF动态表单可以随意配置已有的小部件,大多小部件都很实用并且常用,但有个别小部分存在缺陷问题,如cascader级联组件。你可能会...原创 2019-05-16 00:12:55 · 966 阅读 · 0 评论 -
ng-alain动态表单SF表单项设置必填和正则校验
在使用动态表单时对表单项进行非空校验及正则校验。使用手机号进行校验,示例如下:动态表单的基本使用:https://ng-alain.com/form/getting-started/zh基于基本示例,增加手机号必填与正则校验的例子:@Component({ selector: 'app-home', template: ` <sf [schema]="schema" ...原创 2019-06-13 10:36:26 · 2886 阅读 · 0 评论 -
http-server的使用
node http-server安装1. 安装2. 使用2.1 http-server参数前端常使用的http服务器http-server,非常实用。可以做模拟数据,可以做静态资源服务器,也可以做调试、测试的前端服务器,可以不再依赖后端。可可以做代理转发等功能,解决平时开发大部分后端需求。1. 安装$ npm install http-server -g2. 使用在当前目录下的ww...原创 2019-06-04 16:10:01 · 9865 阅读 · 0 评论