axios怎么做到前后端分离

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它可以帮助我们在前后端分离的场景中，实现前端向后台发送 HTTP 请求并获取响应结果。

在前后端分离的架构中，前端和后端分别独立开发，前端只负责展示和交互，后端只提供数据和业务逻辑。前端需要向后端发送请求获取数据或者提交数据，这时候就需要一个 HTTP 客户端来实现。

Axios 就是一个很好的选择，它可以在前端通过发送 HTTP 请求，获取后端数据或者提交数据。同时，Axios 支持 Promise，可以处理异步操作，方便开发人员编写异步代码。

Axios 还有一些其他的特性，如拦截器、取消请求、自动转换 JSON 等，这些特性都可以帮助开发人员更好地处理 HTTP 请求和响应。所以，Axios 是一个非常适合在前后端分离架构中使用的工具。

相关问题

答辩问使用spring boot和 vue如何使用axios实现前后端分离

在使用 Spring Boot 和 Vue 进行前后端分离的项目中，可以使用 Axios 来实现前端与后端之间的数据交互。Axios 是一个基于 Promise 的 HTTP 库，可以在浏览器和 Node.js 中使用，具有易用性和高效性。下面是一个简单的示例：

1. 在 Vue 项目中安装 Axios：

npm install axios --save

2. 在 Vue 项目中创建一个 API 服务，用于向后端发送请求和接收响应：

import axios from 'axios'

const API_URL = 'http://localhost:8080/api/'

export default {
  get(url) {
    return axios.get(API_URL + url)
  },

  post(url, data) {
    return axios.post(API_URL + url, data)
  },

  put(url, data) {
    return axios.put(API_URL + url, data)
  },

  delete(url) {
    return axios.delete(API_URL + url)
  }
}

3. 在 Vue 组件中使用 API 服务：

import api from '@/services/api'

export default {
  data() {
    return {
      items: []
    }
  },

  mounted() {
    api.get('items')
      .then(response => {
        this.items = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}

在这个示例中，我们定义了一个 API 服务，包含了发送 GET、POST、PUT 和 DELETE 请求的方法。在组件中使用这个服务，通过调用 get 方法获取数据，并将响应中的数据赋值给组件的 items 属性。

通过这种方式，我们可以在 Vue 组件中轻松地与后端进行数据交互，实现前后端分离。同时，Axios 还支持拦截器、请求取消等功能，可以满足不同场景的需求。

用springboot+vue+mybatis+axios写一个前后端分离登录注册

好的，下面是一个简单的示例：

### 后端部分

#### 1. 创建Spring Boot项目

使用Spring Initializr创建一个基于Maven的Spring Boot项目，勾选Web、MyBatis、MySQL、Lombok等依赖。

#### 2. 配置数据库连接

在`application.properties`文件中配置数据库连接信息：

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/mydb?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=123456

#### 3. 创建数据库表

创建一个名为`user`的表，包含`id`、`username`、`password`三个字段。

#### 4. 创建实体类和Mapper

创建一个名为`User`的实体类，对应数据库中的`user`表。同时，创建一个名为`UserMapper`的Mapper接口，用于操作数据库中的`user`表。

#### 5. 创建Controller

创建一个名为`UserController`的Controller类，用于处理用户相关的请求。

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    @PostMapping("/register")
    public Result register(@RequestBody User user) {
        userService.register(user);
        return Result.success();
    }

    @PostMapping("/login")
    public Result login(@RequestBody User user) {
        User result = userService.login(user.getUsername(), user.getPassword());
        if (result != null) {
            return Result.success(result);
        } else {
            return Result.error("用户名或密码错误");
        }
    }
}

#### 6. 创建Service

创建一个名为`UserService`的Service接口，包含用户注册和登录的方法。

public interface UserService {

    void register(User user);

    User login(String username, String password);
}

创建一个名为`UserServiceImpl`的Service实现类，实现`UserService`接口中的方法。

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserMapper userMapper;

    @Override
    public void register(User user) {
        userMapper.insert(user);
    }

    @Override
    public User login(String username, String password) {
        return userMapper.selectByUsernameAndPassword(username, password);
    }
}

#### 7. 创建返回结果类

创建一个名为`Result`的类，用于封装接口的返回结果。

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result {

    private int code;

    private String msg;

    private Object data;

    public static Result success() {
        return new Result(200, "success", null);
    }

    public static Result success(Object data) {
        return new Result(200, "success", data);
    }

    public static Result error(String msg) {
        return new Result(500, msg, null);
    }
}

### 前端部分

#### 1. 创建Vue项目

使用Vue CLI创建一个基于Vue.js的项目。

#### 2. 安装Axios

使用npm安装Axios。

npm install axios --save

#### 3. 创建登录和注册组件

创建一个名为`Login`的组件，包含用户名和密码输入框、登录按钮和注册链接。

<template>
  <div class="login">
    <h2>登录</h2>
    <form>
      <div class="form-group">
        <label>用户名：</label>
        <input type="text" class="form-control" v-model="username">
      </div>
      <div class="form-group">
        <label>密码：</label>
        <input type="password" class="form-control" v-model="password">
      </div>
      <button type="button" class="btn btn-primary" @click="login">登录</button>
    </form>
    <div class="register-link">
      <a href="javascript:void(0)" @click="goRegister">没有账号？去注册</a>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      axios.post('/user/login', {
        username: this.username,
        password: this.password
      }).then(res => {
        if (res.data.code === 200) {
          alert('登录成功')
        } else {
          alert(res.data.msg)
        }
      }).catch(err => {
        console.error(err)
      })
    },
    goRegister () {
      this.$router.push('/register')
    }
  }
}
</script>

创建一个名为`Register`的组件，包含用户名、密码和确认密码输入框、注册按钮和登录链接。

<template>
  <div class="register">
    <h2>注册</h2>
    <form>
      <div class="form-group">
        <label>用户名：</label>
        <input type="text" class="form-control" v-model="username">
      </div>
      <div class="form-group">
        <label>密码：</label>
        <input type="password" class="form-control" v-model="password">
      </div>
      <div class="form-group">
        <label>确认密码：</label>
        <input type="password" class="form-control" v-model="confirmPassword">
      </div>
      <button type="button" class="btn btn-primary" @click="register">注册</button>
    </form>
    <div class="login-link">
      <a href="javascript:void(0)" @click="goLogin">已有账号？去登录</a>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      username: '',
      password: '',
      confirmPassword: ''
    }
  },
  methods: {
    register () {
      if (this.password !== this.confirmPassword) {
        alert('两次输入密码不一致')
        return
      }
      axios.post('/user/register', {
        username: this.username,
        password: this.password
      }).then(res => {
        if (res.data.code === 200) {
          alert('注册成功，请登录')
          this.$router.push('/login')
        } else {
          alert(res.data.msg)
        }
      }).catch(err => {
        console.error(err)
      })
    },
    goLogin () {
      this.$router.push('/login')
    }
  }
}
</script>

#### 4. 配置路由

在`router/index.js`文件中配置路由。

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Register from '@/components/Register'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/register',
      component: Register
    }
  ]
})

#### 5. 运行项目

启动Spring Boot项目和Vue项目后，访问`http://localhost:8080`即可看到登录页面。