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.</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2..RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.badao</groupId>
<artifactId>springbootdemo</artifactId>
<version>0.0.-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.</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:
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/usr
username: root
password:
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: ,
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="">
<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
SpringBoot+MyBatisPlus+ElementUI一步一步搭建前后端分离的项目(附代码下载)的更多相关文章
- List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac
List多个字段标识过滤 class Program{ public static void Main(string[] args) { List<T> list = new List& ...
- 【手摸手,带你搭建前后端分离商城系统】01 搭建基本代码框架、生成一个基本API
[手摸手,带你搭建前后端分离商城系统]01 搭建基本代码框架.生成一个基本API 通过本教程的学习,将带你从零搭建一个商城系统. 当然,这个商城涵盖了很多流行的知识点和技术核心 我可以学习到什么? S ...
- 【手摸手,带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目,axios配置请求、解决跨域问题
[手摸手,带你搭建前后端分离商城系统]02 VUE-CLI 脚手架生成基本项目,axios配置请求.解决跨域问题. 回顾一下上一节我们学习到的内容.已经将一个 usm_admin 后台用户 表的基本增 ...
- 【手摸手,带你搭建前后端分离商城系统】03 整合Spring Security token 实现方案,完成主业务登录
[手摸手,带你搭建前后端分离商城系统]03 整合Spring Security token 实现方案,完成主业务登录 上节里面,我们已经将基本的前端 VUE + Element UI 整合到了一起.并 ...
- 利用grunt-contrib-connect和grunt-connect-proxy搭建前后端分离的开发环境
前后端分离这个词一点都不新鲜,完全的前后端分离在岗位协作方面,前端不写任何后台,后台不写任何页面,双方通过接口传递数据完成软件的各个功能实现.此种情况下,前后端的项目都独立开发和独立部署,在开发期间有 ...
- ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
一.前言 这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...
- 仵航说 前后端分离,文件上传下载(springBoot+vue+elementUI)仵老大
1.介绍 本文主要是介绍前后端分离的上传下载,后端使用的是SpringBoot,持久层用的是mybatis-plus,前端用的Vue,UI用的elementUI,测试了一下,文本,图片,excel ...
- 【转】python+django+vue搭建前后端分离项目
https://www.cnblogs.com/zhixi/p/9996832.html 以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享 ...
- python+django+vue搭建前后端分离项目
以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享项目 准备工作:IDE,[JetBrains PyCharm2018][webpack 3 ...
随机推荐
- 想要入行web前端要知道web前端的的基本工作职责
入一行,要先知一行 ”:我们来看看web前端开发职位 无论什么门派都要做到的一些基本工作职责 首先,你必须是一个合格的“页面仔”,这个叫法不好听,但很生动: 我们都知道,所有呈现的内容都是基于HTML ...
- NLP(十六)轻松上手文本分类
背景介绍 文本分类是NLP中的常见的重要任务之一,它的主要功能就是将输入的文本以及文本的类别训练出一个模型,使之具有一定的泛化能力,能够对新文本进行较好地预测.它的应用很广泛,在很多领域发挥着重要 ...
- .Net中WebService的Demo示例
一.创建一个Web服务 1.新建一个项目WebserverDemo 2.在项目处添加新建项,添加一个web服务 3.编辑TestServer.asmx文件 3.1 TestServer.asmx默认的 ...
- LAMPSecurity: CTF6 Vulnhub Walkthrough
镜像下载地址: https://www.vulnhub.com/entry/lampsecurity-ctf6,85/ 主机扫描: ╰─ nmap -p- -sV -oA scan 10.10.202 ...
- Android动态添加碎片
我们编写一个能够用过按钮动态更替碎片的APP,首先在主页上显示第一个碎片,点击按钮后可以替换到第二个碎片,或者删除已经替换掉的第二个碎片. 一.MainActivity.java import and ...
- 记druid 在配置中心下的一个大坑: cpu 达到 100%
把我们的dubbo 应用移步到配置中心上去之后,发现我们的应用过一段时间就会出现cpu 100%的情况 (大概是12个小时),一开始cpu占用是2-5% 的样子,什么都没做,后面竟然用尽了cpu.. ...
- 【UR #6】懒癌
Problem Description 你绞尽脑汁也没有解开智商锁给的迷题,只见哐地一下门就开了:"您与锁的主人智商一致." 于是你们窃取了大量内部资料,最后端掉了 \(IIIS\ ...
- JS基础语法---基本包装类型
基本包装类型 普通变量不能直接调用属性或者方法 对象可以直接调用属性和方法 基本包装类型: 本身是基本类型, 但是在执行代码的过程中, 如果这种类型的变量调用了属性或者是方法, 那么这种类型就 ...
- Android8.1 SystemUI源码分析之 电池时钟刷新
SystemUI源码分析相关文章 Android8.1 SystemUI源码分析之 Notification流程 分析之前再贴一下 StatusBar 相关类图 电池图标刷新 从上篇的分析得到电池图标 ...
- OPENGL 坐标轴转换
坐标轴 平移 旋转 缩放 重置坐标轴 矩阵操作 示例 1.坐标轴 OpenGL 使用的右手坐标系,从正面看原点,逆时针旋转被认为是正旋转. x轴:从左到右 y轴:从底部向上 z轴:从屏幕背向朝向前方 ...