试图做前后端分离项目遇到的困难

change_solider 发布于 2014/07/29 18:24
阅读 2K+
收藏 0

先分享两个前后端分离的技术文章。

Web应用的组件化开发

http://blog.xufei.gitpress.org/~posts/2013-11-20-Web%E5%BA%94%E7%94%A8%E7%9A%84%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91%EF%BC%88%E4%B8%80%EF%BC%89.md

Web 研发模式演变

https://github.com/lifesinger/lifesinger.github.com/issues/184

我想做到,写一套接口,iso,android,web前端都可以使用,做到前后端松耦合,职责分清,前端做出的html后,后端不需要做任何修改,即可运行。

实现思路:web项目使用 java se ,hibernate,spring,spring mvc,mysql,

前端采用html,css,js,jquery,ajax, 前端网页使用ajax异步访问接口,得到json 数据后,jquery执行dom操作。

今天遇到的问题:正在开发的网页在浏览器中使用ajax访问已经部署好的接口时,总是回调error方法

错误原因:jquery,ajax 跨域访问,正在开发的网页并没有放到项目中和项目一起部署 ,这样,正在开发的网页与ajax访问的接口不在同一个域下。

解决方案:

一,可调试方式(web前端)
服务端做修改,支持跨域, 浏览器端也需要修改为跨域操作,jquery.ajax 和 getjson 都支持跨域操作(jsonp)优点就是前端开发人员可以随时调试,

条件:接口已经部署好了,但前端网页还在开发中,可以随时从接口中调数据。
具体方案:http://www.cnblogs.com/yqskj/archive/2013/06/12/3133247.html


二,不可调试方式(web前端)
服务端不用修改,浏览器端正常使用ajax访问网络 ,需要必须将html和项目放一起,只能 项目部署后 运行才可以调试,项目没有部署,则不能调试。 (这种方案,就直接否了吧,还是没有做到前后端分离,总不能让前端也配置一个java环境,来调试吧。


三,偷奸取巧的方式(自己想出来的,有待大神指教)
1.浏览器端,服务器端不用支持跨域操作,浏览器端正常使用ajax访问接口,部署好的接口不用变,并且是可以调试的。
2.浏览器,服务器本身也不用支持跨域操作,因为将来前端网页就会放在项目的webapp目录下,一起部署,那就不会出现跨域问题。
3.将来开发出来的前端网页肯定会放到项目的webapp下的,而且全是静态文件(css,js,html,图片,声音,视频),不会有jsp文件 。(与服务器交互完全使用ajax)
4.依据第3点,服务器端可以做一个文件上传,下载,浏览,删除的小系统,文件类型是html文件,css,js等等静态文件
5.前端使用正常的ajax方式,开发出一个网页后,利用文件上传接口,上传到服务器上, 进行测试,这样,就不会出现跨域问题了。

6.唯一需要做的是:服务端增加文件系统,操作webapp下的目录(能够上传目录,上传文件,修改文件名,修改目录 名。。等等吧),

学长提的前端版本问题:假设服务器,前端有v1.v2两个版本,两个版本接口一样,那该如何做,

思路:

webapp目录
release目录(当前存放v1,进入运营状态)
http://xxx/release/index.html

v1目录

v2目录(正在开发中,假设完成后,将v2内容全部放到release文件夹中,清空release目录)

v3目录(下一个版本)


各位帮忙看看,还有什么纰漏没?  做出这么一个webapp 目录下的文件小系统,将来别的全js方案的项目都可以采用。






加载中
0
进击的程序员
进击的程序员
做过类似的  用的 jsonp
change_solider
change_solider
嗯,看了下别人的帖子,大部分都是jsonp
0
RAY_STONE
RAY_STONE

个人觉得还是改成用jsonp吧,这样适合所有终端,spring mvc的controller本来就支持rest的,如果搞上传测试的话,何必要弄文件系统,直接ftp不是更方便么?如果实在不想改原有的后台,那么可以再做个简易的后台来进行前后端的数据对接

0
黄勇
黄勇

AJAX 跨域问题的目前可以使用 JSONP 或 CORS 两种方案,可以看这篇:

http://my.oschina.net/huangyong/blog/294324

后端使用 CXF 发布 REST 服务,前端通过 AJAX 调用 REST 服务并获取 JSON 数据,最后交给 jQuery 进行 DOM 渲染。

0
lkclkc888
lkclkc888
还是用JSONP吧, 方便后期系统动静分离。   
change_solider
change_solider
嗯,
0
乌龟壳
乌龟壳

为啥要分离?目的是什么?

change_solider
change_solider
学习。。。前后分离以后,一套接口,可以供多个前端使用,职责分得也更清了。
0
苏大泉
苏大泉
跨域问题 解决办法很多 
change_solider
change_solider
有位网友说,在项目中搭一个FTP服务,上传,下载,静态文件(html,js,css) 有没有跨域问题了。。
0
十一月不远
十一月不远
ngnix 或者 apache 做个反向代理,jsonp 也很不错,但个人觉得,如非必须可不用,增加了项目的复杂度,根据项目需要确定吧
返回顶部
顶部