白卷开源SpringBoot+Vue的前后端分离入门项目
ztj100 2025-07-06 18:06 5 浏览 0 评论
简介
白卷是一个简单的前后端分离项目，主要采用 Vue.js + SpringBoot 技术栈开发。除了用作入门练习，作者还希望该项目可以作为一些常见 Web 项目的脚手架，帮助大家简化搭建网站的流程。之所以叫白卷，是因为它从 0 开始，会随着时间的推移逐渐完善。
白卷是一款使用 Vue+Spring Boot 开发的前后端分离入门项目，该开源项目还提供全套开发教程，具体见github 地址。
github 地址：
https://github.com/Antabot/White-Jotter
github star: 279+
最新版本：0.2.2，MIT 协议
主要技术栈:
项目截图
快速上手
- 1.clone 项目到本地
git clone https://github.com/Antabot/White-Jotter
- 2.数据库脚本放在 wj 项目的根目录下，在MySQL中执行数据库脚本
- 3.数据库配置在 wj 项目的 src\main\resources 目录下的application.properties 文件中，mysql 版本为 8.0.15
- 4.在IntelliJ IDEA中运行 wj 项目，为了保证项目成功运行，可以右键点击 pom.xml 选择 maven -> reimport ，并重启项目
至此，服务端就启动成功了，同时，运行 wj-vue 项目，访问 http://localhost:8080 ，即可进入登录页面，默认账号是 admin，密码是 123
如果要做二次开发，请继续看第五、六步。
- 5.进入到 wj-vue 目录中，在命令行依次输入如下命令：
# 安装依赖
npm install
# 在 localhost:8080 启动项目
npm run dev
由于在 wj-vue 项目中已经配置了端口转发，将数据转发到SpringBoot上，因此项目启动之后，在浏览器中输入 http://localhost:8080 就可以访问我们的前端项目了，所有的请求通过端口转发将数据传到 SpringBoot 中（注意此时不要关闭 SpringBoot 项目）。
- 6.最后可以用 WebStorm 等工具打开 wj-vue项目，继续开发，开发完成后，当项目要上线时，依然进入到 wj-vue 目录，然后执行如下命令：
npm run build
该命令执行成功之后， wj-vue 目录下生成一个 dist 文件夹，可以将该文件夹中的两个文件 static 和 index.html 拷贝到 wj 项目中 resources/static/ 目录下，然后直接运行 wj 项目，访问 http://localhost:8443 ，实际上是把前端打包后作为静态文件，但不推荐使用这种方式。
浏览器兼容性
- IE / Edge
开源项目未提供
- Firefox
开源项目未提供
- Chrome
开源项目未提供
- Safari
开源项目未提供
- Opera
开源项目未提供
PS
对于java全栈开发的同学来说是一个不错的一个参考项目，当然也可以单独了解其中的前端或者后端部分，该项目值得一提的是开源作者提供了全套开发教程，这个对于java或者vue入门和初学者来说具有非常好的帮助。
相关推荐
- SpringBoot整合SpringSecurity+JWT
-
作者｜Sans_https://juejin.im/post/5da82f066fb9a04e2a73daec一.说明SpringSecurity是一个用于Java企业级应用程序的安全框架,主要包含...
- 「计算机毕设」一个精美的JAVA博客系统源码分享
-
前言大家好，我是程序员it分享师，今天给大家带来一个精美的博客系统源码！可以自己买一个便宜的云服务器，当自己的博客网站，记录一下自己学习的心得。开发技术博客系统源码基于SpringBoot,shiro...
- springboot教务管理系统+微信小程序云开发附带源码
-
今天给大家分享的程序是基于springboot的管理，前端是小程序，系统非常的nice，不管是学习还是毕设都非常的靠谱。本系统主要分为pc端后台管理和微信小程序端,pc端有三个角色：管理员、学生、教师...
- SpringBoot+LayUI后台管理系统开发脚手架
-
源码获取方式：关注，转发之后私信回复【源码】即可免费获取到！项目简介本项目本着避免重复造轮子的原则，建立一套快速开发JavaWEB项目（springboot-mini），能满足大部分后台管理系统基础开...
- Spring Boot的Security安全控制——认识SpringSecurity!
-
SpringBoot的Security安全控制在Web项目开发中，安全控制是非常重要的，不同的人配置不同的权限，这样的系统才安全。最常见的权限框架有Shiro和SpringSecurity。Shi...
- 前同事2024年接私活已入百万，都是用这几个开源的SpringBoot项目
-
前言不得不佩服SpringBoot的生态如此强大，今天给大家推荐几款优秀的后台管理系统，小伙伴们再也不用从头到尾撸一个项目了。SmartAdmin...
- 值得学习的15 个优秀开源的 Spring Boot 学习项目
-
SpringBoot算是目前Java领域最火的技术栈了，除了书呢？当然就是开源项目了，今天整理15个开源领域非常不错的SpringBoot项目供大家学习，参考。高富帅的路上只能帮你到这里了，...
- 开发企业官网就用这个基于SpringBoot的CMS系统，真香
-
前言推荐这个项目是因为使用手册部署手册非常...
- 2021年超详细的java学习路线总结—纯干货分享
-
本文整理了java开发的学习路线和相关的学习资源，非常适合零基础入门java的同学，希望大家在学习的时候，能够节省时间。纯干货，良心推荐！第一阶段：Java基础...
- jeecg-boot学习总结及使用心得（jeecgboot简单吗）
-
jeecg-boot学习总结及使用心得1.jeecg-boot是一个真正前后端分离的模版项目，便于二次开发，使用的都是较流行的新技术，后端技术主要有spring-boot2.x、shiro、Myb...
- 后勤集团原料管理系统springboot+Layui+MybatisPlus+Shiro源代码
-
本项目为前几天收费帮学妹做的一个项目，JavaEEJSP项目，在工作环境中基本使用不到，但是很多学校把这个当作编程入门的项目来做，故分享出本项目供初学者参考。一、项目描述后勤集团原料管理系统spr...
- 白卷开源SpringBoot+Vue的前后端分离入门项目
-
简介白卷是一个简单的前后端分离项目，主要采用Vue.js+SpringBoot技术栈开发。除了用作入门练习，作者还希望该项目可以作为一些常见Web项目的脚手架，帮助大家简化搭建网站的流程。...
- Spring Security 自动踢掉前一个登录用户，一个配置搞定
-
登录成功后，自动踢掉前一个登录用户，松哥第一次见到这个功能，就是在扣扣里边见到的，当时觉得挺好玩的。自己做开发后，也遇到过一模一样的需求，正好最近的SpringSecurity系列正在连载，就结...
- 收藏起来!这款开源在线考试系统，我爱了
-
大家好，我是为广大程序员兄弟操碎了心的小编，每天推荐一个小工具/源码，装满你的收藏夹，每天分享一个小技巧，让你轻松节省开发效率，实现不加班不熬夜不掉头发，是我的目标！今天小编推荐一款基于Spr...
- Shiro框架:认证和授权原理（shiro权限认证流程）
-
优质文章，及时送达前言Shiro作为解决权限问题的常用框架，常用于解决认证、授权、加密、会话管理等场景。本文将对Shiro的认证和授权原理进行介绍：Shiro可以做什么？、Shiro是由什么组成的？举...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- SpringBoot整合SpringSecurity+JWT
- 「计算机毕设」一个精美的JAVA博客系统源码分享
- springboot教务管理系统+微信小程序云开发附带源码
- SpringBoot+LayUI后台管理系统开发脚手架
- Spring Boot的Security安全控制——认识SpringSecurity!
- 前同事2024年接私活已入百万，都是用这几个开源的SpringBoot项目
- 值得学习的15 个优秀开源的 Spring Boot 学习项目
- 开发企业官网就用这个基于SpringBoot的CMS系统，真香
- 2021年超详细的java学习路线总结—纯干货分享
- jeecg-boot学习总结及使用心得（jeecgboot简单吗）
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)