場景

一步一步教你在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.Driverurl: jdbc:mysql://localhost:3306/usrusername: rootpassword: 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 {@Beanpublic 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(){debuggerthis.getData()},methods: {//通過ajax去請求服務端，獲取數據getData() {debuggerlet 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-columnlabel="姓名"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-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">編輯</el-button><el-buttonsize="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(){debuggerthis.getData()},methods: {//通過ajax去請求服務端，獲取數據getData() {debuggerlet 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

總結

以上是生活随笔為你收集整理的SpringBoot+MyBatisPlus+ElementUI一步一步搭建前后端分离的项目(附代码下载)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。