前后端分离------后端创建笔记(03)前后端对接(上)

news2024/11/23 20:46:05

  本文章转载于【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客

仅用于学习和讨论,如有侵权请联系

源码:https://gitee.com/green_vegetables/x-admin-project.git
素材:https://pan.baidu.com/s/1ZZ8c-kRPUxY6FWzsoOOjtA 提取码:up4c
项目概述笔记:https://blog.csdn.net/m0_37613503/article/details/128961102
数据库笔记:https://blog.csdn.net/m0_37613503/article/details/128961401
前端笔记:https://blog.csdn.net/m0_37613503/article/details/128961447
后端笔记:https://blog.csdn.net/m0_37613503/article/details/128961569

1、获取用户信息接口---下

1.1 SQL语句准备好了,我们想调他,还得准备一个sql接口

 1.2 Mapper接口要与id保持一致

 1.3  写一个返回值类型,这里可以用注解写sql语句

2 写完之后,回到userSiver里面,现在想拿角色就随便去拿了,我们用刚才写的方法,传入id,这样我们就能够得到我们的角色列表 

 2.1 起名字roles

 2.2 角色列表也塞进去了,然后返回一下数据,return data,可以得到一个角色列表,同时前端的名称是roles

 2.3 重新运行一下,再打开postman,打开我们的登录接口,,让我测试一下我们的token

2.4 点一下发送

 

2.5 token,在这里,前后端必须使用的软件是postman

 2.6 我们新建一个请求

2.7 我们带上一个参数

 

 2.8 直观的填写token

2.9 发送一下请求,获取用户地址,头像,地址都查出来了

3 除了登录之外,还要注销接口,以前我们用的是session,现在是在redis里,如何去掉token,开始前我们要牢记他是一个post请求,先点一下注销

 

3.1 logout 请求出来了

 

 

3.2 后期token都会在请求头里出现

 3.3 文件里有拦截器,有响应拦截器等等,第一个是响应拦截器

3.4 请求拦截器,他在响应之前帮你做了一件事,帮你塞了一个token进来

 3.5 参数到请求头里面获取,然后把他放到redis删除掉

 

3.6 写上那个token的名字

 

 3.7 把token给他传过去,

 3.8  把数据返回过去

 3.9 logout方法并没有创建,此时我们将他创建一下

3.10 这里有个错误提示,在sevice中有个类没有实现,按住ctrl点击即可

 3.11实现一下类

 

3.12 他的实现逻辑非常简单,token传进来,然后删掉

 3.13 打开redis的管理工具

 3.14 看一下我们redis里面的数据

3.15 里面有一条数据是我们刚才测试的数据

 

 3.16 我再来侧一次登录

 

 

3.17 8513数据已经写到了我们redis里面了

 

 3.18  我測試要複製鍵名

3.19  要坐请求登录的测试,他的请求方式是post

3.20 他需要带一个参数,他带的参数放到header里

 3.21 在这里写一个名字,名字是x-token,然后点击send

 3.22 他说成功,redis有没有被刷掉

 3.23redis数据被刷掉了,以上三个接口都写好了(搭建接口用的技术springBoot和redis+Postman),接下来我们做前后端对接

 

 

4、针前端来做一点点的改造,这里我们先让我们的前端调到我们的后端

4.1 这里先让我们的接口规格是一致的,让我们的url是一致的

4.2 这里的地址,跟我们后面的地址是一致的

 4.3 前面这些是没有的,给他删掉

 

 

4.1

5、现在我想调后端,这里有三份跟环境相关的配置

5.1 第一份开发配置,我想打包部署

 5.2 你打包的话,你就得改第二个生成配置

 5.3 这个改成我们后端的地址

5.4 这个/之前仍然是我们前端的服务地址,我们要访问的是我们的后端, ​​

5.5 这就是我们调用后端接口统一的前缀

 6 再调后端接口的时候,这一节再拼上这一节,就是上面这一节再拼下面这一节,就是完整的配置地址了

 

6.1 看新的配置文件,内置的默认服务

6.2 注释掉

 

7

 7、将前端项目重启一下 ctrl + d

 

7.1

8、看一下控制台,这个报错是在意料之中的

 

8.1

9、以后你只要看到了这个问题,就证明了你犯了一个跨域的问题

 

 

9.1

10、跨域的问题是怎么造成的,你从这个地址访问这个地址,A地址访问到B地址,并且发生了异步调用,这时候就跨域了,因此跨域的条件看什么,看ip地址

 

10.1

11、第一个是ip地址目前我们写的ip地址都是localhost,所以都是一致的

11.1

12 第二个是端口,端口并不一致,端口不一致也被认为是跨域,但如果你是发给自己,那么就不会发生这种情况,异步调用,如果发给不同的服务器和端口就会出现这种情况。

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

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

相关文章

Reinforcement Learning with Code【Code 6. Advantage Actor-Critic(A2C)】

Reinforcement Learning with Code【Code 6. Advantage Actor-Critic(A2C)】 This note records how the author begin to learn RL. Both theoretical understanding and code practice are presented. Many material are referenced such as ZhaoShiy…

你不得不懂的IT知识-《敏捷项目管理》

国林哥在IBM时,几乎每天都会收到关于“敏捷”相关的邮件,公司鼓励我们去学习邮件里的知识,参加敏捷相关的认证和培训。刚开始我和大多数同事一样不管不顾,后来随着PBC里要求加上成长目标,比如要获得一个认证&#xff0…

为什么要试用CRM系统?有什么优点?

对于那些正在进行CRM选型的企业来说,想要了解一款CRM系统是否好用,亲自试用无疑是最好的方法。那么,有没有可以免费试用的在线CRM系统 CRM系统免费试用的好处 体验产品功能:您可以亲自操作和测试CRM系统的各项功能,如…

从一个GPU到多个GPU

在多GPU运行应用程序时,需要正确设计GPU之间的通信,GPU间数据传输的效率取决于GPU是如何连接在一个节点上并跨集群的 在多GPU系统里有两种连接方式 多GPU通过单个节点连接到PCIe总线上 多GPU连接到集群中的网络交换机上 /* * 本示例演示了如何使用 Open…

【Vue-Router】路由模式

1. WebHashHistory index.ts import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory } from "vue-router";// 路由模式 //vue2 mode history -> vue3 createWebHistory //vue2 mode hash -> vue3 createWebHashHistory //vue2 m…

电池的正极是带正电?

首先说明结论:电池正极带正电,负极带负电。 一个错误的实例: 如果说电流是从电池正极流动到电池负极,那么电子就是从负极流动到正极,那么正极就是带负电。----这个说法是错误的。这是因为,根据那么很出名…

verilog学习笔记5——进制和码制、原码/反码/补码

文章目录 前言一、进制转换1、十进制转二进制2、二进制转十进制3、二进制乘除法 二、原码、反码、补码1、由补码计算十进制数2、计算某个负数的补码 前言 2023.8.13 天气晴 一、进制转换 1、十进制转二进制 整数:除以2,余数倒着写 小数:乘…

难解的bug

android.app.RemoteServiceException: Context.startForegroundService() did not then call Service.startForeground(): ServiceRecord 【Android TimeCat】 解决 context.startforegroundservice() did not then call service.startforeground() | XiChens Blog http://www…

【Linux从入门到精通】文件I/O操作(C语言vs系统调用)

文章目录 一、C语言的文件IO相关函数操作 1、1 fopen与fclose 1、2 fwrite 1、3 fprintf与fscanf 1、4 fgets与fputs 二、系统调用相关接口 2、1 open与close 2、2 write和read 三、简易模拟实现cat指令 四、总结 🙋‍♂️ 作者:Ggggggtm 🙋‍…

JAVA多线程和并发基础面试问答(翻译)

JAVA多线程和并发基础面试问答(翻译) java多线程面试问题 1. 进程和线程之间有什么不同? 一个进程是一个独立(self contained)的运行环境,它可以被看作一个程序或者一个应用。而线程是在进程中执行的一个任务。Java运行环境是一个包含了不同的类和程序…

Shell编程之条件测试、if语句、case语句

条件语句 一、条件测试1.1 测试命令1.1 文件测试1.2 整数比较1.3 字符串比较1.4 逻辑测试1.4.1 逻辑与 &&1.4.2 逻辑或 || 1.4.3 组合应用1.5 多个命令组合执行 ( ) { } 二、if语句2.1单分支结构2.2 多分支结构2.4 if语句练习2.4.1 单分支2.4.2 简单的交互式分数反馈 三…

Shell编程之正则表达式(非常详细)

正则表达式 1.通配符和正则表达式的区别2.基本正则表达式2.1 元字符 (字符匹配)2.2 表示匹配次数2.4 位置锚定2.5 分组 和 或者 3.扩展正则表达式4.部分文本处理工具4.1 tr 命令4.2 cut命令4.3 sort命令4.4 uniq命令 1.通配符和正则表达式的区别 通配符一般用于文件…

部署Springboot项目注意事项

步骤 步骤 1:将数据库内容在云服务器上的数据库部署一份 我使用mariadb;会出现一些不兼容现象;我们需要把默认值删掉 2:配置文件你得修改地方 a:linux是磁盘区分(像我自己项目用来储存验证码的文件我们得换这个配置;…

DoIP诊断入门

简介 DoIP(Diagnosis over Internet Protocol)是一种用于车辆诊断的网络通信协议。它基于现代互联网技术,允许通过以太网或IP网络进行车辆诊断和通信。 DoIP的背景是现代车辆中使用的电子控制单元(ECU)数量不断增加&…

利用OpenSSL实现私有 CA 搭建和证书颁发

利用OpenSSL实现私有 CA 搭建和证书颁发 一、私有 CA 搭建1. 安装openssl2. 配置 openssl3. 生成 CA 自己的私钥4. 生成 CA 自己的自签证书5. 验证自签证书 二、向私有CA申请证书流程1. 生成应用私钥文件2. 根据应用私钥生成证书申请文件3. 向CA请求颁发证书4. 验证应用证书5. …

PS/LR2024专用智能磨皮插件Portraiture提高P图效率

Portraiture 4智能磨皮插件支持Photoshop和Lightroom!Portraiture是一款智能磨皮插件,为Photoshop和Lightroom添加一键磨皮美化功能,快速对照片中皮肤、头发、眉毛等部位进行美化,无需手动调整,大大提高P图效率。全新4…

Wlan——无线服务集和AP的基本概念以及AP的配置

目录 WLAN服务集的基本概念 AP的基本概念 AP的分类 AP模式的切换 胖(FAT)AP介绍 胖AP的工作模式 接入模式和路由模式的区别 胖AP的组网方式 瘦(FIT)AP介绍 瘦AP的工作模式 瘦AP的组网方式 胖AP和瘦AP的区别 AP的配置…

(leecode)错误的集合

最近听到的,还可以,试试吧~ 题目: 示例: 提示: 题解: 思路: 将数字大小的位置,然后遍历每个位置,大小为0的是缺失数字,大小为2的是重复数字 int* findErro…

2022年12月 C/C++(一级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题:加一 输入一个整数x,输出这个整数加1后的值,即x1的值。 时间限制:1000 内存限制:65536 输入 一个整数x(0 ≤ x ≤ 1000)。 输出 按题目要求输出一个整数。 样例输入 9 样例输出 10 以下是使用C语言编写的解决方案…

湘大 XTU OJ:1406 String Game、1098 素数个数 题解(非常详细)

1406 String Game 一、链接 1406 String Game 二、题目 题目描述 Alice和Bob正在玩一个基于字符串的游戏,一开始,Alice和Bob分别拥有一个等长的字符串S1和S2,且这两个字符串只包含小写字母。 在每个回合中,Alice和Bob必须分…