{"id":15024492,"url":"https://github.com/antabot/white-jotter","last_synced_at":"2025-05-15T07:07:10.573Z","repository":{"id":37934343,"uuid":"174641743","full_name":"Antabot/White-Jotter","owner":"Antabot","description":"白卷是一款使用 Vue+Spring Boot 开发的前后端分离项目，附带全套开发教程。（A simple CMS developed by Spring Boot and Vue.js with development tutorials）","archived":false,"fork":false,"pushed_at":"2022-12-10T12:47:56.000Z","size":228727,"stargazers_count":2499,"open_issues_count":24,"forks_count":858,"subscribers_count":57,"default_branch":"master","last_synced_at":"2025-05-15T07:07:04.829Z","etag":null,"topics":["restful","single-page-app","spring-boot","springdata-jpa","vue"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Antabot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-09T03:06:40.000Z","updated_at":"2025-05-15T02:10:57.000Z","dependencies_parsed_at":"2023-01-26T02:01:37.139Z","dependency_job_id":null,"html_url":"https://github.com/Antabot/White-Jotter","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Antabot%2FWhite-Jotter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Antabot%2FWhite-Jotter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Antabot%2FWhite-Jotter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Antabot%2FWhite-Jotter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Antabot","download_url":"https://codeload.github.com/Antabot/White-Jotter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254292042,"owners_count":22046426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["restful","single-page-app","spring-boot","springdata-jpa","vue"],"created_at":"2024-09-24T20:00:26.211Z","updated_at":"2025-05-15T07:07:05.563Z","avatar_url":"https://github.com/Antabot.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"![wjlogo.png](https://i.loli.net/2019/12/15/sYnuTIrDUwAfGgo.png)\n\n---\n\n![lisense](https://img.shields.io/github/license/Antabot/White-Jotter)\n![release](https://img.shields.io/github/v/release/Antabot/White-Jotter)\n\n\n这是一个简单的项目，旨在让新入门 web 的开发者体验使用 Vue + Java(Spring Boot) + Mysql 以前后端分离模式完成开发的流程。由于开发过程中并未充分考虑安全防护问题，并不建议将该项目用于生产环境。\n\nhttps://github.com/Antabot/White-Jotter)\n\n\n感谢 JetBrains 提供全家桶开源许可，IDEA 确实是 Java 领域最好用的 IDE。\n\n\u003ca href=\"https://www.jetbrains.com/?from=White-Jotter\"\u003e\u003cimg src=\"https://i.loli.net/2020/06/15/wfyV6jGX8F9RPhB.png\" width = \"200\" height = \"216\" alt=\"\" align=center /\u003e\u003c/a\u003e\n\n# 整体效果\n\n## 首页\n\n作为展示页面，包括开发这个项目的主要参考资料、近期更新和 Slogan\n\n![首页](https://img-blog.csdnimg.cn/20190403215932913.png)\n\n## 图书馆\n\n提供图书信息展示功能\n\n![图书馆](https://i.loli.net/2019/12/03/AGLbIupct68ThBD.png)\n\n## 笔记本\n\n提供笔记、博文展示功能\n\n![笔记本首页.png](https://i.loli.net/2020/01/20/VAsOapuWriB6RFT.png)\n\n![文章内容.png](https://i.loli.net/2020/01/20/DQgbpy2LKhiZc4x.png)\n\n## 后台管理\n\n包含 dashboard、内容管理、用户及权限管理等\n\n![后台](https://img-blog.csdnimg.cn/20191202200516251.png)\n\n# 架构图\n\n- **应用架构**\n\n![应用架构](https://img-blog.csdnimg.cn/20200524211402855.JPG)\n\n- **技术架构**\n\n![技术架构](https://img-blog.csdnimg.cn/20200524211507112.JPG)\n\n# 主要技术栈\n\n## 前端\n\n1.Vue.js  \n2.ElementUI  \n3.axios   \n\n## 后端\n\n1.Spring Boot  \n2.Apache Shiro\n3.Apache Log4j2\n4.Spring Data JPA\n5.Spring Data Redis\n\n## 数据库\n\n1.MySQL  \n2.Redis\n\n# 部署方法\n\n1.clone 项目到本地\n\n`git clone https://github.com/Antabot/White-Jotter`\n\n2.在 mysql 中创建数据库 `wj`，运行项目，将自动注入数据。如需关闭此功能，请将 `application.properties` 中的 `spring.datasource.initialization-mode=always` 代码删除。\n\n数据库完整脚本 `wj.sql` 放在后端项目的 `src\\main\\resources` 目录下，也可根据需要自行在 MySQL 中执行数据库脚本。  \n\n运行项目前请启动 Redis 服务，端口为 6379（默认端口），密码为空。\n\n3.数据库配置在后端项目的 `src\\main\\resources` 目录下的`application.properties` 文件中，mysql 版本为 8.0.15   。\n\n4.在IntelliJ IDEA中运行后端项目，为了保证项目成功运行，可以右键点击 `pom.xml` 选择 maven -\u003e reimport ，并重启项目\n\n至此，服务端就启动成功了，同时，运行前端项目，访问 `http://localhost:8080` ，即可进入登录页面，默认账号是 `admin`，密码是 `123`\n\n如果要做二次开发，请继续看第五、六步。\n\n5.进入前端项目根目录中，在命令行依次输入如下命令：  \n\n```\n# 安装依赖\nnpm install\n\n# 在 localhost:8080 启动项目\nnpm run dev\n\n```\n\n由于在 `wj-vue` 项目中已经配置了端口转发，将数据转发到SpringBoot上，因此项目启动之后，在浏览器中输入 `http://localhost:8080` 就可以访问我们的前端项目了，所有的请求通过端口转发将数据传到 SpringBoot 中（注意此时不要关闭 SpringBoot 项目）。\n\n6.最后可以用 `WebStorm` 等工具打开 `wj-vue`项目，继续开发，开发完成后，当项目要上线时，依然进入到 `wj-vue` 目录，然后执行如下命令：  \n\n```\nnpm run build\n```\n\n该命令执行成功之后， `wj-vue` 目录下生成一个 `dist` 文件夹，可以将该文件夹中的两个文件 `static` 和 `index.html` 拷贝到 `wj` 项目中 `resources/static/` 目录下，然后直接运行 `wj` 项目，访问 `http://localhost:8443` ，实际上是把前端打包后作为静态文件，但不推荐使用这种方式。\n\n前后端分离部署的方式详见教程第十篇：[「图片上传与项目的打包部署」](https://learner.blog.csdn.net/article/details/97619312)\n\n# 教程\n\n我在 CSDN 上分享了开发这个项目的教程：  \n\n1.[项目简介](https://blog.csdn.net/Neuf_Soleil/article/details/88925013)\n\n2.[使用 CLI 搭建 Vue.js 项目](https://blog.csdn.net/Neuf_Soleil/article/details/88926242)\n\n3.[前后端结合测试（登录页面开发）](https://blog.csdn.net/Neuf_Soleil/article/details/88955387)\n\n4.[数据库的引入](https://blog.csdn.net/Neuf_Soleil/article/details/89294300)\n\n5.[使用 Element 辅助前端开发](https://blog.csdn.net/Neuf_Soleil/article/details/89298717)\n\n6.[前端路由与登录拦截器](https://learner.blog.csdn.net/article/details/89422585)\n\n7.[导航栏与图书页面设计](https://learner.blog.csdn.net/article/details/89853305)\n\n8.[数据库设计与增删改查](https://learner.blog.csdn.net/article/details/92413933)\n\n9.[核心功能的前端实现](https://learner.blog.csdn.net/article/details/95310666)\n\n10.[图片上传与项目的打包部署](https://learner.blog.csdn.net/article/details/97619312)\n\n11.[用户角色权限管理模块设计](https://learner.blog.csdn.net/article/details/100849732)\n\n12.[访问控制及其实现思路](https://learner.blog.csdn.net/article/details/101121899)\n\n13.[使用 Shiro 实现用户信息加密与登录认证](https://learner.blog.csdn.net/article/details/102690035)\n\n14.[用户认证方案与完善的访问拦截](https://learner.blog.csdn.net/article/details/102788866)\n\n15.[动态加载后台菜单](https://learner.blog.csdn.net/article/details/103114893)\n\n16.[功能级访问控制的实现](https://learner.blog.csdn.net/article/details/103250775)\n\n17.[后台角色、权限与菜单分配](https://learner.blog.csdn.net/article/details/103603726)\n\n18.[博客功能开发](https://learner.blog.csdn.net/article/details/104033436)\n\n19.[项目优化解决方案](https://learner.blog.csdn.net/article/details/104763090)\n\n(持续更新中)\n\n# 重要更新\n\n## 2020\n\n01-20 利用开源 markdown 编辑器实现文章展示与管理模块\n\n---\n\n## 2019 \n\n12-01 实现功能级权限控制  \n11-30 利用 vue-elment-admin 项目完善后台界面设计  \n11-17 重构项目，完成搭建后台基础界面，实现按角色加载菜单，取消前台访问限制  \n04-27 使用前端拦截器，数据库迁移至 mysql 8.0.15，后台管理页面初始化  \n04-13 完成图片的上传功能  \n04-11 完成图书分类功能  \n04-08 完成图书分页功能  \n04-06 完成图书查询功能  \n04-05 完成图书修改功能  \n04-04 完成图书删除功能  \n04-03 完成图书新增功能\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantabot%2Fwhite-jotter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantabot%2Fwhite-jotter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantabot%2Fwhite-jotter/lists"}