- 博客(74)
- 资源 (11)
- 收藏
- 关注
RSS订阅原创 css3固定背景background-attachment移动端兼容方案
问题背景想做一个固定背景的移动端网站，结果发现「background-attachment」竟然不起作用，具体出现在iOS Safari浏览器上。出现原因查询stackoverflow得知出现问题的原因是background-attachment属性在移动端重绘的成本很高，并且滚动表现也不尽人意，所以在一些移动端是被禁止的。解决方案目前有一个成本较低的hack方案，但是效果对于追求完美者可能稍有缺憾。具体的代码是：body::before { content: ''
2020-12-15 17:48:03
1302
3
原创 echarts间隔饼图实现方法
echarts很好用，然而根据设计图的不同，去查找对应配置项是一件头疼的事，尤其是当配置项里面找不到，只能用一些巧妙的办法去实现的时候，那才是考验智商的时候。
2020-11-26 11:41:09
3744
5
原创 v-charts图表title配置问题
解决在使用 v-charts 时想要对图表的标题进行控制，却发现在配置项里配置了title的相关属性仍不起作用的问题，叫你如何使用v-charts。
2020-11-26 10:29:39
2110
原创 el-scrollbar 组件使用方法
ElementUI的隐藏组件，官方没放出来，但是可以直接在项目中使用。用了也有一两年了，记录一下方便自己copy。重点：1.设置外层容器的高度，2.设置组件样式style="height:100%"<template> <div style="height:600px;"> <el-scrollbar style="height:100%"> ...
2020-03-24 14:17:57
3511
原创 uni-app横竖屏锁定
使用uni-app开发一款ipad app时，需要将ipad锁定为横屏。DCloud官方文档说明的并不详细，如果有漏配的情况的话，会导致线下测试时可以锁定屏幕，项目发布之后则失效，因此这里做一个补充记录，闲言少叙贴代码。需要在如下2处位置进行配置：1.manifest.json文件中{ "name" : "app", "appid" : "__UNI__A5074**", "app-pl...
2020-01-10 10:05:14
5022
5
原创 input光标颜色
移动端开发的时候，想要改变input输入框的光标颜色,但不改变文字颜色经过本人验证，下面方案一行代码即可：<input type="text" /><style>input{ caret-color:#fff;}</style>效果看图：...
2019-09-11 15:00:33
1183
原创 微信小程序（uni-app）url参数传递对象
开发小程序和uni-app时，遇到需要在navigaor组件中传递对象参数到下一个页面的需求，传递对象时如果不JSON.stringify的话，接收到的对象会被转化成[object,object]形式。但是使用字符串化往往还会带来另一个问题，那就是超出规定的长度。那么怎么解决呢？方案如下，两步走：1.使用encodeURIComponent以及JSON.stringify()方法对对象进行字符串...
2019-06-10 10:14:16
18969
7
原创 vue骨架屏
本文主要讲述vue-cli3.0项目中如何使用骨架屏技术提高用户体验。效果图如下：文章是对Yinzhishan的简书内容的实践操作和整理，原文请戳前面链接。具体执行如下四步即可实现（本人亲测有效）：1.添加vue-skeleton-webpack-plugin插件npm install vue-skeleton-webpack-plugin2.在app.vue同级目录下创建骨架模板...
2019-03-22 11:42:38
1103
原创 前端常用正则整理
自用备份，若参考，不负责其正确性！字符验证：1.验证汉字\u4e00-\u9fa5]{0,}$2.英文和数字^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$用法实例：1.正则提取数字var str="/Date(1454487480434)/"; var reg=new RegExp(/[^0-9]$/); consol...
2019-03-20 11:56:32
229
原创 apahce开启gzip压缩功能
我的网站漫岛高高兴兴的上了云，却发现访问速度慢的一匹，明明当初虚拟主机也是1核1G1m带宽，现在服务器也是，不至于说网页加载速度慢了快十倍了。优化，首先想到的是开启apache的gzip压缩功能。Response Headers里面的Content-Encoding:gzip指示是否开启该功能，如果没有，执行以下三步即可：1.打开apache配置文件httpd.conf,找到以下三项，解开注释...
2019-01-04 15:00:03
360
原创 免费ssl证书配置
最近上云，将个人网站漫岛的代码从阿里云的虚拟主机迁移到阿里云的ECS服务器，中间给网站配置ssl证书的时候遇到一些麻烦，参照网上的方法均不起任何作用，可能我这个问题比较个性，自己花了两天时间才解决，首先看下常规的SSL证书配置方案：1.在Apache的安装目录下创建cert目录，并且将下载的全部文件拷贝到cert目录中。如果申请证书时是自己创建的CSR文件，请将对应的私钥文件放到cert目录下并...
2019-01-01 22:04:33
570
10
原创 tp5模型修改器不起作用
使用thinkphp5.0框架开发个人网站漫岛时，在模型中进行数据库的写入时发现修改器并没有起到任何作用，阅读官方文档也没找到对应说明，最后在评论区找到解决方案，因此记录：开始我在模型存储数据时使用的如下方式：public function saveTag(){ $a = new Tag; $a->data(["label"=>["标签1","标签2","标签3"]]); ...
2018-12-25 21:58:28
1796
1
原创 PHP接口返回特定状态码401等
我的个人网站漫岛采用的是前后端分离，当用户进行敏感操作且其token过期时，需要后台接口返回特定的状态码401。然后前端使用axios的拦截器根据响应的状态码将用户导入到对应的页面。后台返回特定状态码我使用的是http_response_code方法，再配合exit，即可返回状态码401并且给予一定的错误信息说明。http_response_code(401);exit(json_encod...
2018-12-25 21:34:26
5803
原创 php@unlink删除文件失败原因
最近做我网站的更换头像功能时，涉及到了PHP的文件上传。我采用的方案是用户先上传到服务器，服务器再上传到阿里云的OSS，中间会有一个把图片临时存储到服务器的过程。于是在使用php的@unlink（删除指定文件）方法时发现了删除失败的问题。开始以为是我的路径名写错了，后来确认这个参数没有错。删除失败的原因是图片仍然被进程占用，所以想要成功执行@unlink操作，我们最好手动释放下文件对象，避免因...
2018-12-17 13:19:44
8445
1
原创 PHP防止用户名重复（MD.13）
正在为了创建漫岛而学习PHP，今天在做引导用户填写自己昵称的时候，需要保证用户昵称不会重复，讲诉如何避免用户昵称的重复即是此文的目的。具体步骤如下：1.在创建数据库表的时候，对用户昵称nickname（下文均以此名代表用户昵称字段）设置字段唯一性。这样后续写入相同nickname操作时，就会写入失败。CREATE TABLE `t_user` (`Id` int(11) NOT NULL A...
2018-12-12 18:11:17
1441
2
原创 tp5框架自动写入时间戳（MD:12）
最近学习PHP，希望能给自己给自己的网站漫岛做后端相关的开发。在使用thinkphp5框架操作数据库时，希望能自动写入时间戳来记录我的更新时间，需求简单，对于初学者来说有几个点我还是得记录一下：1.首先要确认的一点是，时间戳的自动写入仅针对用模型操作数据库，如果使用数据库的更新或者写入方法则无效。2.可以在数据库配置文件中database.php中全局开启自动写入时间戳功能，默认是关闭的。当...
2018-12-08 16:51:50
4333
3
原创 javascript和PHP中的相等运算符
最近PHP编码时使用到==比较符，发现和JS有一些差别，做记录防止混肴。先看PHP中的例子：$a=0;$b='0str';$c='1str';if($a==$b){ echo true;}else{ echo false;}if($a==$c){ echo true;}else{ echo false;}输出结果分别是true和false，原因是PHP将字符串转...
2018-12-07 17:22:35
323
原创 PHP json_encode中文被编码的解决方案
php给前端返回json数据时，其中的中文被编码了。虽然前端在network的preview中查看浏览器自动转码后的结果，影响不是很大，但是看到原始的response数据还是有点不舒服，于是网上找到了一个解决方案，一行代码。简单记录一下：$response=array('Status'=>false,'Message'=>'缺少用户名','Data'=>null);ret...
2018-11-10 19:53:46
2340
原创 Vue项目打包优化（MD.10）
好久不见，最近很忙，大家依然可以关注漫岛的最新动态。今天要说的是Vue项目的一些打包技巧，都是我在漫岛使用过的，因为我们没钱买高配置服务器（目前还是个测试服务器），所以就只能把优化做到更优了。随着项目开发，上线包体积的增大，尤其是我们的vendor.js,这会让项目首屏加载缓慢，白屏好一阵子，这显然是很loser的。于是我便进行了以下几步操作，成功的优化了vendor.js的体积，以前1m多的...
2018-11-02 11:44:43
608
原创 将html2canvas生成的canvas保存为图片
想要做网页截图保存或者是将页面的某些html元素保存为图片的话，常用的插件就是html2canvas。插件的使用本身很简单，这里说的是如何将其生成的canvas保存为图片。直接看代码，简洁靠谱我还亲自帮你实践了。let oCard = document.querySelector("#bsCard");//要转换成canvas的元素let oContainer = document.quer...
2018-10-18 10:25:12
6190
2
原创 实战解决小程序图片加载问题
相较于web端或者H5开发，小程序本身在性能上弱很多（但用户体验上要好）。以前开发时服务器性能过剩在那里帮你撑着脸面，你对自己的代码质量和编程习惯心里没数，小程序就是一面镜子。废话少说，要解决的问题是，小程序加载图片闪烁，渐渐出现，出现的很慢等等效果不尽人意的体验。如果你的小程序本身只用加载很少的图片，那么其实问题不大。如果是像购物APP那样或者是一款有图片列表的应用，那么以下方案肯定能帮到你...
2018-10-11 11:51:05
42298
13
原创 小程序setData方法修改data中对象或数组的属性值
开发微信小程序时，使用setData修改data中数据时，针对各种情况的解决方案如下：//示例data：data:{ code:'9527', baseInfo:{ name:'夏尔', age:19 }, family:[{ name:'大头爸爸', age:'46' },{ name:'美丽妈妈', age:'45' }]}一、直接修改data的某...
2018-09-25 11:39:34
21866
13
原创 vue-router新窗口打开页面
vue、vue-Router是用来做单页面应用的，有的时候需要打开新页面用户体验才好，比如（点击图片进入放大模式）：这时候打开新页面浏览这个订单详情很明显比较合适（杠精走开）。总结了一下，Vue项目使用Vue-router打开新页面的时候一共有如下几种方法，分别适用不同的场景：1.在template中，直接给它加上target='_blank'属性即可，反正最终它也会被解释为一个a标签&amp;...
2018-09-21 15:36:29
12684
原创 阻止iview-modal确定时关闭
开发后台管理项目时使用了iview框架，实现模态窗的时候用到其Modal 对话框组件，复制粘贴官方代码时。遇到如下问题：只要点击确定按钮，modal永远会关闭，return都阻止不了其关闭。我本来在里面做了一个数据提交操作，在数据提交前要判定数据是否合法，不合法就提示用户修改，但我发现在@on-ok=&quot;ok&quot;的ok方法里写return没有任何卵用，只要点击了确定按钮，modal总是会关闭。&amp;...
2018-09-21 14:32:39
14344
18
原创 Vue项目兼容IE9（MD.9）
问题：Vue项目用了axios,vuex以及ES6语法等一系列看起来很高大上的新技术后，在IE9-11浏览器直接白屏。 原因：IE对ES6语法支持极差，IE也不支持promise，vuex,axios都依赖promise。 解决方案： 1.首先解决es6语法不兼容的问题，用bable转换成es5（不是es2015），执行安装命令 cnpm install --save-dev ba...
2018-09-07 20:14:30
4242
5
原创 Vue路由守卫-404页面（MD.8）
简单讲一下Vue项目前端路由（Vue-Router）的意外处理，即当用户输入了网站不存在的地址，跳转到指定页面，不至于让页面显示一片空白，用户一脸懵逼，然后吐槽一波你的网站！ 废话不多说，在你的router配置脚本（.js文件）的最后面加上一行配置项，代码如下：{ path: '*', name: 'Error', component: ErrorPage,}p...
2018-08-31 10:01:25
1257
原创 自己动手写一个Vue插件（MD.7）
造不完的轮子，封不完的插件。网上什么都有，但是有那找的功夫，自己都写完了。漫岛仍然在向前推进，只是你们看不到最新的更新内容了，剩余的不会展示，等以后上线了再去看把。讲一下如何写一个的Vue插件，（以一个极其简单的loading效果为例），会了这个其他不愁。 第一步，在components目录建一个Loader.vue文件用来当做我们的loading模版,简单写了下(我用的less)。&amp;l...
2018-08-20 23:50:52
477
原创 Vue项目打包时背景图片资源路径错误的解决方案
使用项目构建工具webpack或者vue-cli时，打包好的项目放服务器上背景图片都显示不出来，控制台提示资源404 not found,解决办法如下：在build文件目录下找到utils.js文件 找到如下代码，添加一行代码：publicPath: '../../'即可解决。 如果不行的话… 你来找我啊，放马来啊！！！Q：939524080。 漫岛最新进度：4xiaer.co...
2018-08-15 23:05:29
457
原创 Less循环等进阶用法（MD.6）
有几天没更新我的漫岛系列了哈，设定十一月底完成漫岛的第一版，时间挺紧迫的，另外，大家能看到的漫岛的部分页面，就截止到个人中心了，其余的先不给看了。 由于知识杂又多，记不过来，像less稍微复杂一点的语法，每次我还得查一查文档，所以把平时遇到的比较不常规的用法记录下来，随时查阅。言归正传：Less的循环实现功能：一个循环搞定多个div的背景图片。 说明：希望你能领会何时用循环以及...
2018-08-14 13:23:35
3725
原创 纯CSS实现对话气泡(MD.5)
在漫岛的注册成功引导页，有一个小姐姐讲述一些网站的规则的效果，需要一个对话的气泡效果，用纯CSS实现了一下，效果如下：
2018-07-24 10:50:02
2075
2
原创 Vue设置全局变量(MD.4)
2018-07-19，22：37，今天完善了漫岛（了解漫岛）的登录注册流程，但这一块暂时不上线。 调取接口的时候发现在请求的url上要重复写接口前缀“http://xxx.com”，当然不能每次都这么写，如果以后接口换成https，或者前缀改了，一个个的改起来那估计得头疼死，于是引出了今天的博客主题： Vue项目如何引入全局变量方法很多，我就以我的代码为例吧，就两步： 1.在com...
2018-07-19 23:07:01
16161
2
原创 Vue动态设置title(MD.3)
2018-07-18夜晚22：30，漫岛已经写好一些页面了，目前在等待登录注册的接口。 项目中需要给不同的页面设置title，首先查了一下网上有没有相关插件，哎，有！爽、名称叫做vue-wechat-title，使用方法非常简单，具体如下：1.先安装插件，命令行执行cnpm install vue-wechat-title --save即可安装。2.引用插件，在main.js中，首先...
2018-07-18 22:57:30
2148
原创 H5上传文件进度条
首先推荐一波我的网站 iscoser.com。 关于原生标签上传文件的方法，之前有两篇都说到了：分别是H5标签上传文件（一）和H5标签上传文件（二、样式美化）。 这一篇我们要讲的是上传文件时的上传进度监听（进度条的实现）依赖jQuery ！。jQuery默认使用的XMLHttpRequest对象（下文简称xhr）是内部生成的，要知道上传进度我们就要监听其xhr对象的upload属性的变化。...
2018-07-11 16:09:42
4087
原创 vue+webpack+node快速构建项目（MD.1）
关于漫岛的前后端配合上，采用的是rest API方式，是完全分离的。 考虑到这个项目第一期的页面不会很多，加上第一期要做的是高效率的开发，自然要利用前端的自动化工具。 开始直接用Vue-cli3.0，Vue官方出品脚手架，基于webpack但是做了很多自己的封装和插件选择，这里不推荐对配置完全懵逼的小伙伴使用，要求node版本大于8.0。 值得一提的是vue-cli3.0提供了一个可视化UI...
2018-07-08 18:44:09
510
原创 漫岛创业故事（序）
2018年，第二个本命年，单身，在北京，我是夏尔！今年夏天，我的跟二次元相关的一个创业项目得以启动。团队伙伴全部是出于共同的爱好无偿加入帮忙，他们来自天南地北，大部分是通过技术博客和我的宣传页面iscoser.com认识的。在这个信息大爆炸的时代，我的大脑已经接受了过量的信息。我是一个能看到很多细节同时吸收信息能力很强的人，但我的智力水平很一般，于是时常感觉自己大脑内存容量有限。当我学习新的知...
2018-07-08 17:24:12
699
3
原创 优美的Swiper-Scale轮播效果
2018年06月26日，项目中又遇到一个不常规的轮播图，Swiper一直用的很顺手，于是继续用Swiper。 之前我也记录过一个比较有趣的轮播，传送门。效果图如下：实际效果相当流畅，图片只能5M，录图效果只能如此，完整DEMO可以在这里下载 实现的原理是合理利用CSS3的transform: scale();，再配合Swiper的配置项centeredSlides和slidesPerV...
2018-06-28 11:38:50
4567
9
原创 H5标签input上传文件（二）
上一篇介绍了如何用H5 input标签的type=file属性来实现图片上传，点这里查看。今天这篇的目的就是对这个按钮进行的样式美化以及我们可能遇到的相关问题 首先看看原生标签的样子（chrome浏览器）： 关键的问题是你没法对原生标签的默认样式进行修改，所以我们必须做一些额外的工作来美化它。 这里给出的思路是，页面上写一个假的上传按钮，样式你自己发挥。然后我们把原生标签通过定位（p...
2018-06-27 17:33:17
5300
4
原创 二、关于alert
alert作为查看代码输出的常用方法（主要是后端[手动狗头]和初学者）， 这里跟大家聊点关于它的细节。1.消息框折行alert("折行" + "\n" + "了吗？");输出结果如下图： 2.禁止弹窗 alert是window自带的一个方法，要禁止它就是对它进行改写。alert("后面的弹窗能弹出来吗？");window.alert=fu
2018-05-10 16:12:55
764
原创 MySQL常用操作命备忘录
在我学习MySQL的时候，老是有忘性极好的小伙伴连基本命令都能忘记怎么写。可视化界面用太爽导致遗忘，别总是ctrlC+ctrlV。今天我就来把常用的mysql命令来写写，方便以后忘记的时候查一下。1.新建”user”表：create table user( id int unsigned auto_increment, name varchar(10) not null default...
2018-04-13 17:50:27
230
不错的swiper-scale轮播效果
2018-06-28
CSS3实现漂亮的卡片翻转效果
2018-04-08
有趣的Swiper轮播图
2018-03-23
jquery+Vue分页器
2018-03-12
基于Vue的星级评分功能
2018-02-23
CSS3实现圆形进度条
2018-01-23
lazyload使用案例及DEMO
2018-01-11
基于Vue的输入框智能提示组件
2017-12-29
swiper自定义分页器使用示例
2017-10-16
Vue-devTools解压缩版
2017-08-26
Jquery星级评分
2017-08-24
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人