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

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

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

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

文章目录

  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【二】
    • 项目介绍
      • 项目功能/界面
        • 项目操作界面
      • 技术栈
    • 实现功能02-创建项目基础界面
      • 需求分析/图解
      • 思路分析
      • 代码实现

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连支持一下，创造不易您们的支持是我的动力🤞

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/89615.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

命令全局安装 ts

命令全局安装 ts

1.全局安装 typeScript编译 npm install -g typescript2.查看版本 tsc-v安装成功的画面
阅读更多...
Spring与Mybatis整合aop整合pageHelper分页插件

Spring与Mybatis整合aop整合pageHelper分页插件

前言 Spring与MyBatis整合的意义在于提供了一种结合优势的方式&#xff0c;以便更好地开发和管理持久层&#xff08;数据库访问&#xff09;代码。 这里也是总结了几点主要意义 简化配置&#xff1a;Spring与MyBatis整合后&#xff0c;可以通过Spring的配置文件来管理和配置M…
阅读更多...
31、springboot 配置HTTP服务端口及如何通过WebServer实例动态获取项目中的HTTP端口

31、springboot 配置HTTP服务端口及如何通过WebServer实例动态获取项目中的HTTP端口

配置HTTP服务端口及如何通过WebServer实例动态获取项目中的HTTP端口 ★ 设置HTTP服务端口&#xff1a; - server.port或者SERVER_PORT环境变量——总结来说&#xff0c;其实就是要配置server.port外部配置属性。▲ 同样遵守如下优先级&#xff1a; 这些都是外部配置源&#x…
阅读更多...
基于javaweb的新生报到系统

基于javaweb的新生报到系统

摘 要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;各行各业相继进入信息管理时代&…
阅读更多...
Vue路由（详解）

Vue路由（详解）

目录 路由原理 路由到底有什么作用&#xff1f; 路由安装和使用&#xff08;vue2&#xff09; 路由跳转 跳转实例&#xff1a; 路由的传值和取值 传值实例&#xff1a; 查询参和路由参的区别&#xff1a; 嵌套路由 嵌套实例&#xff1a; 路由守卫 守卫实例&#xff1…
阅读更多...
如何使用CSS实现一个响应式轮播图？

如何使用CSS实现一个响应式轮播图？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用CSS实现响应式轮播图的示例⭐ HTML 结构⭐ CSS 样式 (styles.css)⭐ JavaScript 代码 (script.js)⭐ 实现说明⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带…
阅读更多...
EMR电子病历系统 SaaS电子病历编辑器源码 电子病历模板编辑器

EMR电子病历系统 SaaS电子病历编辑器源码 电子病历模板编辑器

EMR&#xff08;Electronic Medical Record&#xff09;指的是电子病历。它是一种基于电子文档的个人医疗记录&#xff0c;可以包括病人的病史、诊断、治疗方案、药物处方、检查报告和护理计划等信息。EMR采用计算机化的方式来存储、管理和共享这些信息&#xff0c;以便医生和医…
阅读更多...
在Linux中使用gcc/g++编译代码

在Linux中使用gcc/g++编译代码

gcc/g 1.方法速记2.具体过程2.1 预处理阶段2.2 编译阶段2.3 汇编阶段2.4链接阶段2.4.1 链接的细节 gcc和g的操作一样&#xff0c;g的方法就仅需把gcc换成g即可。 1.方法速记 直接编译语法&#xff1a;将text.c文件或者text.cpp文件直接编译成text文件。 gcc text.c -o text /…
阅读更多...
ElementUI中的日历组件加载无效的问题

ElementUI中的日历组件加载无效的问题

在ElementUI中提供了一个日历组件。在某些场景下还是比较有用的。只是在使用的时候会有些下坑&#xff0c;大家要注意下。   官网提供的信息比较简介。我们在引入到项目中使用的时候可以能会出现下面的错误提示。 Unknown custom element: <el-calendar> - did you …
阅读更多...
git通过fork-merge request实现多人协同

git通过fork-merge request实现多人协同

一、问题 对于一个项目&#xff0c;如果需要多人协同开发&#xff0c;大家都在原始仓库中进行修改提交&#xff0c;经常会发生冲突&#xff0c;而且一不小心会把别人的代码内容覆盖掉。为了避免这样的问题&#xff0c;git提供了fork-merge request这样的协同方式。 二、仓库框…
阅读更多...
【C++】—— 简述C++11新特性

【C++】—— 简述C++11新特性

序言&#xff1a; 从本期开始&#xff0c;我将会带大家学习的是关于C11 新增的相关知识&#xff01;废话不多说&#xff0c;我们直接开始今天的学习。 目录 &#xff08;一&#xff09;C11简介 &#xff08;二&#xff09;统一的列表初始化 1、&#xff5b;&#xff5d;初始…
阅读更多...
【业务功能篇74】三高微服务项目springboot-springcloud

【业务功能篇74】三高微服务项目springboot-springcloud

三高指的是&#xff1a;高性能、高并发、高可用 2.项目架构 2.1 系统架构图 整体的项目架构图如下 2.2 业务组成 整体的项目业务组成如下
阅读更多...
GB28181设备接入侧如何对接外部编码后音视频数据并实现预览播放

GB28181设备接入侧如何对接外部编码后音视频数据并实现预览播放

技术背景 我们在对接GB28181设备接入模块的时候&#xff0c;遇到这样的技术诉求&#xff0c;好多开发者期望能提供编码后&#xff08;H.264/H.265、AAC/PCMA&#xff09;数据对接&#xff0c;确保外部采集设备&#xff0c;比如无人机类似回调过来的数据&#xff0c;直接通过模…
阅读更多...
keepalived双机热备，keepalived+lvs（DR）

keepalived双机热备，keepalived+lvs（DR）

本节主要学习了keepalivedlvs的作用和配置方法主要配置调度器和web节点&#xff0c;还有keepalived的双击热备&#xff0c;主要内容有概述&#xff0c;安装&#xff0c;功能模块&#xff0c;配置双击热备&#xff0c;验证方法&#xff0c;双击热备的脑裂现象和VIP无法通信。 目…
阅读更多...
基于DolphinScheduler的调度流程梳理及落地实践

基于DolphinScheduler的调度流程梳理及落地实践

目 录 01 背景‍ 02 主流调度引擎 ‍‍‍‍‍‍‍ 03 DolphinScheduler核心概念及调度过程‍‍‍‍‍‍ 04 开发实践 01‍ 背景‍‍ 随着数据中台概念及相关技术逐渐成熟、落地&#xff0c;不断有企业将其应用到自身业务中&#xff0c;将原本分散的各系统数据进行整合、分析…
阅读更多...
贪心算法：简单而高效的优化策略

贪心算法：简单而高效的优化策略

在计算机科学中&#xff0c;贪心算法是一种简单而高效的优化策略&#xff0c;用于解决许多组合优化问题。虽然它并不适用于所有问题&#xff0c;但在一些特定情况下&#xff0c;贪心算法能够产生近似最优解&#xff0c;而且计算成本较低。在本文中&#xff0c;我们将深入探讨贪…
阅读更多...
javascript常用的东西

javascript常用的东西

JavaScript 是一门强大的编程语言&#xff0c;用于为网页添加交互性和动态性。也可以锻炼人们的逻辑思维&#xff0c;是一个非常好的东西。 一、变量和数据类型&#xff1a; 变量&#xff1a; 变量是用于存储数据值的容器。在 JavaScript 中&#xff0c;你可以使用 var、let…
阅读更多...
推荐系统在线峰会来了，冷启动、推荐工程、模型训练…你都能找到答案

推荐系统在线峰会来了，冷启动、推荐工程、模型训练…你都能找到答案

回顾推荐系统的发展历程&#xff0c;从 30 余年前的协同过滤算法起步&#xff0c;经历了深度学习的浪潮&#xff0c;到如今热火朝天的大模型&#xff0c;推荐系统一次又一次地焕发出新的活力。随着大模型的到来&#xff0c;推荐系统正处于变革的前夜&#xff0c;原有的系统模块…
阅读更多...
线性代数的学习和整理8：行列式相关

线性代数的学习和整理8：行列式相关

目录 1 从2元一次方程组求解说起 1.1 直接用方程组消元法求解 1.2 有没有其他方法呢&#xff1f;有&#xff1a;比如2阶行列式方法 1.3 3阶行列式 2 行列式的定义 2.1 矩阵里的方阵 2.2 行列式定义&#xff1a;返回值为标量的一个函数 2.3 行列式的计算公式 2.4 克拉…
阅读更多...
Ubuntu 配置国内源

Ubuntu 配置国内源

配置国内源 因为众所周知的原因&#xff0c;国外的很多网站在国内是访问不了或者访问极慢的&#xff0c;这其中就包括了Ubuntu的官方源。 所以&#xff0c;想要流畅的使用apt安装应用&#xff0c;就需要配置国内源的镜像。 市面上Ubuntu的国内镜像源非常多&#xff0c;比较有…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站