Servlet+Vue项目前后端交互问题汇总

ゝ一世哀愁。 2023-09-25 22:12 185阅读 0赞

《Vue3实战》篇章整体栏目  
—————————————————————————————  
[【第一章】node.js/npm安装、配置][node.js_npm]  
[【第二章】创建项目和目录结构][Link 1]  
[【第三章】基础语法][Link 2]  
[【第四章】条件语句、循环语句][Link 3]  
[【第五章】计算、监听属性][Link 4]  
[【第六章】样式绑定和事件处理][Link 5]  
[【第七章】表单][Link 6]  
[【第八章】自定义指令][Link 7]  
[【第九章】路由][Link 8]  
[【第十章】Element plus指南][Element plus]

—————————————————————————————

#### 目录 ####

*  前言：raw\_json格式请求，Servlet、axios、postman分别如何处理？Servlet-Vue 如何解决跨域问题？
 *  一、raw\_json格式请求，Servlet、axios、postman分别如何处理
 *   *  1.1、使用Vue axios发送raw\_json格式的请求：
     *  1.2、后端Servlet接收数据：以流的方式接收请求参数
     *   *  1.2.1、工具类
         *  1.2.2、Servlet调用
     *  1.3、POSTMAN测试
 *  二、配置跨域
 *   *  2.1、配置后端跨域
     *   *  2.1.1、具体的Servlet方法里设置
     *  2.1.2、配置全局过滤器
     *  2.1.2.1、新建过滤器类
     *   *   *  2.1.2.2、web.xml配置过滤器
     *  2.2、配置前端跨域
     *   *  2.2.1、进入vue项目，找到vue.config.js文件

—————————————————————————————

## 前言：raw\_json格式请求，Servlet、axios、postman分别如何处理？Servlet-Vue 如何解决跨域问题？ ##

## 一、raw\_json格式请求，Servlet、axios、postman分别如何处理 ##

### 1.1、使用Vue axios发送raw\_json格式的请求： ###

axios.post('/air/point/saveOrUpdate', JSON.stringify(params), {
        
        transformRequest: [
          function(data) {
        
            return data
          }
        ],
        headers: {
        
          'Content-Type': 'application/json'
        }
      })

### 1.2、后端Servlet接收数据：以流的方式接收请求参数 ###

#### 1.2.1、工具类 ####

import javax.servlet.http.HttpServletRequest;
    import java.io.BufferedReader;
    import java.io.IOException;
    import java.io.InputStreamReader;
    
    public class HttpUtil {
        
    
        public static String getRawJson(HttpServletRequest request) {
        
            BufferedReader br = null;
            try {
        
                br = new BufferedReader(new InputStreamReader(request.getInputStream(), "UTF-8"));
            } catch (IOException e) {
        
                e.printStackTrace();
                return "";
            }
            String line = null;
            StringBuilder sb = new StringBuilder();
            try {
        
                while ((line = br.readLine()) != null) {
        
                    sb.append(line);
                }
                br.close();
            } catch (IOException e) {
        
                e.printStackTrace();
                return "";
            }
            return sb.toString();
        }
    }

#### 1.2.2、Servlet调用 ####

@Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        String method = request.getParameter("method");
        System.out.println(method);
    
        String json = HttpUtil.getRawJson(request);
        System.out.println(json);
    }

### 1.3、POSTMAN测试 ###

![在这里插入图片描述][80a790163ad54b24b6ebda4d9a63ae41.png]

## 二、配置跨域 ##

### 2.1、配置后端跨域 ###

#### 2.1.1、具体的Servlet方法里设置 ####

//解决跨域问题
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
    response.setHeader("Access-Control-Allow-Credentials", "true");
    //返回数据时指定编码格式:utf-8
    response.setContentType("application/json;charset=utf-8");
    response.setCharacterEncoding("UTF-8");

### 2.1.2、配置全局过滤器 ###

### 2.1.2.1、新建过滤器类 ###

import javax.servlet.*;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    /**
     * 使用Servlet过滤器
     * 解决跨域和中文编码问题
     */
    
    public class CorsFilter implements Filter {
        
    
        @Override
        public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        
            HttpServletResponse response = (HttpServletResponse) res;
            //解决跨域问题
            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
            response.setHeader("Access-Control-Allow-Credentials", "true");
            //返回数据时指定编码格式:utf-8
            response.setContentType("application/json;charset=utf-8");
            response.setCharacterEncoding("UTF-8");
            chain.doFilter(req, res);
        }
    
        public void init(FilterConfig filterConfig) {
        }
    
        public void destroy() {
        }
    }

##### 2.1.2.2、web.xml配置过滤器 #####

<?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
             version="4.0">
        <filter>
            <filter-name>cors</filter-name>
            <filter-class>com.jagger.cms_javaweb.config.CorsFilter</filter-class>
        </filter>
        <filter-mapping>
            <filter-name>cors</filter-name>
            <url-pattern>/*</url-pattern>
        </filter-mapping>
    </web-app>

### 2.2、配置前端跨域 ###

#### 2.2.1、进入vue项目，找到vue.config.js文件 ####

**如果不存在vue.config.js文件就新建，并设置如下内容**

const {
         defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
        
      transpileDependencies: true ,
      lintOnSave: false,
      devServer: {
        
        proxy: {
        
          '^/api': {
        
            target: 'http://localhost:9000/',//接口的前缀
            ws:true,//代理websocked
            changeOrigin:true,//虚拟的站点需要更管origin
            pathRewrite:{
        
              '^/api':''//重写路径
            }
          }
        }
      }
    })

**备注：axios请求照常编写就行**  
**备注：raw对应springboot请求注解【@RequestBody】**

[node.js_npm]: https://blog.csdn.net/s445320/article/details/130107403
[Link 1]: https://blog.csdn.net/s445320/article/details/130108162
[Link 2]: https://blog.csdn.net/s445320/article/details/130198834
[Link 3]: https://blog.csdn.net/s445320/article/details/130200350
[Link 4]: https://blog.csdn.net/s445320/article/details/130200783
[Link 5]: https://blog.csdn.net/s445320/article/details/130200903
[Link 6]: https://blog.csdn.net/s445320/article/details/130213404
[Link 7]: https://blog.csdn.net/s445320/article/details/130213662
[Link 8]: https://blog.csdn.net/s445320/article/details/130110029
[Element plus]: https://blog.csdn.net/s445320/article/details/130197081
[80a790163ad54b24b6ebda4d9a63ae41.png]: https://img-blog.csdnimg.cn/80a790163ad54b24b6ebda4d9a63ae41.png