項目名稱：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

前端啟動

cd frontend
npm install
npm run serve

訪問 http://localhost:8081