发表于： 2017-02-09 10:00:56
1 1452
今天完成的事情：
完成后角色管理chebox关联输出；
小课堂分享：nginx基本配置和跨域
1.背景介绍
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
所谓同源是指，域名，协议，端口相同。浏览器执行javascript脚本时，会检查这个脚本属于那个页面，如果不是同源页面，就不会被执行
Nginx 是一个高性能的 HTTP 和反向代理服务器，是一款轻量级的 Web 服务器，可以实现负载均衡等功能，国内使用 Nginx 服务器的大型网站主要有新浪、网易、腾讯等。
2.知识剖析
1、静态HTTP服务器：Nginx是一个HTTP服务器，可以将服务器上的静态文件（如HTML、图片）通过HTTP协议展现给客户端
2、反向代理服务器：客户端本来可以直接通过HTTP协议访问某网站应用服务器，网站管理员可以在中间加上一个Nginx，客户端请求Nginx，Nginx请求应用服务器，然后将结果返回给客户端，此时Nginx就是反向代理服务器。
3、负载均衡:当网站访问量非常大，一台服务器已经不够用了。于是将同一个应用部署在多台服务器上，将大量用户的请求分配给多台机器处理。Nginx可以通过反向代理来实现负载均衡。
4、虚拟主机:例如将www.aaa.com和www.bbb.com两个网站部署在同一台服务器上，两个域名解析到同一个IP地址，但是用户通过两个域名却可以打开两个完全不同的网站，互相不影响，就像访问两个服务器一样，所以叫两个虚拟主机。
3.常见问题
1、如何配置Nginx通过域名访问本地网页
2、如何配置实现跨域
3、跨域几种解决方案
4.解决方案
1、如何配置Nginx通过域名访问本地网页
Nginx很强大，通过nginx访问本地网页，只需修改nginx目录下conf/nginx.conf文件中以下代码
server
{
listen 80;#监听端口
server_name localhost;#域名
index index.html index.htm index.php;
root E/web;#站点目录（将html等文件放置在这个文件夹）
}
经过以上修改，重启nginx后通过设置的域名localhost就可以访问本地网页了，如访问文件夹E/web下的tset.html文件，则在地址栏输入：localhost/test.html，或者通过本地ip访问：如： 192.168.1.103/test.html
nginx也可以自己设置域名访问，修改配置中以下代码
server
{
listen 80;#监听端口
server_name local.testpage.com;//修改这里的域名
index index.html index.htm index.php;
root E/web;#站点目录（将html等文件放置在这个文件夹）
}
修改系统hosts文件，windows在C:\Windows\System32\drivers\etc下，文本编辑器打开，修改：
# Localhost (DO NOT REMOVE)
127.0.0.1 localhost
127.0.0.1 local.testpage.com//这里添加设置的域名
重启nginx,访问local.testpage.com就可以访问到E:/web下的index.html
2、nginx跨域可以通过反向代理来实现：
如我想访问地址http://115.29.203.53:10013的数据，那么可以这么配置：在server里添加location
server
{
location /student-ajax/ {
proxy_pass http://115.29.203.53:10013;}
}
重启nginx，要跨域时，url参数填写/student-ajax/代替目标 http://115.29.203.53:10013;
3、常见跨域方式
1、使用iFrame访问另一个域。 然后再从另一个页面读取iFrame的内容。jquery等有一些封装。据说Firefox等可能不支持读取另一个iFrame的内容。
2、服务器代理
3、跨域 XMLHttpRequest 请求
4、通过jsonp跨域：Jsonp原理：首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时，服务器先生成 json 数据。然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）
5.编码实战
1、xhr：XMLHttpRequest
var xhr = new XMLHttpRequest();//建立xhr对象
xhr.onreadystatechange = function(){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {//回调
alert(xhr.statusText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
xhr.open("get", "example.php", false);//请求的类型、请求的URL和是否异步发送
xhr.send(data);//参数
2、JSONP
JSONP的最基本的原理是：动态添加一个script标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。我们在用其他关于src的标签的时候，都可以跨域。所以我们只要动态构造的src标签同样可以做到跨域。
$.getJSON("http://crossdomain.com/services.php?callback=?"，//方式1
function(result) {
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
});
方式2
$.ajax({
url:"http://crossdomain.com/services.php",
dataType:'jsonp',
data:'',
jsonp:'callback',
success:function(result) {
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
},
timeout:3000
});
明天计划的事情：
完成萝卜多，学习小程序
遇到的问题：
由于权限模快是动态生成的，故不能写死在页面上，所有的内容都根据后台查询结果来生成
这里输出数据格式为{模块id：[权限数组]}如：{68：['create','updata','delete','sort']}
每个模块下的子模块单独输出数据，所以给directive输出{68：['create','updata','delete','sort']}，
ng-true-value="'create'" ng-model="selecteValue[0]"> 新增
点击时先输出数据，这个时候会出现数组内元素为false，null等情况，在选择阶段不进行处理，而在提交数据时，将数组内空元素移除得出的结果即为符合条件的结果；
子模块有值父模块则选中
全选子模块，全选模块，全选三个功能：首先，将子模块的输出布尔值作为全选‘功能’的ng-checked条件，其父模块的布尔值为该模块的ng-checked条件，层级嵌套关系；
收获：
如上
返回列表
评论