本文最后更新于91 天前，其中的信息可能已经过时，如有其他问题请留言

AI智能摘要

SpringBoot 和 Vue.js 是现代 Java 后端开发和前端开发的关键技术。SpringBoot 是一个简化的 Java 框架，它结合了 Spring 的核心功能与自动配置、起步依赖、内嵌服务器和生产级监控。而 Vue.js 是一种渐进式 JavaScript 框架，用于构建用户界面，尤其适合开发后台管理系统和前后端分离的项目。两者在现代 Web 开发中是黄金搭档，共同推动着技术的进步。

SpringBoot 是什么

SpringBoot 是现代 Java 后端开发的 “标配”，它把 Spring 的强大能力与 “极简开发” 完美结合，让开发者专注业务、远离配置，是学习 Java Web、微服务、云原生的必学框架。

一句话概括：

SpringBoot = Spring 基础能力 + 自动配置 + 起步依赖 + 内嵌服务器 + 生产级监控

Vue是什么

Vue（全称 Vue.js） 是一套渐进式 JavaScript 前端框架，是轻量、易学、组件化的前端框架，是目前国内开发后台管理系统、前后端分离项目的首选前端技术，和 SpringBoot 是黄金搭档。

一句话：Vue 就是帮我们快速、简洁写网页前端代码的工具框架。

一、环境准备

JDK 17+
MySQL 8.0+
Node.js 16+
IDEA + VS Code

二、 SpringBoot 项目搭建

话不多说，直接上实操

步骤 1：创建 SpringBoot 项目

打开 IDEA → New Project → Spring Boot
项目信息：
- Java 24
- Maven
- SpringBoot 4.0.6
勾选依赖：
- Spring Web
- Spring Data JPA
- MySQL Driver
- Lombok

修改application.properties

# 端口
server.port=8080

# 数据库连接
spring.datasource.url=jdbc:mysql://localhost:3306/desserts?useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# JPA
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true

步骤二：创建前端Vue项目

在项目目录中打开命令提示符，创建Vue项目

npm create vue@latest

进入vue项目目录安装依赖

npm install
npm install axios element-plus vue-router

修改前端的main.js文件，与后端连接

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from 'axios'

const app = createApp(App)

axios.defaults.baseURL = 'http://localhost:8080'
app.config.globalProperties.$axios = axios

app.use(ElementPlus)
app.use(router)
app.mount('#app')

创建路由，在src下创建router目录，创建index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

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

export default router

在src目录下创建views目录，创建Home.vue

<template>
  <div style="padding: 20px;">
    <h1>Vue 前端已启动成功！</h1>
    <el-button type="primary" @click="testBackend" style="margin: 20px 0;">
      调用 SpringBoot 接口
    </el-button>
    <p style="color: blue; font-size: 18px;">{{ msg }}</p>
  </div>
</template>

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

const msg = ref('')

const testBackend = async () => {
  try {
    // 直接使用完整地址请求，不依赖baseURL配置
    const res = await axios.get('http://localhost:8080/test')
    msg.value = res.data
  } catch (err) {
    console.error('请求失败:', err)
    // 打印错误详情到控制台，方便排查
    alert('请求失败！错误详情已打印在控制台，请按F12查看')
    msg.value = '请求失败！请检查控制台错误'
  }
}
</script>

步骤三：后端实现接口连接

配置跨域:在com.example.website_mater目录下创建config ， controller目录.config目录下创建CorsConfig.java

package com.example.website_mater.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 CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                // 明确指定允许的前端源（必须和你的浏览器地址一致）
                .allowedOrigins("http://localhost:5173")
                // 允许所有请求方法
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                // 允许所有请求头
                .allowedHeaders("*")
                // 允许携带Cookie
                .allowCredentials(true)
                // 预检请求有效期
                .maxAge(3600);
    }
}

在controller目录下创建TestController.java

package com.example.website_mater.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://localhost:5173") // 直接放行前端地址
public class TestController {
    @GetMapping("/test")
    public String test() {
        return "✅ SpringBoot 连接成功！前后端联调完成！";
    }
}

实现效果，单击按钮后出现连接成功提示

步骤四：用户登录（连接数据库）

新建数据表

CREATE DATABASE desserts;
USE desserts;

CREATE TABLE t_user (
    id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(100) NOT NULL,
    active int 
);

后端实现接口，在src下创建service目录，创建UserService.java

package com.example.website_mater.service;

import com.example.website_mater.entity.User;
import com.example.website_mater.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserService {

    @Autowired
    private UserMapper userMapper;

    // 注册
    public String register(User user) {
        User exist = userMapper.findByUsername(user.getUsername());
        if (exist != null) {
            return "用户名已存在";
        }
        userMapper.save(user);
        return "注册成功";
    }

    // 登录
    public String login(User user) {
        User exist = userMapper.findByUsername(user.getUsername());
        if (exist == null) {
            return "用户不存在";
        }
        if (!exist.getPassword().equals(user.getPassword())) {
            return "密码错误";
        }
        return "登录成功";
    }
}

在src下创建mapper目录，创建UserMapper.java

package com.example.website_mater.mapper;

import com.example.website_mater.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;

public interface UserMapper extends JpaRepository<User, Integer> {
    User findByUsername(String username);
}

在src下创建entity目录，创建User.java

package com.example.website_mater.entity;

import jakarta.persistence.*;
import lombok.Data;

@Data
@Entity
@Table(name = "t_user")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;
    private String username;
    private String password;
    private int active;
}

在controller下创建UserController.java

package com.example.website_mater.controller;

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

@RestController
@RequestMapping("/user")
@CrossOrigin(origins = "http://localhost:5173")
public class UserController {

    @Autowired
    private UserService userService;

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

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

步骤五：前端登录页面

配置路由

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Register from '../views/Register.vue'
import Home from '../views/Home.vue'

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  { path: '/home', component: Home }
]

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

export default router

编写登录页面代码

<template>
  <div style="width: 400px; margin: 100px auto;">
    <h2>用户登录</h2>
    <el-input v-model="user.username" placeholder="用户名" style="margin:10px 0;" />
    <el-input v-model="user.password" placeholder="密码" type="password" style="margin:10px 0;" />
    <el-button type="primary" @click="login" style="width:100%;">登录</el-button>
    <el-button @click="$router.push('/register')" style="width:100%;margin-top:10px;">去注册</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()

const user = ref({ username: '', password: '' })

const login = async () => {
  const res = await axios.post('http://localhost:8080/user/login', user.value)
  ElMessage.success(res.data)
  if (res.data === '登录成功') {
    router.push('/home')
  }
}
</script>

编写注册页面代码

<template>
  <div style="width: 400px; margin: 100px auto;">
    <h2>用户注册</h2>
    <el-input v-model="user.username" placeholder="用户名" style="margin:10px 0;" />
    <el-input v-model="user.password" placeholder="密码" type="password" style="margin:10px 0;" />
    <el-button type="primary" @click="register" style="width:100%;">注册</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()

const user = ref({ username: '', password: '' })

const register = async () => {
  const res = await axios.post('http://localhost:8080/user/register', user.value)
  ElMessage.success(res.data)
  if (res.data === '注册成功') {
    router.push('/login')
  }
}
</script>

步骤六：用户登录信息保存

后端修改 UserController.java

package com.example.website_mater.controller;

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

@RestController
@RequestMapping("/user")
@CrossOrigin(origins = "http://localhost:5173")
public class UserController {

    @Autowired
    private UserService userService;

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

    // 改成这个
    @PostMapping("/login")
    public Object login(@RequestBody User user) {
        User loginUser = userService.getLoginUser(user);
        if (loginUser == null) {
            return "用户名或密码错误";
        }
        return loginUser;
    }

}

修改 UserService.java

@Service
public class UserService {

    @Autowired
    private UserMapper userMapper;

    public String register(User user) {
        User exist = userMapper.findByUsername(user.getUsername());
        if (exist != null) {
            return "用户名已存在";
        }
        userMapper.save(user);
        return "注册成功";
    }

    public String login(User user) {
        User exist = userMapper.findByUsername(user.getUsername());
        if (exist == null) {
            return "用户不存在";
        }
        if (!exist.getPassword().equals(user.getPassword())) {
            return "密码错误";
        }
        return "登录成功";
    }

    // 新增这个方法
    public User getLoginUser(User user) {
        User u = userMapper.findByUsername(user.getUsername());
        if (u == null) return null;
        if (!u.getPassword().equals(user.getPassword())) return null;
        return u;
    }
}

前端首页显示登录信息

<template>
  <div style="width: 400px; margin: 100px auto;">
    <h2 style="text-align: center;">用户登录</h2>
    <el-input 
      v-model="user.username" 
      placeholder="请输入用户名" 
      style="margin:10px 0;" 
    />
    <el-input 
      v-model="user.password" 
      placeholder="请输入密码" 
      type="password" 
      style="margin:10px 0;" 
    />
    <el-button type="primary" @click="login" style="width:100%;margin-top:10px;">
      登录
    </el-button>
    <el-button @click="$router.push('/register')" style="width:100%;margin-top:10px;">
      去注册
    </el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const router = useRouter()
// 绑定表单数据
const user = ref({
  username: '',
  password: ''
})

// 登录方法
const login = async () => {
  try {
    const res = await axios.post('http://localhost:8080/user/login', user.value)
    
    // 如果返回有 id，说明是用户对象 = 登录成功
    if (res.data.id) {
      ElMessage.success('登录成功')

      // ========== 保存用户信息到本地存储 ==========
      localStorage.setItem('userId', res.data.id)
      localStorage.setItem('username', res.data.username)

      // 跳转到首页
      router.push('/home')
    } else {
      // 返回字符串提示：用户名密码错误
      ElMessage.error(res.data)
    }
  } catch (err) {
    ElMessage.error('请求失败，请检查后端服务是否启动')
    console.log(err)
  }
}
</script>

首页显示Home.vue

<template>
  <div style="text-align: center; margin-top: 120px;">
    <h1>🎉 欢迎进入系统主页</h1>
    <h3 style="margin: 20px 0;">当前登录用户：{{ loginName }}</h3>

    <el-button type="danger" @click="logout">退出登录</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
// 定义显示的用户名
const loginName = ref('')

// 页面加载时读取本地存储的用户名
onMounted(() => {
  loginName.value = localStorage.getItem('username') || '游客'
})

// 退出登录
const logout = () => {
  // 清空本地保存的用户信息
  localStorage.removeItem('userId')
  localStorage.removeItem('username')

  // 跳回登录页
  router.push('/login')
}
</script>

一	二	三	四	五	六	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

网页统计

分类

近期文章

SpringBoot 是什么

Vue是什么

一、环境准备

二、 SpringBoot 项目搭建

步骤 1：创建 SpringBoot 项目

步骤二：创建前端Vue项目

步骤三：后端实现接口连接

步骤四：用户登录（连接数据库）

步骤五：前端登录页面

步骤六：用户登录信息保存

发送评论编辑评论

SpringBoot 是什么

Vue是什么

一、环境准备

二、 SpringBoot 项目搭建

步骤 1：创建 SpringBoot 项目

步骤二：创建前端Vue项目

步骤三：后端实现接口连接

步骤四：用户登录（连接数据库）

步骤五：前端登录页面

步骤六：用户登录信息保存

发送评论 编辑评论

推荐文章

发送评论编辑评论