Hshen

人若无名 便可潜心练剑


  • 首页

  • 归档

  • 分类

  • 标签

Mac Nginx安装&https

发表于 2017-12-17

各种本地一建搭建web服务

发表于 2017-12-17

Python篇

进入到需要启动web服务的目录执行以下命令即可

  • Python3(后面8899是指定的端口可以不加)
1
python3 -m http.server 8899
  • Python2(后面8899是指定的端口可以不加)
1
python -m SimpleHTTPServer 8989

Node篇

Nginx篇

  • 首先安装Homebrew 官网

    1
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • 安装nginx

    1
    brew install nginx
  • 配置nginx.conf

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    # 通过brew info nginx  来查看nginx配置文件的路径,然后编辑nginx.conf文件,我的配置文件如下:

    server {
    listen 80; #监听端口
    server_name git.hackshen.com; #监听地址
    #charset koi8-r;
    #access_log logs/host.access.log main;
    #return 301 https://$server_name$request_uri; # 强制重定向为https
    location / {
    root /Users/hackshen/nginx-web/; # 网站跟目录
    index index.html index.htm; #设置默认页
    #proxy_pass http://git.hackshen.com:7001; #请求代理
    }
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    root html;
    }
    }
  • 启动nginx

    1
    2
    3
    4
    5
    // 启动nginx的时候你可能遇到一下错误
    nginx: [emerg] bind() to 0.0.0.0:443 failed (13: Permission denied)

    //主要是权限的问题,用以下命令启动即可
    sudo nginx
  • nginx常用命令

    1
    2
    nginx -s reload //重启nginx服务
    nginx -s stop //停止nginx服务

Chrome打包自己,已安装的插件

发表于 2017-12-16

Chrome打包自己,已安装的插件

  • 浏览器地址栏输入chrome://extensions/打开安装的扩展程序
  • 进入Chrome插件目录:

    1
    ~/Library/Application Support/Google/Chrome/Default/Extensions/ID,ID换成你插件的ID,比如我电脑上Allow-Control-Allow-Origin这个插件的ID是nlfbmbojpeacfghkpbjhddihlkkiljbi,那我的插件 路径就是`~/Library/Application Support/Google/Chrome/Default/Extensions/nlfbmbojpeacfghkpbjhddihlkkiljbi
  • 在扩展程序界面选择开发者模式,这时候打包扩展程序这个选项才会显示出来

  • 点击打包扩展程序,在扩展程序根目录输入框中填入第二步的路径,然后点击打包扩展程序,这时候会在打包插件的根目录生成一个crx文件,这就是打包好的插件

Browsersync

发表于 2017-07-19 | 分类于 Gulp

简介:

BrowserSync 是一个同步多浏览器页面测试工具。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。

1、5分钟快速入门

1
npm install -g browser-sync

2、启动 BrowserSync

1
一个基本用途是,如果您只希望在对某个css文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具,进入到该项目(目录)下,并运行相应的命令:

静态网站

1
2
3
4
5
6
7
8
如果您想要监听.css文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器,并提供一个URL来查看您的网站。
// --files 路径是相对于运行该命令的项目(目录)
browser-sync start --server --files "css/*.css"
如果您需要监听多个类型的文件,您只需要用逗号隔开。例如我们再加入一个.html文件
// --files 路径是相对于运行该命令的项目(目录)
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。
browser-sync start --server --files "**/*.css, **/*.html"

动态网站

1
2
3
4
5
如果您已经有其他本地服务器环境PHP或类似的,您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。
// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"
在本地创建了一个PHP服务器环境,并通过绑定Browsersync.cn来访问本地服务器,使用以下命令方式,Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn,并监听其css目录下的所有css文件。
browser-sync start --proxy "Browsersync.cn" "css/*.css"

Fiddler

发表于 2017-07-19 | 分类于 Tools

1、What Fiddler

1
2
3
一种Web调试工具。
可以记录所有客户端和服务器的http和https请求。
允许监视、设置断点、修改输入输出数据。

2、Fiddler的工作原理

1
Fiddler 是以代理web服务器的形式工作的,它使用代理地址:127.0.0.1,端口:8888。当Fiddler退出的时候它会自动注销,这样就不会影响别的程序。不过如果Fiddler非正常退出,这时候因为Fiddler没有自动注销,会造成网页无法访问。解决的办法是重新启动下Fiddler。

Gulp-Livereload

发表于 2017-07-19 | 分类于 Gulp

简介:

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然后激活刚才安装的插件,(鼠标点击一下,里面的圆点变为实心即可)
  • 这时你就可以快乐的写代码了

About跨域

发表于 2017-07-18 | 分类于 Javascript

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>
1…34
Hackshen

Hackshen

不造写什么 什么

37 日志
3 分类
5 标签
RSS
GitHub
Links
  • Title
© 2015 - 2019 Hackshen
由 Hexo 强力驱动
主题 - NexT.Pisces