使用springboot和vue实现登陆注册功能

好的，下面是一个简单的使用 Spring Boot 和 Vue.js 实现登录注册功能的步骤：

1. 创建一个 Spring Boot 项目，并添加 Spring Security 的依赖。在 pom.xml 文件中添加以下依赖：

<dependencies>
    <!-- Spring Security -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>
    <!-- MySQL 驱动 -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>
</dependencies>

2. 配置 Spring Security。在 Spring Boot 项目中，可以通过创建一个 `WebSecurityConfig` 类并继承 `WebSecurityConfigurerAdapter` 类来配置 Spring Security。在这个类中，可以指定登录页面、登录请求的处理方式等。以下是一个简单的配置示例：

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
                .antMatchers("/", "/home", "/register").permitAll()
                .anyRequest().authenticated()
                .and()
            .formLogin()
                .loginPage("/login")
                .permitAll()
                .and()
            .logout()
                .permitAll();
    }

    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
        auth
            .inMemoryAuthentication()
                .withUser("user").password("{noop}password").roles("USER");
    }
}

上面的配置中，`configure` 方法用于配置请求的授权，指定一些请求需要登录才能访问。`.formLogin()` 方法用于配置登录页面，`.logout()` 方法用于配置登出操作。`configureGlobal` 方法用于配置用户认证，这里使用了一个内存用户。

3. 创建一个 RESTful API。在 Spring Boot 中，可以使用 `@RestController` 注解来创建一个 RESTful API。以下是一个简单的示例：

@RestController
public class UserController {
    @Autowired
    private UserService userService;

    @PostMapping("/register")
    public ResponseEntity<?> register(@RequestBody User user) {
        if (userService.createUser(user)) {
            return ResponseEntity.ok("User created successfully");
        } else {
            return ResponseEntity.badRequest().body("User already exists");
        }
    }

    @GetMapping("/user/{id}")
    public ResponseEntity<User> getUserById(@PathVariable("id") Long id) {
        User user = userService.getUserById(id);

        if (user == null) {
            return ResponseEntity.notFound().build();
        } else {
            return ResponseEntity.ok(user);
        }
    }
}

上面的代码中，`@PostMapping("/register")` 注解用于指定注册请求的处理方法，`@RequestBody` 注解用于将请求体中的 JSON 转换为 User 对象。`@GetMapping("/user/{id}")` 注解用于指定获取用户信息的请求处理方法，`@PathVariable("id")` 注解用于将 URL 中的参数解析为 id 变量。

4. 创建一个 Vue.js 组件。在 Vue.js 中，可以使用 `axios` 库来发送 AJAX 请求。以下是一个简单的 Vue.js 组件示例：

<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="login">
      <div>
        <label>Username:</label>
        <input type="text" v-model="username" required>
      </div>
      <div>
        <label>Password:</label>
        <input type="password" v-model="password" required>
      </div>
      <div>
        <button type="submit">Login</button>
      </div>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

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

上面的代码中，`@submit.prevent="login"` 注解用于指定表单提交时调用 `login` 方法。`axios.post('/login', {...})` 用于发送登录请求，其中 `{...}` 是一个 JavaScript 对象，包含了用户名和密码。

5. 创建一个注册页面。可以通过 Vue.js 组件来创建一个注册页面，与登录页面类似。

6. 启动应用程序。可以使用 `mvn spring-boot:run` 命令来启动应用程序，然后在浏览器中访问 `http://localhost:8080` 来查看页面。