SpringBoot+MyBatisPlus+ElementUI一步一步搭建前后端分离的项目(附代码下载)

场景

一步一步教你在IEDA中快速搭建SpringBoot项目：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/87688277

插件的安装参照下面博客

IDEA中SpringBoot项目使用@Data要安装Lombok插件

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/88362861

项目使用EasyCode插件自动生成代码，EasyCode代码的使用参照

IDEA中安装EasyCode插件并连接数据库生成代码：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103132436

实现

搭建数据库

本地安装Mysql 8.0 ,并安装连接Mysql的工具 Navicat，新建数据库usr，并新建表user

 

 

IDEA中新建SpringBoot项目

参照上面博客在IDEA中搭建好SpringBoot项目，搭建好后的项目目录为

 

 

在badao包下新建应用启动类

package com.badao.usermanage;


import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class UsermanageApplication {

    public static void main(String[] args) {
        SpringApplication.run(UsermanageApplication.class, args);
    }

}

 

然后在pom文件中添加相关依赖

"1.0" encoding="UTF-8"?>
"http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.2.1.RELEASE
         
    
    com.badao
    springbootdemo
    0.0.1-SNAPSHOT
    springbootdemo
    Demo project for Spring Boot

    
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.projectlombok
            lombok
            true
        

        
        
            com.baomidou
            mybatis-plus-boot-starter
            3.1.0
        

 

        
        
            mysql
            mysql-connector-java
            runtime
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
            
                
                    org.junit.vintage
                    junit-vintage-engine
                
            
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
        
        
            src/main/java
            
                **/*.yml
                **/*.xml
            
            false
        
        
    

 

 

然后将resources下的application.properties文件改为application.yml(个人习惯)

修改配置文件内容为

server:
  port: 8088
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/usr
    username: root
    password: 123
mybatis-plus:
  #信息输出设置
  # xml地址
  mapper-locations: classpath:mapper/*Dao.xml
  # 实体扫描，多个package用逗号或者分号分隔
  # type-aliases-package: ***   #自己的实体类地址
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

注意，这里我本地的Mysql的版本为8.0所以这里的驱动url如上。

上面刚搭建好项目后报红是因为有些依赖还没下载下来。

在右侧Maven面板中--点击 + 并选中当前项目的pom.xml，然后点击install或者左上角的刷新似的图标。

 

 

使用EasyCode生成代码

参照上面博客在IDEA中安装EasyCode插件并使用其生成代码，生成代码后的目录为

 

 

在生成代码后因为使用的是默认的代码生成模板，所以还需要在启动类中添加MapperScan的注解并指定dao层包

package com.badao.usermanage;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.badao.usermanage.dao")
public class UsermanageApplication {

    public static void main(String[] args) {
        SpringApplication.run(UsermanageApplication.class, args);
    }

}

 

分页插件配置

按照MybatisPlus的的分页插件的使用规范，新建config包，然后在包下新建MyBatisPlusConfig

package com.badao.usermanage.config;

import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.transaction.annotation.EnableTransactionManagement;

@EnableTransactionManagement
@Configuration
public class MyBatisPlusConfig {
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
        // 设置请求的页面大于最大页后操作， true调回到首页，false 继续请求  默认false
        // paginationInterceptor.setOverflow(false);
        // 设置最大单页限制数量，默认 500 条，-1 不受限制
        // paginationInterceptor.setLimit(500);
        return paginationInterceptor;
    }
}

 

使用PostMan测试API接口

启动项目，打开PostMan,输入测试接口地址以及参数

localhost:8088/user/selectOne?id=2

这里根据Id进行查询，传递id参数为2。

 

 

快速搭建ElementUI项目

参照下面文章快速搭建一个ElementUI项目

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103285539

然后使用axios进行后台数据的请求

安装axios

npm install axios

 

 

然后打开入口程序main.js添加axios

import axios from 'axios'

 

 

然后打开webpack.config.js进行url的代理配置

  

devServer: {
    host: '127.0.0.1',
    port: 8010,
    proxy: {
      '/api/': {
        target: 'http://127.0.0.1:8088',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

 

 

以上配置代表项目的启动端口为8010，ElementUI在向后台请求Url时，就会将/api/的请求向target中执行的地址去请求

所以我们可以在页面App.vue中这样去调用后台数据接口

//页面初始化的时候，去调用 
        created: function(){ 
            debugger 
            this.getData() 
        }, 
        methods: { 
            //通过ajax去请求服务端，获取数据 
            getData() { 
                debugger 
                let url = "/api/user/selectAllLimit?offset=2&limit=1" ;
                this.$axios.get(url).then((res) => {

                    this.tableData = res.data;//把传回来数据赋给packData

                }).catch(function(error){

                    console.log(error);

                }) 
            }

 

请求效果

 

 

App.vue完整代码

 

代码下载

关注公众号：

霸道的程序猿

回复:

ElementUISpringBoot