基于SpringBoot+MyBaits_Vue+ElementUi构建项目

秒速五厘米 2024-03-26 11:27 48阅读 0赞

### 基于SpringBoot+MyBaits\_Vue+ElementUi构建项目 ###

#### 1.Spring Boot 后台搭建 ####

##### 1.1.项目初始化 #####

前期准备：maven，jdk（1.8），idea

###### 1.1.1.下载地址 ######

Spring官方提供了Springboot自定义配置地址，可依照相关选项搭建所需项目，具体地址为：[https://start.spring.io/][https_start.spring.io]，点击后页面如下：  
![在这里插入图片描述][43d23a9bc8e44424a1bf3669ae689042.png]

###### 1.1.2.构建项目 ######

![在这里插入图片描述][d3a2d76a23d845fbb6ed799463cd60dd.png]  
**其中：**

*  1表示构建的工程的类型，即构建的工程所使用的项目管理工具，有Maven Project和Gradle Project可选，我们选择maven
 *  2表示构建的工程所使用的语言，这里选择java
 *  3表示使用的Spring Boot的版本
 *  4主要用于填写maven项目的一些基本信息，如group id和artifact id。工程构建完成后，这些消息会出现在pom.xml中，如下图所示  
    ![在这里插入图片描述][9216e26658f745ebb3a889a1ac9d30ce.png]
 *  5打包方式
 *  6jdk版本
 *  7主要用于添加依赖，这些依赖信息在工程构建完成后，这些消息会出现在pom.xml中，也可以后期手动在pom中添加。
 *  8生成结构目录及pom文件预览，如下图  
    ![在这里插入图片描述][f6f2bfe745f341fab356190e0f4eb0b8.png]  
    确认无误后该页面点击DOWMLOAD下载，生成压缩包文件

##### 1.2.Idea环境搭建 #####

###### 1.2.1.项目导入 ######

![在这里插入图片描述][98a51284a2f4490e96eceffa86d85c31.png]  
各idea版本不同导入方式不同，导入前可先进行maven及jdk环境配置，也可导入后自行设置。  
导入已有maven项目选择open  
![在这里插入图片描述][195197dfd2874daa94dac149bae29495.png]  
将之前在spring官网下载的项目进行解压并选中。

###### 1.2.2.Maven配置 ######

![在这里插入图片描述][1207f8bbf0ac4ca896ccbbad25013b31.png]  
打开idea设置选项，搜索Maven设置

*  1 选择指定的maven（该maven中先在配置文件中进行常用设置，如镜像、本地仓库等）
 *  2 选择相应maven配置文件

###### 1.2.3.Jdk选择 ######

*  1.新建项目前
 *  2.新建项目中
 *  3.切换目前项目中的jdk
 *  4.导入前（启动页面中）

本文以项目中切换为例：  
![在这里插入图片描述][60827d4851124c6b927bca428191feb8.png]  
选择project Structure  
![在这里插入图片描述][03789a24bb5e4161b6f6da02a05e0d6f.png]  
选择或新建指定版本jdk  
配置后 idea会自动构建并初始化项目，待初始化完毕后如下图  
![在这里插入图片描述][547c33f947ed4b16ad02929d4752f041.png]  
点击运行。

##### 1.3.Mysql配置 #####

###### 1.3.1.pom文件依赖添加： ######

<dependency>
       <groupId>mysql</groupId>
       <artifactId>mysql-connector-java</artifactId>
       <scope>runtime</scope>
    </dependency>
    
    
    <dependency>
       <groupId>com.alibaba</groupId>
       <artifactId>druid-spring-boot-starter</artifactId>
       <version>${druid.version}</version>
    </dependency>
    
    <dependency>
       <groupId>org.springframework</groupId>
       <artifactId>spring-jdbc</artifactId>
    </dependency>

###### 1.3.2.配置文件调整 ######

*  1默认为.properties文件，修改成.yml文件  
    添加如下配置

server:
      tomcat:
        uri-encoding: utf-8
      servlet:
        encoding:
          force: true
          charset: UTF-8
          enabled: true
    
    spring:
      profiles:
        active: dev
      application:
        name: demo-project
      datasource:
        type: com.alibaba.druid.pool.DruidDataSource
        driver-class-name: com.mysql.cj.jdbc.Driver
        druid:
          db-type: mysql #解决limit解析报错的问题
          initial-size: 5 #初始化连接大小
          max-active: 100 #最大连接池数量
          min-idle: 5 #最小连接池数量
          max-wait: 60000 #获取连接时最大等待时间，单位毫秒
          time-between-connect-error-millis: 60000 #配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒
          min-evictable-idle-time-millis: 300000   #配置一个连接在池中最小生存的时间，单位是毫秒
          pool-prepared-statements: false #是否开启PSCache，PSCache对支持游标的数据库性能提升巨大，oracle建议开启，mysql下建议关闭
          max-pool-prepared-statement-per-connection-size: 20 #开启poolPreparedStatements后生效
          validation-query: SELECT 1 #测试连接
          validation-query-timeout: 60000
          test-on-borrow: false #获取连接时执行检测，建议关闭，影响性能
          test-on-return: false #归还连接时执行检测，建议关闭，影响性能
          test-while-idle: true #申请连接的时候检测，建议配置为true，不影响性能，并且保证安全性
          filters: stat,slf4j #配置扩展插件，常用的插件有=>stat:监控统计  log4j:日志  wall:防御sql注入
          connection-properties: 'druid.stat.mergeSql=true;druid.stat.slowSqlMillis=5000' #通过connectProperties属性来打开mergeSql功能;慢SQL记录
          stat-view-servlet: # 配置监控服务器
            #druid监控页面   http://localhost:8080/druid/login.html
            login-username: admin
            login-password: admin
            reset-enable: false
            url-pattern: /druid/*
            # 添加IP白名单
            #allow:
            # 添加IP黑名单，当白名单和黑名单重复时，黑名单优先级更高
            #deny:
            enabled: true
          web-stat-filter: # WebStatFilter配置，说明请参考Druid Wiki，配置_配置WebStatFilter
            url-pattern: /* # 添加过滤规则
            exclusions: "*.js,*.gif,*.jpg,*.png,*.css,*.ico,/druid/*" # 忽略过滤格式

主要配置一些服务相关和数据相关，后期可根据实际要求添加或修改更多配置。

*  2新增application-dev.yml 开发环境配置文件

server:
      port: 8081
    
    spring:
      datasource:
        druid:
          url: jdbc:mysql://localhost:3306/project?useUnicode=true&characterEncoding=utf-8
          username: root
          password: Lb590730

配置开发环境启动端口及数据库链接信息  
启动项目测试。

##### 1.4.结构搭建 #####

###### 1.4.1.新建工程目录包 ######

![在这里插入图片描述][0be821d3361d47a58dca7f8140de18aa.png]

###### 1.4.2.依据包命名添加数据结构 ######

依据包命名及表名分别添加 xxController、xxService、xxServiceImp、xxMapper类/接口、pojo实体类及xxMapper.xml参考如下：  
![在这里插入图片描述][a90bec8ec3704feaac5274406ec9e06c.png]  
可通过mybatis-generator或mybatis-plus-generator自动生成。

##### 1.5.Mybatis-plus集成 #####

###### 1.5.1.pom文件修改 ######

<dependency>
       <groupId>com.baomidou</groupId>
       <artifactId>mybatis-plus-boot-starter</artifactId>
       <version>${mybatis.plus.version}</version>
    </dependency>

添加mybatis-plus依赖

###### 1.5.2.application.yml文件添加： ######

mybatis-plus:
      configuration:
        # 日志输出
        log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
        # 驼峰命名开启
        map-underscore-to-camel-case: true
        #关闭二级缓存
        cache-enabled: false
      type-aliases-package: com.thunisoft.demo.model.pojo
      mapper-locations: classpath:mapper/*.xml

###### 1.5.3.启动类配置spring依赖注入管理扫描路径及mapper扫描 ######

![在这里插入图片描述][f90496c4c5f74438b139f7329a64a942.png]

###### 1.5.4.代码修改 ######

**1.pojo添加mybatisplus相关注解**  
![在这里插入图片描述][0476222f043d40a89bb316473543cbab.png]  
**@TableName：表名  
@TableId：主键  
@TableField 表字段**

**2．Dao层继承BaseMapper**

![在这里插入图片描述][753a368456b04096bf26fec062cf0395.png]

##### 1.6.Spring mvc流程图 #####

![在这里插入图片描述][05efbb41da7e4b3a8a6e195ca48a27ec.png]

#### 2.前端搭建 ####

前期准备 node环境、vue-cli脚手架

##### 2.1.脚手架创建项目 #####

###### 2.1.1.项目初始化 ######

*  在要放项目的地方创建一个文件夹
 *  进入文件夹输入cmd或直接进入终端到该文件夹下
 *  执行安装命令  
    3.0版本：vue creat project-name  
    2.0版本：vue init webpack project-name  
    ![在这里插入图片描述][1268ace467ff4dfba9e60a3eda5c3512.png]
 *  根据需要进行选择，如eslint校验
 *  安装完成  
    ![在这里插入图片描述][9003d79793624faaa875acedb68fe87a.png]  
    安装完毕后 使用VsCode或Webstorm导入项目并打开终端执行启动命令  
    3.0 npm run serve  
    2.0 npm run dev  
    如图  
    ![在这里插入图片描述][e73c0803f6694d44b0913aa6424d1e64.png]  
    点击链接出现下图则表示启动成功  
    ![在这里插入图片描述][0794c21ecc114719bb8af15929d1b997.png]

###### 2.1.2.引入组件 ######

引入 axios、router、element-ui等  
引入命名：  
cnpm install vue-router --save  
install --save element-plus  
npm i -S axios

#### 3.完结 ####

以上就是基于SpringBoot+MyBaits\_Vue+ElementUi构建项目的全部内容，根据这篇博文，基本可以很轻松搭建起一个基础开发环境。

[https_start.spring.io]: https://start.spring.io/
[43d23a9bc8e44424a1bf3669ae689042.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/07d1810b58e64e1a8241ace04e4e51fc.png
[d3a2d76a23d845fbb6ed799463cd60dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c0c08056607e4a4e8fdfd26a22785fa8.png
[9216e26658f745ebb3a889a1ac9d30ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a6814897140c4393ae06957e570b9a90.png
[f6f2bfe745f341fab356190e0f4eb0b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/84f919025e92481fad7dd2d94051ebc0.png
[98a51284a2f4490e96eceffa86d85c31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f68e5c5ba1d14d5290615f328eccc4c0.png
[195197dfd2874daa94dac149bae29495.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e084969c9dae4512994b885e935414f6.png
[1207f8bbf0ac4ca896ccbbad25013b31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/16759fbe4d5c4ec7b3e62a1cb5318680.png
[60827d4851124c6b927bca428191feb8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/46736ea77e48446f9c1db75d19cbb0f4.png
[03789a24bb5e4161b6f6da02a05e0d6f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/7b0bfb1f0ef24354aff1ed01421acd85.png
[547c33f947ed4b16ad02929d4752f041.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/61031772f17546349629df1d10ea9320.png
[0be821d3361d47a58dca7f8140de18aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/01d994ed550d4dbb8ec27aa5e46ad7e7.png
[a90bec8ec3704feaac5274406ec9e06c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c8e49c03e4844e209878806a4fb85cce.png
[f90496c4c5f74438b139f7329a64a942.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/cb0d95bcdd4b46c5bc3d00a29f41c870.png
[0476222f043d40a89bb316473543cbab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/61e64524a61f4b85b1536a292dc547f8.png
[753a368456b04096bf26fec062cf0395.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/014c533e68a945678483b0f5f3bc8de9.png
[05efbb41da7e4b3a8a6e195ca48a27ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a7eddfef39954486a18597769bed42af.png
[1268ace467ff4dfba9e60a3eda5c3512.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/853e8c7367e94262bd95f19e1475e3e1.png
[9003d79793624faaa875acedb68fe87a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/36f59a3949ea42d794493c410c96efa5.png
[e73c0803f6694d44b0913aa6424d1e64.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3c3767f2245e4d259c9e49e77cb60b3e.png
[0794c21ecc114719bb8af15929d1b997.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/01d9993b2f2d453abe172f785e3cbc0e.png