查看原文
其他

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

SpringForAll 2022-07-05

The following article is from TJ君 Author TJ

今天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、好用、有趣的东东


您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存