浪花 - 搜索标签前后端联调

前传：浪花 - 根据标签搜索用户-CSDN博客

目录

一、完善后端搜索标签接口

二、前后端搜索标签接口的对接

1. 使用 Axios 发送请求

2. 解决跨域问题

3. Axios 请求传参序列化

4. 接收后端响应数据

5. 处理后端响应数据格式

6. 搜索结果为空的页面展示 

附：解决跨域问题的几种方式

1. 方式一：修改域名和端口

2. 方式二：网关支持（Nginx）——添加允许跨域配置

3. 方式三：后端服务支持

---

一、完善后端搜索标签接口

1. 添加 Controller 层：调用 userService 中之前写好的 searchUsersByTags() 来根据前端传来的标签搜索过滤数据库中的用户

    /**
     * 根据标签搜索用户
     * @param tagNameList 标签列表
     * @return 搜索到的用户列表
     */
    @GetMapping("/search/tags")
    public BaseResponse> searchUsersByTags(@RequestParam(required = false) List tagNameList) {
        if(CollectionUtils.isEmpty(tagNameList)) {
            throw new BusinessException(ErrorCode.PARAMS_ERROR);
        }
        List userList = userService.searchUsersByTags(tagNameList);
        return ResultUtils.success(userList);
    }

2. 启动项目，测试接口

• 使用 Knife4j 接口文档传递参数进行接口调试
• 传递空的标签列表：后端做了请求参数是否为空的校验，参数为空抛出异常，全局异常处理器会进行统一处理

• 传递正确参数：后端根据参数列表（标签）过滤出来的用户列表数据

数据库暂时只有一个用户有标签信息，所以响应数据的用户列表只有一个用户

二、前后端搜索标签接口的对接

参考官方文档：axios中文网|axios API 中文文档 | axios (axios-js.com)

1. 使用 Axios 发送请求

• 整合 Axios

  npm install axios

• 创建 Axios 实例并定义 baseURL：baseURL 作为请求的前缀，后续修改主机和端口号（项目部署上线时）只需要修改 baseURL 即可，不需要修改所有请求地址的前缀

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

• 定义全局请求拦截器和全局响应拦截器

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

•  发送搜索请求：点击搜索按钮进入搜索结果页面时，页面一加载就发送 GET 请求

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

• 引起跨域问题

Access to XMLHttpRequest at 'http://localhost:8080/api/user/search/tags' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

2. 解决跨域问题

• 这里使用后端支持的方式解决跨域问题
• 在 Controller 前添加注解 @CrossOrigin：默认允许所有地址跨域，也可以指定特定地址

 @CrossOrigin(poigins = { "http://user.zhulang-user-center.top" }, methods = { RequestMethod.POST })

• 跨域访问成功✔

•  参数传递出现问题：传递格式有误，tagNameList 多了 []，传到后端无法识别

3. Axios 请求传参序列化

• 安装 qs 库：querystring parser 参数字符串解析器
• 再次发送请求

import {onMounted, ref} from "vue";
import myAxios from "/src/plugins/myAxios.js";
import qs from 'qs';

const { tags } = route.query;

onMounted( () => {
  myAxios.get('/user/search/tags', {
    params: {
      tagNameList: tags,
    },
    paramsSerializer: params => {
      return qs.stringify(params, {indices: false})
    }
  })
  .then(function (response) {
    // handle success
    console.log("/user/search/tags succeed", response);
  })
  .catch(function (error) {
    // handle error
    console.log("/user/search/tags error", error);
  })
  .then(function () {
    // always executed
  });
})

• 请求参数格式正常

http://localhost:8080/api/user/search/tags?tagNameList=%E7%94%B7

• 查看后端是否接收到请求参数：接收成功并响应给前端

4. 接收后端响应数据

• 修改之前的模拟数据（之前的搜索结果页面只放了一个 mockUser 进行测试）
• 接受 GET 请求发送后，后端返回的用户列表存入 userList，在 Card 商品卡片组件中遍历展示
• await 关键字：等 myAxios 请求从后端获取到数据再存到 userListData 中
• 请求成功 .then() 响应函数：返回响应数据，从 response 对象中获取 response.data?.data

5. 处理后端响应数据格式

问题：后端保存的标签 tags 是 JSON 字符串格式，前端把每个字符都解析成了一个数组元素，即每个字符都被解析成了一个标签

• 在前端解析后端响应的 JSON 格式的字符串：将 JSON 转为数组

  if(userListData) {
    userListData.forEach(user => {
      if(user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    });
    userList.value = userListData;
  }

• 查看效果

6. 搜索结果为空的页面展示 

• 引入 Vant 提供的 Empty 组件

参考官方文档：Empty 空状态 - Vant 3 (gitee.io)

• 查看页面效果

附：解决跨域问题的几种方式

什么是跨域？

• 浏览器的安全问题，仅允许向同协议、同域名、同端口的服务器发送请求
• 前后端交互时有一个不同都会引起跨域

1. 方式一：修改域名和端口

• 将前后端服务的端口修改成一样的，比如都是 localhost:8080
• 通过访问路径（前缀）来转发到不同端口，比如访问 /api 就转发到 8080 端口

2. 方式二：网关支持（Nginx）——添加允许跨域配置

• proxy_pass：在配置文件中添加反向代理
• $http_origin:是 Nginx 的内置变量，设置允许所有域名跨域，但是和 * 号有点不同，* 不能和下一句的 Access-Control-Allow-Credentials 一起使用
• Access-Control-Allow-Credentials 设为 true，表示允许前端带上 cookie 请求
• 如果请求是预检请求 OPTIONS，直接返回成功 204

# 跨域配置
location ^~ /api/ {
    proxy_pass http://127.0.0.1:8080/api/;
    add_header 'Access-Control-Allow-Origin' $http_origin;
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers '*';
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

3. 方式三：后端服务支持

• SpringBoot 项目直接在接口首部加上注解 @CrossOrigin 表示允许跨域即可

• 后端支持跨域的好处

  • 灵活管理多个前端的不同跨域限制：如允许域名 A 的 GET 请求跨域，域名 B 的POST 请求跨域

  • 后端统一管理更加安全

  • 前端不用反复写跨域配置