当前位置:   article > 正文

基于SpringBoot+MyBaits_Vue+ElementUi构建项目_idea导入vue +elementui +mybatis

idea导入vue +elementui +mybatis

基于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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
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/*" # 忽略过滤格式
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

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

  • 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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

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

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

添加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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
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构建项目的全部内容,根据这篇博文,基本可以很轻松搭建起一个基础开发环境。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/100271?site
推荐阅读
相关标签
  

闽ICP备14008679号