Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【二】

最新推荐文章于 2024-05-20 21:47:50 发布
最新推荐文章于 2024-05-20 21:47:50 发布
阅读量2.6k 收藏 5
点赞数 7
分类专栏： SpringBoot MyBatis 文章标签： spring boot 后端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73557631/article/details/132487393
版权

😀前言
本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【二】的，希望你能够喜欢

🏠个人主页：晨犀主页
🧑个人简介：大家好，我是晨犀，希望我的文章可以帮助到大家，您的满意是我的动力😉😉

💕欢迎大家：这里是CSDN，我总结知识的地方，欢迎来到我的博客，感谢大家的观看🥰
如果文章有什么需要改进的地方还请大佬不吝赐教 先在此感谢啦😊

文章目录

Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【二】

项目介绍

项目功能/界面

项目操作界面

image-20230822154845170

技术栈

前后端分离开发, 前端主体框架Vue3 + 后端基础框架Spring-Boot

  1. 前端技术栈: Vue3+Axios+ElementPlus
  2. 后端技术栈: Spring Boot + MyBatis Plus
  3. 数据库-MySQL
  4. 项目的依赖管理-Maven
  5. 分页-MyBatis Plus 的分页插件

实现功能02-创建项目基础界面

需求分析/图解

image-20230822155019176

思路分析

  1. 使用Vue3+ElementPlus 完成

代码实现

  1. 修改springboot_vue\src\App.vue 成如下形式, 会删除部分用不上的代码，增加 
<template>
<div>
</div>
</template>
<style>
</style>
  1. 修改springboot_vue\src\views\HomeView.vue
<template>
    <!-- 去掉class="home"-->
    <div>
        <!-- <img alt="Vue logo" src="../assets/logo.png">-->
        <!-- <HelloWorld msg="Welcome to Your Vue.js App"/>-->
    </div>
</template>
<script>
    // @ is an alias to /src
    // import HelloWorld from '@/components/HelloWorld.vue'
    export default {
        name: 'HomeView',
        components: {
            // HelloWorld
        }
    }
</script>
  1. 删除springboot_vue\src\components\HelloWorld.vue
  2. 创建springboot_vue\src\components\Header.vue
<template>
    <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display:
    flex">
        <div style="width: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue">后台管理</div>
        <div style="flex: 1"></div>
        <div style="width: 100px">下拉框</div>
    </div>
</template>
<script>
    export default {
        name: "Header"
    }
</script>
<style scoped>
</style>
  1. 修改springboot_vue\src\App.vue , 引入Header 组件
<template>
    <div>
        <Header />
        Home
    </div>
</template>
<style>
</style>
<script>
    import Header from "@/components/Header";
    export default {
        name: "Layout",
        components: {
            Header
        }
    }
</script>
  1. 创建全局的global.css(先准备着, 后面有用) , 以后有全局样式就可以写在这里,springboot_vue\src\assets\css\global.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
  1. 修改springboot_vue\src\main.js , 引入global.css
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/css/global.css'
 
createApp(App).use(store).use(router).mount('#app')
  1. 修改springboot_vue\src\main.js, 引入Element Plus ,并测试, 如何引入，

文档https://element-plus.gitee.io/zh-CN/guide/quickstart.html

image-20230821095316325

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/css/global.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
  1. 修改springboot_vue\src\App.vue , 引入一个el-button,看看是否生效
<template>
    <div>
        <Header />
        Home <el-button>我的按钮</el-button>
    </div>
</template>
<style>
</style>
<script>
    import Header from "@/components/Header";
    export default {
        name: "Layout",
        components: {
            Header
        }
    }
</script>

image-20230821100830333

  1. 修改springboot_vue\src\components\Header.vue ,引入下拉框,

    文档https://doc-archive.element-plus.org/#/zh-CN/component/dropdown【是旧版对应的文档】

image-20230821100918341

<template>
    <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display:
    flex">
        <div style="width: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue">后台管理</div>
        <div style="flex: 1"></div>
        <div style="width: 100px">
            <el-dropdown>
                <span class="el-dropdown-link">
                    tom
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>个人信息</el-dropdown-item>
                        <el-dropdown-item>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
    export default {
        name: "Header"
    }
</script>
<style scoped>
</style>

image-20230821101014906

  1. 创建侧边栏组件, 并引入导航菜单组件springboot_vue\src\components\Aside.vue ,

    参考文档：https://doc-archive.element-plus.org/#/zh-CN/component/menu

image-20230821101104325

粘贴的代码要注意:

image-20230821101126678

<template>
    <div>
        <!-- 说明-->
        <!-- 先去掉, 这两个方法, 否则会报错-->
        <!-- @open="handleOpen"-->
        <!-- @close="handleClose"-->
        <el-menu default-active="2" class="el-menu-vertical-demo">
            <el-sub-menu index="1">
                <template #title>
                    <i class="el-icon-location"></i>
                    <span>导航一</span>
                </template>
                <el-menu-item-group>
                    <template #title>分组一</template>
                    <el-menu-item index="1-1">选项1</el-menu-item>
                    <el-menu-item index="1-2">选项2</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="分组2">
                    <el-menu-item index="1-3">选项3</el-menu-item>
                </el-menu-item-group>
                <el-sub-menu index="1-4">
                    <template #title>选项4</template>
                    <el-menu-item index="1-4-1">选项1</el-menu-item>
                </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <template #title>导航二</template>
            </el-menu-item>
            <el-menu-item index="3" disabled>
                <i class="el-icon-document"></i>
                <template #title>导航三</template>
            </el-menu-item>
            <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <template #title>导航四</template>
            </el-menu-item>
        </el-menu>
    </div>
</template>
<script>
    export default {
        name: "Aside"
    }
</script>
<style scoped>
</style>
  1. 修改springboot_vue\src\App.vue, 将页面分成三个部分
<template>
    <div>
        <!-- 头部-->
        <Header />
        <!-- 主体-->
        <div style="display: flex">
            <!-- 侧边栏-->
            <Aside />
            <!-- 内容区域,表格, 这个部分是从HomeView.vue 组件来的-->
            <router-view style="flex: 1" />
        </div>
    </div>
</template>
<style>
</style>
<script>
    import Header from "@/components/Header";
    import Aside from "@/components/Aside";
    export default {
        name: "Layout",
        components: {
            Header,
            Aside
        }
    }
</script>
  1. 修改springboot_vue\src\views\HomeView.vue, 加入一个el-button,进行测试
<template>
    <div>
        <el-button>我的按钮</el-button>
    </div>
</template>
<script>
    // @ is an alias to /src
    export default {
        name: 'HomeView',
        components: {
        }
    }
</script>
  1. 看看主页面的效果, 基本结构已经出来了

image-20230821101321179

  1. 对主页面进行一个完善， 比如导航栏的宽度， 去掉不必要的子菜单等, 修改springboot_vue\src\components\Aside.vue
<template>
    <div>
        <!-- 说明-->
        <!-- 先去掉, 这两个方法, 否则会报错-->
        <!-- @open="handleOpen"-->
        <!-- @close="handleClose"-->
        <el-menu style="width: 200px" default-active="2" class="el-menu-vertical-demo">
 
            <el-sub-menu index="1-4">
                <template #title>选项4</template>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <template #title>导航二</template>
            </el-menu-item>
            <el-menu-item index="3" disabled>
                <i class="el-icon-document"></i>
                <template #title>导航三</template>
            </el-menu-item>
            <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <template #title>导航四</template>
            </el-menu-item>
        </el-menu>
    </div>
</template>
<script>
    export default {
        name: "Aside"
    }
</script>
<style scoped>
</style>
  1. 修改springboot_vue\src\views\HomeView.vue , 引入表格,后面来显示数据, 参考文档

image-20230821101447245

<template>
    <!-- 去掉class="home"-->
    <div>
        <!-- <img alt="Vue logo" src="../assets/logo.png">-->
        <!-- <HelloWorld msg="Welcome to Your Vue.js App"/>-->
        <!-- <el-button>我的按钮</el-button> -->
        <!-- 去掉字段的width, 让其自适应-->
        <el-table :data="tableData" stripe style="width: 90%">
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
    </div>
</template>
<script>
    // @ is an alias to /src
    // import HelloWorld from '@/components/HelloWorld.vue'
    export default {
        name: 'HomeView',
        components: {
            // HelloWorld
        },
        data() {
            return {
                tableData: []
            }
        }
    }
</script>

image-20230821101731820

  1. 可以看到， element-plus 默认是英文的, 我们将其国际化一下https://doc-archive.element-plus.org/#/zh-CN/component/i18n ,

    修改springboot_vue\src\main.js

    image-20230821101817228

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import '@/assets/css/global.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
createApp(App).use(store).use(router).use(ElementPlus,{locale: zhCn,}).mount('#app')
  1. 修改springboot_vue\src\views\HomeView.vue, 从官网设置一些测试数据, 并支持日期排序

image-20230821141819123

<template>
    <!-- 去掉class="home"-->
    <div>
        <!-- <img alt="Vue logo" src="../assets/logo.png">-->
        <!-- <HelloWorld msg="Welcome to Your Vue.js App"/>-->
        <!-- <el-button>我的按钮</el-button>-->
        <el-table :data="tableData" stripe style="width: 90%">
            <el-table-column sortable prop="date" label="日期"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
    </div>
</template>
<script>
    // @ is an alias to /src
    // import HelloWorld from '@/components/HelloWorld.vue'
    export default {
        name: 'HomeView',
        components: {
            // HelloWorld
        },
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路1518 弄',
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路1517 弄',
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路1519 弄',
                }
                ]
            }
        }
    }
</script>

image-20230821141859210

  1. 修改springboot_vue\src\views\HomeView.vue, 增加相关的操作按钮和搜索框, 参考el-input 组件文档, 表格的固定列文档

image-20230821141935589

image-20230821141954265

<template>
    <!-- 去掉class="home"-->
    <div>
        <div style="margin: 10px 0">
            <el-button type="primary">新增</el-button>
            <el-button>其它</el-button>
        </div>
        <!-- 搜索-->
        <div style="margin: 10px 0">
            <el-input v-model="search" placeholder=" 请输入关键字" style="width:
30%"></el-input>
            <el-button style="margin-left: 10px" type="primary">查询</el-button>
        </div>
        <el-table :data="tableData" stripe style="width: 90%">
            <el-table-column sortable prop="date" label="日期"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope">
                    <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
                    <el-button type="text">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    // @ is an alias to /src
    // import HelloWorld from '@/components/HelloWorld.vue'
    export default {
        name: 'HomeView',
        components: {
            // HelloWorld
        },
        data() {
            return {
                search: '',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路1518 弄',
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路1517 弄',
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路1519 弄',
                }
                ]
            }
        },
        methods: {
            handleEdit() {
            }
        }
    }
</script>

------运行效果-------image-20230821142039595

😁热门专栏推荐
Thymeleaf快速入门及其注意事项

Spring Initailizr–快速入门–SpringBoot的选择

带你了解SpringBoot支持的复杂参数–自定义对象参数-自动封装

Rest 优雅的url请求处理风格及注意事项

文章到这里就结束了，如果有什么疑问的地方请指出，诸大佬们一起来评论区一起讨论😁
希望能和诸大佬们一起努力，今后我们一起观看感谢您的阅读🍻
如果帮助到您不妨3连支持一下，创造不易您们的支持是我的动力🤞

晨犀
关注
  • 7
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
Spring Boot (Vue3+ElementPlus+Axios+MyBatisPlus +Spring Boot 前后端分离)
要学就学灰太狼的博客
08-28 818
● 项目操作界面● 技术栈前后端分离开发，前端主体框架 Vue3 + 后端基础框架 Spring-Boot● 使用 Vue3+Element-Plus 技术先下载 node.js LTS 并安装：node.js 的 npm，用于管理前端项目包依赖创建 Vue 项目使用 idea 打开 springboot_vue 项目，并配置项目启动① 直接将 springboot_vue 项目拖到 idea ② 配置 springboot_vue 使用 npm 方式启动 启动测试，可以看到现在是 9090 端口
登录和注册 前端：vue3+iview plus +axios 后台：spring boot +mybatis
04-26
本项目结合了前沿的前端技术和强大的后端框架，旨在提供一个高效、安全的用户认证系统。以下是基于所给标题、描述和标签的详细知识点讲解： ...同时，良好的前后端分离设计也有利于项目的扩展和维护。
Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【一】
m0_73557631的博客
08-24 3152
前后端分离开发, 前端主体框架Vue3 + 后端基础框架Spring-Boot前端技术栈: Vue3+Axios+ElementPlus后端技术栈: Spring Boot + MyBatis Plus数据库-MySQL项目的依赖管理-Maven分页-MyBatis Plus 的分页插件。
SpringBoot3.0(Mybatis)+Vue3.0(ElementPlus)快速实现分页查询功能
最新发布
m0_74751974的博客
05-20 718
Data。
Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】
m0_73557631的博客
08-28 1237
😀前言本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】，希望你能够喜欢🧑个人简介：大家好，我是晨犀，希望我的文章可以帮助到大家，您的满意是我的动力😉😉。
spring boot优秀后台管理系统(java版本)
qq496108586的专栏
08-27 534
平台简介 小梨子后台管理系统可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。 内置功能 1. 用户管理：用户是系统操作者，该功能主要完成系统用户配置。 2. 部门管理：配置系统组织机构（公司、部门、小组），树结构展现支持数据权限。 3. 岗位管理：配置系统用户所...
史上最全springboot+vue3+element-plus代码实现web登录页面，包含maven配置
weixin_43365615的博客
04-15 1465
springboot、vue、axios、maven
【6】【vue3+elementplus+springboot+mybatisplus】 管理系统 【前后端实践】
qq_53478650的博客
02-02 3570
代码主要分成四部分，第一部分我们需要放在template里面，第二部分是选择按需部分引入的方式，我们可以不管，第三部分是放在script里的data部分里面也就是提供页面的数据，具体填入形式如下。注意：vue3不支持elementUI，所以选择以下搭配其中之一（这里我选的是2）查看示例的代码，这里选择手动引入（elementplus还支持自动按需引入）点击布局容器可以看到示例，我们选择使用最下面的侧边栏的示例代码。第四部分是页面的样式，不重要，我们可以不使用。点击官网上方菜单栏的组件，点击。
Spring boot+vue3+element plus实现后台管理系统
07-04
前后端分离项目，Spring boot作为后端，vue框架实现前端，后端整合swagger3测试工具，jwt实现验证码生成，awt生成图形验证码，整合邮箱验证，使用mybatis-generator自动生成实体类以及mapper，设置有拦截器验证登录...
Spring Boot 3 + Vue 3前后端分离保姆级学习型新闻项目
07-12
一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离学习型新闻项目，配备保姆级项目开发教程手把手教你从零开始开发上线一个生产级别的 Java 系统。由新闻门户系统、作者后台管理系统、平台后台...
Spring Boot + Vue 前后端分离开发之前端网络请求封装与配置
08-26
在 Spring Boot + Vue 前端分离开发中，网络请求封装与配置是一个非常重要的步骤。今天，我们将介绍如何使用 axios 对网络请求进行封装和配置。 首先，让我们回顾一下为什么需要对网络请求进行封装。网络请求可能会...
简单的spring boot+vue前后端分离项目
03-30
本项目“简单的spring boot+vue前后端分离项目”旨在帮助初学者理解如何结合Spring Boot和Vue.js实现这一模式。下面，我们将深入探讨这两个关键技术以及它们在项目中的应用。 **Spring Boot** Spring Boot是Java...
Vue 3 + Element Plus + Spring Boot + MyBatis实现前后端分离计算器
hsqmfhxq的博客
10-22 205
Vue 3 + Element Plus + Spring Boot + MyBatis实现前后端分离计算器
前后端分离项目 Vue3+SpringBoot 后台管理系统
wang115t的博客
02-19 1414
Src 文件夹下-新建 test 文件夹以及 resource 文件夹。而且不会添加数据成功，并向客户端返回 1 条自定义异常 JSON 数据。注意：在 Idea 中，设置 CSS 样式，使用双斜杠//注解会报错。注意：test 文件夹下的包路径要与 java 的源代码路径要一致。添加 数据到数据库 成功后-返回自定义 JSON 格式的数据。并启动测试-查看 MyBatis-Plus 是否成功加载。如果在添加过程中，发生了异常，如提交的数据格式不对，后台直接将该异常进行了捕获。提交 JSON 格式的数据。
（一）前端环境搭建---基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建
wdyan297的博客
01-14 8371
这里是为2023届学生完成一个管理系统（主要是后台）的连续更新博客。持续时间为20天，每日练习时间约2-3小时。默认已有系统开发的基础知识，如SpringBoot、数据库、HTML、CSS、JavaScript等，连载过程中，遇到细节问题也可以咨询。QQ群：1140508453。视频将在B站推出。
Vue3+springboot+mybatis-pius实现分页功能
Marblog
08-02 1182
Vue3+Springboot分页实战
Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【三】
m0_73557631的博客
08-26 1576
😀前言本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【三】的分享，希望你能够喜欢🧑个人简介：大家好，我是晨犀，希望我的文章可以帮助到大家，您的满意是我的动力😉😉。
mybatis-plus +vue+element-ui 实现分页功能
Sunny_yaa的博客
04-24 2402
前端： 使用elementui分页组件 <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :current-page.sync="historyFrom.pageNum" :page-sizes="[1 ,10, 25, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, n
前端vue2+axios后端spring boot+mybatisplus怎么实现分页查询
04-27
在前端使用axios发送分页查询请求时，需要设置请求参数，包括当前页码和每页显示的记录数。假设每页显示10条记录，当前页码为2，请求参数可以设置为： ```javascript { page: 2, limit: 10 } ``` 在后端使用Spring Boot和MyBatis Plus实现分页查询的步骤如下： 1. 在MyBatis Plus的Mapper接口中定义分页查询方法，例如： ```java List<User> selectUserPage(Page<User> page); ``` 2. 在Service层中调用Mapper中的分页查询方法： ```java @Override public IPage<User> getUserPage(int page, int limit) { Page<User> userPage = new Page<>(page, limit); userMapper.selectUserPage(userPage); return userPage; } ``` 3. 在Controller层中接收前端发送的分页查询请求参数，调用Service层中的分页查询方法，将查询结果封装成JSON格式返回给前端： ```java @GetMapping("/user") public Result getUserPage(@RequestParam(name = "page") int page, @RequestParam(name = "limit") int limit) { IPage<User> userPage = userService.getUserPage(page, limit); return Result.success(userPage); } ``` 4. 在前端使用axios发送分页查询请求，接收后端返回的JSON格式数据，渲染分页列表： ```javascript axios.get('/user', { params: { page: 2, limit: 10 } }).then(response => { console.log(response.data); // 渲染分页列表 }).catch(error => { console.log(error); }); ``` 以上就是实现前端Vue2和后端Spring Boot、MyBatis Plus的分页查询的步骤。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晨犀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值