猫头虎分享 AIGC 时代：新项目如何快速基于 IDEA 和 ChatGPT 搞定 Spring Boot 3 + Vue 3 全栈开发环境搭建

- [IntelliJ IDEA](https://www.jetbrains.com/idea/)（建议使用 Ultimate 版，功能更强大，支持更多的后端框架和前端功能）
- [Node.js](https://nodejs.org/)（推荐 LTS 版本）
- [JDK 17](https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html)（Spring Boot 3.x 推荐使用 JDK 17 以上版本）
- [Maven](https://maven.apache.org/) 或 Gradle（Spring Boot 项目的构建工具）

- 操作系统：Windows/Mac/Linux
- 最低硬件配置：8GB 内存，500GB 硬盘（推荐 SSD）

- 配置国内镜像（如 Maven 阿里云镜像、NPM 淘宝镜像）以提高依赖下载速度。

- **Spring Web**：用于创建 RESTful API。
- **Spring Data JPA**：用于与数据库交互。
- **Spring Security**：用于实现身份认证和权限控制。
- **MySQL Driver**：连接 MySQL 数据库。

server:
  port: 8080

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/mydb?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC
    username: root
    password: root
  jpa:
    hibernate:
      ddl-auto: update
    show-sql: true
  sql:
    init:
      mode: always

package com.example.springbootvue3demo.controller;

import com.example.springbootvue3demo.model.User;
import com.example.springbootvue3demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api/users")
public class UserController {

    @Autowired
    private UserService userService;

    @PostMapping("/register")
    public String registerUser(@RequestBody User user) {
        userService.save(user);
        return "User registered successfully!";
    }

    @PostMapping("/login")
    public String loginUser(@RequestBody User user) {
        return userService.login(user);
    }

    @GetMapping("/{id}")
    public User getUser(@PathVariable Long id) {
        return userService.findById(id);
    }
}

package com.example.springbootvue3demo.model;

import javax.persistence.Entity;
import javax.persistence.Id;

@Entity
public class User {

    @Id
    private Long id;
    private String username;
    private String password;

    // Getters and setters
}

package com.example.springbootvue3demo.service;

import com.example.springbootvue3demo.model.User;
import org.springframework.stereotype.Service;

@Service
public class UserService {

    // Simulating database operations for demo purposes
    public void save(User user) {
        // Logic to save user to the database
    }

    public String login(User user) {
        // Simulate login logic
        return "Login successful for " + user.getUsername();
    }

    public User findById(Long id) {
        // Simulate fetching user from the database
        return new User();
    }
}

npm init vue@latest
cd vue3-project
npm install

npm install axios vue-router@4 pinia

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: () => import('../views/Home.vue') },
  { path: '/login', component: () => import('../views/Login.vue') },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null,
  }),
  actions: {
    setUser(user) {
      this.user = user;
    },
  },
});

<template>
  <form @submit.prevent="login">
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button type="submit">登录</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const username = ref('');
const password = ref('');

const login = async () => {
  const response = await axios.post('http://localhost:8080/api/users/login', {
    username: username.value,
    password: password.value,
  });
  console.log(response.data);
};
</script>

npm run dev

package com.example.springbootvue3demo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 允许所有路径
                .allowedOrigins("http://localhost:3000") // 允许的前端地址
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的请求方法
                .allowedHeaders("*") // 允许的请求头
                .allowCredentials(true); // 允许携带认证信息（如 Cookies）
    }
}

mvn spring-boot:run

npm install axios

import axios from 'axios';

const apiClient = axios.create({
    baseURL: 'http://localhost:8080/api', // 后端 API 的基础路径
    timeout: 5000, // 请求超时时间
    headers: {
        'Content-Type': 'application/json',
    },
});

export default apiClient;

<template>
    <form @submit.prevent="login">
        <input v-model="username" placeholder="用户名" />
        <input v-model="password" type="password" placeholder="密码" />
        <button type="submit">登录</button>
    </form>
</template>

<script setup>
import { ref } from 'vue';
import apiClient from '../utils/axios';

const username = ref('');
const password = ref('');

const login = async () => {
    try {
        const response = await apiClient.post('/users/login', {
            username: username.value,
            password: password.value,
        });
        console.log(response.data);
        alert('登录成功');
    } catch (error) {
        console.error(error);
        alert('登录失败');
    }
};
</script>

npm run dev

- 在浏览器中打开前端页面，填写用户名和密码，点击“登录”按钮。
- 检查后端日志或前端控制台，确认请求是否成功，返回的数据是否正确。

- **CORS 错误**：检查后端 CORS 配置是否正确，特别是 `allowedOrigins` 的值。
- **Axios 网络请求错误**：确保 Axios 的 `baseURL` 与后端实际地址一致。

const apiClient = axios.create({
    baseURL: 'http://localhost:8080/api/v1', // 添加版本号
    timeout: 5000,
    headers: {
        'Content-Type': 'application/json',
    },
});

 package com.example.demo.controller;

import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.Map;

@RestController
@RequestMapping("/api/auth")
public class LoginController {

    @PostMapping("/login")
    public Map<String, Object> login(@RequestParam String username, @RequestParam String password) {
        Map<String, Object> response = new HashMap<>();

        // 模拟用户验证逻辑
        if ("admin".equals(username) && "password123".equals(password)) {
            response.put("status", "success");
            response.put("message", "登录成功！");
            response.put("token", "fake-jwt-token"); // 生成的 token 示例
        } else {
            response.put("status", "error");
            response.put("message", "用户名或密码错误！");
        }

        return response;
    }
}

FROM openjdk:17-jdk-alpine
VOLUME /tmp
ARG JAR_FILE=target/spring-boot-vue3-demo-0.0.1-SNAPSHOT.jar
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java", "-jar", "/app.jar"]

FROM node:16
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "run", "dev"]

mysql -u root -p -h localhost -P 3306

npm config set registry https://registry.npm.taobao.org

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