h5网站和传统网站区别,网站中的flash,小程序商城制作平台,精准数据库营销项目名称#xff1a;springboot-vue-login-template✅ 功能一览模块功能后端Spring Boot MyBatis Plus JWT Shiro数据库MySQL 用户表前端Vue3 Element Plus Axios登录流程用户名/密码验证 → 返回 Token → 存储 LocalStorage权限控制拦截器校验 Token Shiro 角色权限跨…
项目名称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?useSSLfalseserverTimezoneUTCusername: rootpassword: yourpassworddriver-class-name: com.mysql.cj.jdbc.Drivermybatis-plus:mapper-locations: classpath:/mapper/*.xml2. 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-plus2. 登录页面组件 Login.vue
templatediv stylemax-width: 400px; margin: 100px auto;h2登录/h2el-input v-modelusername placeholder用户名/el-inputel-input v-modelpassword typepassword placeholder密码 keyup.enter.nativelogin/el-inputel-button clicklogin typeprimary登录/el-button/div
/templatescript 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(登录失败);}
};
/script3. 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
