SpringBoot+Vue全栈的一个简单入门案例

已于 2025-05-07 15:55:25 修改
阅读量1k 收藏 18
点赞数 8
CC 4.0 BY-SA版权
文章标签： spring boot vue.js 后端
于 2025-05-07 15:29:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gregmankiw/article/details/147763339

目录

开发环境

Github开源项目

入门一：跑起别人的开源项目

跑起前端Vue

跑起后端SpringBoot

运行效果

入门二：将HTML模板转成Vue组件

下载一个免费的HTML模板

通过Trae将HTML转成Vue组件

将生成Vue组件增加为Vue的一个路由节点

运行Vue看看效果​编辑

开发环境

  • IntelliJ IDEA 2024.3.5 (Ultimate Edition)：后端SpringBoot
  • WebStorm 2025.1：前端Vue
  • JDK21
  • Maven3.99
  • MySQL5.7/8.0
  • Node.js18.16.1
  • TraeCN0.5.6：免费AI IDE，提高工作效率
  • Navicat17

安装配置自行百度。

Github开源项目

入门一：跑起别人的开源项目

跑起前端Vue

  1. WebStorm打开todo-list-fullstack\client项目，执行npm install安装依赖；
  2. WebStorm添加npm运行配置，功能是执行npm run dev；
  3. 运行Vue

跑起后端SpringBoot

IDEA打开server/pom.xml导入工程

  1. 源项目数据库是postgresql，改为MySQL；
    1. pom.xml添加MySQL Driver依赖；
    2. application.properties添加MySQL配置 
      spring.datasource.url=jdbc:mysql://127.0.0.1:3306/FinalProject?characterEncoding=utf8&useSSL=false
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
  2. MySQL建立库和表；
    1. 使用字节的Trae处理todo-list-fullstack\database\create-script.sql，删除所有注释； 
      drop table if exists users, user_roles;
create table users (
    username varchar(255) primary key,
    email varchar(255),
    password varchar(255)
);

create table user_roles (
    username varchar(255),
    role varchar(255),
    primary key (username, role)
);

insert into users (username, password, email) values ('admin', '$2a$10$/2cfdNAuBaJOK/GeCG7r6.eU8a2jdqivs81fhpYdHBFk1L0dfZN3W', 'admin@example.com');
insert into user_roles (username, role) values ('admin', 'ADMIN');

drop table if exists todos;
create table todos (
    id serial primary key,
    title varchar(255),
    completed boolean default false
);

insert into todos (title) values ('Wash dishes');
insert into todos (title) values ('Feed Loki');
insert into todos (title) values ('Feed Cat');

    2. 新建数据库finalproject，并执行create-script.sql建立表

  3. 修改数据库用户admin登录密码为1234567890；

    1. 编辑server/Daos/JdbcUserDao.java，添加代码打断点后得到加密后的密码字符串；

      public JdbcUserDao(DataSource dataSource, PasswordEncoder passwordEncoder) {
        template = new JdbcTemplate(dataSource);
        this.passwordEncoder = passwordEncoder;
        // admin 1234567890 
        var x = passwordEncoder.encode("1234567890");
        // x = $2a$10$WbdzQ/8qfnx6MfQKgmkbceU/cQMshqarx1I42Y2619avW3yhdZWXC
    }

    2. 将生成的密码替换到数据库表user；

  4. 启动SpringBoot服务；

运行效果

入门二：将HTML模板转成Vue组件

下载一个免费的HTML模板

通过Trae将HTML转成Vue组件

  1. Vue项目新建文件夹src\template\login并将下载的HTML模板解压到src\template\login；
  2. 使用Trae将index.html转成Vue组件并改为Register.vue放入src\views； 
    <!DOCTYPE html>
<html lang="en"><!-- Basic -->
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
   
    <!-- Mobile Metas -->
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
     <!-- Site Metas -->
    <title>Login and Register tabbed form</title>  
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Site Icons -->
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">

    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
	<!-- Site CSS -->
    <link rel="stylesheet" href="css/style.css"> 
	<!-- Fontawesome CSS -->
    <link rel="stylesheet" href="css/all.min.css">  	
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/custom.css">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
<div id="particles-js" class="main-form-box">
	<div class="md-form">
		<div class="container">
			<div class="row">
				<div class="col-md-6 offset-md-3">
					<div class="panel panel-login">
						<div class="logo-top">
							<a href="#"><img src="images/logo.png" alt="" /></a>
						</div>
						<div class="panel-heading">
							<div class="row">
								<div class="col-lg-6 col-sm-6 col-xl-6">
									<a href="#" class="active" id="login-form-link">Login</a>
								</div>
								<div class="col-lg-6 col-sm-6 col-xl-6">
									<a href="#" id="register-form-link">Register</a>
								</div>
								<div class="or">OR</div>
							</div>
						</div>
						<div class="panel-body">
							<div class="row">
								<div class="col-lg-12">
									<form id="login-form" action="#" method="post" role="form" style="display: block;">
										<div class="form-group">
											<label class="icon-lp"><i class="fas fa-user-tie"></i></label>
											<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="" required="">
										</div>
										<div class="form-group">
											<label class="icon-lp"><i class="fas fa-key"></i></label>
											<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password" required="">
										</div>
										<div class="che-box">
											<label class="checkbox-in">
												<input name="checkbox" type="checkbox" tabindex="3" id="remember"> <span></span>
												Remember Me
											</label>
										</div>
										<ul>
											<li>
												<button class="fb"><i class="fab fa-facebook-f"></i> Connect with Facebook</button>
											</li>
											<li>
												<button class="tw"><i class="fab fa-twitter"></i> Connect with Twitter</button>
											</li>
										</ul>
										<div class="form-group">
											<div class="row">
												<div class="col-sm-6 offset-sm-3">
													<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">
												</div>
											</div>
										</div>
										<div class="form-group">
											<div class="row">
												<div class="col-lg-12">
													<div class="text-center">
														<a href="#" tabindex="5" class="forgot-password">Forgot Password?</a>
													</div>
												</div>
											</div>
										</div>
									</form>
									<form id="register-form" action="#" method="post" role="form" style="display: none;">
										<div class="form-group">
											<label class="icon-lp"><i class="fas fa-user-tie"></i></label>
											<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="" required="">
										</div>
										<div class="form-group">
											<label class="icon-lp"><i class="fas fa-envelope"></i></label>
											<input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" value="" required="">
										</div>
										<div class="form-group">
											<label class="icon-lp"><i class="fas fa-key"></i></label>
											<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password" required="">
										</div>
										<div class="form-group">
											<label class="icon-lp"><i class="fas fa-key"></i></label>
											<input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirm Password" required="">
										</div>
										<ul>
											<li>
												<button class="fb"><i class="fab fa-facebook-f"></i> Connect with Facebook</button>
											</li>
											<li>
												<button class="tw"><i class="fab fa-twitter"></i> Connect with Twitter</button>
											</li>
										</ul>
										
										<div class="che-box">
											<label class="checkbox-in"> 
												<input name="checkbox" type="checkbox"> <span></span>I agree to the <a href="#"> Terms and Conditions </a> and <a href="#">Privacy Policy </a>
											</label>
										</div>
										
										<div class="form-group">
											<div class="row">
												<div class="col-sm-6 offset-sm-3">
													<input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now">
												</div>
											</div>
										</div>										
									</form>
								</div>
							</div>
						</div>
					</div>
					
					<p class="footer-company-name">All Rights Reserved. &copy; 2018 <a href="#">Login Register</a> <a target="_blank" href="http://www.mobanwang.com/" title="网页模板">网页模板</a></p>
					
				</div>
			</div>
		</div>	
	</div>
	
</div>

	
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/particles.min.js"></script>
<script src="js/index.js"></script>
	<script type="text/javascript">
		$(function() {
			$('#login-form-link').click(function(e) {
				$("#login-form").delay(100).fadeIn(100);
				$("#register-form").fadeOut(100);
				$('#register-form-link').removeClass('active');
				$(this).addClass('active');
				e.preventDefault();
			});
			$('#register-form-link').click(function(e) {
				$("#register-form").delay(100).fadeIn(100);
				$("#login-form").fadeOut(100);
				$('#login-form-link').removeClass('active');
				$(this).addClass('active');
				e.preventDefault();
			});
		});
		
		$('.form-group input').focus(function () {
			$(this).parent().addClass('addcolor');
		}).blur(function () {
			$(this).parent().removeClass('addcolor');
		});
		
	</script>
</body>
</html>

    <script setup>
import { ref } from 'vue'
import serverApi from '../services/server-api';

const activeForm = ref('login')

const toggleForm = (formName) => {
  activeForm.value = formName
}

const handleFocus = (e) => {
  e.target.parentElement.classList.add('addcolor')
}

const handleBlur = (e) => {
  e.target.parentElement.classList.remove('addcolor')
}
</script>

<template>
  <div id="particles-js" class="main-form-box">
    <div class="md-form">
      <div class="container">
        <div class="row">
          <div class="col-md-6 offset-md-3">
            <div class="panel panel-login">
              <div class="logo-top">
                <a href="#"><img src="/src/template/login/images/logo.png" alt="" /></a>
              </div>
              <div class="panel-heading">
                <div class="row">
                  <div class="col-lg-6 col-sm-6 col-xl-6">
                    <a href="#" 
                       :class="{ active: activeForm === 'login' }" 
                       @click.prevent="toggleForm('login')">
                      Login
                    </a>
                  </div>
                  <div class="col-lg-6 col-sm-6 col-xl-6">
                    <a href="#" 
                       :class="{ active: activeForm === 'register' }" 
                       @click.prevent="toggleForm('register')">
                      Register
                    </a>
                  </div>
                  <div class="or">OR</div>
                </div>
              </div>
              <div class="panel-body">
                <div class="row">
                  <div class="col-lg-12">
                    <form id="login-form" v-show="activeForm === 'login'">
                      <div class="form-group">
                        <label class="icon-lp"><i class="fas fa-user-tie"></i></label>
                        <input type="text" 
                               name="username" 
                               @focus="handleFocus" 
                               @blur="handleBlur" 
                               class="form-control" 
                               placeholder="Username" 
                               required>
                      </div>
                      <div class="form-group">
                        <label class="icon-lp"><i class="fas fa-key"></i></label>
                        <input type="password" 
                               name="password" 
                               @focus="handleFocus" 
                               @blur="handleBlur" 
                               class="form-control" 
                               placeholder="Password" 
                               required>
                      </div>
                      <div class="che-box">
                        <label class="checkbox-in">
                          <input name="checkbox" type="checkbox"> <span></span>
                          Remember Me
                        </label>
                      </div>
                      <ul>
                        <li>
                          <button class="fb"><i class="fab fa-facebook-f"></i> Connect with Facebook</button>
                        </li>
                        <li>
                          <button class="tw"><i class="fab fa-twitter"></i> Connect with Twitter</button>
                        </li>
                      </ul>
                      <div class="form-group">
                        <div class="row">
                          <div class="col-sm-6 offset-sm-3">
                            <input type="submit" class="form-control btn btn-login" value="Log In">
                          </div>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="row">
                          <div class="col-lg-12">
                            <div class="text-center">
                              <a href="#" class="forgot-password">Forgot Password?</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </form>

                    <form id="register-form" v-show="activeForm === 'register'">
                      <div class="form-group">
                        <label class="icon-lp"><i class="fas fa-user-tie"></i></label>
                        <input type="text" 
                               name="username" 
                               @focus="handleFocus" 
                               @blur="handleBlur" 
                               class="form-control" 
                               placeholder="Username" 
                               required>
                      </div>
                      <div class="form-group">
                        <label class="icon-lp"><i class="fas fa-envelope"></i></label>
                        <input type="email" 
                               name="email" 
                               @focus="handleFocus" 
                               @blur="handleBlur" 
                               class="form-control" 
                               placeholder="Email Address" 
                               required>
                      </div>
                      <div class="form-group">
                        <label class="icon-lp"><i class="fas fa-key"></i></label>
                        <input type="password" 
                               name="password" 
                               @focus="handleFocus" 
                               @blur="handleBlur" 
                               class="form-control" 
                               placeholder="Password" 
                               required>
                      </div>
                      <div class="form-group">
                        <label class="icon-lp"><i class="fas fa-key"></i></label>
                        <input type="password" 
                               name="confirm-password" 
                               @focus="handleFocus" 
                               @blur="handleBlur" 
                               class="form-control" 
                               placeholder="Confirm Password" 
                               required>
                      </div>
                      <ul>
                        <li>
                          <button class="fb"><i class="fab fa-facebook-f"></i> Connect with Facebook</button>
                        </li>
                        <li>
                          <button class="tw"><i class="fab fa-twitter"></i> Connect with Twitter</button>
                        </li>
                      </ul>
                      
                      <div class="che-box">
                        <label class="checkbox-in"> 
                          <input name="checkbox" type="checkbox"> <span></span>I agree to the <a href="#"> Terms and Conditions </a> and <a href="#">Privacy Policy </a>
                        </label>
                      </div>
                      
                      <div class="form-group">
                        <div class="row">
                          <div class="col-sm-6 offset-sm-3">
                            <input type="submit" class="form-control btn btn-register" value="Register Now">
                          </div>
                        </div>
                      </div>                                      
                    </form>
                  </div>
                </div>
              </div>
            </div>
            
            <p class="footer-company-name">All Rights Reserved. &copy; 2018 <a href="#">Login Register</a> <a target="_blank" href="http://www.mobanwang.com/" title="网页模板">网页模板</a></p>
            
          </div>
        </div>
      </div>  
    </div>
  </div>
</template>

<style scoped>
@import url('/src/template/login/css/bootstrap.min.css');
@import url('/src/template/login/css/style.css');
@import url('/src/template/login/css/all.min.css');
@import url('/src/template/login/css/responsive.css');

#login-form, #register-form {
  transition: opacity 0.1s ease;
}
</style>

将生成Vue组件增加为Vue的一个路由节点

  1. src/router/index.js；注意导入组件 
    import Register from "@/views/Register.vue";
  2. src/App.vue添加节点；

运行Vue看看效果

gregmankiw
关注
springboot+vue实现登录案例（附VUE整个项目代码）
qq_45821255的博客
08-31 5919
实现Springboot+vue项目登录模块
SpringBoot+vue项目实战（一）
jiuxiang1的博客
02-19 1万+
SpringBoot+vue入门SpringBoot+Vue项目实战一：vue开发步骤一：安装node.js步骤二：安装镜像步骤三：安装Vue步骤四：安装全局vue-cli脚手架步骤五：检查Vue是否安装成功步骤六：创建一个基于 webpack 模板的新项目（可略）步骤七:启动项目，访问项目步骤一：先择file,点击open导入我们的项目步骤二：引入vue插件步骤三：新建两个vue文件步骤四：启动项目二：SpringBoot项目开发步骤1：新建SpringBoot项目步骤2：springboot的crud步
SpringBoot + Vue 案例实战完整代码（第一版）
07-01
springboot__spring__springmvc__mybatis__vue
Web前端开发经典案例之vue框架开发电商项目百草味案例（二）
05-21
此课程为vue开发百草味项目的第二课，请先学习完第一课再学习第二课 把登录成功的用户信息记录到缓存中通过缓存来判断用户是否登录过用户登录成功之后把选中的商品加入到购物车中vuex进行数据处理在vuex仓库中对加入的商品的几种情况分别进行处理在vuex仓库中对商品数据处理完之后再更新到缓存中更新加入购物车数据的方法以及把购物车数量渲染在徽章中项目刚运行的时候在初始化函数中判断用户的登录状态项目刚运行的时候在初始化函数中从缓存中更新购物车的数据到仓库通过计算属性来开发计算总价格的功能在购物车组件中控制每一个商品的复选框在购物车组件中全选复选框和每一个商品复选框关联下载并且安装三级联动v-distpicker插件加入编辑地址功能处理视图层和数据层
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
热门推荐
CYK_byte的博客
10-16 3万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
vue项目案例（Vue3）
u013083465的专栏
05-30 1万+
VUE3 + vite 案例
2、Vue + SpringBoot前后端项目实例
最新发布
advent86的专栏
12-02 3529
Vue + SpringBoot3 前后端项目实例,SpringSecurity,Redis,MyBatis分页,文件下载,文件上传
基于黑马程序员SpringBoot3+Vue3的Spring企业级全栈开发教程设计源码
10-08
本文将详细介绍一个基于SpringBoot3和Vue3的Spring企业级全栈开发教程的设计源码，旨在为开发者提供一套系统的学习资源。 该项目源码设计教程的核心内容涵盖以下几个方面： 1. 基础知识：教程首先对SpringBoot3和...
springboot+vue整合案例
12-05
在本案例中，我们主要探讨的是如何将Spring Boot与Vue.js进行整合，构建一个基本的Web应用程序。Spring Boot是Spring框架的一种快速启动方式，它简化了配置并提供了开箱即用的功能，而Vue.js则是一种轻量级的前端...
阿里内部进阶学习SpringBoot+Vue全栈开发实战文档
uuuyy_的博客
05-10 1737
前言 Spring 作为一个轻量级的容器，在JavaEE开发中得到了广泛的应用，但是Spring 的配置烦琐臃肿，在和各种第三方框架进行整合时代码量都非常大，并且整合的代码大多是重复的，为了使开发者能够快速上手Spring，利用Spring框架快速搭建JavaEE项目，Spring Boot应运而生。 Spring Boot带来了全新的自动化配置解决方案，使用Spring Boot可以快速创建基于Spring生产级的独立应用程序。Spring Boot中对一些常用的第三方库提供了默认的自动化配置方案，使
[0]Spring Boot+Vue全栈开发实战.学习笔记
qq_57210034的博客
05-23 517
目录 Spring Boot 入门 .. .... .. ... .. .. …. ....... .. ....………......….. ... .. …..... ... .……… .... .. 1 1.1 Spring Boot 简介............... ...... .. .. …. ... .........………… .. .. ….. .... ......... ..… ...... .….. 1 1.2 开发第一个 Spring Boot 程序….. ... .. ... .
基于SpringBoot+Vue的绿城郑州爱心公益网站设计与实现（源码+文档+部署视频）
bscoding的博客
10-21 901
✌博主多年来从事各种程序开发工作；全网粉丝80W+,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者，博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、Python、PHP、小程序、大数据技术领域和毕业项目实战✌
【vue前端项目实战案例】Vue仿京东商城App
柯晓楠
07-23 4347
本文将介绍一款仿“京东商城”商品信息展示的电商类App。该案例是基于 Vue2.0 + Vue Router + webpack + ES6 等技术栈实现的一款App，很适合初学者进行学习。 项目源码在文章末尾 1 项目概述 项目是一款仿“京东商城”的商品信息展示的App，主要实现了以下功能。 商城首页轮播效果，热销商品展示，公共底部导航。 搜索页面搜索关键词智能提示，保存搜索记录。 商品一级分类与二级分类导航的展示。 商品列表页面的商品展示。 点击商品添加购物车。 购物车页面的商品购买数量加减，统计
【SpringBoot3+Vue3】一【基础篇】
春天的波菜
11-13 7837
Spring Boot是Spring提供的一个子项目，用于快速构建Spring应用程序发送邮件为例@AutoConfiguration//表示当前类是一个自动配置类@Bean@Bean//扫描的包:启动类所在的包及其子包//扫描的注解。
springboot+vue
qq_48602526的博客
11-19 9431
用springboot+vue做的一个简单的练手项目
笔记：SpringBoot+Vue全栈开发
坚持不懈的大白的博客
07-04 626
笔记：SpringBoot+Vue全栈开发，目前为Spring Boot学习笔记
一个简单的springboot+Vue前后端框架搭建
weixin_45158611的博客
12-23 1万+
根据网上的一些教程试着搭建了一个简单的前后端分离的用户管理系统。该系统使用Vue框架编写前端代码，Springboot编写后端代码，Mysql作为数据库存储系统的数据。本文着重介绍整个项目的搭建流程以及附加一些在搭建过程的想法和注意事项
全栈入门，前后端入门--springboot3+vue3制作一个后台管理项目
qq_61876792的博客
03-02 3056
全栈入门，前后端入门，项目完整流程开发，信息管理后台前后端一站式打通，增删改查，文件上传功能实现
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值