项目第一次用AngularJS的ajax与beego调试心得
2016-10-30 22:26
323 查看
最近才开始的项目,听说Angular(以下简称ag)不错,然后前端的同学就果断的去尝试了,使用1.58的版本,据说是除了2.0最新的有维护的稳定版本,果断开发。。。。。
做了没多久问题就来了,CSS和H5都没问题,可使用到ajax与服务器通讯的时候问题就来了,服务器我们用的是beego的框架,因为现在很火很稳定的框架,astaxie大神写的,各种支持(小拍一下,O(∩_∩)O~)!提示需要做跨域处理,服务器无法接收到API的请求,get,post都不行,可前两天才接入的beego自带的API文档自动生成模块,里面的swagger却可以顺利的外网访问,难道真的是ag的问题?前端同学找了很久解决的办法,很多人都说需要在头上加一些什么东西,几乎全是一样的回复,中国特色来回转。。。。
可是我在想,如果这样不是很蛋疼了,仔细查看了beego的文档,自动API生成模块的代码,发现了之前一直不觉得很有用的地方,就是静态文件处理,swagger有段代码
查看说明后知道这是设置静态文件的目录,swagger下的index.html文件会被自动当主页调用,所以可以打开,后来设置了ag的目录,发现依然不行。。。。
后来仔细想了下,之前搭建Apache和nginx的经历,php的文件都会放到一个www的文件夹下,或者要设置专门的目录,这是为什么呢?想到这里突然明白了,之前放到别的文件夹下配置服务器的时候单独开了端口,确实跨域,于是果断的把web的文件放到了beego的项目目录中,然后在main开始出把web的文件夹设置为静态路径,
设置好之后再打开主页localhost:8080/anguler此时就能打开主页了,跨域的问题也就不存在了。。。。
$http.get('http://localhost:8080/v1/regist/check/', {
params: {email: "123@qq.com",}
}).success(function(data, status, headers, config) {
//加载成功之后做一些事
alert(data);
}).error(function(data, status, headers, config) {
//处理错误
alert(JSON.stringify(data));
});
使用ajax访问,接收到返回值,到此解决这一问题,至于在头里加代码,没试过,php试过,直接加载文件头可以,GO没试过所以就想到用Apache的解决方法放到服务器目录中。。。。
这是一种方法吧,可是这个问题就是遇到有的项目可能会要求分开放,那就蛋疼了,需要大家自己去解决了,不过我觉得丢在一起似乎没什么太不妥毕竟现在图片和很多大文件都存CDN或者云端,不用保存在本地,作为GO的支持者之一(再吹下O(∩_∩)O~),“七牛云存储”,很好用,速度快,接入方便,推荐大家尝试!
项目遇到的问题随记。
____________________________________________________________________________________________________________________________________
补记:
后来开发考虑到本地调试问题,还是需要跨域,据说Nginx可以直接是这,但是如果不适用Nginx肿么办呢,后来想到PHP的头文件
header("Access-Control-Allow-Origin:*"); //允许任何访问(包括ajax跨域)
测试了在beego里添加消息头也是可以的
this是controller的指针在每个消息返回前加上消息头即可,如果嫌麻烦可以封装起来然后直接用this调用一个函数完事,就像this.ServeJSON()
做了没多久问题就来了,CSS和H5都没问题,可使用到ajax与服务器通讯的时候问题就来了,服务器我们用的是beego的框架,因为现在很火很稳定的框架,astaxie大神写的,各种支持(小拍一下,O(∩_∩)O~)!提示需要做跨域处理,服务器无法接收到API的请求,get,post都不行,可前两天才接入的beego自带的API文档自动生成模块,里面的swagger却可以顺利的外网访问,难道真的是ag的问题?前端同学找了很久解决的办法,很多人都说需要在头上加一些什么东西,几乎全是一样的回复,中国特色来回转。。。。
可是我在想,如果这样不是很蛋疼了,仔细查看了beego的文档,自动API生成模块的代码,发现了之前一直不觉得很有用的地方,就是静态文件处理,swagger有段代码
beego.BConfig.WebConfig.StaticDir["/swagger"] = "swagger"
查看说明后知道这是设置静态文件的目录,swagger下的index.html文件会被自动当主页调用,所以可以打开,后来设置了ag的目录,发现依然不行。。。。
后来仔细想了下,之前搭建Apache和nginx的经历,php的文件都会放到一个www的文件夹下,或者要设置专门的目录,这是为什么呢?想到这里突然明白了,之前放到别的文件夹下配置服务器的时候单独开了端口,确实跨域,于是果断的把web的文件放到了beego的项目目录中,然后在main开始出把web的文件夹设置为静态路径,
beego.BConfig.WebConfig.StaticDir["/angular"] = "angular"
设置好之后再打开主页localhost:8080/anguler此时就能打开主页了,跨域的问题也就不存在了。。。。
$http.get('http://localhost:8080/v1/regist/check/', {
params: {email: "123@qq.com",}
}).success(function(data, status, headers, config) {
//加载成功之后做一些事
alert(data);
}).error(function(data, status, headers, config) {
//处理错误
alert(JSON.stringify(data));
});
使用ajax访问,接收到返回值,到此解决这一问题,至于在头里加代码,没试过,php试过,直接加载文件头可以,GO没试过所以就想到用Apache的解决方法放到服务器目录中。。。。
这是一种方法吧,可是这个问题就是遇到有的项目可能会要求分开放,那就蛋疼了,需要大家自己去解决了,不过我觉得丢在一起似乎没什么太不妥毕竟现在图片和很多大文件都存CDN或者云端,不用保存在本地,作为GO的支持者之一(再吹下O(∩_∩)O~),“七牛云存储”,很好用,速度快,接入方便,推荐大家尝试!
项目遇到的问题随记。
____________________________________________________________________________________________________________________________________
补记:
后来开发考虑到本地调试问题,还是需要跨域,据说Nginx可以直接是这,但是如果不适用Nginx肿么办呢,后来想到PHP的头文件
header("Access-Control-Allow-Origin:*"); //允许任何访问(包括ajax跨域)
测试了在beego里添加消息头也是可以的
this.Ctx.ResponseWriter.Header().Set("Access-Control-Allow-Origin", "*") //允许访问所有域
this.Ctx.ResponseWriter.Header().Add("Access-Control-Allow-Headers", "Content-Type") //header的类型
this.Ctx.ResponseWriter.Header().Set("content-type", "application/json") //返回数据格式是json
this是controller的指针在每个消息返回前加上消息头即可,如果嫌麻烦可以封装起来然后直接用this调用一个函数完事,就像this.ServeJSON()
相关文章推荐
- 项目第一次用AngularJS的ajax与beego调试心得(续)
- 调试Shoppingbook项目心得
- 第一次项目发布的心得体会
- 第一次在项目中用AJAX就受到严重打击 UpdatePanel+Timer
- 第一次项目发布的心得体会
- 关于项目感叹号及报错调试的一点心得
- 关于项目感叹号及报错调试的一点心得
- 调试AjaxControlTookit项目排错记录
- 第一次做项目的小心得
- 调试Business项目心得
- JavaWeb 项目调试心得
- Django项目调试心得
- chrome手机模式调试AngularJs项目时,点击不了select里面的内容
- JBoss+Eclipse+MyEclipse联合调试WEB项目(一)
- 我的第一次调试1721+1ENET用ADSL上网的代码
- 软件项目心得[purecoffee]
- 第一次做项目的滋味
- 项目调试时候,出现其中用到的一个组件“访问被拒绝”的解决方法(摘自博客堂)
- 记录一点项目心得...
- [个人整理]如何解决VS.NET无法调试项目问题?