从后端角度去看整个前后端流程发生了什么？

最新推荐文章于 2024-08-15 14:47:41 发布

蓝莓声明

最新推荐文章于 2024-08-15 14:47:41 发布

阅读量134

点赞数

文章标签： java 开发语言

本文链接：https://blog.csdn.net/m0_52661626/article/details/130210459

版权

本文探讨了后端开发者学习前端的重要性，以及如何通过自学掌握前后端交互，包括Ajax、FetchAPI和RPC等技术。文章通过实例解释了跨域问题及其解决方案，并介绍了JQuery和axios在前后端通信中的应用。

摘要由CSDN通过智能技术生成

小序

写这篇文章原因是昨天看小组校内答辩，突然想到两个队友都是前后端的佬，而我只是一个后端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生产的

结尾

写在最后让我们看看我们今天的收获

学会自学
明白何为跨域并且如何自学
懂得前后端都是呈体系的方向，为后续向全栈努力打下基础

最后 ┭┮﹏┭┮ 找实习、我可以打杂、有没有佬给我一次机会。

蓝莓声明

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
从后端角度去看整个前后端流程发生了什么？

想写一篇技术贴翻来覆去在想我应该写一篇什么样的文章？是像我前两篇文章一样穿插着代码的形式吗？但我有的时候确又在想，一大串一大串的代码肯定是没有人愿意看的，那么何不采用讲解的方式，将原理讲明白，引导着大家去实现呢？这篇完整你可以收获到什么？从后端角度出发捋清楚前后端的交互掌握自学的能力，在教你思考思考的前提，通过向chatGPT提问等方式来进行学习学习并了解Ajax、Featch API、RPC 等技术。
复制链接

扫一扫