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

这篇具有很好参考价值的文章主要介绍了浪花 - 搜索标签前后端联调。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前传:浪花 - 根据标签搜索用户-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<List<User>> searchUsersByTags(@RequestParam(required = false) List<String> tagNameList) {
        if(CollectionUtils.isEmpty(tagNameList)) {
            throw new BusinessException(ErrorCode.PARAMS_ERROR);
        }
        List<User> userList = userService.searchUsersByTags(tagNameList);
        return ResultUtils.success(userList);
    }

2. 启动项目,测试接口

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

浪花 - 搜索标签前后端联调,浪花 - 前端,浪花 - 后端,java,前端,javascript,vue,intellij idea

  • 传递正确参数:后端根据参数列表(标签)过滤出来的用户列表数据

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

浪花 - 搜索标签前后端联调,浪花 - 前端,浪花 - 后端,java,前端,javascript,vue,intellij idea

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

参考官方文档: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.

浪花 - 搜索标签前后端联调,浪花 - 前端,浪花 - 后端,java,前端,javascript,vue,intellij idea

2. 解决跨域问题

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

浪花 - 搜索标签前后端联调,浪花 - 前端,浪花 - 后端,java,前端,javascript,vue,intellij idea

 @CrossOrigin(poigins = { "http://user.zhulang-user-center.top" }, methods = { RequestMethod.POST })
  • 跨域访问成功✔

浪花 - 搜索标签前后端联调,浪花 - 前端,浪花 - 后端,java,前端,javascript,vue,intellij idea

浪花 - 搜索标签前后端联调,浪花 - 前端,浪花 - 后端,java,前端,javascript,vue,intellij idea

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

浪花 - 搜索标签前后端联调,浪花 - 前端,浪花 - 后端,java,前端,javascript,vue,intellij idea

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
  • 查看后端是否接收到请求参数:接收成功并响应给前端

浪花 - 搜索标签前后端联调,浪花 - 前端,浪花 - 后端,java,前端,javascript,vue,intellij idea

浪花 - 搜索标签前后端联调,浪花 - 前端,浪花 - 后端,java,前端,javascript,vue,intellij idea

4. 接收后端响应数据

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

import { useRoute } from'vue-router'
import {onMounted, ref} from "vue";
import myAxios from "/src/plugins/myAxios.js";
import qs from 'qs';
import type {UserType} from "@/models/user";


const route = useRoute();
const { tags } = route.query;
const userList = ref([]);

onMounted( async () => {
  const userListData: UserType[] = await 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);
      return response.data?.data;
    })
    .catch(function (error) {
      console.log("/user/search/tags error", error);
    })
  if(userListData) {
    userList.value = userListData;// userListData 存在则赋给 userList 进行展示
  }
})

</script>

浪花 - 搜索标签前后端联调,浪花 - 前端,浪花 - 后端,java,前端,javascript,vue,intellij idea

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

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

浪花 - 搜索标签前后端联调,浪花 - 前端,浪花 - 后端,java,前端,javascript,vue,intellij idea
  • 在前端解析后端响应的 JSON 格式的字符串:将 JSON 转为数组
  if(userListData) {
    userListData.forEach(user => {
      if(user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    });
    userList.value = userListData;
  }
  • 查看效果

浪花 - 搜索标签前后端联调,浪花 - 前端,浪花 - 后端,java,前端,javascript,vue,intellij idea

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

  • 引入 Vant 提供的 Empty 组件

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

  <van-empty image="search" description="暂无符合要求的用户" />
  • 查看页面效果

浪花 - 搜索标签前后端联调,浪花 - 前端,浪花 - 后端,java,前端,javascript,vue,intellij idea

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

什么是跨域?

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

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 请求跨域

    • 后端统一管理更加安全

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

  • 或者编写允许跨域的配置文件(推荐!)文章来源地址https://www.toymoban.com/news/detail-798848.html

@Configuration
public class CORSConfig implements WebMvcConfigurer {
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许cookie
                .allowCredentials(true)
                // 设置允许的请求方式
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                // 设置允许的header属性
                .allowedHeaders("*")
                // 跨域允许时间
                .maxAge(3600);
    }
}

到了这里,关于浪花 - 搜索标签前后端联调的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 后端SpringBoot+前端Vue前后端分离的项目(二)

    前言:完成一个列表,实现表头的切换,字段的筛选,排序,分页功能。 目录 一、数据库表的设计 二、后端实现 环境配置 model层  mapper层 service层  service层单元测试 controller层 三、前端实现 interface接口 接口api层 主要代码 效果展示 引入mybatis-plus依赖 MerchandiseDetailsService文

    2024年02月09日
    浏览(54)
  • 解决前后端分离项目后端设置响应头前端无法获取

    在开发前后端分离项目中出现后端设置响应头,前端一直无法获取等问题。 后端设置响应头代码如下 在浏览器中我们是可以看到设置的响应头 Content-Disposition 属性,但是在前端接收到的响应信息中却看不到我们设置的 Content-Disposition 属性。 原来在前后端分离的项目中除了需

    2024年02月04日
    浏览(61)
  • 【测试联调】如何在前后端测试联调时优雅的构造异常场景

    目录 背景 使用iptables实现 利用iptables丢弃某ip数据包 使用 -L 列出所有规则 IP 连通性 通信 测试 插入一条规则,丢弃此ip 的所有协议请求 列出所有规则 测试 丢弃规则内的IP 连通性 清除 规则列表的 限制 模拟ip进行丢包50%的处理。 mysql proxy 代理 proxy代码 直接使用pymysql 测试

    2024年02月14日
    浏览(40)
  • vue框架前后端联调流程

    什么是前后端联调 定义 在我们开发的过程中,发送请求的ajax数据都不是后端返回的真数据,而是我们自己通过接口mock模拟的假数据,当前端的代码编写完成后,后端的接口也写好后,我们就需要把mock数据换点,尝试使用后端提供的数据,进行一个前后端的调试,我们会把

    2024年02月06日
    浏览(34)
  • 前后台协议联调&拦截器

    目标 能够完成前后台功能整合开发 掌握拦截器的编写 创建一个Web的Maven项目 pom.xml添加SSM整合所需jar包 创建对应的配置类 编写Controller、Service接口、Service实现类、Dao接口和模型类 resources下提供jdbc.properties配置文件 内容参考前面的项目或者直接使用前面的项目进行本节内容

    2023年04月14日
    浏览(45)
  • 阿里云对象存储服务OSS前后联调

    申明: 未经许可,禁止以任何形式转载,若要引用,请标注链接地址 全文共计11577字,阅读大概需要3分钟 在分布式集群系统中,前端通过浏览器上传图片给服务器存储时存在分库分表的情况,这就涉及到 文件存储 的情况,在高并发的情况下,考虑到服务器的性能和利用率

    2023年04月09日
    浏览(38)
  • SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接

    系列文章: SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计 SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接 SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接 SpringBoot + Vue前后端分离项目实战 || 四:用户管理功能实现 SpringBoot + Vue前后

    2024年02月12日
    浏览(66)
  • Thinkphp5.0 安装使用Workerman实现websocket前后端通信,后端主动推送消息到前端

    安装使用Workerman实现websocket前后端通信,后端主动推送消息到前端,实现后端有数据更新时,前端页面自动更新数据。 我使用的是基于Thinkphp5.0的ThinkCMF5.0。 安装: 启动: public目录下放置的server.php文件,注意里面的配置必须按照你的Worker控制器来: woker控制器: 后端主动推

    2024年02月16日
    浏览(51)
  • 【云原生】前后端分离项目下 如何优雅的联调程序?

    Apifox 是 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台,定位 Postman + Swagger + Mock + JMeter 。通过一套系统、一份数据,解决多个系统之间的数据同步问题。只要定义好 API 文档,API 调试、API 数据 Mock、API 自动化测试就可以直接使用,无需再次定义;API 文档和 API

    2023年04月09日
    浏览(32)
  • 前端uniapp+后端springboot 详细教程《实现微信小程序授权登录》(附完整前后端项目demo)

    微信小程序官方登录流程图: 参考微信小程序登录官网文档 1、前端技术栈 1.1、uniapp 使用uniapp构建一套代码多端使用的前端框架项目 1.2、前端封装工具 dateUtil.js: 功能: 1. 时间日期格式化 2. 传入日期是否和当前日期的比较 完整代码: requestUtil.js: 功能: 1. 定义公共的

    2024年02月14日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包