专为新手入门准备的Vue+Spring Boot+Mysql的前后端开发项目-Spring专区论坛-技术干货-SpringForAll社区

专为新手入门准备的Vue+Spring Boot+Mysql的前后端开发项目

今天TJ君和大家分享一个适合新手入门学习Vue+Spring Boot+Mysql前后端分类开发模式的图书馆管理项目,白卷

202200319-1.jpg

首先,介绍之前要提醒大家的是,项目只要是为了让新手入门学习用的,所以考虑的更多的是浅显易懂,至于安全防护问题,并没有过多的设置,所以如果要用做生产二次加工的小伙伴,要自己注意安全防护哦~

白卷的应用架构和技术架构分别是这样的:

202200319-3.jpg

202200319-2.jpg

技术栈包含:

  • 前端

    • Vue.js
    • ElementUI
    • axios
  • 后端

    • Spring Boot
    • Apache Shiro 3.Apache Log4j2 4.Spring Data JPA 5.Spring Data Redis
  • 数据库

    • MySQL
    • Redis

所谓白卷的意思,并不是指看书如同白卷,而是指项目为了方便新人入手,从0开始,像一张白卷一样教会大家使用,项目的实际效果呢,也是不错滴:

202200319-4.jpg

202200319-5.jpg

202200319-6.jpg

202200319-7.jpg

项目安装部署方法:

  • 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君点个赞哦!项目地址是:https://github.com/Antabot/White-Jotter

 TJ君将之前发过的各种项目及工具进行了整理,收录到了GitHub项目,欢迎各位小伙伴光临Star,地址如下:https://github.com/Wechat-TJ/TJ-WORLD-FORU

请登录后发表评论

    没有回复内容