axios和SpringBoot前端怎么调用后端接口进行数据交互

发布时间:2023-03-16 13:39:24 作者:iii
来源:亿速云 阅读:108

axios和SpringBoot前端怎么调用后端接口进行数据交互

在现代Web开发中,前后端分离的架构模式已经成为主流。前端负责页面的展示和用户交互,后端负责数据的处理和业务逻辑的实现。为了实现前后端的数据交互,前端需要通过HTTP请求调用后端提供的接口。本文将详细介绍如何使用axiosSpring Boot实现前后端的数据交互。

1. 概述

1.1 什么是axios?

axios是一个基于Promise的HTTP客户端,用于浏览器和Node.js环境。它可以在前端应用中发送HTTP请求,并处理响应数据。axios具有以下特点:

1.2 什么是Spring Boot?

Spring Boot是Spring框架的一个子项目,旨在简化Spring应用的初始搭建和开发过程。它通过自动配置和约定优于配置的原则,使得开发者可以快速构建独立的、生产级别的Spring应用。Spring Boot具有以下特点:

1.3 前后端数据交互的基本流程

在前后端分离的架构中,前端通过HTTP请求(如GET、POST、PUT、DELETE等)调用后端提供的RESTful API,后端处理请求并返回相应的数据(通常是JSON格式)。前端接收到数据后,根据业务需求进行展示或进一步处理。

2. 后端Spring Boot接口开发

2.1 创建Spring Boot项目

首先,我们需要创建一个Spring Boot项目。可以使用Spring Initializr(https://start.spring.io/)快速生成项目骨架。

  1. 打开Spring Initializr网站。
  2. 选择项目类型为Maven Project。
  3. 选择Spring Boot版本(如2.5.4)。
  4. 填写项目元数据(Group、Artifact、Name等)。
  5. 添加依赖:Spring Web、Spring Data JPA、H2 Database(用于演示)。
  6. 点击“Generate”按钮下载项目压缩包。
  7. 解压项目并导入到IDE中(如IntelliJ IDEA)。

2.2 创建实体类

src/main/java/com/example/demo目录下创建实体类User.java

package com.example.demo;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String email;

    // Getters and Setters
    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

2.3 创建Repository接口

src/main/java/com/example/demo目录下创建UserRepository.java接口:

package com.example.demo;

import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User, Long> {
}

2.4 创建Controller类

src/main/java/com/example/demo目录下创建UserController.java类:

package com.example.demo;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api/users")
public class UserController {

    @Autowired
    private UserRepository userRepository;

    @GetMapping
    public List<User> getAllUsers() {
        return userRepository.findAll();
    }

    @GetMapping("/{id}")
    public User getUserById(@PathVariable Long id) {
        return userRepository.findById(id).orElseThrow(() -> new RuntimeException("User not found"));
    }

    @PostMapping
    public User createUser(@RequestBody User user) {
        return userRepository.save(user);
    }

    @PutMapping("/{id}")
    public User updateUser(@PathVariable Long id, @RequestBody User userDetails) {
        User user = userRepository.findById(id).orElseThrow(() -> new RuntimeException("User not found"));
        user.setName(userDetails.getName());
        user.setEmail(userDetails.getEmail());
        return userRepository.save(user);
    }

    @DeleteMapping("/{id}")
    public void deleteUser(@PathVariable Long id) {
        userRepository.deleteById(id);
    }
}

2.5 配置H2数据库

src/main/resources/application.properties文件中添加以下配置:

spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=password
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
spring.h2.console.enabled=true

2.6 启动Spring Boot应用

在IDE中运行DemoApplication.java文件,启动Spring Boot应用。启动后,可以通过http://localhost:8080/h2-console访问H2数据库控制台。

3. 前端使用axios调用后端接口

3.1 创建前端项目

我们可以使用Vue.js或React.js等前端框架来创建前端项目。这里以Vue.js为例。

  1. 安装Node.js和npm。
  2. 使用Vue CLI创建项目:
npm install -g @vue/cli
vue create frontend
  1. 选择默认配置或手动配置项目。
  2. 进入项目目录并启动开发服务器:
cd frontend
npm run serve

3.2 安装axios

在项目根目录下安装axios

npm install axios

3.3 创建API服务

src目录下创建services文件夹,并在其中创建api.js文件:

import axios from 'axios';

const apiClient = axios.create({
    baseURL: 'http://localhost:8080/api',
    headers: {
        'Content-Type': 'application/json',
    },
});

export default {
    getUsers() {
        return apiClient.get('/users');
    },
    getUser(id) {
        return apiClient.get(`/users/${id}`);
    },
    createUser(user) {
        return apiClient.post('/users', user);
    },
    updateUser(id, user) {
        return apiClient.put(`/users/${id}`, user);
    },
    deleteUser(id) {
        return apiClient.delete(`/users/${id}`);
    },
};

3.4 在组件中使用API服务

src/components目录下创建UserList.vue组件:

<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
        <button @click="deleteUser(user.id)">Delete</button>
      </li>
    </ul>
    <h2>Add User</h2>
    <form @submit.prevent="addUser">
      <input v-model="newUser.name" placeholder="Name" required />
      <input v-model="newUser.email" placeholder="Email" required />
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
import api from '../services/api';

export default {
  data() {
    return {
      users: [],
      newUser: {
        name: '',
        email: '',
      },
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      api.getUsers().then(response => {
        this.users = response.data;
      });
    },
    addUser() {
      api.createUser(this.newUser).then(response => {
        this.users.push(response.data);
        this.newUser = { name: '', email: '' };
      });
    },
    deleteUser(id) {
      api.deleteUser(id).then(() => {
        this.users = this.users.filter(user => user.id !== id);
      });
    },
  },
};
</script>

3.5 在App.vue中使用UserList组件

src/App.vue文件中使用UserList组件:

<template>
  <div id="app">
    <UserList />
  </div>
</template>

<script>
import UserList from './components/UserList.vue';

export default {
  name: 'App',
  components: {
    UserList,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3.6 运行前端项目

在项目根目录下运行以下命令启动前端开发服务器:

npm run serve

打开浏览器访问http://localhost:8081,即可看到用户列表和添加用户的表单。

4. 总结

本文详细介绍了如何使用axiosSpring Boot实现前后端的数据交互。通过创建Spring Boot后端项目,提供RESTful API,并在前端Vue.js项目中使用axios调用这些API,我们实现了用户数据的增删改查功能。这种前后端分离的架构模式不仅提高了开发效率,还使得前后端可以独立开发和部署,是现代Web开发的主流选择。

在实际项目中,还可以进一步优化和扩展,例如:

希望本文能帮助你更好地理解和使用axiosSpring Boot进行前后端数据交互。

推荐阅读:
  1. vue-cli3中如何使用axios获取本地json
  2. vue+vuex+axios如何实现从后台获取数据存入vuex,组件之间共享数据

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

axios springboot

上一篇:python flask项目打包成docker镜像发布的方法是什么

下一篇:怎么使用Vue+Echarts实现绘制动态折线图

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》