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文件中添加相關依賴

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="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">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.badao</groupId>
    <artifactId>springbootdemo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springbootdemo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <!-- mybatis-plus插件 -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.1.0</version>
        </dependency>

 

        <!-- mysql jdbc驅動 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
        <resources>
        <resource>
            <directory>src/main/java</directory>
            <includes>
                <include>**/*.yml</include>
                <include>**/*.xml</include>
            </includes>
            <filtering>false</filtering>
        </resource>
        </resources>
    </build>

</project>

 

 

然后將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完整代碼

<template>
  <el-table
          :data="tableData"
          style="width: 100%">
    <el-table-column
            label="姓名"
            width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>性別: {{ scope.row.sex }}</p>
          <p>手機: {{ scope.row.phone }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
        <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
    export default {
        data() {
            return {
                //ajax: null,
                //列表相關
                tableData: [],
                dialogFormVisible: false
            }
        },

        //頁面初始化的時候，去調用
        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);

                })
            }
        }
    }
</script>

 

代碼下載

關注公眾號：

霸道的程序猿

回復:

ElementUISpringBoot