专为新手入门准备的Vue+Spring Boot+Mysql的前后端开发项目
大家好,我是TJ
关注TJ君,回复“武功秘籍”免费获取计算机宝典书籍
TJ君将之前发过的各种项目及工具进行了整理,收录到了GitHub项目,欢迎各位小伙伴光临Star,地址如下:https://github.com/Wechat-TJ/TJ-WORLD-FORU
今天TJ君和大家分享一个适合新手入门学习Vue+Spring Boot+Mysql前后端分类开发模式的图书馆管理项目,白卷
首先,介绍之前要提醒大家的是,项目只要是为了让新手入门学习用的,所以考虑的更多的是浅显易懂,至于安全防护问题,并没有过多的设置,所以如果要用做生产二次加工的小伙伴,要自己注意安全防护哦~
白卷的应用架构和技术架构分别是这样的:
技术栈包含:
前端
Vue.js ElementUI axios 后端
Spring Boot Apache Shiro 3.Apache Log4j2 4.Spring Data JPA 5.Spring Data Redis 数据库
MySQL Redis
所谓白卷的意思,并不是指看书如同白卷,而是指项目为了方便新人入手,从0开始,像一张白卷一样教会大家使用,项目的实际效果呢,也是不错滴:
项目安装部署方法:
1.clone 项目到本地
2.在 mysql 中创建数据库 wj,运行项目,将自动注入数据。如需关闭此功能,请将 application.properties 中的 spring.datasource.initialization-mode=always 代码删除。数据库完整脚本 wj.sql 放在后端项目的 src\main\resources 目录下,也可根据需要自行在 MySQL 中执行数据库脚本。运行项目前请启动 Redis 服务,端口为 6379(默认端口),密码为空。
3.数据库配置在后端项目的 src\main\resources 目录下的application.properties 文件中,mysql 版本为 8.0.15 。
4.在IntelliJ IDEA中运行后端项目,为了保证项目成功运行,可以右键点击 pom.xml 选择 maven -> reimport ,并重启项目
如果要运行前端项目,可以访问http://localhost:8080
,系统默认账号是 admin,密码是 123。
二次开发
如果要做二次开发,进入前端项目根目录中,在命令行依次输入如下命令:
# 安装依赖
npm install
# 在 localhost:8080 启动项目
npm run dev
由于在 wj-vue 项目中已经配置了端口转发,将数据转发到SpringBoot上,因此项目启动之后,在浏览器中输入 http://localhost:8080 就可以访问我们的前端项目了,所有的请求通过端口转发将数据传到 SpringBoot 中(注意此时不要关闭 SpringBoot 项目)。
最后可以用 WebStorm 等工具打开 wj-vue项目,继续开发,开发完成后,当项目要上线时,依然进入到 wj-vue 目录,然后执行如下命令:
npm run build
该命令执行成功之后, wj-vue 目录下生成一个 dist 文件夹,可以将该文件夹中的两个文件 static 和 index.html 拷贝到 wj 项目中 resources/static/ 目录下,然后直接运行 wj 项目,访问 http://localhost:8443 ,实际上是把前端打包后作为静态文件。
喜欢的小伙伴,记得给TJ君点个赞哦!
点击下方卡片,关注公众号“TJ君”
回复“白卷2022”,获取仓库地址
关注我,每天了解一个牛x、好用、有趣的东东