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 前后端分离)【二】

项目介绍

项目功能/界面

项目操作界面

技术栈

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

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

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

需求分析/图解

思路分析

1. 使用Vue3+ElementPlus 完成

代码实现

1. 修改springboot_vue\src\App.vue 成如下形式, 会删除部分用不上的代码，增加

2. 修改springboot_vue\src\views\HomeView.vue

3. 删除springboot_vue\src\components\HelloWorld.vue
4. 创建springboot_vue\src\components\Header.vue

5. 修改springboot_vue\src\App.vue , 引入Header 组件

6. 创建全局的global.css(先准备着, 后面有用) , 以后有全局样式就可以写在这里,springboot_vue\src\assets\css\global.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

7. 修改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')

8. 修改springboot_vue\src\main.js, 引入Element Plus ,并测试, 如何引入，

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

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')

9. 修改springboot_vue\src\App.vue , 引入一个el-button,看看是否生效

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

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

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

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

粘贴的代码要注意:

12. 修改springboot_vue\src\App.vue, 将页面分成三个部分

13. 修改springboot_vue\src\views\HomeView.vue, 加入一个el-button,进行测试

14. 看看主页面的效果, 基本结构已经出来了

15. 对主页面进行一个完善， 比如导航栏的宽度， 去掉不必要的子菜单等, 修改springboot_vue\src\components\Aside.vue

16. 修改springboot_vue\src\views\HomeView.vue , 引入表格,后面来显示数据, 参考文档

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

    修改springboot_vue\src\main.js

    

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')

18. 修改springboot_vue\src\views\HomeView.vue, 从官网设置一些测试数据, 并支持日期排序

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

------运行效果-------

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

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

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

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

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