- 博客(65)
- 收藏
- 关注
RSS订阅原创 react -- 项目搭建(Cordova+React)
使用官方脚手架creact-react-app1. 首先通过npm全局安装create-react-appnpm install -g create-react-app2. 然后使用create-react-app命令来创建项目create-react-app <项目名>3. 启动项目npm start删除不必要的文件后梳理需要安装那些依赖1.react-router-dom路由2.axios3.js-cookie4.redux、react-re
2021-01-16 14:12:44
926
原创 canvas生成图片toDataURL报错的原因和解决方法
现象：在使用canvas的toDataURL（）方法时，控制台有时会报错：Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.原因：这是由于之前由drawImage（）向canvas导入的图片跨域而导致的。解决方法：1、在引用图片之前打开跨域资源允许权限（一定要注意顺序）： const image = ne
2021-01-06 18:42:38
4501
原创 vue -- elementUI -- 表单动态验证笔记
表单中有如下配置项，阶梯条件可以动态增加，这里涉及到的验证问题:Element ui 表单验证普通校验(model、rules、ref)个体校验：单独为每个item写rules<el-form-item prop="email" label="邮箱" :rules="[ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message...
2020-12-25 15:57:22
235
原创 vue -- axios拦截器笔记
vue项目中的拦截器axios 是什么 --文档Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRFaxios应用场景.
2020-12-08 17:16:39
195
原创 Linux -- CentOS7 常用命令集合
CentOS7 常用命令集合这两天一直在对CentOS 7.2进行初体验，各种学习命令肿么用，不过其实大多和DOS是一样的，只是命令的表达上可能有点儿不一样，毕竟这些都不是一家出来的嘛~废话不多说，直接上命令和解析！常用命令文件与目录操作命令 解析 cd /home 进入 ‘/home’ 目录 cd .. 返回上一级目录 cd ../.. 返回上两级目录 cd - 返回上次所在目录 cp file1 file2...
2020-12-08 13:51:51
60
原创 vue -- vue.config.js笔记
vue.config.jsvue.config.js是一个可选的配置文件，如果项目的 (和package.json同级的) 根目录中存在这个文件，那么它会被@vue/cli-service自动加载。你也可以使用package.json中的vue字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。"use strict";const path = require("path");const webpack = require("webpack");const defa...
2020-12-07 12:03:02
439
原创 基础 -- H5、C3、ES6的新特性
H5的新特性1.语义化标签有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构 方便其他设备的解析 便于团队开发和维护 1. 语义化标签 header：定义文档的页眉 头部 nav：定义导航链接的部分 footer：定义文档或节的页脚 底部 article：定义文章。 section：定义文档中的节（section、区段） aside：定义其所处内容之外的内容 侧...
2020-12-04 17:07:30
437
原创 基础 -- CSS盒模型
1. 什么是CSS盒模型 元素的外边距（margin）、边框（border）、内边距（padding）、内容（content）就构成了CSS盒模型。2. IE盒模型和W3C盒模型CSS盒模型分为IE盒模型（图2）和W3C盒模型（图3）。其实，IE盒模型是怪异模式（Quirks Mode）下的盒模型，而W3C盒模型是标准模式（Standards Mode）下的盒模型。 IE6及其更高的版本，还有现在所有标准的浏览器都遵循的是W3C盒模型，IE6以下版本的浏览器遵循的是IE盒模型。IE盒...
2020-12-04 17:05:00
66
原创 基础 -- 关于移动端布局dpr
rem淘宝的移动端布局方案 Flexible.DPR(设备像素比)：设备像素比 = 设备像素 / 设备独立像素(CSS像素)。将根据已有的meta标签来设置缩放比例//如果在meta标签中，我们手动配置了flexible，则使用里面的内容//devicePixelRatio这个属性是可以获取到设备的dpr的var devicePixelRatio = window.devicePixelRatio;这里只对IOS端做了处理 dpr = dpr >= 3 ? 3 : ( dpr >
2020-12-04 16:58:10
782
原创 基础 -- flex布局
目录Flex容器的属性项目的属性Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。display: flex行内元素也可以使用 Flex 布局。display: inline-flex;注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。容器的属性flex-direction flex-wrap flex-flo.
2020-12-04 16:55:30
77
原创 基础 -- 什么是BFC？
目录BFC 特性(功能)怎么触发BFC实际遇到的问题：BFC 全称为 块格式化上下文 (Block Formatting Context) 。BFC 特性(功能)使 BFC 内部浮动元素不会到处乱跑； 和浮动元素产生边界。第一个特性情况示例：效果如下：如果这时候我给里面的元素一个 float 或者绝对定位，它就会脱离普通文档流中。效果如下：第二个特性情况示例：怎么触发BFC浮动元素：float 除 none 以外的值。绝对定位元素：po
2020-12-04 16:52:18
74
原创 总结 -- 知识大纲
关于前端学习整理的复习大纲，偏向于理论方面（面试）目录css篇js篇浏览器篇vue篇react篇小程序篇css篇什么是BFC flex布局，flex:1是哪几个属性的缩写 移动端布局dpr这个是什么东西，怎么获取的，rem布局一般页面根元素fontsize是多少？ css盒模型 Css3新特性 （H5、C3、ES6的新特性） 多栏布局方式 水平垂直居中的几种实现方式 清除浮动 伪类和伪元素的区别，::before 和:after 的作用分别是什么 CS.
2020-12-04 16:48:45
101
原创 前端安全 -- 关于token
关于token关于token的相关知识还有很多，知识从前端角度去理解一下token，简单记录下，以后有机会学习更多的话再补充token可以解决哪些问题呢？Token 完全由应用管理，所以它可以避开同源策略 Token 可以避免 CSRF 攻击(http://dwz.cn/7joLzx) Token 可以是无状态的，可以在多个服务间共享token原理1.将荷载payload，以及Header信息进行Base64加密，形成密文payload密文，header密文。2.将形成的密文用句号链
2020-12-04 16:21:41
460
原创 统计访问量时的刷新问题以及接口防刷
目录需求调研js判断键盘是否按了F5刷新js判断浏览器访问，刷新，返回防止其他不正当访问需求需求：统计某个页面访问量，用户状态不限制需要排除非正常进入页面的方式，比如刷新或者其他不正当手段调研用户刷新页面的方式：键盘F5 或者 浏览器的刷新，通过调研发现，两种方式都可以被监听到避免其他不正当手段访问页面：页面参数都不可作为判断依据，可携带唯一标识js判断键盘是否按了F5刷新直接上代码<script> document.onkeyd.
2020-12-04 09:36:34
430
原创 vue -- package.json笔记
package.json是什么什么是Node.js的模块？在Node.js中，模块是一个库或框架，也是一个Node.js项目Node.js醒目遵循模块化的架构，当我们创建了一个Node.js项目，意味着创建了一个模块，这个模块的描述文件就是package.jsonpackage.json定义了项目所需要的各种模块，以及项目的配置信息（名称、版本、许可证等）npm install命令也是根据这个配置文件自动下载项目所需的模块。{ "name": "risk-management", .
2020-12-03 12:53:19
278
原创 服务端部署操作笔记
安装工具安装：finalshell_install （连接服务器的工具）相关文档：http://www.hostbuf.com/?install_fs关于使用：下载finalshell客户端，点击文件夹新建连接，输入IP等信息，就可以进入命令窗口参考链接：https://jingyan.baidu.com/article/11c17a2cfff2eaf447e39d7c.html部署流程中用到的命令需要用到 centos7 命令可以百度搜索，熟悉命令写法常用：1. 进入到...
2020-12-03 09:55:55
166
原创 服务端渲染 -- Nuxt.js笔记
第一次接触服务端渲染，从项目入手开始了解Nuxt.js 是一个基于vue.js的通用应用框架，其核心主要是通过vue-server-renderer模块来实现服务端渲染。 vue-server-renderer是Vue服务端Node.js渲染的一个模块，用来生成HTML内容。nuxt路由机制 pages目录中的任何Vue组件都会基于他们的文件名称和目录结构自动添加到vue-router中。Nuxt可以生成对应的路由配置，在.nuxt/rouer.js可以体现出来 在pages文件夹下新建v.
2020-11-30 15:04:14
197
原创 v-model在checkbox上遇到的问题总结
如图：实现在用户列表中输入信息时，下面的列表随之更新，我遇到的问题是，列表更新后，对应的选中状态没有及时更新。以下为示例代码<template><div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;"><Checkb...
2019-04-24 14:35:08
1461
原创 关于iview之--table中render的使用（嵌套input、select等）
实例：https://www.cnblogs.com/weichen913/p/iview.html解释：https://cn.vuejs.org/v2/guide/render-function.htmliview table使用说明：https://www.iviewui.com/components/table搜索+复选框列表：<FormItem...
2019-03-27 17:21:02
3303
原创 获取 JavaScript 异步函数返回值的笔记
wrong actionfunction asyncfunc() { let ret = 100; setTimeout(() => { return ret; }, 1000) } let ret = asyncfunc() console.log(ret) // undefinedcallbackfunction asyncfunc(callback) { let ret =...
2019-03-26 09:42:29
585
原创 vue -- iview-admin中设置动态路由导航权限
由于后端不能完全返回导航结构的问题，导致导航权限控制需要前端配合处理。流程如下： 前端定义好所有的router，通过后端返回数据进行对比处理显示（此项目中，所要进行的数据处理如下：1.统一前后端对于导航名称的定义 2.不同类型的模块接口项不同）first day：1.在routers.js 文件中定义好初始路径，通过接口请求数据，然后对数据处理在此过程中遇到的问题：1...
2019-03-21 18:13:04
2704
原创 二次封装axios请求(React、Vue皆可使用)
https://blog.csdn.net/frank_come/article/details/80010611
2019-03-21 17:48:11
413
原创 vue iview-admin使用教程之路由配置
功运行iview-admin之后，您就可以开始动手修改它，将自己的内容替换进去了。 首先最基础也是最重要的，应该说是路由配置，路由配置里目前有三种类型的配置，对应三种页面的展示成功运行iview-admin之后，您就可以开始动手修改它，将自己的内容替换进去了。 首先最基础也是最重要的，应该说是路由配置，路由配置里目前有三种类型的配置，对应三种页面的展示类型。直接来看代码:./src/rou...
2019-03-18 14:47:14
2271
原创 Phpstorm 快捷键
1、按住键盘的Alt键,然后鼠标按下左键往下或往上拖动即多个光标同时可输入状态。自动代码 ALT+回车 导入包,自动修正 CTRL+ALT+L 格式化代码 CTRL+ALT+I 自动缩进 CTRL+ALT+O 优化导入的类和包 CTRL+E 最近更改的文件/代码 CTRL+SHIFT+SPACE 切换窗口 CTRL+SPACE空格 代码自动完成，代码提示,一般与输入法冲突 CTR...
2019-01-08 10:15:59
299
原创 IOS手机 微信后退刷新页面
// iosvar isPageHide = false;window.addEventListener('pageshow', function () { if (isPageHide) { window.location.reload(); }});window.addEventListener('pagehide', function () { ...
2018-09-05 16:00:05
1025
原创 关于页面优化细节
Html代码seo优化布局讲解搜索引擎对html代码是非常优化的，所以html的优化是做好推广的第一步。一个符合 seo 规则的代码大体如下界面所示。 1、<!–木庄网络博客–> 这个东西是些页面注释的，可以在这里加我的“木庄网络博客”，但过多关键字可能被搜索引擎惩罚！ 2、<html> 这个是代码开头 结尾时和</html>对应。 3、<...
2018-08-22 11:12:04
752
原创 统计一行字符串中每个字母个数
function f(str){ var arr=str.split(""); /*把传进来的字符串分割成字符串数组*/ var obj={}; for(var i=0;i<arr.length;i++){ var val=arr[i]; /*每个数组元素用val变量接收*/ if(obj[val] && obj[val...
2018-07-05 14:19:37
1633
原创 禁止遮罩层以下屏幕滑动
相信大家在做移动端开发的时候会经常遇到这种场景，需要适时的弹出遮罩（有时为了突出还会在外面加上蒙层），弹窗出现以后，为了追求良好的用户体验，遮罩以下的屏幕是禁止滑动的。在网上找了很多资料，大体就这两种做法，但都有不完善的地方。加上自己的思考和总结，想到一个办法，应该可以解决你的问题。a）大众型一般，大家想到的都是给body或者html添加overflow：hidden样式，当然he
2017-08-03 10:59:59
1713
1
原创 解决iPhone中overflow:scroll;滑动速度慢或者卡的问题
在移动端html中经常出现横向/纵向滚动的效果,但是在iPhone中滚动速度很慢,感觉不流畅,有种卡卡的感觉,但是在安卓设备上没有这种感觉;要解决这个问题很简单:一行代码搞定 -webkit-overflow-scrolling : touch;
2017-06-13 18:37:04
6319
原创 html5移动端：元素拖动/触控touch（js）(jquery)
今天接到一个任务，里面有个小动画是，手指拖动火柴到蜡烛上，蜡烛点燃。现在研究了下元素随手指移动的代码。 Mobile Cookbook#someElm {width: 100px;height: 100px;background:#ccc;position:absolute;}
2017-06-07 10:26:03
4004
原创 H5页面遇到的BUG
最近写了个H5的小页面，遇到一些兼容问题，记录下（主要针对QQ和微信 ），一、.调 用手机相机或相册功能：type="file" name="imgfile" id="camera">一开始是这样写的：type="file"name="imgfile"accept="image/*"capture="camera"id="camera">
2017-04-24 15:41:15
1728
原创 wap红包雨（曲线移动带旋转）
做了好几版本的红包雨，表示很愁人，手机卡顿一直是个大问题，这里整理了一份稍简洁的版本。1.红包从下向上运动，开始位置随机2.曲线运动，碰到边缘时自动转弯，并自带旋转效果3.定义两条线路，不至于看起来太规律注：可以在此基础上更改相应参数，把定值写成随机值可以看起来更没有规律些，点击事件，点击效果自行定义，定时器使用完记得清除。依然调用了页面初始化以及px转rem的两个小J
2016-12-14 15:00:00
1594
2
原创 如何优化你的JS代码
JS代码的执行效率往往直接影响了页面的性能，有的时候，实现同样的功能，不同的JS代码往往在效率上相差很多，有的时候仅仅是由于我们的书写习惯导致的，当然在高级点的浏览器中，它们大多都已经帮我们优化了，但是在中国，万恶的IE6仍然大量的存在，我们不得不去考虑它。对于JS代码的优化，实际上有很多的情况，有些影响是比较小的，而有些是比较严重的，本文中，我把几个我认为影响比较严重的情况列出来，供大家参考。
2016-11-29 15:53:12
354
2
原创 wap页活动倒计时
1.活动倒计时2.商品倒计时（定时更换图片及位置）html:id="timer"> id="t_status">id="goods" style="height: 41.52rem;">css: #goods ul li img,#timer{width:10rem} #t_status li{color:#fff;text-
2016-10-12 14:14:32
774
原创 wap页悬浮导航及定位
1.悬浮导航2.导航定位html:id="content"> id="navbar"> id="nb_title">9折区> class="nb_content" href="javascript:void(0)">厨房神器 class="nb_content" href="javascript:void
2016-10-12 11:13:21
1758
原创 页面定时减少数据
需求：10月份时：10月10号之前页面中显示数据为7653，从10月10号之后，每天定时减少数据，直到月末。10月份之前或之后数据都显示为0HTML>lang="en"> charset='UTF-8' /> 数据更新 #content{position: relative;margin: 0 auto;width: 10rem;}
2016-10-10 16:29:23
256
原创 js中substr,substring,indexOf,lastIndexOf，split 的用法
js中substr,substring,indexOf,lastIndexOf,split等的用法 1.substrsubstr(start,length)表示从start位置开始，截取length长度的字符串。var a="dsfvsgfhgh";alert(a.substr(7,3));弹出值为：hgh 2.substringsubstring(start,
2016-10-10 16:16:54
529
原创 JS_初始化页面属性
!function() {var a = "@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-w
2016-09-28 13:45:45
1309
原创 JS学习笔记——cookie缓存
今天学习了下cookie的用法 ， 简单做了个小封装/*封装cookie*/function setCookie(name,value,expires,path,domain,secure) { var cookieName = encodeURIComponent(name)+'='+encodeURIComponent(value); if(expires i
2016-09-21 11:55:09
1553
原创 许愿树——JS练习
一个简单的许愿树制作，记录一下html> 许愿树 http-equiv="content-type" content="text/html;charset=utf-8"> type="text/css"> *{ margin: 0; padding: 0; } body{ background-image:url(images/
2016-09-21 10:47:07
1726
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人