- 博客(42)
- 收藏
- 关注
RSS订阅原创 Grid网格布局简单梳理
Grid 网格布局是一种强大的前端布局方案，相比于flex弹性布局，grid更高效简洁。相关语法规则可参考CSS Grid 网格布局教程整体梳理Grid布局将整个区域划分成一个个网格，区域内的元素可以根据网格来指定位置，下面是一个简单的示意图。先抛开看起来很多的grid属性，我们从自己的需求出发，看自己需要什么。网格内容在容器中怎么对齐？网格怎么划分？元素在网格内怎么对齐？怎么指定某个元素的特定位置？怎么实现一个元素占据多个格子？再结合下面这张图，应该会对grid属性的大致情况有一个了解。至于具
2021-08-24 22:56:56
490
原创 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
3354
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
1313
原创 超全前端知识点总结解答求职笔记
写在前面1、这是博主2019年的前端笔记，有自己的一些开发经验，也有网上找到的比较好的资料，做了一下总结。从最开始粗略整理到根据面试反馈不断完善，我觉得已经非常全面，可以说涵盖到了大部分前端面试的点，除了js、css、html，其他浏览器、框架、http、数据结构、算法等等全都有涉及。2、因为是学习笔记，而且涉及条目很多（97个），虽然博主已经认真校对，但难免有失误之处，大家多多包涵。3、这...
2019-12-08 20:46:04
230
原创 用React Navigation实现RN组件间的跳转
传统的单页面应用，基于url的hash值进行路由跳转，hybrid App的跳转原理与此不同，其原理更像是web浏览器的前进后退。 在 web 浏览器中,使用<a>标签作为锚点，链接到不同的页面。 当用户单击某个链接时, 该 URL 就会被推送到浏览器历史记录堆栈。 浏览器通过两个栈实现前进后退。一个栈X，一个栈Y。每次跳转到新页面时将此页面压入X，并清空Y；当点击后...
2019-07-25 21:46:14
2448
原创 React及React Native开发入门学习笔记
目录1. React1.1 创建React工程1.2 学习资料1.3 主要语法特性1.3.1 虚拟DOM1.3.2 JSX及组件1.3.3 state及props1.3.4 事件1.3.5 生命周期2. React Native2.1创建、运行工程2.2 调试3. RN与React4. 开源项目推荐1. React Rea...
2019-07-22 16:23:59
291
原创 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
5314
1
原创 解决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
3620
1
原创 Vue中使用row-class-name修改el-table某一行背景色无效
Vue+Element UI项目，需要对列表某些行加深背景色，Element官方提供了row-class-name属性，官方示例如下 根据官方的写法，并没有实现效果，查阅资料后发现，row-class-name属性要想生效必须使用全局class，而我的页面中使用了scoped。 解决方...
2019-06-27 14:35:49
6176
3
原创 修改（移交）微信支付商户平台超级管理员账号流程
修改微信支付商户平台超级管理员账号，微信官方文档没有明确说明，第一次会踩坑，写篇文章记录下。 1、使用原超级管理员账号操作： 用原超级管理员账号登录，在【账户中心】-【商户信息】-【超级管理员】，修改超级管理员负责人信息，填写完成提交后，需要企业银行账户进行小额打款验证，如下图，打款后等待微信方审核验证。 一开始我有一个错误的想法，以同事A作为账号移交...
2019-05-14 10:30:19
24025
原创 梳理详细 vue中引入第三方字体图标库iconfont
最近在项目中需要使用第三方图标库，我选择了阿里的iconfont。记录下学习过程。在网上查阅资料的时候，发现很多教程写的比较模糊，一些博主只是提供一种可实现的方式，但是并没有完全区分iconfont的几种引入方式及对应文件的作用，我一开始是有点混淆的，所以自己做了实践总结。目录1、在Iconfont网页上建立自己的项目2、选择图标加入购物车3、Vue工程中引入iconfon...
2019-04-25 16:33:10
1863
原创 微信公众号开发引导用户关注公众号
微信公众号开发，本质是一个网页的形式，用户进入这个网页系统，并不一定要关注公众号，只要提供链接，就可以直接进入。例如电动车充电桩系统，用户直接用微信的扫一扫，扫描插座二维码，就可以进入充电系统，并没有关注公众号的行为。 但是，用户没有关注公众号，就会收不到消息推送，会影响主体对用户的后续服务，所以要引导未关注用户关注公众号。 用户关注公众号主要有三种方式：（1）搜索关注...
2019-03-15 17:10:21
6635
1
原创 浏览器缓存带来的前端项目更新问题及解决方法
先说一个前端开发中会遇到的问题，我们更新已上线的项目，用户的浏览器显示的却是旧版的页面，没有及时获取到我们更新的资源，这是什么原因造成的？此时，如果用户刷新一下页面，就得到更新后的资源，又是为什么？ 答案是浏览器缓存 浏览器缓存是前端优化的一个重要问题，缓存可以带来很多好处： （1）减少冗余的数据传输，节省带宽； （2）减轻服务器的请求负担，有缓存就...
2019-03-10 12:34:44
23698
6
原创 Vuex简单介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 Vuex主要有两个作用：（1）全局数据存储和状态管理，Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。通过vuex可以实...
2019-03-02 18:11:39
217
原创 VSCode中使用cssrem插件
使用rem做移动端适配时，我们需要将px值转换为对应的rem，在VSCode中，提供一款插件cssrem，可以帮助我们快速换算。1、在【扩展】中，搜索【cssrem】，【安装】2、安装完成后，重新加载，插件就生效了3、我们在页面中，仍然写px，会直接提示对应的rem值4、cssrem相关属性在VSCode中，点击左下角的设置，找到cssrem的三个属性css...
2019-01-18 19:33:53
6370
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
2320
原创 微信网页开发wx.getLocation在安卓手机上的一个坑
我在wx.getLocation的成功回调函数里，执行了一句this.lon = res.longitude.toFixed(6) 在苹果手机和调试工具上都是能获取到数据的，但是在安卓手机上this.lon没有获取到数据，排查之后，发现了原因，官方文档里写res.longitude和res.latitude是浮点数，所以我就直接用toFixed()方法了，然而，测试发现，...
2018-12-27 14:29:44
3270
1
原创 viewport、rem、vw等实现前端页面适配
写在前面，一直被页面适配的问题困扰，这段时间查了一些资料自己做个总结，可能会有点乱，尽量清晰，我也还在学习摸索，欢迎讨论和指正。 不同的浏览器、不同的屏幕大小，所呈现的页面布局都是有差别的，但是我们希望不管在什么浏览器、什么屏幕上，用户看到的页面都尽量统一。页面布局兼容适配的问题，主要依赖单位。我们一般写px，那么100px的宽度在1000px的屏幕上是十分之一，但是在200px...
2018-12-21 18:45:38
1084
原创 前端开发常用网站总结
总结一下自己在前端学习过程中常用的一些网站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
382
原创 前端操作Cookie及实现表单记住用户名
目录一、Cookie主要属性二、浏览器对Cookie的大小和个数限制三、Js设置、读取及清除Cookie四、vue-cookies实现cookie操作 写登录页面的时候，为了提升用户体验，加入表单记住用户名功能，这样用户下次登录的时候，前端可以根据之前用户登录过的用户名信息实现自动填充。此功能主要通过cookie实现。这里讨论的是纯前端操作cookie，不涉及服务器。...
2018-12-06 20:15:46
3104
原创 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
4071
原创 vue中实现文件的上传读取及下载
文件的上传利用input标签的type="file"属性，读取用FileReader对象，下载通过创建a标签实现<template> <div class="filediv"> <el-button @click="downloadFile">下载</el-button> <div id="
2018-11-16 17:49:14
5285
原创 谷歌地图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
18506
12
原创 Markdown语法及工具
Markdown是一种标记语言，文件后缀为md。它可以使普通文本具有一定格式，简单易上手。平时我们写博客的时候使用Markdown编辑器可以实现快速排版，CSDN也支持Markdown编辑器。Markdown语法标题语法：[# 文字]表示标题，几个[#]表示几级标题，最多到六级标题，注意[#]后有空格。快捷键：Ctrl+n n代表1-6中的数字，数字注意不要使用右侧小键盘# ...
2018-11-01 17:56:35
318
原创 position,float,flex,grid,table前端页面布局方式分析及选择
页面布局的几种方式1. 定位布局（position） 定位布局分为两种：绝对定位（absolute）和相对定位（relative），但是位置是写死的，很不灵活，一般只用在页面中一些需要固定的小标签上。2. 浮动布局（float） 相对于普通文档流布局，浮动布局会脱离普通文档流，起初是为了解决图文信息中图片与文字冲突的问题，应用float后，就可以轻松实现文字环绕图像的效果。 flo...
2018-10-24 11:14:40
1233
原创 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
1631
转载 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
4568
原创 Ubuntu16.04下mongodb的安装、用户配置、远程连接
一、安装mongodb 安装过程，参考：https://www.cnblogs.com/hupeng1234/p/7000499.html 版本更新可以及时跟踪官网： https://docs.mongodb.com/master/tutorial/install-mongodb-on-ubuntu/ 1.导入包管理系统使用的公钥 sudo apt-k...
2018-09-28 15:59:29
7866
1
原创 微信小程序开发记录总结
微信小程序的简易教程请参考官方文档： https://developers.weixin.qq.com/miniprogram/dev/index.html 这里只记录自己开发中遇到的一些问题及注意事项。 1、前端代码限制大小不超过2M 如果不是很复杂的项目，代码限制在2M内是可以的，在项目中比较占空间的是images文件夹下的图片，我们可以将较大的...
2018-09-18 19:45:35
521
原创 vue-router中的#
vue工程搭建完成后，我们运行在浏览器中打开，会发现url中多了一个#符号， 有#是使用URL hash模式的缘故，#代表网页中的一个位置，右边的字符就是该位置的标识符，从#开始的部分就是URL的锚部分，vue-router默认的是hash模式，如果觉得#在url中影响美观，可以更改为history模式。 history模式不带#号，需要服务器配置。 前端...
2018-09-11 18:12:43
3274
原创 Canvas绘图教程及简单实践
一、前言 最近想尝试用代码画图，最开始考虑的是用css，用css画图的本质就是不断地拼接div，熟悉一些基本的css属性根据需求去设置，有一定的耐心就可以实现。网上有很多优秀的例子，如下面教程中的哆啦A梦。 https://blog.csdn.net/qq_29326717/article/details/73690980 但是觉得这样的方式并不灵活，在查阅资料的过程中深入了...
2018-09-04 18:02:02
9458
原创 canvas画布宽高设定---不能用css设置样式
在写demo练习canvas画图时，新建一个canvas画布，先将宽高写在了css中，没有在canvas标签中设定宽高，得到的效果是错误的，代码及效果如下， 正确的情况是一条45度倾斜从（10,10）到（200,200）的直线，但是显示的效果变形了。查阅资料找到了原因。 <canvas >中有默认宽高300px*150px，如果在<canvas...
2018-08-29 09:41:38
4370
1
原创 CSS实现背景图片固定宽高比自适应调整
<img>标签可以使图片在保持宽高比不变的情况下自动调整。我们讨论的是div的背景图片实现固定宽高比自适应调整的方法。这里的图片不是< img>标签一样通过src引入，而是通过css的background-image: url('路径')实现。 实现背景图片固定宽高比缩放我们采用padding-top:(percentage)来实现，padding-top取...
2018-08-20 18:54:04
79735
1
原创 浏览器offsetWidth、clientWidth、scrollWith等总结
对象尺寸会涉及width和height，我们以width为例，height则是一样的道理。 1、clientWidth：对象可见的宽度，不包括滚动条等边线，会随窗口的显示大小改变。 clientWidth = 元素width + padding 2、scrollWidth：实际内容的宽，不包括边线宽度，会随着对象中内容的多少改变。 无滚动时等于c...
2018-08-18 16:02:32
1768
原创 从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
630
原创 git, github基础入门
作为一名程序员，一定会用到版本管理工具，git作为现在最流行的分布式版本管理工具，还是很有必要了解和掌握的。先上目录。git git与github 关联 github学生用户申请 我们听说过git，还有github，这两个有什么关系呢。git是版本管理工具，github是远程仓库。我们用git实现本地项目版本管理，github是存放项目的远程仓库平台。 学习之前，...
2018-07-31 17:02:33
237
原创 Ubuntu16.04下nginx、ftp、mysql的安装配置及用户创建
在阿里云购买服务器后，需要安装一些最基本的服务：nginx、ftp、mysql，注意在阿里云安全组配置相关端口（80,21,22端口）。 安装过程主要参考其他教程，我在他人教程的基础上记录一些遇到的问题及解决办法。一、Ubuntu中安装配置nginx参考教程：http://blog.csdn.net/u014374031/article/details/73441577...
2018-07-26 09:56:04
712
原创 vue工程打包上线样式错乱问题
项目开发完成后，执行npm run build进行打包，将打包完成的文件部署在服务器。配置好域名解析，就可以实现工程上线。上线后，我们有时候会发现，它怎么和本地调试时长得不一样？长得不一样是样式问题，是打包的时候顺序先后问题，有一些样式没有生效，有一些样式被覆盖了。这时候可以考虑以下几种方法。main.js样式引入顺序问题有时候我们发现组件内的样式没有生效，可能是被第三方组件样式...
2018-07-18 16:39:49
12591
1
转载 javascript数组正态分布排序
javascript数组正态分布排序，有一篇比较好的文章，原文链接如下：https://www.cnblogs.com/webLaoHe/p/5721520.html原博的思想是，对一个数组，先从小到大排序，然后将下标为偶数的放在左侧，为奇数的时候放在右侧，在左右两边的数组增长过程中，当数组长度相等时，对左右两侧数组之和进行比较，因为是按照从小到大排列的，所以正常情况下，右侧会大于左侧，然后将...
2018-07-17 21:04:25
2059
原创 sessionStorage，localStorage，cookie，web前端开发数据存储
在前端开发中需要存储一些数据，在其他页面进行使用。主要涉及到sessionStorage，localStorage，cookie这三种方式。 cookie会在浏览器请求头或者ajax请求头中发送cookie内容，比如我们把用户名密码存储在cookie中，以后每次打开页面，浏览器发送的请求中带有用户密码信息，就可以实现自动登录了。Cookie用来做用户和权限的识别与鉴定。Cookie是...
2018-07-13 14:48:14
560
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人