前端Nginx后端Jetty分离部署

前端Nginx后端Jetty分离部署

即将开始的一个项目技术要求是实现前后端分离，且前端部署在Nginx服务器上而后端部署在jetty服务器上，架构采用vue+spring boot 关键是之前也没接触过分离部署，vue是啥也不清楚！！！ 通过几天的摸索，了解了 那么一点，记录下来，系列笔记如下： ​​​与Nginx的第一次亲密接触​​​ ​​​Jetty官网下载​​​ ​​​与Jetty的第一次亲密接触​​​ ​​​Jetty第一次访问没有首页 ​​​ ​​​ Jetty修改默认端口 ​​​ 有了前面的积累，可以开始尝试了

前端使用vue.js

你需要先下载好​​vue.min.js​​​和​​vue-resource.min.js​​​

first.html

后端使用普通Servlet

ProviceDateServlet.java

package com.vuedemo.controller;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.javax.servlet.javax.servlet.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）

ProviceDateServlet com.vuedemo.controller.ProviceDateServlet ProviceDateServlet /getDate

因为是分离部署，涉及跨域请求，我的处理方式是在后端加一个过滤器，也可以使用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.javax.servlet.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）

preHandleFilter com.vuedemo.filter.preHandleFilter preHandleFilter /*

部署： 将前端页面（包括js库）部署到Nginx的html目录下

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。