即将开始的一个项目技术要求是实现前后端分离，且前端部署在Nginx服务器上
而后端部署在jetty服务器上，架构采用vue+spring boot
关键是之前也没接触过分离部署，vue是啥也不清楚！！！
通过几天的摸索，了解了 那么一点，记录下来，系列笔记如下：
与Nginx的第一次亲密接触
Jetty官网下载
与Jetty的第一次亲密接触
Jetty第一次访问没有首页
Jetty修改默认端口
有了前面的积累，可以开始尝试了
你需要先下载好vue.min.js和vue-resource.min.js
first.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--引入vue库 -->
<script src="../js/vue.min.js"></script>
<!--支持ajax的库 -->
<script src="../js/vue-resource.min.js"></script>
<title>分离部署</title>
</head>
<body>
<div id="app">
<div> {{msg}}</div>
</div>
<script>
new Vue({
el:'#app',
data:{msg:""},
created: function() {
this.getData();
},
methods:{
getData: function() {
//jetty服务器所在ip
//vuedemo是项目名
//getDate是Servlet访问路径
var url="http://192.168.71.110:8888/vuedemo/getDate";
//ajax获取数据
this.$http.get(url).then(function(data){
this.msg=data.body;
},function(response){
console.log(response)
})
}
}
});
</script>
</script>
</body>
</html>
后端使用普通Servlet
ProviceDateServlet.java
package com.vuedemo.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ProviceDateServlet")
public class ProviceDateServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//返回给前端的数据
response.getWriter().write("hello vue with ajax");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
Servlet的配置（web.xml）
<servlet>
<servlet-name>ProviceDateServlet</servlet-name>
<servlet-class>com.vuedemo.controller.ProviceDateServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ProviceDateServlet</servlet-name>
<!-- 对外访问路径 -->
<url-pattern>/getDate</url-pattern>
</servlet-mapping>
因为是分离部署，涉及跨域请求，我的处理方式是在后端加一个过滤器，也可以使用jsonp解决
过滤器
package com.vuedemo.filter;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebFilter("/preHandleFilter")
public class preHandleFilter implements Filter {
public preHandleFilter() {
}
public void destroy() {
}
public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) resp;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
response.setHeader("Access-Control-Allow-Credentials","true");
chain.doFilter(request, response);
}
/**
* @see Filter#init(FilterConfig)
*/
public void init(FilterConfig fConfig) throws ServletException {
// TODO Auto-generated method stub
}
}
过滤器的配置（web.xml）
<filter>
<filter-name>preHandleFilter</filter-name>
<filter-class>com.vuedemo.filter.preHandleFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>preHandleFilter</filter-name>
<!-- 暂缺拦截所有接口-->
<url-pattern>/*</url-pattern>
</filter-mapping>
部署：
将前端页面（包括js库）部署到Nginx的html目录下
后端直接打成war包，把war包发布到Jetty服务器的webapp目录下 
然后分别启动两个服务器，访问一下 
这就差不多了，虽然离真实开发环境还很远，开发环境这两个服务器都是在Linux机器上，不过也原理是一样的，慢慢来，等那个项目开始了在总结真实开发过程
