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

前传:浪花 - 根据标签搜索用户-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 请求跨域

    • 后端统一管理更加安全

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

  • 或者编写允许跨域的配置文件(推荐!)

@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);}
}

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

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

相关文章

假设检验:以样本服从二项分布举例

目录 假设检验一、假设检验的思想二、假设检验的基本步骤1. 确定要进行检验的假设2. 选择检验统计量。3. 确定用于做决策的拒绝域4. 求出检验统计量的值5. 查看样本结果是否位于拒绝域内6. 做出决策 三、举例说明例子1——某公司治疗打鼾例子2——女士品茶的故事 假设检验 一、…

新手入门Java 继承概念及使用,final修饰符的详细介绍(有实例)

第四章 继承 课前回顾 1.如何进行封装 首先将类中定义的成员属性全部修改为private修饰 然后对每一个属性提供一个对外访问的方法&#xff0c;也就是生成getter/setter方法 最后再对外访问的方法&#xff08;getter/setter&#xff09;中加入属性值验证 2.封装的好处 提…

C#中chart控件

C#中chart控件 图表的5大集合 例子 第一步&#xff1a;创建工程 放入chart控件 series集合 选择图标类型 选择绘制曲线的宽度和颜色。 显示数据标签 Title集合 添加标题 调整标题字体&#xff1a;大小和颜色 CharsArea集合 对坐标轴进行说明 设置间隔 设置刻度…

Linux命令手册

简介 Multics&#xff08;大而全&#xff09;项目失败&#xff0c;吸取教训启动Unix&#xff08;小而精&#xff09;&#xff0c;Linus Benedict Torvalds受Unix启发开发初始版本Linux内核&#xff0c;Git也由其开发&#xff0c;目的是为了更好的管理Linux内核开发。Unix是商业…

二、VS2019编译的VTK9.0.0 + Qt 5.14.2 环境测试

1. 使用CMake VS2019 编译vtk 9.0.0 时,需要启用支持Qt开关、如下图 如果不会编译的可以参见我的这篇文章: 一、VTK 9.0.0 编译安装步骤 VS2019 CMake3.26.0-CSDN博客 打开Qt5.14.2 ,创建Qt Widget 项目: 构建设置选择 MSVC2017 64bit pro 项目文件加入两行配置: …

Redis分布式锁存在的问题以及解决方式

☆* o(≧▽≦)o *☆嗨~我是小奥&#x1f379; &#x1f4c4;&#x1f4c4;&#x1f4c4;个人博客&#xff1a;小奥的博客 &#x1f4c4;&#x1f4c4;&#x1f4c4;CSDN&#xff1a;个人CSDN &#x1f4d9;&#x1f4d9;&#x1f4d9;Github&#xff1a;传送门 &#x1f4c5;&a…

孚盟云 多处SQL注入漏洞复现

0x01 产品简介 上海孚盟软件有限公司是一家外贸SaaS服务提供商,也是专业的外贸行业解决方案专业提供商。 全新的孚盟云产品,让用户可以用云模式实现信息化管理,让用户的异地办公更加流畅,大大降低中小企业在信息化上成本,用最小的投入享受大型企业级别的信息化服务,使中…

让Mac与Windows合二为一:Microsoft Remote Desktop for Mac的魅力

在数字时代&#xff0c;远程连接已成为工作、学习和生活的必备工具。而Microsoft Remote Desktop for Mac正是这样一款能够让你随时随地&#xff0c;轻松连接到Windows系统的强大工具。 Microsoft Remote Desktop for Mac不仅提供了高效、稳定的远程访问体验&#xff0c;更凭借…

聚道云软件连接器1月新增应用/产品更新合集

1月更新概要 新增应用&#xff1a; 应用1&#xff1a;法大大 应用2&#xff1a;契约锁 应用3&#xff1a;E签宝 应用4&#xff1a;红圈CRM 应用5&#xff1a;中国民生银行 新增应用 应用1&#xff1a;法大大 法大大是国内领先的电子签名与电子合同云平台&#xff0c;致…

【react】创建react项目+项目结构

使用create-react-app快速搭建开发环境 create-react-app是一个快速创建React开发环境的工具&#xff0c;底层由Webpack构建&#xff0c;封装了配置细节 npx create-react-app react_hm执行命令后开始创建 创建好执行cd react_hm npm start 当看到webpack compiled successfu…

Nginx重写功能location与rewrite

1. location 从功能看 rewrite 和 location 似乎有点像&#xff0c;都能实现跳转&#xff0c;主要区别在于 rewrite 是在同一域名内更改获取资源的路径&#xff0c;而 location 是对一类路径做控制访问或反向代理&#xff0c;还可以proxy_pass 到其他机器。 rewrite 对访问的…

车载音频EMI的产生及典型音频功放AW836XX的解决方案

之前针对 eCall的文章中有提到D类音频功放需要关注EMI问题&#xff08;点击文章回看《车载eCall系统音频应用解决方案》&#xff09;&#xff0c;在此展开此问题并寻求解决方案。 1. EMI定义与分类 电磁干扰&#xff08;Electromagnetic Interference&#xff0c;EMI&#xff…