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

前传:浪花 - 根据标签搜索用户-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 接口文档传递参数进行接口调试
  • 传递空的标签列表:后端做了请求参数是否为空的校验,参数为空抛出异常,全局异常处理器会进行统一处理

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

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

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

参考官方文档: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 sentreturn config;}, function (error) {// Do something with request errorreturn Promise.reject(error);});// Add a response interceptor
axios.interceptors.response.use(function (response) {// Do something with response datareturn response;}, function (error) {// Do something with response errorreturn Promise.reject(error);});
  •  发送搜索请求:点击搜索按钮进入搜索结果页面时,页面一加载就发送 GET 请求
axios.get('/user?ID=12345').then(function (response) {// handle successconsole.log(response);}).catch(function (error) {// handle errorconsole.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 successconsole.log("/user/search/tags succeed", response);}).catch(function (error) {// handle errorconsole.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
<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 successconsole.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>

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)

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

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

什么是跨域?

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

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

    • 后端统一管理更加安全

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/629618.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

区域入侵/区域人数统计AI边缘计算智能分析网关V4如何修改IP地址?

智能分析网关V4是TSINGSEE青犀推出的一款AI边缘计算智能硬件&#xff0c;硬件采用BM1684芯片&#xff0c;集成高性能8核ARM A53&#xff0c;主频高达2.3GHz&#xff0c;INT8峰值算力高达17.6Tops&#xff0c;FB32高精度算力达到2.2T&#xff0c;硬件内置了近40种AI算法模型&…

C++ 后端面试 - 题目汇总

文章目录 &#x1f37a; 非技术问题&#x1f37b; 基本问题&#x1f942; 请自我介绍&#xff1f;&#x1f942; 你有什么问题需要问我的&#xff1f; &#x1f37b; 加班薪资&#x1f942; 你对加班有什么看法&#xff1f;&#x1f942; 你的薪资期望是多少&#xff1f;【待回…

如何避免知识付费小程序平台的陷阱?搭建平台的最佳实践

随着知识经济的兴起&#xff0c;知识付费已经成为一种趋势。越来越多的人开始将自己的知识和技能进行变现&#xff0c;而知识付费小程序平台则成为了一个重要的渠道。然而&#xff0c;市面上的知识付费小程序平台琳琅满目&#xff0c;其中不乏一些不良平台&#xff0c;让老实人…

SpringBoot ES 聚合后多字段加减乘除

SpringBoot ES 聚合后多字段加减乘除 在SpringData Elasticsearch中&#xff0c;聚合统计的原理主要依赖于Elasticsearch本身的聚合框架。Elasticsearch提供了强大的聚合功能&#xff0c;使得你可以对文档进行各种计算和统计&#xff0c;从而得到有关数据集的有用信息。 Elast…

Cloudflare cdn 基本使用

个人版免费试用&#xff0c;一个邮箱账号只能缓存一个网站cdn。 地址&#xff1a;cloudflare.com 创建站点 在网站创建站点&#xff0c;填上你的域名 点击进入网站 缓存全局配置 可清除缓存&#xff0c;设置浏览器缓存时间 我设置了always online,防止服务器经常不稳定 缓…

第二回 史大郎夜走华阴县 鲁提辖拳打镇关西- Linux新手快速入门

却说九纹龙史进跟朱武等三人约好了中秋赏月&#xff0c;却不料这天突然失火&#xff0c;房子都被一把火烧光。于是史进只好夜里跟着朱武等人一起离开华阴县。朱武劝他到少华山一起干&#xff0c;史进说&#xff1a;我的师傅王进&#xff0c;说要到延安府做事&#xff0c;我去投…

AI in Cybersecurity

人工智能在网络安全领域扮演着重要角色。它的应用和技术为网络安全提供了更有效的工具和方法&#xff0c;以提高网络的安全性&#xff0c;并保护网络免受恶意活动的影响。 人工智能在威胁检测和威胁情报收集方面发挥着关键作用。通过分析大量的网络数据和日志&#xff0c;人工智…

处理表格(数字里有,代码不认为他是数字的情况)

表格在CSV2024_actual 需求&#xff0c;把每个月的cost相加&#xff0c;最后算出全年度cost&#xff0c;把每个Q的cost相加&#xff0c;q1q2q3q4&#xff0c;得出q的总和 遇到问题&#xff0c;一开始算出来都是0&#xff0c;后面发现数字之间有千位分隔符&#xff0c;所以代码…

04--MySQL函数的使用

1、SQL函数的使用 当我们学习编程语言的时候&#xff0c;经常会遇到函数。函数的好处是&#xff0c;它可以把我们经常使用的代码封装起来&#xff0c;需要的时候直接调用即可。这样既提高了编写代码的效率&#xff0c;又提高了可维护性。在SQL中函数主要要对数据进行处理&…

Linux实操学习

Linux常用操作 一、帮助命令1. man1.1 基本语法1.2 快捷键1.3 注意事项 2. help2.1 基本语法2.2 注意事项 3. 常用快捷键 二、文件目录类1. 常规操作1.1 pwd1.2 cd1.3 ls 2. 文件夹操作2.1 mkdir2.2 rmdir 3. 文件操作3.1 touch3.2 cp3.3 rm3.4 mv 4. 文件查看4.1 cat4.2 more4…

Math.ceil + Math.max 找出数组最大值并向上取整十位数或者整百位数

1、声明数组 let arr [125, 52, 85, 526, 658, 738] 2、找出数组最大值并向上取整十位数 console.log(Math.ceil(Math.max(...arr) / 10) * 10); // 740 console.log(Math.ceil(Math.max(...arr) / 50) * 50); // 750 3、找出数组最大值并向上取整百位数 console.log(Math…

Hive聚合函数详细讲解

Hive中的聚合函数用于在数据上进行计算并返回单个值,这些值通常是基于一组行或列的汇总。以下是您提到的聚合函数的详细讲解,包括案例和使用注意事项: SUM() 功能:计算某列的总和。语法:SUM(column)案例:SELECT SUM(salary) FROM employees;注意事项:通常用于数值型列。…

常用界面设计组件 —— 窗体(QT)

二、常用界面设计组件2.1 窗体2.1.1 设置窗体位置、大小及背景颜色2.1.2 设置窗体标题2.1.3 多窗体调用 二、常用界面设计组件 组件是GUI的基本元素&#xff0c;也称为UI控件。它接受来自底层平台的不同用户事件&#xff0c;如鼠标和键盘事件&#xff08;以及其它事件&#xf…

Mybatis 41_构造器映射及使用注解完成构造器映射

41_构造器映射 构造器映射&#xff1a;XML Mapper项目0503构造器映射 ConstructorArgs注解项目0504构造器映射_注解 构造器映射&#xff1a; 构造器映射能控制MyBatis调用指定、有参数的构造器来创建结果集要映射的Java对象 XML Mapper 在<resultMap…/>元素内添加<…

AI扩展手写数字识别应用(二)

理解代码 输入处理 在新应用的代码部分&#xff0c;和我们在手写数字识别课程介绍的代码比起来&#xff0c;差别最大的地方就在于如何处理输入。在上个案例中&#xff0c;我们只需要简单地将正方形区域中的图像格式调整一下&#xff0c;即可用作MNIST模型的输入。而在本文的案…

企业网站建站源码系统:Thinkphp5内核企业网站建站模板源码 带完整的安装代码包以及搭建教程

随着互联网的快速发展&#xff0c;企业对于网站的需求日益增强。为了满足这一市场需求&#xff0c;小编给大家分享一款基于Thinkphp5内核的企业网站建站源码系统。该系统旨在为企业提供一套功能强大、易于使用的网站建设解决方案&#xff0c;帮助企业快速搭建自己的官方网站&am…

STC8H8K蓝牙智能巡线小车——3.按键开关状态获取

电路分析 引脚为P37开关未按下时&#xff0c;P37是高电平开关按下时&#xff0c;GND导通&#xff0c;P37是低电平 编程思路 Driver目录中添加KEY.h文件&#xff0c;应包含引脚定义、开关GPIO实例化函数、开关状态获取函数以及当按下和未按下时执行不同的函数&#xff08;函数…

监督学习 - 梯度提升回归(Gradient Boosting Regression)

什么是机器学习 梯度提升回归&#xff08;Gradient Boosting Regression&#xff09;是一种集成学习方法&#xff0c;用于解决回归问题。它通过迭代地训练一系列弱学习器&#xff08;通常是决策树&#xff09;来逐步提升模型的性能。梯度提升回归的基本思想是通过拟合前一轮模…

Linux中的numactl命令使用详解

假设我们想控制线程如何被分配到处理器核心&#xff0c;或者选择我们想分配数据的位置&#xff0c;那么numactl命令就适合此类任务。在这篇文章中&#xff0c;我们讨论了如何使用numactl命令执行此类操作。 目录&#xff1a; 介绍语法命令总结参考文献 简介 现代处理器采用…

MessageBox:HubSpot x Facebook全方位对接!

在当今数字化营销的浪潮中&#xff0c;将多个业务系统高效整合成为推动企业成功的核心。HubSpot作为一体化的市场营销平台&#xff0c;与Facebook的整合通过强大的工具——MessageBox&#xff0c;为企业提供了更灵活、高效的整合方案。今天运营坛将深入探讨在HubSpot平台上整合…