Vue3 SpringBoot Axios注册小案例

好的，下面是Vue3 SpringBoot Axios注册小案例的步骤：

1. 创建Vue3项目

使用Vue CLI创建一个新的Vue3项目，可以使用以下命令：

vue create vue3-demo

然后安装Axios：

npm install axios --save

2. 创建注册页面

在Vue3项目中创建一个注册页面，可以使用以下代码：

<template>
  <div class="register">
    <h2>注册</h2>
    <form>
      <div>
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username" />
      </div>
      <div>
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" />
      </div>
      <div>
        <label for="email">邮箱</label>
        <input type="email" id="email" v-model="email" />
      </div>
      <button @click.prevent="register">注册</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
      email: '',
    };
  },
  methods: {
    register() {
      axios.post('http://localhost:8080/register', {
        username: this.username,
        password: this.password,
        email: this.email,
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.log(error);
      });
    },
  },
};
</script>

<style>
.register {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.register h2 {
  text-align: center;
}
.register form {
  display: flex;
  flex-direction: column;
}
.register div {
  margin-bottom: 10px;
}
.register label {
  font-weight: bold;
  margin-right: 10px;
}
.register input {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.register button {
  margin-top: 10px;
  padding: 5px;
  border-radius: 5px;
  border: none;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}
</style>

3. 创建SpringBoot项目

使用Spring Initializr创建一个新的SpringBoot项目，添加Web和MyBatis依赖。

4. 创建数据库表

在MySQL中创建一个名为user的表，包含id、username、password和email字段。

5. 创建实体类和Mapper

创建一个User实体类和一个UserMapper接口，用于操作user表。

User实体类：

public class User {
    private int id;
    private String username;
    private String password;
    private String email;
    
    // getters and setters
}

UserMapper接口：

@Mapper
public interface UserMapper {
    @Insert("insert into user(username, password, email) values(#{username}, #{password}, #{email})")
    int insert(User user);
}

6. 创建Controller

创建一个UserController类，用于处理注册请求。

@RestController
public class UserController {
    @Autowired
    private UserMapper userMapper;
    
    @PostMapping("/register")
    public String register(@RequestBody User user) {
        int result = userMapper.insert(user);
        if (result == 1) {
            return "注册成功";
        } else {
            return "注册失败";
        }
    }
}

7. 运行项目

在命令行中进入SpringBoot项目目录，运行以下命令启动项目：

mvn spring-boot:run

然后在浏览器中打开Vue3项目，访问注册页面，输入用户名、密码和邮箱，点击注册按钮，就可以向SpringBoot后台发送注册请求了。注册成功后，在控制台中可以看到输出的信息。

以上就是Vue3 SpringBoot Axios注册小案例的步骤。