巨巨们,你们做 java web 一般怎么前后分离啊?

2015-09-10 00:19:58 +08:00
 phx13ye
前端都有自己的依赖管理工具了, webapp 目录现在是不是可以不要了, 也不用 maven 或 gradle 管理了
还是说把 package.json 和 webpack 相关配置放在 webapp 这里

比如我用 spring mvc ,是不是只用 `RestController` 撸 `Restful API` 就可以了, ViewResolver 都不要配了。

这些 API 的 RequestMapping 一般都是相对 ApplicationContext 的路径,前端 ajax 请求怎么指定 url 比较好啊

求思路,求项目点星星
12923 次点击
所在节点    Java
17 条回复
honam
2015-09-10 00:42:15 +08:00
webapp 貌似不会用到, java 只写后端接口, node 层做中后端,前端页面也自己玩,不会涉及到后台
liujiangbei
2015-09-10 01:48:04 +08:00
简单粗暴的 前端所有资源包括 html 都部署到静态集群 页面加载完后再去 ajax 你的配置和接口 页面 load 完后 所有请求都是 ajax 这样你们就没有半点关系了 所有接口都是 resetful API 用 node 做中后端很棒 不过人力资源有限
fuermosi777
2015-09-10 02:25:26 +08:00
@liujiangbei 这样的话 SEO 怎么办?
hantsy
2015-09-10 08:05:27 +08:00
前后可以分不同的项目进行啊。

1. 前端页面可以是纯静态页面,用 NodeJS 或者 Ngnix , Apache 运行。这是使用 SPA 模式的理想情况。
2. 后端提供 REST 服务,可以是 PHP , NODE , Java ,.NET 等,或者混合( API gateway 或者 Proxy 将不同服务继续拆分,这可能向现在最热的 MicroService 发展了)。

跨域问题可以用前端服务器代理解决(或者后端服务器上使用 CORS Filter ,或者 Spring 4.2 内置的方案),对于 Web 应用,代理方式比较简单。在前端项目中使用服务器代理,同样可以使用相对路径调用 REST API ,如果 /api/users,实际上指向的是后端 API 路径, http://localhost:9000/api/users.
Septembers
2015-09-10 08:09:13 +08:00
后端提供 RESTful
前端不管
hantsy
2015-09-10 08:12:15 +08:00
@phx13ye https://github.com/hantsy/angularjs-springmvc-sample , 我的例子,前后编程完全是分离的,但这个没将其分为两个项目来运行。
br00k
2015-09-10 09:16:52 +08:00
自己弄过前端用 angularjs ,后端只用提供接口。静态页面放在 nginx ,接口请求通过 nginx 代理到 java 后端处理。
phx13ye
2015-09-10 09:45:00 +08:00
@hantsy 嗯,你前端不用 npm 管理吗?
phx13ye
2015-09-10 09:53:27 +08:00
@Septembers 这样假如我做验证,是不是一般用 Oauth 啊, 跳转重定向都是前端负责吗??
hantsy
2015-09-10 10:00:20 +08:00
@phx13ye 用啊
hantsy
2015-09-10 10:01:53 +08:00
@phx13ye 我那个只是 Demo 而已,以前项目中 Admin UI , Website , Mobile APP (ionic ) 都是基于 gulp 构建的。
phx13ye
2015-09-10 10:15:27 +08:00
安利一下 spring 的傻根,我暂时还没弄懂,算不算前后分离啊:
https://github.com/spring-io/sagan
https://github.com/bclozel/spring-resource-handling
hantsy
2015-09-10 10:18:25 +08:00
@phx13ye 验证很简单,前端检测一下没有有验证过, Angular 中可以直接使用 intecepter 方式拦截 REST API ,如果没验证( 401 状态直接跳转登录),直接转登录,登录后记录登录信息( SPA 程序可以用 LocalStorage 存放)。这个过程用不用 OAuth2 都可以。

一般应用(如果你不做开放平台,不需要开放 API 给第三方程序调用的话)我更倾向使用更简单的方案,比如 Spring Session 这个项目。
crayhuang
2015-09-10 10:31:54 +08:00
前端 vue.js ,后端提供 restful API
phx13ye
2015-09-11 00:56:38 +08:00
好多收藏,有一种走上人生巅峰的感觉

马克一下我目前的做法, 希望也对你们有帮助

## java 相关
tomcat 在 8080 端口跑 ApplicationContext 为`api`的 webapp
就是我访问 localhost:8080/api/welcome 可以定位到 @RequestMapping ("/welcome") 的一个 controller 的方法

## webpack 相关
前端相关的东西用 webpack-dev-server 跑
webpack-dev-server 启动命令 `npm run dev` 和相关参数
### package.json 文件
"scripts": {
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base ./build"
}

# webpack.config.js 文件
module.exports = {
// webpack 相关配置 。。。
devServer: {
port: 9090,
proxy: {
"/api/*": "http://localhost:8080"
}
}
}

每一次修改经过 webpack 编译后在`http://localhost:9090/webpack-dev-server/` 上浏览器会自动刷新

## 发请求
$.ajax ({
method: "GET",
url: "/api/welcome"
})
.done (function ( msg ) {
console.log (msg );
});

## see also
http://christianalfoni.github.io/react-webpack-cookbook/Automatic-browser-refresh.html
http://webpack.github.io/docs/webpack-dev-server.html
http://stackoverflow.com/questions/26785268/webpack-dev-server-with-bypass-proxy
ecyao
2015-09-11 19:39:53 +08:00
广州旅游 APP 求资深 JAVA ,高薪,带团队 邮箱: hr@dwfei.com
liujiangbei
2015-09-30 14:44:57 +08:00
@fuermosi777 seo 这个问题确实存在,但是并不是所有的业务都需要 seo , seo 是个相对问题。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/219509

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX