Java框架快速入门: Spring Security+OAuth2之开发环境搭建

纲要

  • 前端环境准备
    • Node.jsNPM 的安装及版本选择
    • 配置淘宝镜像 CNPM 加速包下载
    • 前端工程化工具 Vue CLI 简介
  • 后端环境准备
    • OpenJDK 11 安装
    • Maven 依赖管理与构建工具
    • 集成开发环境 IntelliJ IDEA 版本选择
  • IDE 效率增强
    • 推荐插件安装(EnvFile、Lombok、HTTP Client)
    • 热启动/热部署配置
    • 替代方案 VS Code 及相关扩展
  • 浏览器调试工具
    • Chrome DevTools 前后端联调
    • Vue DevTools 辅助前端调试
  • 项目初始化验证环境

前端环境准备

本次 Spring Security + OAuth2 的项目包含前后端分离架构,前端基于 Vue.js 构建,因此需要先配置好前端运行环境。

Node.js 与 NPM

Node.js 为 JavaScript 提供了服务器端运行时,类比 Java 中的 JVM。访问 nodejs.org 下载长期支持版(LTS)。课程兼容 Node 12 和 14,安装完成后通过命令行验证:

node -v
npm -v

NPM 是 Node 自带的包管理工具,作用类似 Java 的 Maven,用于管理项目依赖。默认源下载速度可能较慢,可以切换到淘宝团队维护的 CNPM 镜像:

npm install -g cnpm --registry=https://registry.npmmirror.com

之后使用 cnpm 替代 npm 命令即可提速。前端工程通过 Vue CLI 创建,它能屏蔽 webpack 等复杂配置,让开发者聚焦业务逻辑。

后端环境准备

后端技术栈基于 Java,需要安装 JDK 和构建工具。

OpenJDK 11

课程使用 OpenJDK 11,可从 AdoptOpenJDK 下载。安装后设置 JAVA_HOME 环境变量,并确保命令行可调用:

java -version

Maven

Maven 是 Java 项目依赖管理与构建的事实标准。如果使用 IntelliJ IDEA 开发,IDE 已内置 Maven,无需额外安装;若偏爱命令行或其它编辑器,则需手动下载配置,并保证 mvn 命令可用。

IntelliJ IDEA

选择 JetBrains 出品的 IntelliJ IDEA Ultimate 版本(可试用 30 天),它内置了对 Spring Boot、OAuth2 等框架的高级支持。社区版虽免费,但缺少部分实用插件。安装完成后,打开项目时 IDEA 会自动识别 Maven 工程并下载依赖。

IDE 效率增强

为使开发更加顺畅,建议安装以下插件:

  • EnvFile:支持从文件中加载环境变量,在运行配置中引用 .env 文件,管理密钥等敏感信息非常方便。
  • Lombok:通过注解自动生成 getter/setter、构造器等样板代码,需在项目中引入 Lombok 依赖并安装此插件,否则 IDE 会误报错误。
  • HTTP Client(Ultimate 内置):在编辑器中直接编写 .http 文件发送 HTTP 请求,便于快速测试 REST API 和 OAuth2 端点。

热启动配置

后端热部署不如前端便捷,但可通过以下设置实现“类保存即编译”,切换窗口后触发重启:

  1. 打开 PreferencesBuild, Execution, DeploymentCompiler,勾选 Build project automatically
  2. 双击 Shift 唤出 Search Everywhere,输入 registry,选择 Registry...,找到并勾选 compiler.automake.allow.when.app.running

现在修改代码后切换到浏览器或其他窗口,应用将自动重新编译加载。

VS Code 备选方案

若没有 IDEA Ultimate,可使用 VS Code 搭配以下扩展实现相近功能:

  • Debugger for Chrome:调试前端 JavaScript。
  • REST Client:与 IDEA 的 HTTP Client 兼容,可直接执行 .http 文件。
  • Vetur(Vue extension pack):增强 Vue 文件编辑体验。
  • Java Extension Pack:提供 Java 语言支持,但完整工程化体验仍不如 IDEA。

浏览器调试工具

前后端联调阶段,Chrome DevTools 不可或缺。按下 F12 打开开发者工具,常用面板包括:

  • Elements:查看和实时修改 DOM 与 CSS。
  • Console:输出日志、执行脚本。
  • Network:监控所有网络请求,查看 OAuth2 令牌请求、API 调用详情。
  • Application:管理 Cookies、LocalStorage 等。

针对 Vue 项目,建议安装 Vue DevTools 浏览器扩展,方便查看组件树、状态变化。

项目初始化验证环境

完成上述配置后,可使用 Spring Initializr 快速生成一个 Spring Boot 项目骨架,验证环境是否就绪。以下是一个最小可运行示例,整合了 Spring Security 与 OAuth2 依赖。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
         https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.12</version>
        <relativePath/>
    </parent>
    <groupId>com.example</groupId>
    <artifactId>oauth2-demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>oauth2-demo</name>

    <properties>
        <java.version>11</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-oauth2-client</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

启动类:

package com.example.oauth2demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class OAuth2DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(OAuth2DemoApplication.class, args);
    }
}

在项目根目录执行 mvn spring-boot:run 或通过 IDEA 启动,控制台输出 Started OAuth2DemoApplication 即表示环境配置成功。后续我们将基于此骨架逐步集成认证授权功能。

总结

本文系统梳理了 Spring Security + OAuth2 开发环境搭建的全过程。前端部分需要安装 Node.js(推荐 12 或 14 长期支持版)和 NPM,利用 CNPM 镜像提升依赖下载速度,并通过 Vue CLI 创建前端工程。

后端环境以 OpenJDK 11 为基础,使用 Maven 管理依赖,推荐 IntelliJ IDEA Ultimate 以获得更好的 Spring 支持。为提升开发效率,建议安装 EnvFile、Lombok 插件,并启用 IDE 的热部署功能;若无 Ultimate 版本,VS Code 配合 REST Client、Java Extension Pack 等扩展可作为替代。

调试阶段,Chrome DevTools 的 Network 面板和 Vue DevTools 是前后端联调的核心工具。最后,通过一个包含 Spring Security、OAuth2 Client 依赖的 Spring Boot 项目骨架,验证了所有环境配置的正确性。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wang's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值