简介

白卷是一个简单的前后端分离项目，主要采用 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入门和初学者来说具有非常好的帮助。