当前位置：首页 > java >正文

完整 Spring Boot + Vue 登录系统

java 2025/7/14 19:46:57

项目名称：springboot-vue-login-template

✅ 功能一览

模块	功能
后端	Spring Boot + MyBatis Plus + JWT + Shiro
数据库	MySQL 用户表
前端	Vue3 + Element Plus + Axios
登录流程	用户名/密码验证 → 返回 Token → 存储 LocalStorage
权限控制	拦截器校验 Token + Shiro 角色权限
跨域配置	后端支持跨域请求
接口安全	所有接口需携带 Token 访问

📁 项目结构概览

springboot-vue-login-template/
├── backend/             # Spring Boot 后端模块
│   ├── src/main/java      # Java源码
│   ├── src/main/resources # 配置文件
│   └── pom.xml            # Maven依赖管理
├── frontend/            # Vue3 前端模块
│   ├── public/
│   ├── src/
│   │   ├── views/         # 页面组件
│   │   ├── utils/         # 工具类
│   │   └── main.js        # 入口文件
│   └── package.json       # 依赖管理
└── README.md              # 项目说明文档

🧱 数据库脚本（MySQL）

CREATE DATABASE springboot_login;USE springboot_login;CREATE TABLE sys_user (id BIGINT PRIMARY KEY AUTO_INCREMENT,username VARCHAR(50) NOT NULL UNIQUE,password VARCHAR(100) NOT NULL,nickname VARCHAR(50),create_time DATETIME DEFAULT CURRENT_TIMESTAMP
);-- 示例用户（密码为123456）
INSERT INTO sys_user (username, password, nickname)
VALUES ('admin', '$2a$10$eACCYoNOHEzWZhE8Cwe6gOXEpTLExV6l', '管理员');

🚀 后端代码（Spring Boot）

1. `application.yml`

server:port: 8080spring:datasource:url: jdbc:mysql://localhost:3306/springboot_login?useSSL=false&serverTimezone=UTCusername: rootpassword: yourpassworddriver-class-name: com.mysql.cj.jdbc.Drivermybatis-plus:mapper-locations: classpath:/mapper/*.xml

2. JWT 工具类 `JwtUtils.java`

import io.jsonwebtoken.*;
import java.util.Date;public class JwtUtils {private static final String SECRET = "your-secret-key";private static final long EXPIRATION = 86400000; // 24小时public static String generateToken(String username) {return Jwts.builder().setSubject(username).setExpiration(new Date(System.currentTimeMillis() + EXPIRATION)).signWith(SignatureAlgorithm.HS512, SECRET).compact();}public static String parseToken(String token) {return Jwts.parser().setSigningKey(SECRET).parseClaimsJws(token).getBody().getSubject();}
}

3. 登录接口 `AuthController.java`

@RestController
@RequestMapping("/api/auth")
public class AuthController {@Autowiredprivate UserService userService;@PostMapping("/login")public ResponseEntity<?> login(@RequestBody LoginRequest request) {SysUser user = userService.findByUsername(request.getUsername());if (user == null || !user.getPassword().equals(request.getPassword())) {throw new RuntimeException("用户名或密码错误");}String token = JwtUtils.generateToken(user.getUsername());return ResponseEntity.ok().header("Authorization", "Bearer " + token).build();}
}

4. 自定义拦截器 `JwtInterceptor.java`

@Component
public class JwtInterceptor implements HandlerInterceptor {@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {String token = request.getHeader("Authorization");if (token != null && token.startsWith("Bearer ")) {token = token.substring(7);String username = JwtUtils.parseToken(token);UsernamePasswordToken shiroToken = new UsernamePasswordToken(username, "");SecurityUtils.getSubject().login(shiroToken);}return true;}
}

5. 注册拦截器 `WebConfig.java`

@Configuration
public class WebConfig implements WebMvcConfigurer {@Autowiredprivate JwtInterceptor jwtInterceptor;@Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(jwtInterceptor).addPathPatterns("/**").excludePathPatterns("/api/auth/login");}
}

🖥️ 前端代码（Vue3 + Element Plus）

1. 安装依赖

npm install axios element-plus

2. 登录页面组件 `Login.vue`

<template><div style="max-width: 400px; margin: 100px auto;"><h2>登录</h2><el-input v-model="username" placeholder="用户名"></el-input><el-input v-model="password" type="password" placeholder="密码" @keyup.enter.native="login"></el-input><el-button @click="login" type="primary">登录</el-button></div>
</template><script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';const router = useRouter();
const username = ref('');
const password = ref('');const login = async () => {try {const res = await axios.post('http://localhost:8080/api/auth/login', {username: username.value,password: password.value});const token = res.headers.authorization;localStorage.setItem('token', token);router.push('/home');} catch (error) {alert('登录失败');}
};
</script>

3. Axios 请求封装 `utils/request.js`

import axios from 'axios';const service = axios.create({baseURL: 'http://localhost:8080',timeout: 5000
});service.interceptors.request.use(config => {const token = localStorage.getItem('token');if (token) {config.headers.Authorization = token;}return config;
});export default service;

📝 项目启动说明（README.md）

# Spring Boot + Vue 登录系统模板## 后端启动1. 创建数据库并导入数据
2. 修改 `application.yml` 中的数据库配置
3. 使用 IDEA 或命令行运行 Spring Boot 项目：```bash
cd backend
mvn spring-boot:run