各种本地一建搭建web服务
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 nginxnginx常用命令
1
2nginx -s reload //重启nginx服务
nginx -s stop //停止nginx服务
Chrome打包自己,已安装的插件
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
简介:
BrowserSync 是一个同步多浏览器页面测试工具。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。
1、5分钟快速入门
1 | npm install -g browser-sync |
2、启动 BrowserSync
1 | 一个基本用途是,如果您只希望在对某个css文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具,进入到该项目(目录)下,并运行相应的命令: |
静态网站
1 | 如果您想要监听.css文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器,并提供一个URL来查看您的网站。 |
动态网站
1 | 如果您已经有其他本地服务器环境PHP或类似的,您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。 |
Fiddler
1、What Fiddler
1 | 一种Web调试工具。 |
2、Fiddler的工作原理
1 | Fiddler 是以代理web服务器的形式工作的,它使用代理地址:127.0.0.1,端口:8888。当Fiddler退出的时候它会自动注销,这样就不会影响别的程序。不过如果Fiddler非正常退出,这时候因为Fiddler没有自动注销,会造成网页无法访问。解决的办法是重新启动下Fiddler。 |
Gulp-Livereload
简介:
gulp-liereload是一个监听的文件发生改变时,浏览器会自动加载修改的文件,帮你自动刷新网页,彻底解放F5
1、本地安装:
1 | npm install gulp -g |
2、配置gulpfile.js
1 | var gulp = require('gulp'), //引入gulp |
3、安装chrome插件
1 | 在谷歌商店里面搜索livereload下载并安装 |
4、执行任务
- 在当前目录打开命令行输入 gulp watch
- 然后在浏览器打开你的网页地址,必须以服务的形式打开比如:localhost/xx.html然后激活刚才安装的插件,(鼠标点击一下,里面的圆点变为实心即可)
- 这时你就可以快乐的写代码了
About跨域
1、Ajax + PHP 跨域问题(服务端方案)
1 | 1、指定域名(http://www.aipay.org),只需要在请求的文件头中添如下代码 |
2、Ajax + PHP 跨域问题(通过客户端解决方案)
1 | 1.PHP代码: |
3、JSONP解决跨域问题
方案一: 通过getJSON,?后面会生成一个jQuery开头的随机函数名如1
2
3
4
5
6
7jQuery210101981845619370246_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 | <script> |