Spring Boot (Vue3+ElementPlus+Axios+MyBatisPlus +Spring Boot 前后端分离)_前后端分离项目 前端vue3+elementplus+axios

---

1 项目介绍

1.1 项目功能/界面

● 项目操作界面

---

---

● 技术栈

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

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

2 实现功能 01-搭建 Vue 前端工程

2.1 需求分析/图解

2.2 思路分析

● 使用 Vue3+Element-Plus 技术

2.3 代码实现

1. 先下载 node.js LTS 并安装：node.js 的 npm，用于管理前端项目包依赖

   • 前面我们在学习 SSM_VUE 项目时，已经安装了 node.js
   • 文章链接

2. 创建 Vue 项目

• 创建 springboot_vue 项目，指令 vue create springboot_vue

---

• 选择你需要的插件

• 选择路由模式

• 选择项目依赖包管理方式

• 选择是否保存本次设置

• 回车开始创建项目，成功会提示如下界面

• 启动项目-按给出指令执行即可

• 启动项目成功， 会提示如下界面

• 完成测试，浏览器访问

3. 使用 idea 打开 springboot_vue 项目，并配置项目启动

   ① 直接将 springboot_vue 项目拖到 idea
   ② 配置 springboot_vue 使用 npm 方式启动

• 配置项目以 npm 启动时，自动打开首页

4. 我们会使用到 element-plus ，停止项目，安装 element-plus 插件，element-plus 官方文档 https://element-plus.gitee.io/#/zh-CN/component/layout ，在该项目下执行安装指令

---

---

2.4 配置 Vue 服务端口

1. 修改 D:\xjs_springboot_vue\springboot_vue\vue.config.js

const {
    defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
   
  transpileDependencies: true
})

module.exports = {
   
  devServer: {
   
    port: 9090 // 启动端口
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2. 启动测试，可以看到现在是 9090 端口

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

3.1 需求分析/图解

3.2 思路分析

1. 使用 Vue3+ElementPlus 完成

3.3 代码实现

1. 修改 src/App.vue 成如下形式，会删除部分用不上的代码，增加<div></div>

<template>
  <div>
  </div>
</template>

<style>
</style>
1
2
3
4
5
6
7

2. 修改 src/views/HomeView.vue

<template>
  <!--去掉 class="home"-->
  <div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
   
  name: 'HomeView',
  components: {
   
    // HelloWorld
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3. 删除 src/components/HelloWorld.vue
4. 创建 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

5. 修改 src/App.vue ，引入 Header 组件

<template>
  <div>
<!--引用组件-->
    <Header/>
  </div>
</template>

<style>
</style>

<script>
import Header from "@/components/Header";

export default {
   
  name: "layout",
  components: {
   
    Header
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

* {
   
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
1
2
3
4
5
6

7. 修改 src/main.js ，引入 global.css

import {
    createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入css
import css from '@/assets/css/global.css'

createApp(App).use(store).use(router).mount('#app')

1
2
3
4
5
6
7
8
9
10
11

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

// 引入css
import css from '@/assets/css/global.css'

// 引入ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' //相关样式

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

9. 修改 src/App.vue ，引入一个 el-button ，看看 ElementPlus 是否生效

<template>
  <div>
<!--引用组件-->
    <Header/>
    <el-button type="success">Success</el-button>
  </div>
</template>

<style>
</style>

<script>
import Header from "@/components/Header";

export default {
   
  name: "layout",
  components: {
   
    Header
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

10. 修改 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">
      <el-dropdown>
    <span class="el-dropdown-link">
      tom
      <el-icon class="el-icon--right">
        <arrow-down/>
      </el-icon>
    </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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

---

11. 创建侧边栏组件，并引入导航菜单组件，src/components/Aside.vue ，参考文档

<template>
  <div>
    <!--说明：先去掉这两个方法，否则会报错-->
    <!--        @open="handleOpen"-->
    <!--        @close="handleClose"-->
    <el-menu
        default-active="2"
        class="el-menu-vertical-demo">
      <el-sub-menu index="1">
        <template #title>
          <el-icon>
            <location/>
          </el-icon>
          <span>导航一</span>
        </template>
        <el-menu-item-group title="组一">
          <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="组二">
          <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">选项4-1</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-menu-item index="2">
        <el-icon>
          <icon-menu/>
        </el-icon>
        <span>导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <el-icon>
          <document/>
        </el-icon>
        <span>导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon>
          <setting/>
        </el-icon>
        <span>导航四</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
   
  name: "Aside"
}
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

12. 修改 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

13. 修改 src/views/HomeView.vue ，加入一个 el-button，进行测试

<template>
  <!--去掉 class="home"-->
  <div>
    <el-button type="primary">Primary</el-button>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
   
  name: 'HomeView',
  components: {
   
    // HelloWorld
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

---

15. 对主页面进行一个完善，比如导航栏的宽度，去掉不必要的子菜单等，修改 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">选项4-1</el-menu-item>
        </el-sub-menu>
      <el-menu-item index="2">
        <el-icon>
          <icon-menu/>
        </el-icon>
        <span>导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <el-icon>
          <document/>
        </el-icon>
        <span>导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon>
          <setting/>
        </el-icon>
        <span>导航四</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
   
  name: "Aside"
}
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

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

<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"/>
      <el-table-column prop="name" label="姓名" width="180"/>
      <el-table-column prop="address" label="地址"/>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
   
  name: 'HomeView',
  components: {
   },
  data() {
    //数据池
    return {
   
      tableData: []
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

---

17. 可以发现，element-plus 默认是英文的，我们将其国际化一下，修改 src/main.js ，参考文档

---

---

import {
    createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入css
import css from '@/assets/css/global.css'

// 引入ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' //相关样式

//引入国际化需要的组件
import zhCn from 'element-plus/es/locale/lang/zh-cn'

createApp(App).use(store).use(router).use(ElementPlus, {
   locale: zhCn,}).mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

---

18. 修改 src/views/HomeView.vue ，从官网设置一些测试数据，并支持日期排序=> 参考文档

---

---

<template>
  <!--去掉 class="home"-->
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column sortable prop="date" label="日期" width="180"/>
      <el-table-column prop="name" label="姓名" width="180"/>
      <el-table-column prop="address" label="地址"/>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
   
  name: 'HomeView',
  components: {
   },
  data() {
    //数据池
    return {
   
      tableData: [{
   
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
   
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
   
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
   
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

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

---

---

<template>

  <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-button style="margin-left: 10px" type="primary">新增</el-button>
1
2
3
4
5
6
7
8
9
10
11
12