巨巨们，你们做 java web 一般怎么前后分离啊？

[phx13ye]

前端都有自己的依赖管理工具了， webapp 目录现在是不是可以不要了， 也不用 maven 或 gradle 管理了
还是说把 package.json 和 webpack 相关配置放在 webapp 这里

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

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

求思路，求项目点星星

[honam]

webapp 貌似不会用到， java 只写后端接口， node 层做中后端，前端页面也自己玩，不会涉及到后台

[liujiangbei]

简单粗暴的 前端所有资源包括 html 都部署到静态集群 页面加载完后再去 ajax 你的配置和接口 页面 load 完后 所有请求都是 ajax 这样你们就没有半点关系了 所有接口都是 resetful API 用 node 做中后端很棒 不过人力资源有限

[fuermosi777]

@liujiangbei 这样的话 SEO 怎么办？

[hantsy]

前后可以分不同的项目进行啊。

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]

后端提供 RESTful
前端不管

[hantsy]

@phx13ye https://github.com/hantsy/angularjs-springmvc-sample ， 我的例子，前后编程完全是分离的，但这个没将其分为两个项目来运行。

[br00k]

自己弄过前端用 angularjs ，后端只用提供接口。静态页面放在 nginx ，接口请求通过 nginx 代理到 java 后端处理。

[phx13ye]

@hantsy 嗯，你前端不用 npm 管理吗？

[phx13ye]

@Septembers 这样假如我做验证，是不是一般用 Oauth 啊， 跳转重定向都是前端负责吗？？

[hantsy]

@phx13ye 用啊

[hantsy]

@phx13ye 我那个只是 Demo 而已，以前项目中 Admin UI ， Website ， Mobile APP (ionic ) 都是基于 gulp 构建的。

[phx13ye]

安利一下 spring 的傻根，我暂时还没弄懂，算不算前后分离啊：
https://github.com/spring-io/sagan
https://github.com/bclozel/spring-resource-handling

[hantsy]

@phx13ye 验证很简单，前端检测一下没有有验证过， Angular 中可以直接使用 intecepter 方式拦截 REST API ，如果没验证（ 401 状态直接跳转登录），直接转登录，登录后记录登录信息（ SPA 程序可以用 LocalStorage 存放）。这个过程用不用 OAuth2 都可以。

一般应用（如果你不做开放平台，不需要开放 API 给第三方程序调用的话）我更倾向使用更简单的方案，比如 Spring Session 这个项目。

[crayhuang]

前端 vue.js ，后端提供 restful API

[phx13ye]

好多收藏，有一种走上人生巅峰的感觉

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

## 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]

广州旅游 APP 求资深 JAVA ，高薪，带团队 邮箱： [email protected]

[liujiangbei]

@fuermosi777 seo 这个问题确实存在，但是并不是所有的业务都需要 seo ， seo 是个相对问题。