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

news2025/1/21 12:15:24

文章目录

  • 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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

c语言函数指针和指针函数的区别，以及回调函数的使用。

c语言函数指针和指针函数的区别，以及回调函数的使用。

函数指针是什么&#xff0c;函数指针本质也是指针&#xff0c;不过是指向函数的指针&#xff0c;存储的是函数的地址。 指针函数是什么,指针函数其实就是返回值是指针的函数&#xff0c;本质是函数。 函数指针是如何定义的呢&#xff0c;如下 void (*pfun)(int a,int b) 这…
阅读更多...
Could not resolve all artifacts for configuration ‘:classpath‘.

Could not resolve all artifacts for configuration ‘:classpath‘.

不与世俗为伍。哪怕这是自己许给自己的诅咒。 —— 宫崎骏 《红猪》 出现的问题 Caused by: org.gradle.api.internal.artifacts.ivyservice.DefaultLenientConfiguration$ArtifactResolveException: Could not resolve all artifacts for configuration ‘:classpath’. 解…
阅读更多...
Qt 自定义菜单、右键菜单

Qt 自定义菜单、右键菜单

在接触Qt这段时间以来&#xff0c;经常遇到菜单项的问题&#xff08;右键菜单、托盘菜单、按钮菜单等&#xff09;&#xff0c;QMenu用于菜单栏,上下文菜单,弹出菜单等&#xff0c;利用QMenuQAction就可以达到效果&#xff01; 右键菜单实现&#xff1a;通过重写contextMenuEv…
阅读更多...
Three.js + Theatre.js WebGL动画制作简明教程

Three.js + Theatre.js WebGL动画制作简明教程

在这个教程中&#xff0c;我们将介绍 Theatre.js 的基础知识并探索如何制作令人惊叹的动画序列。 我们将演示如何为 Three.js 立方体制作动画、集成引人注目的视觉效果、修改颜色、试验 HTML 元素以及以特定时间间隔将动画与声音播放同步。 推荐&#xff1a;用 NSDT编辑器 快速…
阅读更多...
CSS选择器讲解!!!

CSS选择器讲解!!!

CSS选择器 一. 常用的CSS基本选择器1.标签(元素)选择器2.类选择器3.id选择器4.类选择器和标签选择器的区别5.通配符选择器 二.复合选择器(2种)1.交集选择器2.并集(群组)选择器 三.属性选择器四.关系选择器1.后代选择器2.子代选择器3.相邻兄弟选择器4.通用兄弟选择器 五.伪元素选…
阅读更多...
SpringMVC探秘: 实现MVC模式的Web应用

SpringMVC探秘: 实现MVC模式的Web应用

文章目录 1. SpringMVC概述1.1. 什么是SpringMVC&#xff1f;1.1.1. MVC与SpringMVC 1.2. SpringMVC项目的优势 2. SpringMVC项目的创建与使用2.1. 创建SpringMVC项目2.2. 设置路由2.3. 获取参数2.3.1. 获取一个参数2.3.2. 获取多个参数2.3.3. 获取日期参数2.3.4. 参数重命名Re…
阅读更多...
C++之fileno用法实例(一百八十四)

C++之fileno用法实例(一百八十四)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…
阅读更多...
智慧煤矿：煤矿井下视频监控汇聚/AI智能分析监管预警系统解决方案

智慧煤矿：煤矿井下视频监控汇聚/AI智能分析监管预警系统解决方案

一、背景分析 随着科技的不断进步&#xff0c;视频监控技术在各个领域得到了广泛应用&#xff0c;其中包括煤矿行业。智慧煤矿方案通过引入视频监控系统&#xff0c;可以实现对煤矿生产过程的实时监控和管理&#xff0c;提高矿山安全性和生产效率。为解决井下作业距离地面远&a…
阅读更多...
Spring之Spring案例分析

Spring之Spring案例分析

Spring案例分析 Spring案例分析 摘要引言词汇解释详细介绍不同领域的案例分析实战项目示例注意事项总结 参考资料 博主 默语带您 Go to New World. ✍ 个人主页—— 默语 的博客&#x1f466;&#x1f3fb; 《java 面试题大全》 &#x1f369;惟余辈才疏学浅&#xff0c;临摹之…
阅读更多...
APP Store上线问题及解决方案

APP Store上线问题及解决方案

将iOS应用上线到App Store可能会涉及一些问题&#xff0c;在上线iOS应用之前&#xff0c;确保你充分测试应用&#xff0c;遵循苹果的开发者指南和审核规则&#xff0c;以及关注用户的反馈&#xff0c;这些都能帮助你尽可能地解决问题并提供优秀的用户体验。以下是一些可能的问题…
阅读更多...
juc基础（三）

juc基础（三）

目录 一、读写锁 1、读写锁介绍 2、ReentrantReadWriteLock 3、例子 4、小结 二、阻塞队列 1、BlockingQueue 简介 2、BlockingQueue 核心方法 3、案例 4、常见的 BlockingQueue &#xff08;1&#xff09;ArrayBlockingQueue(常用) &#xff08;2&#xff09;Li…
阅读更多...
Prompt本质解密及Evaluation实战（二）

Prompt本质解密及Evaluation实战（二）

一、LangChain基于evaluation的prompt使用解析 我们来看下LangChain中关于prompt的使用&#xff0c;下面是取自LangChain源码中的一个经典的示例&#xff0c;描述了AI模型被授予访问几种工具来帮助回答用户的问题&#xff0c;其中“tool_descriptions”是至关重要的&#xff0…
阅读更多...
React生命周期（新-旧）

React生命周期（新-旧）

文章目录 前言1、生命周期介绍2、钩子函数介绍 生命周期的三个阶段一、生命周期&#xff08;旧&#xff09;1.初始化阶段(挂载阶段)① constructor② componentWillMount③ render④ componentDidMount 2.更新阶段① shouldComponentUpdate② componentWillUpdate③ render④ c…
阅读更多...
Spring之Spring性能优化与监控

Spring之Spring性能优化与监控

Spring性能优化与监控 Spring性能优化与监控 摘要引言词汇解释详细介绍什么是缓存&#xff1f;Spring框架中的缓存支持示例代码&#xff1a;注释&#xff1a; 注意事项 通过合理使用缓存&#xff0c;可以显著提升应用程序的响应速度&#xff0c;降低系统负载&#xff0c;提供更…
阅读更多...
港联证券|市场生态全面优化 创新成长愈加鲜明

港联证券|市场生态全面优化 创新成长愈加鲜明

8月24日&#xff0c;创业板变革并试点注册制已高质量运行满三周年。坚持变革定力、坚守板块定位——行至2023年&#xff0c;变革后的创业板商场板块功用日益完备、立异生长特征愈加显着&#xff0c;一批又一批战略性新兴工业和高新技能企业继续出现&#xff0c;先进制作、数字经…
阅读更多...
IO线程，文件IO（open），文件(stat)与目录(opendir)属性的读取

IO线程，文件IO（open），文件(stat)与目录(opendir)属性的读取

一、文件IO 1、文件io通过系统调用来操作文件 系统调用:系统提供给用户的一组API(接口函数) open/read/write/close/lseek... 用户空间进程访问内核的接口 把用户从底层的硬件编程中解放出来 极大的提高了系统的安全性 使用户程序具有可移植性(同一系统下) 是操作系统的一部分…
阅读更多...
400电话系统如何进行数据分析和优化？

400电话系统如何进行数据分析和优化？

400电话系统可以通过以下方式进行数据分析和优化&#xff1a; 呼叫记录&#xff1a;400电话系统会记录每一次呼叫的相关信息&#xff0c;包括呼叫时间、呼叫持续时间、呼叫地点等。通过分析呼叫记录&#xff0c;企业可以了解客户的呼叫习惯和行为模式&#xff0c;如高峰时段、呼…
阅读更多...
如何自己实现一个丝滑的流程图绘制工具（二) 自定义面板

如何自己实现一个丝滑的流程图绘制工具（二) 自定义面板

前言 我需要的自定义面板不是固定在左侧&#xff0c;而是右上角&#xff0c;且只有新增节点的操作。采用css取定位更改。 如何自定义面板内容呢&#xff1f; paltte目录下的两个文件 CustomPalette.js export default class CustomPalette {constructor(bpmnFactory, creat…
阅读更多...
开源项目-会议室预约管理系统

开源项目-会议室预约管理系统

哈喽，大家好，今天给大家带来一个开源项目-会议室管理系统。项目基于SpringBoot+VUE开发。 会议室管理系统主要分为 前台会议室预约管理系统 和 会议室后台管理系统 两部分 前台会议室预约管理系统主要有申请会议室，预约进程，查看历史会议三部分 后台管理系统主要有会议室…
阅读更多...
【Mybatis源码分析】Mybatis 是如何实现预编译的？

【Mybatis源码分析】Mybatis 是如何实现预编译的？

Mybatis 是如何实现预编译的&#xff1f; 一、前言二、源码分析三、总结 一、前言 在介绍 Mybatis 是如何实现预编译之前&#xff0c;需提前知道俩个预备知识&#xff1a; MySQL的运行流程&#xff08;对应的 SQL 会成为一个文本-》查询缓存&#xff08;8.0后没了&#xff09…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023