基于SpringBoot+MyBaits_Vue+ElementUi构建项目

1.Spring Boot 后台搭建

1.1.项目初始化

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

1.1.1.下载地址

Spring官方提供了Springboot自定义配置地址，可依照相关选项搭建所需项目，具体地址为：https://start.spring.io/，点击后页面如下：

1.1.2.构建项目

其中：

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

1.2.Idea环境搭建

1.2.1.项目导入

各idea版本不同导入方式不同，导入前可先进行maven及jdk环境配置，也可导入后自行设置。
导入已有maven项目选择open

将之前在spring官网下载的项目进行解压并选中。

1.2.2.Maven配置

打开idea设置选项，搜索Maven设置

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

1.2.3.Jdk选择

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

本文以项目中切换为例：

选择project Structure

选择或新建指定版本jdk
配置后 idea会自动构建并初始化项目，待初始化完毕后如下图

点击运行。

1.3.Mysql配置

1.3.1.pom文件依赖添加：

<!--mysql-->
<dependency>
   <groupId>mysql</groupId>
   <artifactId>mysql-connector-java</artifactId>
   <scope>runtime</scope>
</dependency>

<!--druid链接池-->
<dependency>
   <groupId>com.alibaba</groupId>
   <artifactId>druid-spring-boot-starter</artifactId>
   <version>${druid.version}</version>
</dependency>
<!--JDBC -->
<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.新建工程目录包

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

依据包命名及表名分别添加 xxController、xxService、xxServiceImp、xxMapper类/接口、pojo实体类及xxMapper.xml参考如下：

可通过mybatis-generator或mybatis-plus-generator自动生成。

1.5.Mybatis-plus集成

1.5.1.pom文件修改

<!--mybatis plus-->
<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扫描

1.5.4.代码修改

1.pojo添加mybatisplus相关注解

@TableName：表名
@TableId：主键
@TableField 表字段

2．Dao层继承BaseMapper

1.6.Spring mvc流程图

2.前端搭建

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

2.1.脚手架创建项目

2.1.1.项目初始化

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

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构建项目的全部内容，根据这篇博文，基本可以很轻松搭建起一个基础开发环境。