場(chǎng)景

一步一步教你在IEDA中快速搭建SpringBoot項(xiàng)目：

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

插件的安裝參照下面博客

IDEA中SpringBoot項(xiàng)目使用@Data要安裝Lombok插件

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

項(xiàng)目使用EasyCode插件自動(dòng)生成代碼，EasyCode代碼的使用參照

IDEA中安裝EasyCode插件并連接數(shù)據(jù)庫生成代碼：

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

實(shí)現(xiàn)

搭建數(shù)據(jù)庫

本地安裝Mysql 8.0 ,并安裝連接Mysql的工具 Navicat，新建數(shù)據(jù)庫usr，并新建表user

?

IDEA中新建SpringBoot項(xiàng)目

參照上面博客在IDEA中搭建好SpringBoot項(xiàng)目，搭建好后的項(xiàng)目目錄為

?

在badao包下新建應(yīng)用啟動(dòng)類
?

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文件中添加相關(guān)依賴

<?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驅(qū)動(dòng) --><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(個(gè)人習(xí)慣)

修改配置文件內(nèi)容為

server:port: 8088 spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/usrusername: rootpassword: 123 mybatis-plus:#信息輸出設(shè)置# xml地址mapper-locations: classpath:mapper/*Dao.xml# 實(shí)體掃描，多個(gè)package用逗號(hào)或者分號(hào)分隔# type-aliases-package: ***?? #自己的實(shí)體類地址configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

?

注意，這里我本地的Mysql的版本為8.0所以這里的驅(qū)動(dòng)url如上。

上面剛搭建好項(xiàng)目后報(bào)紅是因?yàn)橛行┮蕾囘€沒下載下來。

在右側(cè)Maven面板中--點(diǎn)擊 + 并選中當(dāng)前項(xiàng)目的pom.xml，然后點(diǎn)擊install或者左上角的刷新似的圖標(biāo)。

?

使用EasyCode生成代碼

參照上面博客在IDEA中安裝EasyCode插件并使用其生成代碼，生成代碼后的目錄為

?

在生成代碼后因?yàn)槭褂玫氖悄J(rèn)的代碼生成模板，所以還需要在啟動(dòng)類中添加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的的分頁插件的使用規(guī)范，新建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();// 設(shè)置請(qǐng)求的頁面大于最大頁后操作， true調(diào)回到首頁，false 繼續(xù)請(qǐng)求? 默認(rèn)false// paginationInterceptor.setOverflow(false);// 設(shè)置最大單頁限制數(shù)量，默認(rèn) 500 條，-1 不受限制// paginationInterceptor.setLimit(500);return paginationInterceptor;} }

使用PostMan測(cè)試API接口

啟動(dòng)項(xiàng)目，打開PostMan,輸入測(cè)試接口地址以及參數(shù)

localhost:8088/user/selectOne?id=2

這里根據(jù)Id進(jìn)行查詢，傳遞id參數(shù)為2。

?

快速搭建ElementUI項(xiàng)目

參照下面文章快速搭建一個(gè)ElementUI項(xiàng)目

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

然后使用axios進(jìn)行后臺(tái)數(shù)據(jù)的請(qǐng)求

安裝axios

npm install axios

?

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

import axios from 'axios'

?

然后打開webpack.config.js進(jìn)行url的代理配置

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

?

以上配置代表項(xiàng)目的啟動(dòng)端口為8010，ElementUI在向后臺(tái)請(qǐng)求Url時(shí)，就會(huì)將/api/的請(qǐng)求向target中執(zhí)行的地址去請(qǐng)求

所以我們可以在頁面App.vue中這樣去調(diào)用后臺(tái)數(shù)據(jù)接口

//頁面初始化的時(shí)候，去調(diào)用created: function(){debuggerthis.getData()},methods: {//通過ajax去請(qǐng)求服務(wù)端，獲取數(shù)據(jù)getData() {debuggerlet url = "/api/user/selectAllLimit?offset=2&limit=1" ;this.$axios.get(url).then((res) => {this.tableData = res.data;//把傳回來數(shù)據(jù)賦給packData}).catch(function(error){console.log(error);})}

請(qǐng)求效果

?

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>手機(jī): {{ 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,//列表相關(guān)tableData: [],dialogFormVisible: false}},//頁面初始化的時(shí)候，去調(diào)用created: function(){debuggerthis.getData()},methods: {//通過ajax去請(qǐng)求服務(wù)端，獲取數(shù)據(jù)getData() {debuggerlet url = "/api/user/selectAllLimit?offset=2&limit=1" ;this.$axios.get(url).then((res) => {this.tableData = res.data;//把傳回來數(shù)據(jù)賦給packData}).catch(function(error){console.log(error);})}}} </script>

代碼下載

關(guān)注公眾號(hào)：

霸道的程序猿

回復(fù):

ElementUISpringBoot

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。