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

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项目
    创建SpringBoot项目

  2. 新建SpringBoot项目
    创建SpringBoot项目

  3. 选择新建项目类型创建SpringBoot项目

  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
 *    
 **/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值