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

  本文章转载于【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 第二个是端口,端口并不一致,端口不一致也被认为是跨域,但如果你是发给自己,那么就不会发生这种情况,异步调用,如果发给不同的服务器和端口就会出现这种情况。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[保研/考研机试] 杨辉三角形 西北工业大学复试上机题 C++实现

题目描述 Time Limit: 1000 ms Memory Limit: 256 mb 输入n值,使用递归函数,求杨辉三角形中各个位置上的值。 输入描述: 一个大于等于2的整型数n 输出描述: 题目可能有多组不同的测试数据,对于每组输入数据, 按题目的要求输…

Java代理模式——静态代理与动态代理

代理模式 代理模式允许你为其他对象提供一个代理,以控制对这个对象的访问。代理模式在不改变实际对象的情况下,可以在访问对象时添加额外的功能。 可以理解为代理模式为被代理对象创造了一个替身,调用者可以通过这个替身去实现这个被代理对…

定长内存池设计ConcurrentMemoryPool

原理 还回来的内存用链表串联起来&#xff0c;称为自由链表 内存块自身进行链接&#xff0c;前四个字节存下一个的地址 结构 template<class T> class ObjectPool { public:T* New(){} private:char* _memory nullptr; //方便切割void* _freeList nullptr; };第一步…

Axure RP移动端高保真CRM办公客户管理系统原型模板及元件库

Axure RP移动端高保真CRM办公客户管理系统原型模板及元件库&#xff0c;一套典型的移动端办公工具型APP Axure RP原型模板&#xff0c;可根据实际的产品需求进行扩展&#xff0c;也可以作为移动端原型设计的参考案例。为提升本作品参考价值&#xff0c;在模板设计过程中尽量追求…

uniapp 自定义手机顶部状态栏不生效问题

想要的效果想淘宝一样&#xff0c;底色覆盖到手机顶部&#xff0c;找了两天都没找到原因&#xff0c;过程很艰苦&#xff0c;直接上结果吧 项目是后来接手的&#xff0c;最终原因出在这&#xff0c; "immersed" : false>设置为 true 就可以了&#xff0c;沉浸式样…

RunnerGo的相比较JMeter优势,能不能替代?

目前在性能测试领域市场jmeter占有率是非常高的&#xff0c;主要原因是相对比其他性能测试工具使用更简单&#xff08;开源、易扩展&#xff09;&#xff0c;功能更强大&#xff08;满足多种协议的接口&#xff09;&#xff0c;但是随着研发协同的升级&#xff0c;平台化的性能…

Java智慧工地APP源码带AI识别

智慧工地为建筑全生命周期赋能&#xff0c;用创新的可视化与智能化方法&#xff0c;降低成本&#xff0c;创造价值。 一、智慧工地APP概述 智慧工地”立足于互联网&#xff0c;采用云计算&#xff0c;大数据和物联网等技术手段&#xff0c;针对当前建筑行业的特点&#xff0c;…

【Sklearn】基于朴素贝叶斯算法的数据分类预测(Excel可直接替换数据)

【Sklearn】基于朴素贝叶斯算法的数据分类预测&#xff08;Excel可直接替换数据&#xff09; 1.模型原理2.模型参数3.文件结构4.Excel数据5.下载地址6.完整代码7.运行结果 1.模型原理 模型原理&#xff1a; 朴素贝叶斯分类是基于贝叶斯定理的一种分类方法。它假设特征之间相互…

海康威视摄像头二次开发_云台控制_视频画面实时预览(基于Qt实现)

一、项目背景 需求:需要在公司的产品里集成海康威视摄像头的SDK,用于控制海康威视的摄像头。 拍照抓图、视频录制、云台控制、视频实时预览等等功能。 开发环境: windows-X64(系统) + Qt5.12.6(Qt版本) + MSVC2017_X64(使用的编译器) 海康威视提供了设备网络SDK,设备网…

爬虫练手项目——获取龙族小说全文

网站信息 目标网站信息如下&#xff1a;包含了龙族1-5全部内容 代码 import requests from bs4 import BeautifulSoup import os import timeheaders {User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Sa…

NAS搭建指南一——服务器的选择与搭建

一、服务器的选择 有自己的本地的公网 IP 的请跳过此篇文章按需求选择一个云服务器&#xff0c;目的就是为了进行 frp 的搭建&#xff0c;完成内网穿透我选择的是腾讯云服务器&#xff0c;我的配置如下&#xff0c;仅供参考&#xff1a; 4. 腾讯云服务器官网地址 二、服务器…

工具推荐:Wireshark网络协议分析工具(对比tcpdump)

文章首发地址 Wireshark是一款开源的网络协议分析工具&#xff0c;可以捕获网络数据包并对其进行详细的分析和解释。下面是Wireshark的详细介绍&#xff1a; Wireshark 工作原理 Wireshark通过捕获网络接口上的数据包&#xff0c;将其转换为可读的格式&#xff0c;并在界面…

React入门 jsx学习笔记

一、JSX介绍 概念&#xff1a;JSX是 JavaScript XML&#xff08;HTML&#xff09;的缩写&#xff0c;表示在 JS 代码中书写 HTML 结构 作用&#xff1a;在React中创建HTML结构&#xff08;页面UI结构&#xff09; 优势&#xff1a; 采用类似于HTML的语法&#xff0c;降低学…

java中右移>>和无符号右移>>>的区别

public static void main(String[] args) {byte[] dest new byte[2];dest[0] 0x15; //0001 0101dest[1] (byte) 0xfb;//1111 1011System.out.println((dest[0] >> 4) & 0xff);//右移 应该是0000 0001 十进制结果显示1 结果也是1&#xff0c;正确System.out.printl…

【Linux命令详解 | chown命令】 chown命令用于修改文件或目录的所有者,常与chmod一起使用

文章标题 简介一&#xff0c;参数列表二&#xff0c;使用介绍1. 更改文件的所有者2. 递归地更改目录及其内容的所有者3. 使用--from参数改变所有者4. 使用--reference参数参考其他文件或目录的所有者5. 获取帮助信息和版本信息 总结 简介 在Linux系统中&#xff0c;chown命令被…

【AI作画】使用Stable Diffusion的艺术二维码完全生成攻略

文章目录 前言Stable Diffusion 简介 什么是云端平台&#xff1f;优势灵活性和可扩展性成本效益高可用性和容错性管理简便性 选择适合的云端平台 平台优势平台操作购买算力并创建工作空间启动工作空间应用市场一键安装 使用Stable-Diffusion作图使用控制网络将文本转图像二维码…

03-基础入门-搭建安全拓展

基础入门-搭建安全拓展 1、涉及的知识点2、常见的问题3、web权限的设置4、演示案例-环境搭建&#xff08;1&#xff09;PHPinfo&#xff08;2&#xff09;wordpress&#xff08;3&#xff09;win7虚拟机上使用iis搭建网站&#xff08;4&#xff09;Windows Server 2003配置WEB站…

Tomcat 部署及优化

Tomcat概述 Tomcat 是 Java 语言开发的&#xff0c;Tomcat 服务器是一个免费的开放源代码的 Web 应用服务器&#xff0c;是 Apache 软件基金会的 Jakarta 项目中的一个核心项目&#xff0c;由 Apache、Sun 和其他一些公司及个人共同开发而成。在中小型系统和并发访问用户不是很…

深入了解Linux运维的重要性与最佳实践

Linux作为开源操作系统的代表&#xff0c;在企业级环境中的应用越来越广泛。而在保障Linux系统的正常运行和管理方面&#xff0c;Linux运维显得尤为关键。本文将介绍Linux运维的重要性以及一些最佳实践&#xff0c;帮助读者更好地了解和掌握Linux系统的运维技巧。 首先&#xf…

实验二十八、三角波发生电路参数的确认

一、题目 利用 Multisim 确定图1所示电路中各元件的参数&#xff0c;使输出电压的频率为 500 Hz 500\,\textrm{Hz} 500Hz、幅值为 6 V 6\,\textrm{V} 6V 的三角波。 图 1 三角波发生电路 图1\,\,三角波发生电路 图1三角波发生电路 2、仿真电路 A 1 \textrm A_1 A1​ 采用…