从后端角度去看整个前后端登录发生了啥？-六虎

小序

写这篇文章原因是昨天看小组校内辩论，突然想到两个队友都是前后端的佬，而我只是一个后端CRUD仔，于是想着去学习前端所以写下这篇文章期望对咱们能够有所启发！

整个文章结构分为

前语：告诉咱们这篇文章讲述内容

问题：经过一些问题，便于咱们更好了解这篇文章内容

正文：正文的学习前后端怎样进行交互

前语

想写一篇技能贴辗转反侧在想我应该写一篇什么样的文章？是像我前两篇文章相同穿插着代码的形式吗？但我有的时分确又在想，一大串一大串的代码肯定是没有人乐意看的，那么何不采用讲解的办法，将原理讲了解，引导着咱们去完成呢？

假如你想先搞清楚整个后端的登录流程引荐你看我上篇文章搞懂登录流程，新手看这篇就够了 – ()

这篇完好你能够收成到什么？

从后端视点动身捋清楚前后端的交互
掌握自学的才能，在教你考虑考虑的条件，经过向chatGPT发问等办法来进行学习
学习并了解Ajax、Featch API、RPC 等技能

问题

1.学会自学

答复：

学习和考虑是任何作业都非常重要的一部分。特别是对于程序员这个作业来说，不断进步和学习更是至关重要的。即便你并不是非常热爱这份作业，也应该不断地探究、考虑和学习。这些能够经过阅览好书或许观看经典电影等办法来完成。

假如你对编程有一点爱好，哪怕是一点点，那么我都主张你逐步你应该培育自己的情趣，而且不断地追求自我完成。在亚伯拉罕马斯洛提出的需求层次理论中，自我完成是精力享受的最高境界。因而，即便你只对某一个范畴感爱好，也应该从这儿开端下手。比方说，当你已经学完了整个技能栈后，你可能会发现还有一些算法、规划模式、jvm 等内容让你感到困惑。可是，这并不意味着你应该抛弃它们。相反，你应该暂时抛弃（慢慢地深化探究，按部就班地学习）

许多人以为编程很难，其实这是由于他们没有经过按部就班的学习进程。有些人会想要快速地掌握技能，直接从 Spring 下手。可是，这种做法并不可取。一遍视频可能不能让你彻底了解技能的细节，而且还会让你感到懊丧和迷茫。

AI答复：

因而，我主张你从自己感爱好的方面开端下手。比方，昨晚我突然想到前后端交互的问题，今日就写下了这篇文章来阐述我的主意。

1.作为后端选手为什么要去学前端？

答复：

这儿我就不从一些虚的方面去说了，什么为了更好的适应年代、为了更好的作业规划等等……

总归一句话学习前端能够让咱们对全栈开发有着更加深化的了解，当然咱们更应该将关注点放在前后端之间的交互上，通讯办法上，这样才能够便于了解整个应用程序的作业流程。

AI答复：

1.为什么我感到学前端很吃力？

答复：

学习前端对于一名后端开发者来说可能会感到困难和无从下手。你可能刚学完Vue，可是当你想运用脚手架的时分，里边包括了许多你不熟悉的技能，比方路由和TypeScript等。这就像一个孩子还没学会走路就想要开端跑步相同，或许像一个人刚学会了一点Spring，却试图去探究一个复杂的框架，这都是正常的现象。因而，咱们需求先掌握根本的前端常识，才能够更好地了解和应用脚手架中的其他技能。

AI答复：

首要，有一点很重要的是，前端和后端相似，并不只是是一门编程言语，而是一种整体的开发理念和技能体系，假如你只是学会了一门言语就去想着完好的构建项目这当然很吃力，就比方你刚学完Java 学了一些spring的常识就去开发一个web项目这当然很难。详细的前端状况我也不是很了解这儿就不打开叙说了！

正文

不知道咱们还记不记的JSP、Thymeleaf 这两门技能

记住那个时分大概大一，我天真的以为前端便是写这些当时我就在想就这？

但是实际上整个前端与后端都是在迭代的开展，乃至前端的迭代速度更加的敏捷，在现在前后端分离的项目中，前端已经变得和后端相同是一个完好的工程化体系了。

前后端的交互

每一个后端都有一颗全栈的心，已然咱们不会运用什么VUE 、React 就写不出精美的框架了？

来考虑这样一个问题

假如我在一个软件中，比方vs code 写前端页面（就用咱们每一个后端都会一点点的html三件套）

idea 编写后端（发动一个spring boot项目）

然后让咱们猜猜这姿态能够顺利进行交互吗？

首要来看看小AI 的答复：

没错是能够的，那么这不就搞定了？咱们彻底能够用小 AI 来为咱们写一个精美的页面然后自己开发项目着玩（嘿嘿嘿~）

那咱们试一试吧？

首要让小AI来为咱们生成一份前端页面：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#login-form").submit(function(event) {
          event.preventDefault();
          var requestData = {
            'userAccount': $('input[name=userAccount]').val(),
            'userPassword': $('input[name=userPassword]').val()
          };
          $.ajax({
            type: 'POST',
            url: 'http://localhost:8106/api/user/login',
            data: JSON.stringify(requestData),
            contentType: 'application/json',
            dataType: 'json'
          })
            .done(function(data) {
              console.log(data);
              if (data.code === 0) { // 假如恳求成功
                alert('登录成功');
                // TODO: 处理登录成功后的逻辑
                var user = data.data;
                $('#user-account').text(user.userAccount);
                $('#user-name').text(user.userName);
              } else { // 假如恳求失利
                alert('登录失利：' + data.message);
                // TODO: 处理登录失利后的逻辑
              }
            });
        });
      });
    </script>
  </head>
  <body>
    <form id="login-form" action="" method="post">
      <label for="username">Username:</label>
      <input type="text" id="username" name="userAccount"><br><br>
      <label for="password">Password:</label>
      <input type="password" id="password" name="userPassword"><br><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

读者观众：

哦~ 那这不就简略了

然后后端发动一个SpringBoot 搞好上下文、连接好数据库、设置好端口号搞定发动成…..功个屁啊，作者我这儿怎样没收到音讯啊？

嗯哼，没错这便是咱们经常听到的跨域~

跨域的出现与处理

那么什么是跨域呢？

观众:不对啊，假如我只是前端向本机地点后端项目地点的端口发送的恳求，为什么还会有跨域的状况呢？

端口号真的不同吗？

在那个前端页面中，咱们的确看不出来，端口号是啥，那么让咱们运转一下呢？

没错，63342 哎？很神奇是吧，为什么咱们没有指定会有这个呢？难道是相似后端8080默认的端口（后端中咱们不是能够自己设置端口吗？）

还真的是~

此时不得不感叹AI的强壮

那么怎样处理跨域呢？

首要一个最简略的办法不知道咱们还记不记的WebMvcConfigurer 中的 addCorsMappings 办法呢？

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
        .allowedOrigins("*")
        .allowedMethods("GET", "PUT", "POST", "DELETE", "OPTIONS") // 答应发送的恳求办法
        .allowedHeaders("*")
        .exposedHeaders("Authorization");
    }
}

详细来说，这个类能够装备一切的恳求都答应跨域访问，并指定答应的恳求办法为 GET、PUT、POST、DELETE 和 OPTIONS。别的，该类还指定了答应的恳求头为一切类型，其中 exposedHeaders() 用于指定在 HTTP 呼应头中暴露给客户端的自定义头信息，这儿指定了 Authorization 头。

总归，这个类的作用便是为了在 Web 应用程序中启用跨域恳求处理，以保证应用程序能够正常地与其他域进行通讯

前后端交互演示

咱们别离发动这两个项目：

登录成功：

登陆失利：

前端运用什么办法传递的数据？

没错，本文的主角 Ajax 上台了 (′｀ )…彡…彡

应该仍是有点形象的吧，毕竟是JQuery的格局

以下是JQuery 发送 Ajax get恳求

$.ajax({
  type: "GET",
  url: "example.php",
  success: function(data){
    // 成功获取数据后的操作
    console.log(data);
  },
  error: function(xhr, textStatus, errorThrown){
    // 获取数据失利后的操作
    console.log("恳求失利：" + textStatus + ", 错误信息：" + errorThrown);
  }
});

$.ajax({
  type: "POST",
  url: "example.php",
  data: {name: "John", age: 30},
  success: function(data){
    // 成功获取数据后的操作
    console.log(data);
  },
  error: function(xhr, textStatus, errorThrown){
    // 获取数据失利后的操作
    console.log("恳求失利：" + textStatus + ", 错误信息：" + errorThrown);
  }
});

更简略的办法：

$.get("example.php", function(data){
  console.log(data);
});
$.post("example.php", {name: "John", age: 30}, function(data){
  console.log(data);
});

除此之外咱们在vue中运用的是axios

yarn install axios 安装库

然后运用组件引入该库 import axios from ‘axios’

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    // 成功获取数据后的操作
    console.log(response.data);
  })
  .catch(error => {
    // 获取数据失利后的操作
    console.log("恳求失利：" + error);
  });

在这个比如中，axios.get() 函数向指定的 URL 发送 GET 恳求，并回来一个 Promise 目标。假如恳求成功，则调用 then() 办法并将包括呼应数据的目标作为参数传递给它；不然，调用 catch() 办法并将错误信息作为参数传递给它。

同样地，能够运用 axios.post() 函数来发送 POST 恳求，并经过 data 特点传递要发送的数据，如下所示：

javascript
axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => {
    // 成功获取数据后的操作
    console.log(response.data);
  })
  .catch(error => {
    // 获取数据失利后的操作
    console.log("恳求失利：" + error);
  });

需求留意的是，假如要发送 JSON 数据，需求将 data 特点的值作为一个目标传递给 axios.post() 函数。假如需求设置恳求头号其他特点，能够经过创建一个装备目标来完成，如下所示：

axios({
  method: 'post',
  url: 'https://jsonplaceholder.typicode.com/posts',
  data: {
    title: 'foo',
    body: 'bar',
    userId: 1
  },
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    // 成功获取数据后的操作
    console.log(response.data);
  })
  .catch(error => {
    // 获取数据失利后的操作
    console.log("恳求失利：" + error);
  });

在这个比如中，运用一个装备目标来指定恳求的相关特点。其中，method 表明恳求类型，url 表明恳求的地址。data 特点表明要发送的数据，headers 特点表明要设置的恳求头。

详细就不多说了，感爱好的能够在多学一下的相关内容上述内容其实我也不是很会都是AI生产的

结尾

写在最终让咱们看看咱们今日的收成

学会自学
了解何为跨域而且怎样自学
懂得前后端都是呈体系的方向，为后续向全栈努力打下基础

最终 ┭┮﹏┭┮ 找实习、我能够打杂、有没有佬给我一次时机。

从后端角度去看整个前后端登录发生了啥？

小序

前语

问题

正文

前后端的交互

跨域的出现与处理

前后端交互演示

前端运用什么办法传递的数据？

结尾

作者信息

推广

从后端角度去看整个前后端登录发生了啥？

小序

前语

问题

正文

前后端的交互

跨域的出现与处理

前后端交互演示

前端运用什么办法传递的数据？

结尾

相关文章

抢占先机，搞定visionOS 需要做好这些准备

蚂蚁千X千模技术与应用

今天，我被二维码卷到了…

开始使用Android Gradle Plugin来帮助你进行项目的构建

作者信息

推广