场景

一步一步教你在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一步一步搭建前后端分离的项目(附代码下载)相关推荐

java计算机毕业设计基于springboot+vue+elementUI的口腔管理平台管理系统(前后端分离）
项目介绍口腔卫生是关系民生的一个重要问题.口腔健康会直接影响全身的健康,口腔基本常见的有龋齿,牙周炎等问题,而且人类的牙齿只有2次更换周期,一旦牙齿彻底完成更换终生将不再更换,所以越来越多的人开始关 ...
搭建前后端分离主流项目完整步骤——在线教育系统（阿里云服务器部署上线）
前言: 需要源码评论或私我项目技术栈如下图所示: 本次博客分前后端+部署服务器三个步骤来写先来看看实现效果: 在线教育系统完整三步骤前言: 一.后端技术栈 1.ssm+mysql: (1)map ...
java基于springboot+vue+elementui的饭店点菜外卖平台前后端分离
随着现在网络的快速发展,网上管理系统也逐渐快速发展起来,网上管理模式很快融入到了许多商家的之中,随之就产生了"点餐平台网站",这样就让点餐平台网站更加方便简单.对于本点餐平台网站的 ...
java基于springboot+vue+elementui的网上图书商城系统前后端分离
随着时代的发展,不论是学习还是生活中,图书已经成为人们生活中必不很少的一个组成.图书是知识的载体,他是人类智慧结晶的一个体现.所以人们在现代的生活中,方方面面都离不开图书.随着信息化技术的发展,通过互 ...
Element-UI + Vue.js + SpringBoot 实现前后端分离入门项目
Element UI 项目简介与演示刷新页面时让组件默认为当前路由路径删除时确认分页功能的实现 el-date-picke 日期少一天前端部分源码:https://github.com/szl ...
基于Springboot+vue前后端分离的项目--后端笔记
效果图: 1.前言从零开始搭建一个项目最重要的是选择一个自己熟悉的框架,此项目使用Springboot框架来构建后端结构,使用vue来构建前端页面.数据层我们常用的是Mybatis,这里我大部分使 ...
基于springboot+vue的商城系统(电商平台)(前后端分离)
博主主页:猫头鹰源码博主简介:Java领域优质创作者.CSDN博客专家.公司架构师.全网粉丝5万+.专注Java技术领域和毕业设计项目实战主要内容:毕业设计(Javaweb项目|小程序等).简历模 ...
ASP.NET Core 实战：使用ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
一.前言这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...
php node.js django,Vue.js和Django搭建前后端分离项目示例详解
本篇文章主要介绍了Django+Vue.js搭建前后端分离项目的示例,具有一定参考价值,有兴趣的可以了解一下在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是 ...

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

场景

实现