这是一个简单的前后端分离项目，主要采用 Vue.js + SpringBoot 技术栈开发。

除了用作入门练习，我还希望该项目可以作为一些常见 Web 项目的脚手架，帮助大家简化搭建网站的流程。之所以叫白卷，是因为它从 0 开始，会随着时间的推移逐渐完善。

欢迎加入微信圈子【开发者】分享、讨论学习经验：

整体效果

1.首页

作为展示页面，包括开发这个项目的主要参考资料、近期更新和 Slogan

2.图书馆

提供图书信息展示功能

3.笔记本

提供笔记、博文展示功能

4.后台管理

包含 dashboard、内容管理、用户及权限管理等

技术栈

1.前端技术栈

1.Vue
2.ElementUI
3.axios

2.后端技术栈

1.Spring Boot
2.Spring Data + JPA 3.MySQL
4.Shiro

部署方法

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 ，实际上是把前端打包后作为静态文件，但不推荐使用这种方式。

教程

我在 CSDN 上分享了开发这个项目的教程，有兴趣的小伙伴可以点击下面的链接查看。

1.项目简介

2.使用 CLI 搭建 Vue.js 项目

13.使用 Shiro 实现用户信息加密与登录认证

(持续更新中)

近期更新

2020

01-20 利用开源 markdown 编辑器实现文章展示与管理模块

##2019

12-01 实现功能级权限控制
11-30 利用 vue-elment-admin 项目完善后台界面设计
11-17 重构项目，完成搭建后台基础界面，实现按角色加载菜单，取消前台访问限制
04-27 使用前端拦截器，数据库迁移至 mysql 8.0.15，后台管理页面初始化
04-13 完成图片的上传功能
04-11 完成图书分类功能
04-08 完成图书分页功能
04-06 完成图书查询功能
04-05 完成图书修改功能
04-04 完成图书删除功能
04-03 完成图书新增功能

dejunyu/White-Jotter