【重磅开源】MapleBoot项目启动部署

基于SpringBoot+Vue3开发的轻量级快速开发脚手架

🍁项目简介

一个通用的前、后端项目模板

一个快速开发管理系统的项目

一个可以生成SpringBoot+Vue代码的项目

一个持续迭代的开源项目

一个程序员的心血合集

度过严寒,终有春日;挺过酷暑,必有丰收。

GitHub地址

Gitee地址

文档地址(更新中)

演示地址(储备中)

☕前置条件

clone项目

首先,将项目clone到本地,项目地址如下:

GitHub地址

Gitee地址

依赖环境

这里演示在Windowns环境下,使用Idea启动下项目。

启动项目,这里分为后端启动和前端启动,首先准备我们的环境依赖和开发工具:

  • JDK8
  • Maven
  • Mysql 8
  • Redis 3.2+
  • NodeJs 16+
  • IntelliJ IDEA

    具体安装步骤可以参考笑小枫的按步照搬系列

    导入项目

    首先使用IntelliJ IDEA打开我们的项目File->Open,这里直接使用IntelliJ IDEA一起启动前端Vue项目了,所以直接打开了文件夹,如果使用VS Code打开前端项目,这里可以通过Maven的方式,只导入maple-admin项目即可。

    导入完,等待加载Maven依赖即可。

    前端依赖下载

    关于前端依赖,使用npm导入,打开Terminal,然后进入maple-web目录,执行npm i即可,如果使用npm下载失败,可以使用淘宝镜像cnpm i。

    cd maple-web
    npm i
    

    初始化数据库

    在我们的数据库中创建数据库maple-boot

    创建后,导入我们的schema.sql文件中的表结构及初始化数据。后续会加入数据库版本管理工具,到时候可以自动完成创建。一步一步来吧

    创建完数据库,修改我们的配置文件maple-admin-rest下的application-dev.yml,将配置中的数据库连接信息替换成自己的连接。

    spring:
      datasource:
        dynamic:
          primary: xiaoxiaofeng #设置默认的数据源或者数据源组,默认值即为master
          strict: false #严格匹配数据源,默认false. true未匹配到指定数据源时抛异常,false使用默认数据源
          datasource:
            xiaoxiaofeng:
              url: jdbc:mysql://127.0.0.1:3306/maple-boot?useUnicode=yes&characterEncoding=UTF-8&useSSL=false&serverTimezone=GMT%2B8
              username: root
              password: 123456
              driver-class-name: com.mysql.cj.jdbc.Driver
    

    关于Redis

    Redis启动起来就可以了,然后修改我们的配置文件maple-admin-rest下的application-dev.yml,将配置中的Redis连接信息替换成自己的连接。

    项目中Redis只在登录的时候做了Token过期时间,剔出功能使用,如果不想接入Redis,把这块改掉即可。

    spring:
      redis:
        database: 0
        host: 127.0.0.1
        password: 123456
        port: 6379
    

    到此,我们的前置条件都满足了,接下来启动项目吧~

    🚀启动项目

    启动SpringBoot项目

    设置端口和使用环境

    修改maple-admin-rest下的application.yml文件

    设置端口号:6666(如果更换端口,Vue请求地址同步更换,下面会说)

    使用配置环境:dev

    server:
      port: 6666
      
    spring:
      profiles:
        active: dev
    

    后端项目直接启动即可,可以在工具栏直接启动,也可以在Application.java上启动

    启动日志信息如下:

    启动Vue项目

    修改后端接口地址,在vite.config.ts文件下,这里后端管理端接口统一加了manage前缀,这里直接配在接口上了。

    打开Terminal,然后进入maple-web目录,下载完依赖,直接使用命令npm run dev 启动即可。

    启动成功如下:

    到此,我们的项目就启动成功了。

    🌈验证启动

    复制Local的连接,在谷歌浏览器中打开。

    可以看到我们的登录页面

    然后点击登录按钮,如果可以成功登录,我们的项目就启动成功了。

    📢项目部署

    这里在Linux服务器上使用docker对项目进行部署操作。环境需要安装Docker容器。

    关于Docker操作,可以查看文章【Docker安装软件,一篇就够了】Docker安装,Docker安装Mysql8.0、Redis、RabbitMQ及常用命令

    后端部署

    首先可以修改自己服务器上的配置,和启动的端口号,然后把项目打成Jar包。

    在maple-admin-rest模块下可以看到我们生成的Jar包;

    将Jar和Dockerfile文件一起上传到我们服务器的指定目录(注意:需要在同一目录)。

    打包镜像,执行命令

    docker build -t maple-boot:1.0.0 .
    

    启动项目,执行命令

    docker run -d --privileged=true --name maple-boot -p 6666:6666 imageId
    

    启动完可以用docker ps查看一下是否启动成功。

    可以访问 地址:端口号/doc.html 查看接口文档。

    接口文档登录信息可以在application-dev.yml配置文件中调整

    knife4j:
      # 开启增强配置
      enable: true
      # 开启生产环境屏蔽
      production: false
      # 开启Swagger的Basic认证功能,默认是false
      basic:
        enable: true
        # Basic认证用户名
        username: xiaoxiaofeng
        # Basic认证密码
        password: 123456
    

    前端部署

    后端项目启动成功后,在.env.production文件下修改我们的后端访问地址。

    # 线上环境接口地址
    VITE_API_URL = http://xxxxxxx:6666/manage/
    

    然后打开Terminal,进入maple-web目录,使用命令npm run build 进行打包。

    打包后上传到服务器上,我这里放的/data/maple-boot-web/web目录下

    启动命令

    # docker下载nginx镜像,也可指定版本docker pull nginx:xxx
    docker pull nginx
    # 启动项目
    docker run -d -p 80:80 -v /data/maple-boot-web/web:/usr/share/nginx/html --name maple-boot-web imageId
    

    启动成功后,可以在浏览器中访问,然后进行登录即可,到此项目启动部署就完成了。