springboot vue mysql登录注册页面

### 使用 Spring Boot、Vue 和 MySQL 创建登录注册页面 为了实现基于 Spring Boot、Vue 和 MySQL 的用户认证功能，可以按照以下架构设计： #### 后端部分 (Spring Boot) 后端主要负责处理业务逻辑以及与数据库交互。使用 Spring Security 来保护应用程序的安全性。 - **依赖配置** 在 `pom.xml` 文件中引入必要的依赖项[^1]: ```xml <dependencies> <!-- Spring Boot Starter Web --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- Spring Boot Starter Data JPA --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <!-- MySQL Connector Java --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <!-- Spring Boot Starter Security --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> <!-- Other dependencies... --> </dependencies> ``` - **实体类定义** 创建 User 实体来表示用户的表结构: ```java @Entity public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String username; private String password; // Getters and Setters... } ``` - **控制器层** 编写 RESTful API 控制器用于接收前端请求并返回 JSON 数据给客户端应用: ```java @RestController @RequestMapping("/api/auth") public class AuthController { @Autowired private UserService userService; @PostMapping("/register") public ResponseEntity<?> register(@RequestBody RegisterRequest request){ try{ userService.register(request); return new ResponseEntity<>(HttpStatus.CREATED); }catch(Exception e){ return new ResponseEntity<>(e.getMessage(), HttpStatus.BAD_REQUEST); } } @PostMapping("/login") public ResponseEntity<TokenResponse> login(@RequestBody LoginRequest request, HttpServletResponse response){ TokenResponse token = userService.login(request.getUsername(),request.getPassword()); Cookie cookie=new Cookie("token",token.getToken()); cookie.setHttpOnly(true); response.addCookie(cookie); return new ResponseEntity<>(token,HttpStatus.OK); } } ``` #### 前端部分 (Vue.js) 前端采用 Vue CLI 构建工具搭建项目框架，并通过 Axios 库发起 HTTP 请求调用后端接口完成数据交换操作。 - **安装所需库** 执行命令安装 axios 及其他可能需要用到的包: ```bash npm install --save axios vuex vue-router ``` - **组件开发** 构建两个基本视图组件分别对应登录页和注册页，在这些页面上放置输入框收集用户名密码信息并通过事件触发提交动作发送至服务器验证身份合法性或者保存新账户记录到数据库里去. ```html <!-- src/components/Login.vue --> <template> <div> <h2>Login Page</h2> <form @submit.prevent="handleLogin"> <input v-model="username" placeholder="Username"/> <br/> <input type="password" v-model="password" placeholder="Password"/> <button type="submit">Submit</button> </form> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const username = ref(''); const password = ref(''); function handleLogin(){ console.log(`Logging in with ${username.value} / ${password.value}`); fetch('/api/auth/login', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({username,password}) }).then(response => response.json()) .then(data=>console.log('Success:', data)) .catch((error)=>console.error('Error:', error)); }; return { username, password, handleLogin }; }, }; </script> ``` 同样地也需要为 Registration 组件做类似的设置以便于能够向服务端传递新的 user 对象实例化一个新的账号资源对象存入持久化的存储介质之中.