(一)SpringBoot项目构建

  • SpringBoot + Vue + MySql项目快速上手(前后端分离项目)(一)
  • 用到的技术
  • 创建SpringBoot项目


SpringBoot + Vue + MySql项目快速上手(前后端分离项目)(一)

写在前面:由于最近学习需要,需要构建一个前后端分离的项目,主要功能是需要前端能够读取后端数据并进行数据可视化,自身在学习的过程中也发现了很多问题,所以一边学习一边写下这一系列的博客,一方面是记录自己学习的过程,另一方面也是为由同样需求的朋友提供一点帮助。

用到的技术

由于需要进行前后端分离,主流的框架有Python的Flask以及Java的SpringBoot,两种技术各有优劣,这里选用SpringBoot作为后端主要框架。Vue作为一个主流的前端框架,具有丰富的文档以及好的生态,所以选用Vue作为前端框架。数据库使用MySql。
其余的包括MybatisPlusElement-Plus等,后面用到的时候会介绍

创建SpringBoot项目

使用的编译器为IDEA,安装和破解请自己寻找教程,这里不多赘述。
依次点击 新建=>项目=>Spring Initializr(如果你的IDEA是试用版,是没有这个选项的,需要下载正式版,有三十天试用期,这里我使用的是正式版,建议破解安装IDEA,如果有需要后面会单独出教程)=>选择自定义(因为Spring的官网是不行的)这里使用的是国内阿里云的镜像网站http://start.aliyun.com

  1. 新建SpringBoot项目
  2. springboot 前后端分离系统 后端能重定向到vue前端_后端

  3. 新建SpringBoot项目
  4. springboot 前后端分离系统 后端能重定向到vue前端_spring boot_02

  5. 选择新建项目类型
  6. springboot 前后端分离系统 后端能重定向到vue前端_vue.js_03

  7. 更改项目名称,注意要勾选Maven,后期才能进行项目管理,java版本根据自己的需要选择,这里我选择的java11(影响不大),只需要修改组名就行,包名会自动更改。
  8. springboot 前后端分离系统 后端能重定向到vue前端_后端_04

  9. 添加依赖:
    (1) Lombok:有助于减少样板代码的Java注释库;
    (2)SpringWeb:使用MVC构建Web项目,使用tomcat作为嵌入式容器;
    (3)MyBatis:实现SQL语句的耦合;(先用Mybatis进行逻辑介绍,后面会直接使用Mybatis-plus,以及如何在自己在Maven中添加依赖)
    (4)MySQL Drvier
  10. springboot 前后端分离系统 后端能重定向到vue前端_后端_05

  11. 创建完毕项目:选择项目路径及名称,等待安装依赖
  12. springboot 前后端分离系统 后端能重定向到vue前端_mysql_06

7.等待依赖安装完毕

springboot 前后端分离系统 后端能重定向到vue前端_前端_07


安装成功后可以看到pom.xml文件中如下:

springboot 前后端分离系统 后端能重定向到vue前端_spring boot_08


其中可以看到之前安装的所有依赖,需要在其中添加如下代码,注意是在<project>标签里,在build标签外,这样Maven安装依赖库就是在阿里的镜像源中,会快很多。

<!--   maven 依赖阿里云仓库下载-->
    <pluginRepositories>
        <pluginRepository>
            <id>public</id>
            <name>aliyun nexus</name>
            <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
            <releases>
                <enabled>true</enabled>
            </releases>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </pluginRepository>
    </pluginRepositories>

以上就是Springboot项目的全部过程以及一些简单的配置,最后点击运行:

springboot 前后端分离系统 后端能重定向到vue前端_vue.js_09


看到如下结果,表示SpringBoot运行成功!(第一次构建项目会比较慢,建议耐心等待一会儿):

springboot 前后端分离系统 后端能重定向到vue前端_mysql_10


最后记得给自己的代码加上注释!

/**
 *                             _ooOoo_
 *                            o8888888o
 *                            88" . "88
 *                            (| -_- |)
 *                            O\  =  /O
 *                         ____/`---'\____
 *                       .'  \\|     |//  `.
 *                      /  \\|||  :  |||//  \
 *                     /  _||||| -:- |||||-  \
 *                     |   | \\\  -  /// |   |
 *                     | \_|  ''\---/''  |   |
 *                     \  .-\__  `-`  ___/-. /
 *                   ___`. .'  /--.--\  `. . __
 *                ."" '<  `.___\_<|>_/___.'  >'"".
 *               | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *               \  \ `-.   \_ __\ /__ _/   .-` /  /
 *          ======`-.____`-.___\_____/___.-`____.-'======
 *                             `=---='
 *          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 *                     佛祖保佑        永无BUG
 *    
 **/