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

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

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

用到的技术

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

创建SpringBoot项目

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

1. 新建SpringBoot项目
   

2. 新建SpringBoot项目
   

3. 选择新建项目类型

4. 更改项目名称，注意要勾选Maven，后期才能进行项目管理，java版本根据自己的需要选择，这里我选择的java11（影响不大），只需要修改组名就行，包名会自动更改。
   

5. 添加依赖：
   （1） Lombok：有助于减少样板代码的Java注释库；
   （2）SpringWeb:使用MVC构建Web项目，使用tomcat作为嵌入式容器；
   （3）MyBatis：实现SQL语句的耦合；（先用Mybatis进行逻辑介绍，后面会直接使用Mybatis-plus，以及如何在自己在Maven中添加依赖）
   （4）MySQL Drvier
   

6. 创建完毕项目：选择项目路径及名称，等待安装依赖
   

7.等待依赖安装完毕

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

其中可以看到之前安装的所有依赖，需要在其中添加如下代码，注意是在<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运行成功！（第一次构建项目会比较慢，建议耐心等待一会儿）：

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

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