湖南长沙前端开发与培训－通途工作室-前端开发,技术培训,动效研究,求职信息

跨域时遇到的一个顽症总结

作者:admin 日期:2018-02-01

在进行post跨域数据请求时（所有请求均header中带token），碰到一个奇怪的现象，postman测试可以通过，但是用页面进行调用时，总是报错。前后端忙活了大半天时间，最后找出问题。以下是程序员 “灰色头像”写的总结：

总结下今天出现的问题，主要是在跨域CORS的时候出现这个问题

首先需要知道一些容易忽略的知识点，浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

具体看

http://www.ruanyifeng.com/blog/2016/04/cors.html

还有一点需要注意，头部字段只支持

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type

对于自定义的，比如我们头部传的token这个自定义头部会出现下面2种情况

1、axios对于跨域CORS正常会发送2次请求，第一次“预检”，我们这边有token自定义头部字段，虽然我们服务器设置了<add name="Access-Control-Allow-Headers" value="*" />但这个*虽然指所有，但只限制于上面所说的支持的，自定义的不会支持，所以就导致预检就失败，不会发送第二次请求

2、普通的ajax却可以支持，应该是没有做预检处理（这个还没详细了解）

所以主要还是服务器设置<add name="Access-Control-Allow-Headers" value="*" />要改为<add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With,token" />，增加自定义的token，不能使用*这样的配置。这样对于做预检的，有什么自定义头部字段，这里就要额外增加。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 527

我常用的gulpfile.js配置与sublime组件列表

作者:admin 日期:2017-05-15

我自己的gulpfile.js代码：

这样运行：

gulp --u DIRNAME

--u是自定义参数，这样可以快速建立DIRNAME目录的虚拟站点，并启动所有监听服务。当你有很多不同的目录时，这样做很方便。

Javascript代码

var gulp = require('gulp'),
// concat = require('gulp-concat'),
// uglify = require('gulp-uglify'),
// mock = require('n-mock'),
browserSync = require('browser-sync').create(),
// fileinclude = require('gulp-file-include'),
// minifyCss = require('gulp-minify-css'),
sass = require('gulp-sass')
autoprefixer = require('gulp-autoprefixer')
// directoryMap = require("gulp-directory-map")
;
gulp.task('default', function() {
var dir = gulp.env.u;
console.log( "----------------当前处理目录为：/"+ dir +"----------------" );
browserSync.init({
server: {
baseDir: dir,
index: "index.html"
}
});
// 自动刷新
gulp.watch(dir+'/*.html', function() {browserSync.reload(); });
gulp.watch(dir+'/scss/*.scss', function () {
return gulp.src(dir+'/scss/*.scss')
.pipe(autoprefixer({
browsers: [
"last 10 versions",
"last 12 Chrome versions",
"Firefox > 20",
"ie 6-8"],
cascade: true
}))
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(dir+"/css"));
});
gulp.watch(dir+'/css/*.css', function() {browserSync.reload(); });
gulp.watch(dir+'/js/common.js', function() {browserSync.reload(); });
});

我常用的sublime插件：

ColorPicker--色彩选择器

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1568

备案号不在的日子里，学到了不少的新知识

作者:admin 日期:2016-12-29

不知道咋的备案就失效了。好容易恢复了。备案号不在的这段半个月，学到了不少的新知识：

* 完整的学习了git命令行，用命令行管理自己的仓库https://github.com/csdudu，并上传了几个小片段。建立gh-pages分支。以后需要演示的片段，全部都使用这个方法进行演示了。
* 完整的了解了npm包管理的机制，编辑package.json，更多的npm语法。并且通过实战，了解到npm的一些坑：比如node版本的影响、cnpm的优缺点。
* 基本搞懂了Webpack的运行机制，编辑webpack.config.js，常用loader。日常使用webpack-dev-server --inline --content-base .方式进行热更新。
* 基于Webpack搞清了es6的import/require语法，投入使用。用loader方式打包vue工程。
* 基本搞懂vue-router路由系统，开始制作一个SPA的demo，以用于以后PC端的仿FLASH类网站。
* 恶补了许多vue组件的知识。
* vue自定义指令的写法。
* 了解了前端AJAX模拟的一些知识，比如mock server的工具、搭建方式。顺便学习了LeanCloud这种把数据库抽象为API的工具的基本用法。

接下来，要向VUE组件化开发、ES6语法，甚至React native的方向进军。微信小程序有时间也想试试。

Tags: 学习新知识学习新知识

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1649

对父子对象使用手势时不同响应--AlloyFinger--swipe

作者:admin 日期:2016-07-16

具体使用场景是：

1、移动端希望对body使用左右切换手势，

2、内部的某个子div，也要使用左右切换，

3、当对子切换时，希望body 对象不响应。

解决方法：

根据 event.target 不同写不同逻辑，根据这个前提，对父对象的响应代码如下：

Javascript代码

var $t = $(evt.target); //当前点击的target
if ($t.parents(".cols").length == 0) { //上溯查询所有“.cols" 父对象，如果存在，则length>0
.....
}

在github中发issue，是一个解决疑难的途径，虽然官方指南不推荐这么做。但是这种小众插件没提供别的提问途径，只能这么干了。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1426

中小项目常用的前端技术选型方案

作者:admin 日期:2016-07-13

昨晚给一个朋友的项目做的前端选型分析，主要就是在项目启动时，给技术老大们选择一下，前端要选用哪些技术，这样方便招聘人手，搭建前端团队（其实在长沙一般也就是1-2个人）。

点击查看脑图

...废话，写的当然都是我自己熟悉的技术。我只会这么多啦，大牛们请无视。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1305

SVG滤镜的具体用法

作者:admin 日期:2016-07-06

以高斯模糊（Gaussian Blur）为例，

<filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜？

<filter> 标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

XML/HTML代码

<defs xmlns="http://www.w3.org/2000/svg">
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
</filter>
</defs>

几个注意点：

SVG结构代码要使用内联方式引入，否则外联CSS方式似乎不生效
选择符搭配很自由，完全跟HTML一样，比如：svg#g1:hover g#gg{filter:url(#Gaussian_Blur)}
如果是做按钮用途，按钮要设立一个透明的点击区域，否则鼠标只有点到有像素的位置才有效果。模糊效果要注意边缘与svg容器的边距。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1333

搭建了适合自己的前端自动流水线(gulp+browserSync+sass)

作者:admin 日期:2016-06-26

很多前端小菜鸟们，还不知道啥是自动工作流。说白了，就是搭建一套自动机制，让前端码农变成无脑的流水线工人，摆脱琐碎的人工劳动。从此，你在开发环境做的东西，会自动的传送到生产环境....

Tags: gulp gulp

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3617

GSAP官网上的示例动画集，经过学习，我也能制作了

作者:admin 日期:2016-06-16

以下 GSAP官网上的示例动画集，经过学习，我也能制作这些SVG的遮罩、形变、路径类的动画，以设计师的创作提供更大的想象空间。

MorphSVGPlugin Examples

Official MorphSVGPlugin Demo (at the top of this page) by Jack Doyle-----官方示例
SVG Pencil Download by Chris Gannon----铅笔变箭头
"!?" to GreenSock Logo by Chris Gannon----！？图形变成绿袜子小人
Send Email Success/Failure by Chris Gannon---邮件发送成功后变成对钩
Father & Son by Diaco--父亲和儿子的头像变换--烟雾动效
Count Down & Count Up by Chris Gannon-----10的倒计时
Life is Short by Chris Gannon----奶瓶变坟墓
Bow & Arrow by Chris Gannon-----开弓放箭
Simple Polyline Morphing by Jack---平板转五星转方块
Happy/Sad Face (click the face) by Chris Gannon----哭脸和笑脸
Bad Hair Day (click the face) by Chris Gannon-----电风吹把头发吹曲
Flame by Sarah Drasner-----烛火摇曳
Interchangeable Hipster by Sarah Drasner--胡子和眼镜变化
Floating Duckie by Brad Larson----波浪上的鸭子
Power of GSAP (lightening) by Diaco--电灯灯丝发光
Animal Shapes by Carl Schooff-----动物形状变化

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2154

用SVG替代FLASH的三大要素-遮罩、路径动画、形变

作者:admin 日期:2016-06-13

演示文件：http://contactu.cn/2016/svg/test_svg2.html

注意看运动轨迹与“老鹰”的交汇处的表现。

演示文件2：http://contactu.cn/2016/svg/test_svg3.html

主要看形变动画。

我的目标就是用Svg来替代以前的FLASH，那么遮罩、矢量路径动画、形变动画这几大要素，是不可缺的。在这个演示中，可以看到前两者的解决方法。

1、遮罩就用SVG自带的clipPath标签解决。（半透明遮罩没找到办法）

2、矢量路径动画相当于FLASH的引导线动画，我用了GSAP的pathDataToBezier插件将线条变为路径，然后用tweenMax来实现bezier路径运动。

3、至于形变动画，用了GSAP的morphSVG，见演示2的那个音乐线条的变化。

至此，几个FLASH的重点功能，都已经由SVG完美实现。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1523

纯CSS实现的菱形（斜方块）列表

作者:admin 日期:2016-04-07

DEMO地址：http://contactu.cn/2016/grid/

完全CSS3实现，理所当然的用到了transform: rotate效果，但是真没有那么简单。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1222

gulp-changed插件实现文件拷贝--只拷贝变动过的文件

作者:admin 日期:2016-04-07

近日工作需要，每天要将一个目录下编辑过的html文件，拷贝到另一个路径下。用win自带的拷贝功能，太麻烦了，而且每次要去清点哪些文件变动了-----不如搞个小程序，自动实现。

gulp就是实现这一功能的利器，它的安装过程网上很多，就不再赘述。

gulpfile.js工作代码如下：

Javascript代码

var gulp = require('gulp');
// 依赖gulp-changed插件
var changed = require('gulp-changed');
// 起始目录和目标目录，据说只支持相对路径，不过也够用了
var SRC = '*.html';
var DEST = 'dist';
gulp.task('t', function () {
return gulp.src(SRC)
.pipe(changed(DEST))
.pipe(gulp.dest(DEST));
});

编辑完后，在当前目录下的cmd命令行模式下，运行 gulp t，即可完成拷贝过程。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2726

用Rxjs改写的的ajax函数--返回promise对象

作者:admin 日期:2016-03-16

代码如下：

Javascript代码

function aj(url , type="GET" , data="json"){
var final = Rx.Observable.fromPromise(
$.ajax({
type: type,
url: url,
dataType: data
})
.promise()
);
return final;
}
var aaa = aj("shopData/test.json");//把ajax结果赋给aaa,并做下一步处理

这段代码使用了rx.js及jquery3的库，目前为止，似乎还只有jquery支持在ajax返回promise对象，我到mui论坛提了问，答复mui.ajax暂不支持promise对象。可见promise对象还未普遍使用。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2925

实践了手机淘宝团队推荐的淘宝的lib-flexible方法

作者:admin 日期:2016-03-11

改编自淘宝的lib-flexible，页面宽度任意变化。这种方式的优点是适合于团队协作，量出尺寸就可以做绝对定位。请点击：http://contactu.cn/2016/lib-flexible/

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1341

用到和准备学习的一些新工具

作者:admin 日期:2016-02-20

- 装一个json序列化插件--https://chrome.google.com/webstore/category/apps?hl=zh-cn
- 总监推荐使用的github管理工具：sourceTree，官网可直接安装中文版，接下来学习使用
- 总监推荐使用的leanCloud，可用于生成后端API接口数据，已经注册帐号，准备试用
- 2016年刚推出的微信开发者工具---已经安装，但发现做CSS调试真机时，还是手续比较麻烦，因此对于普通的调试，还是用.css?id=***的老方法，只有一些实在需要精确调试，一定要看到CSS代码对应效果的地方，再使用这个。http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1300