场景

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

  1. 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& ...

  2. 【手摸手,带你搭建前后端分离商城系统】01 搭建基本代码框架、生成一个基本API

    [手摸手,带你搭建前后端分离商城系统]01 搭建基本代码框架.生成一个基本API 通过本教程的学习,将带你从零搭建一个商城系统. 当然,这个商城涵盖了很多流行的知识点和技术核心 我可以学习到什么? S ...

  3. 【手摸手,带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目,axios配置请求、解决跨域问题

    [手摸手,带你搭建前后端分离商城系统]02 VUE-CLI 脚手架生成基本项目,axios配置请求.解决跨域问题. 回顾一下上一节我们学习到的内容.已经将一个 usm_admin 后台用户 表的基本增 ...

  4. 【手摸手,带你搭建前后端分离商城系统】03 整合Spring Security token 实现方案,完成主业务登录

    [手摸手,带你搭建前后端分离商城系统]03 整合Spring Security token 实现方案,完成主业务登录 上节里面,我们已经将基本的前端 VUE + Element UI 整合到了一起.并 ...

  5. 利用grunt-contrib-connect和grunt-connect-proxy搭建前后端分离的开发环境

    前后端分离这个词一点都不新鲜,完全的前后端分离在岗位协作方面,前端不写任何后台,后台不写任何页面,双方通过接口传递数据完成软件的各个功能实现.此种情况下,前后端的项目都独立开发和独立部署,在开发期间有 ...

  6. ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目

    一.前言 这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...

  7. 仵航说 前后端分离,文件上传下载(springBoot+vue+elementUI)仵老大

    1.介绍 ​ 本文主要是介绍前后端分离的上传下载,后端使用的是SpringBoot,持久层用的是mybatis-plus,前端用的Vue,UI用的elementUI,测试了一下,文本,图片,excel ...

  8. 【转】python+django+vue搭建前后端分离项目

    https://www.cnblogs.com/zhixi/p/9996832.html 以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享 ...

  9. python+django+vue搭建前后端分离项目

    以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享项目 准备工作:IDE,[JetBrains PyCharm2018][webpack 3 ...

随机推荐

  1. 想要入行web前端要知道web前端的的基本工作职责

    入一行,要先知一行 ”:我们来看看web前端开发职位 无论什么门派都要做到的一些基本工作职责 首先,你必须是一个合格的“页面仔”,这个叫法不好听,但很生动: 我们都知道,所有呈现的内容都是基于HTML ...

  2. NLP(十六)轻松上手文本分类

    背景介绍   文本分类是NLP中的常见的重要任务之一,它的主要功能就是将输入的文本以及文本的类别训练出一个模型,使之具有一定的泛化能力,能够对新文本进行较好地预测.它的应用很广泛,在很多领域发挥着重要 ...

  3. .Net中WebService的Demo示例

    一.创建一个Web服务 1.新建一个项目WebserverDemo 2.在项目处添加新建项,添加一个web服务 3.编辑TestServer.asmx文件 3.1 TestServer.asmx默认的 ...

  4. LAMPSecurity: CTF6 Vulnhub Walkthrough

    镜像下载地址: https://www.vulnhub.com/entry/lampsecurity-ctf6,85/ 主机扫描: ╰─ nmap -p- -sV -oA scan 10.10.202 ...

  5. Android动态添加碎片

    我们编写一个能够用过按钮动态更替碎片的APP,首先在主页上显示第一个碎片,点击按钮后可以替换到第二个碎片,或者删除已经替换掉的第二个碎片. 一.MainActivity.java import and ...

  6. 记druid 在配置中心下的一个大坑: cpu 达到 100%

    把我们的dubbo 应用移步到配置中心上去之后,发现我们的应用过一段时间就会出现cpu 100%的情况 (大概是12个小时),一开始cpu占用是2-5% 的样子,什么都没做,后面竟然用尽了cpu.. ...

  7. 【UR #6】懒癌

    Problem Description 你绞尽脑汁也没有解开智商锁给的迷题,只见哐地一下门就开了:"您与锁的主人智商一致." 于是你们窃取了大量内部资料,最后端掉了 \(IIIS\ ...

  8. JS基础语法---基本包装类型

    基本包装类型 普通变量不能直接调用属性或者方法 对象可以直接调用属性和方法     基本包装类型: 本身是基本类型, 但是在执行代码的过程中, 如果这种类型的变量调用了属性或者是方法, 那么这种类型就 ...

  9. Android8.1 SystemUI源码分析之 电池时钟刷新

    SystemUI源码分析相关文章 Android8.1 SystemUI源码分析之 Notification流程 分析之前再贴一下 StatusBar 相关类图 电池图标刷新 从上篇的分析得到电池图标 ...

  10. OPENGL 坐标轴转换

    坐标轴 平移 旋转 缩放 重置坐标轴 矩阵操作 示例 1.坐标轴  OpenGL 使用的右手坐标系,从正面看原点,逆时针旋转被认为是正旋转. x轴:从左到右 y轴:从底部向上 z轴:从屏幕背向朝向前方 ...