场景
一步一步教你在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