Web开发
文章平均质量分 68
feiyu_may
不辜负阳光
展开
-
Grid网格布局简单梳理
Grid 网格布局是一种强大的前端布局方案,相比于flex弹性布局,grid更高效简洁。相关语法规则可参考CSS Grid 网格布局教程整体梳理Grid布局将整个区域划分成一个个网格,区域内的元素可以根据网格来指定位置,下面是一个简单的示意图。先抛开看起来很多的grid属性,我们从自己的需求出发,看自己需要什么。网格内容在容器中怎么对齐?网格怎么划分?元素在网格内怎么对齐?怎么指定某个元素的特定位置?怎么实现一个元素占据多个格子?再结合下面这张图,应该会对grid属性的大致情况有一个了解。至于具原创 2021-08-24 22:56:56 · 511 阅读 · 0 评论 -
input中回车生成标签实现及分析
文章目录前言思路分析代码实现前言 本文是参考vue.js 回车生成label标签组件一文的写法,以及IView、Element-UI,总结优化,实现的功能。 代码基于vue.js实现,其他环境代码稍作修改即可。思路分析 首先看一下我们要实现的效果: 组件库iView、Element-UI都没有直接达到效果的组件,但是他们的select组件,同时设置multiple和filterable时,select的输入框部分和我们想要的效果是类似的。 查看源码,以Element-UI为例,s原创 2021-05-21 21:34:52 · 3579 阅读 · 1 评论 -
onXXX、addEventListener、attachEvent添加事件处理函数的区别及特点
@[TOC]本文将以click事件为例,进行阐述1、onXXX、addEventListener、attachEvent的用法 onClick:<button id="btn" onclick="fun()">按钮</button> // 标签中添加document.getElementById('btn').onclick = function() { // js方式添加 console.log('onclick');}; addEventLi.原创 2021-05-18 21:09:07 · 1381 阅读 · 0 评论 -
超全前端知识点总结解答求职笔记
写在前面1、这是博主2019年的前端笔记,有自己的一些开发经验,也有网上找到的比较好的资料,做了一下总结。从最开始粗略整理到根据面试反馈不断完善,我觉得已经非常全面,可以说涵盖到了大部分前端面试的点,除了js、css、html,其他浏览器、框架、http、数据结构、算法等等全都有涉及。2、因为是学习笔记,而且涉及条目很多(97个),虽然博主已经认真校对,但难免有失误之处,大家多多包涵。3、这...原创 2019-12-08 20:46:04 · 235 阅读 · 0 评论 -
VSCode中使用cssrem插件
使用rem做移动端适配时,我们需要将px值转换为对应的rem,在VSCode中,提供一款插件cssrem,可以帮助我们快速换算。1、在【扩展】中,搜索【cssrem】,【安装】2、安装完成后,重新加载,插件就生效了3、我们在页面中,仍然写px,会直接提示对应的rem值4、cssrem相关属性在VSCode中,点击左下角的设置,找到cssrem的三个属性css...原创 2019-01-18 19:33:53 · 6414 阅读 · 1 评论 -
ubuntu16.04下部署YApi教程及踩坑记录
YApi是一个接口管理平台,可以用来实现mock测试,更好地帮助前后端分离开发。官网:https://yapi.ymfe.org/index.html。 使用YApi平台,需要部署到我们自己的服务器上。官方也给了教程:https://yapi.ymfe.org/devops/index.html,但感觉写的不是很适合新手。本文只是一个引导作用,不会写的特别详细,每个人的环境和具体...原创 2019-01-02 20:37:28 · 2339 阅读 · 0 评论 -
viewport、rem、vw等实现前端页面适配
写在前面,一直被页面适配的问题困扰,这段时间查了一些资料自己做个总结,可能会有点乱,尽量清晰,我也还在学习摸索,欢迎讨论和指正。 不同的浏览器、不同的屏幕大小,所呈现的页面布局都是有差别的,但是我们希望不管在什么浏览器、什么屏幕上,用户看到的页面都尽量统一。页面布局兼容适配的问题,主要依赖单位。我们一般写px,那么100px的宽度在1000px的屏幕上是十分之一,但是在200px...原创 2018-12-21 18:45:38 · 1118 阅读 · 0 评论 -
前端开发常用网站总结
总结一下自己在前端学习过程中常用的一些网站1、教程类w3school:教程详细,覆盖面广http://www.w3school.com.cn菜鸟教程:与w3school类似http://www.runoob.com慕课网:以视频课程为主https://www.imooc.com/2、论坛类CSDNhttps://www.csdn.net/思否https://segmentfaul...原创 2018-12-15 23:22:15 · 389 阅读 · 0 评论 -
前端操作Cookie及实现表单记住用户名
目录一、Cookie主要属性二、浏览器对Cookie的大小和个数限制三、Js设置、读取及清除Cookie四、vue-cookies实现cookie操作 写登录页面的时候,为了提升用户体验,加入表单记住用户名功能,这样用户下次登录的时候,前端可以根据之前用户登录过的用户名信息实现自动填充。此功能主要通过cookie实现。这里讨论的是纯前端操作cookie,不涉及服务器。...原创 2018-12-06 20:15:46 · 3136 阅读 · 0 评论 -
Vuex简单介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 Vuex主要有两个作用:(1)全局数据存储和状态管理,Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。通过vuex可以实...原创 2019-03-02 18:11:39 · 218 阅读 · 0 评论 -
浏览器缓存带来的前端项目更新问题及解决方法
先说一个前端开发中会遇到的问题,我们更新已上线的项目,用户的浏览器显示的却是旧版的页面,没有及时获取到我们更新的资源,这是什么原因造成的?此时,如果用户刷新一下页面,就得到更新后的资源,又是为什么? 答案是浏览器缓存 浏览器缓存是前端优化的一个重要问题,缓存可以带来很多好处: (1)减少冗余的数据传输,节省带宽; (2)减轻服务器的请求负担,有缓存就...原创 2019-03-10 12:34:44 · 24081 阅读 · 6 评论 -
微信公众号开发引导用户关注公众号
微信公众号开发,本质是一个网页的形式,用户进入这个网页系统,并不一定要关注公众号,只要提供链接,就可以直接进入。例如电动车充电桩系统,用户直接用微信的扫一扫,扫描插座二维码,就可以进入充电系统,并没有关注公众号的行为。 但是,用户没有关注公众号,就会收不到消息推送,会影响主体对用户的后续服务,所以要引导未关注用户关注公众号。 用户关注公众号主要有三种方式:(1)搜索关注...原创 2019-03-15 17:10:21 · 6772 阅读 · 1 评论 -
梳理详细 vue中引入第三方字体图标库iconfont
最近在项目中需要使用第三方图标库,我选择了阿里的iconfont。记录下学习过程。在网上查阅资料的时候,发现很多教程写的比较模糊,一些博主只是提供一种可实现的方式,但是并没有完全区分iconfont的几种引入方式及对应文件的作用,我一开始是有点混淆的,所以自己做了实践总结。目录1、在Iconfont网页上建立自己的项目2、选择图标加入购物车3、Vue工程中引入iconfon...原创 2019-04-25 16:33:10 · 1971 阅读 · 0 评论 -
Vue中使用row-class-name修改el-table某一行背景色无效
Vue+Element UI项目,需要对列表某些行加深背景色,Element官方提供了row-class-name属性,官方示例如下 根据官方的写法,并没有实现效果,查阅资料后发现,row-class-name属性要想生效必须使用全局class,而我的页面中使用了scoped。 解决方...原创 2019-06-27 14:35:49 · 6245 阅读 · 3 评论 -
解决el-table使用树形数据导致的rowIndex数据处理问题
项目中,el-table中使用row-class-name为某一行添加样式,用span-method合并列或者行,之后,我又在table中用了children树形数据,正确效果如下所示 但是处理数据的时候row-class-name、span-method对应的函数报错了,具体错误就不说了,最后查找到原因是使用树形数据后,因为tabledata项中children元素的存在,...原创 2019-06-28 16:02:22 · 3727 阅读 · 1 评论 -
vue前端权限控制方案详解附demo
Vue+Element-ui技术栈 demo源码:https://github.com/Lindsayyyy/vue-permission 演示地址:http://auth.qywyyztp.top目录1、概述1.1 粗粒度与细粒度1.2 控制哪些2、路由控制2.1 初始化挂载登录以及无需权限的公共页面。2.2 用户登录成功获取role,获取...原创 2019-07-06 10:06:50 · 5354 阅读 · 1 评论 -
vue中上传读取及下载excel文件
准备工作1、安装依赖包npm install -S file-saver (-S用于生产环境)npm install -S xlsxnpm install -D script-loader (-D用于开发环境)2、引入文件导出excel需要两个文件:Blob.js和Export2Excel.js链接:https://pan.baidu.com/s/137U5xaym8...原创 2018-11-21 19:57:40 · 4106 阅读 · 0 评论 -
vue中实现文件的上传读取及下载
文件的上传利用input标签的type="file"属性,读取用FileReader对象,下载通过创建a标签实现<template> <div class="filediv"> <el-button @click="downloadFile">下载</el-button> <div id="原创 2018-11-16 17:49:14 · 5325 阅读 · 0 评论 -
谷歌地图API教程及在VUE中的使用
目录一、获取密钥API Key 1、创建项目 2、启用Maps JavaScript API服务 3、创建API Key 4、设置结算账户二、头文件中引入api资源文件 1、获取Ip所属区域 2、根据地区加载不同的资源三、Google Maps API基本使用 1、加载地图 2、添加标注点 3、自定义图标 4、信息窗口 5、监听地图事件一、获取...原创 2018-11-08 21:45:01 · 18738 阅读 · 12 评论 -
VUE工程上线首页加载慢问题优化
首先明确是什么导致加载很慢。查看控制台Network,找到加载时长很长的文件。这些文件都是npm run build编译之后生成的,加载慢一是因为网络慢,这个我们不考虑,另一个是文件过大。那么我们就要想办法压缩文件。 在讨论压缩方式之前,我们先介绍一种可以查看各部分文件大小及编译后文件大小的方法。 使用webpack-bundle-analyzer工具,先 npm ins...原创 2018-07-10 16:20:40 · 22228 阅读 · 1 评论 -
javascript数组正态分布排序
javascript数组正态分布排序,有一篇比较好的文章,原文链接如下:https://www.cnblogs.com/webLaoHe/p/5721520.html原博的思想是,对一个数组,先从小到大排序,然后将下标为偶数的放在左侧,为奇数的时候放在右侧,在左右两边的数组增长过程中,当数组长度相等时,对左右两侧数组之和进行比较,因为是按照从小到大排列的,所以正常情况下,右侧会大于左侧,然后将...转载 2018-07-17 21:04:25 · 2078 阅读 · 0 评论 -
vue工程打包上线样式错乱问题
项目开发完成后,执行npm run build进行打包,将打包完成的文件部署在服务器。配置好域名解析,就可以实现工程上线。上线后,我们有时候会发现,它怎么和本地调试时长得不一样?长得不一样是样式问题,是打包的时候顺序先后问题,有一些样式没有生效,有一些样式被覆盖了。这时候可以考虑以下几种方法。main.js样式引入顺序问题有时候我们发现组件内的样式没有生效,可能是被第三方组件样式...原创 2018-07-18 16:39:49 · 12760 阅读 · 1 评论 -
sessionStorage,localStorage,cookie,web前端开发数据存储
在前端开发中需要存储一些数据,在其他页面进行使用。主要涉及到sessionStorage,localStorage,cookie这三种方式。 cookie会在浏览器请求头或者ajax请求头中发送cookie内容,比如我们把用户名密码存储在cookie中,以后每次打开页面,浏览器发送的请求中带有用户密码信息,就可以实现自动登录了。Cookie用来做用户和权限的识别与鉴定。Cookie是...原创 2018-07-13 14:48:14 · 577 阅读 · 0 评论 -
git, github基础入门
作为一名程序员,一定会用到版本管理工具,git作为现在最流行的分布式版本管理工具,还是很有必要了解和掌握的。先上目录。git git与github 关联 github学生用户申请 我们听说过git,还有github,这两个有什么关系呢。git是版本管理工具,github是远程仓库。我们用git实现本地项目版本管理,github是存放项目的远程仓库平台。 学习之前,...原创 2018-07-31 17:02:33 · 239 阅读 · 0 评论 -
从static,assets浅谈vue工程架构
Vue工程中有两个静态资源目录,static/和src/assets/,它们的主要特性是: assets: 会被Webpack处理,使用相对路径 static: 不会被Webpack处理,只支持绝对路径 static/下的文件由config/index.js中的build.assetsPublicPath和build.assetsSubDirectory确定...原创 2018-08-09 20:08:51 · 639 阅读 · 0 评论 -
浏览器offsetWidth、clientWidth、scrollWith等总结
对象尺寸会涉及width和height,我们以width为例,height则是一样的道理。 1、clientWidth:对象可见的宽度,不包括滚动条等边线,会随窗口的显示大小改变。 clientWidth = 元素width + padding 2、scrollWidth:实际内容的宽,不包括边线宽度,会随着对象中内容的多少改变。 无滚动时等于c...原创 2018-08-18 16:02:32 · 1783 阅读 · 0 评论 -
CSS实现背景图片固定宽高比自适应调整
<img>标签可以使图片在保持宽高比不变的情况下自动调整。我们讨论的是div的背景图片实现固定宽高比自适应调整的方法。这里的图片不是< img>标签一样通过src引入,而是通过css的background-image: url('路径')实现。 实现背景图片固定宽高比缩放我们采用padding-top:(percentage)来实现,padding-top取...原创 2018-08-20 18:54:04 · 80056 阅读 · 1 评论 -
canvas画布宽高设定---不能用css设置样式
在写demo练习canvas画图时,新建一个canvas画布,先将宽高写在了css中,没有在canvas标签中设定宽高,得到的效果是错误的,代码及效果如下, 正确的情况是一条45度倾斜从(10,10)到(200,200)的直线,但是显示的效果变形了。查阅资料找到了原因。 <canvas >中有默认宽高300px*150px,如果在<canvas...原创 2018-08-29 09:41:38 · 4392 阅读 · 1 评论 -
Canvas绘图教程及简单实践
一、前言 最近想尝试用代码画图,最开始考虑的是用css,用css画图的本质就是不断地拼接div,熟悉一些基本的css属性根据需求去设置,有一定的耐心就可以实现。网上有很多优秀的例子,如下面教程中的哆啦A梦。 https://blog.csdn.net/qq_29326717/article/details/73690980 但是觉得这样的方式并不灵活,在查阅资料的过程中深入了...原创 2018-09-04 18:02:02 · 9547 阅读 · 0 评论 -
vue-router中的#
vue工程搭建完成后,我们运行在浏览器中打开,会发现url中多了一个#符号, 有#是使用URL hash模式的缘故,#代表网页中的一个位置,右边的字符就是该位置的标识符,从#开始的部分就是URL的锚部分,vue-router默认的是hash模式,如果觉得#在url中影响美观,可以更改为history模式。 history模式不带#号,需要服务器配置。 前端...原创 2018-09-11 18:12:43 · 3412 阅读 · 0 评论 -
vue-i18n插件实现前端文字语言切换
当面向不同语言群体的用户时,我们就需要考虑前端页面的语言切换问题,在vue中,可以通过vue-i18n插件实现。1、安装vue-i18nnpm install vue-i18n --save-dev2、新建语言配置js文件,我的文件目录是/src/config/lang。 lang目录下我建了两个文件,en.js和zh.js,分别表示英文语言文件和中文语言文件,文件内容...原创 2018-10-19 13:14:16 · 1673 阅读 · 0 评论 -
JS分割字符串常用方法总结
函数:substring()定义:substring(start,end)表示从start到end之间的字符串,包括start位置的字符但是不包括end位置的字符。功能:字符串截取,比如想从"MinidxSearchEngine"中得到"Minidx"就要用到substring(0,6)例子:var src="images/off_1.png";alert(src.substr...转载 2018-10-10 20:39:06 · 4718 阅读 · 0 评论 -
position,float,flex,grid,table前端页面布局方式分析及选择
页面布局的几种方式1. 定位布局(position) 定位布局分为两种:绝对定位(absolute)和相对定位(relative),但是位置是写死的,很不灵活,一般只用在页面中一些需要固定的小标签上。2. 浮动布局(float) 相对于普通文档流布局,浮动布局会脱离普通文档流,起初是为了解决图文信息中图片与文字冲突的问题,应用float后,就可以轻松实现文字环绕图像的效果。 flo...原创 2018-10-24 11:14:40 · 1260 阅读 · 0 评论 -
IE浏览器兼容问题之initial关键字
在项目开发中遇到了IE浏览器的兼容问题。前端使用VUE框架+Element UI组件,在写一个dialog时,使用el-switch,在chrome下调试时,没有发现问题,组件居左,如下图 在IE浏览器下打开,发现组件居中了,如下, 按F12查看元素,发现这样一个关键字,initial,CSS initial关键字用于设置CSS属性为它的默认值,本来el-switch应该继...原创 2018-07-09 21:06:02 · 2679 阅读 · 0 评论