Hshen

人若无名 便可潜心练剑

0%

Posted on Edited on In

简介：

gulp-liereload是一个监听的文件发生改变时，浏览器会自动加载修改的文件，帮你自动刷新网页，彻底解放F5

1、本地安装：

1
2
3
4
npm install gulp -g
npm install gulp -D  
npm install gulp-less -D
npm install gulp-livereload -D

2、配置gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var gulp = require('gulp'), //引入gulp
    less = require('gulp-less'), //引入less
    livereload = require('gulp-livereload'); //引入livereload
 
gulp.task('less', function() { //建一个less任务
    gulp.src('src/less/*.less') //选择src/less/下面所有已less结尾的文件
        .pipe(less()) //编译less
        .pipe(gulp.dest('src/css')) //编译后传到src/css目录下
        .pipe(livereload()); //加载修改的文件
});
gulp.task('watch', function() { //新建一个watch任务
    livereload.listen();  
    gulp.watch('src/less/**/*.less', ['less']); //监听src/less下的less是否改变，然后执行less任务
    gulp.watch('src/**/*.*', function(event) {
        livereload.changed(event.path); //把修改文件的路径输出到控制台
    });
});

3、安装chrome插件

1
在谷歌商店里面搜索livereload下载并安装

4、执行任务

  • 在当前目录打开命令行输入 gulp watch
  • 然后在浏览器打开你的网页地址，必须以服务的形式打开比如：localhost/xx.html然后激活刚才安装的插件，（鼠标点击一下，里面的圆点变为实心即可）
  • 这时你就可以快乐的写代码了

Posted on Edited on In

1、Ajax + PHP 跨域问题（服务端方案）

1
2
3
4
5
6
7
1、指定域名(http://www.aipay.org),只需要在请求的文件头中添如下代码

	header('Access-Control-Allow-Origin:http://www.aipay.org');

2、允许所有域名都可以访问,只需要在请求的文件头中添如下代码

	header('Access-Control-Allow-Origin:*');

2、Ajax + PHP 跨域问题（通过客户端解决方案）

1
2
3
4
5
6
7
8
9
10
11
12
1.PHP代码：
	<?php
	$cb=$_GET['callback'];
	echo $cb.'({"name":"张三"})';
	?>
2.HTML代码：
	<script src="http://cdn.bootcss.com/jquery/2.1.0-rc1/jquery.js"></script>
	<script>
		$.getJSON('http://www.aipay.org/jsops/jsonp.php?callback=?',function(data){
				console.log(data)
			});
	</script>

3、JSONP解决跨域问题

方案一： 通过getJSON,?后面会生成一个jQuery开头的随机函数名如

1
2
3
4
5
6
7
jQuery210101981845619370246_1500012205578如果我们想自己定义函数名呢看方案二
<script src="http://cdn.bootcss.com/jquery/2.1.0-rc1/jquery.js"></script>
<script>
    $.getJSON('http://sug.music.baidu.com/info/suggestion?      format=json&word=ni&version=2&from=0&callback=?',function(data){
		console.log(data)
	 })
</script>

方案二：

1
2
3
4
5
6
7
8
9
10
11
12
自定义函数名
<script src="http://cdn.bootcss.com/jquery/2.1.0-rc1/jquery.js"></script>
<script>
	$.ajax({
		url:'http://sug.music.baidu.com/info/suggestion?format=json&word=ni&version=2&from=0&callback=?',
		dataType:'jsonp',
		jsonpCallback:'test', //自定义回调的函数名
		success:function(response){
			console.log(response)
		}
	})
</script>

4、用原生方法解决跨域问题

1
2
3
4
5
6
7
8
<script>
	var script = document.createElement('script');
		script.src='http://sug.music.baidu.com/info/suggestion?format=json&word=ni&version=2&from=0&callback=baidu';
		document.body.appendChild(script);
		function baidu(data){
			console.log(data);
		}
</script>