1.外观实现-后台管理系统

1.正式书写-后台管理系统

项目资料汇总： https://shimo.im/docs/5xkGMv6jpgCj783X/read

带你从0搭建一个Springboot+vue前后端分离项目，真的很简单！ https://www.bilibili.com/video/BV14y4y1M7Nc

1.创建Header.vue文件

在conmpoents文件夹下创建Header.vue文件

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

2.定义golobal.css文件

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

注意要在main.js中导入

3.修改app.vue导入组件

遇见问题，自定义页面无法展示，要在view组件中将自定义组件注册才可以在页面之中展示。

解决方案，在router层中将index.js页面中将默认路径修改为header组件后可以展示

也可以在index.js的默认路径中将，展示页面的homeview.vue改为app.vue

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

4.使用element-plus

https://element-plus.gitee.io/zh-CN/

查看指南 安装element-plus https://element-plus.gitee.io/zh-CN/guide/installation.html

npm install element-plus --save
1

注意，一定要在项目文件夹下进行安装

修改main.js中的内容

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
注意这里的use是可以叠加使用的
例如
createApp(App).use(ElementPlus).use(store).use(router).mount('#app')
1
2
3
4
5
6
7
8
9
10

测试，在页面中添加一个按钮

按钮
1

效果展示

5.使用下拉栏

https://element-plus.gitee.io/zh-CN/component/icon.html

npm install @element-plus/icons-vue
1

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

发现没有下拉栏的小箭头图标

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 * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
app.use(ElementPlus).use(store).use(router).mount('#app')

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
1
2
3
4
5
6
7
8
9
10
11
12
13

注册arrowdown

在使用下拉栏的组件中导入ArrowDown，否则显示不了下拉箭头

1
2
3
4
5
6
7
8

图标自己添加

 
1

6.定义侧边栏

compoent组件中添加Aside.vue

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

在app.vue中引入

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

效果展示

修改app.vue

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

7.设置侧边栏宽度

在el-menu标签中设置样式,添加一个style

Aside.vue文件修改部分如下

 
1
2
3
4
5
6
7

8.删去导航栏分组管理

导航栏分组管理不是必要的

修改Aside.vue为如下

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

9.让导航栏占满左侧

链接

https://element-plus.gitee.io/zh-CN/component/menu.html
1

在el-menu标签中设置样式,添加一个style

Aside.vue文件修改部分如下

1
2
3
4
5
6
7

发现长度过高，没有减去头部的高度

1
2
3
4
5
6
7

10.添加主体表格

在home.vue中添加

记录产生的问题

有点疑惑了，路由里设置访问的是app.vue,
如果主体设置的在home.vue中,那么要怎样访问到主题呢？
难道是直接设置作为组件么，那view层和component层有什么区别呢？
1
2
3

链接

https://element-plus.gitee.io/zh-CN/component/table.html#基础表格
1

必须添加在app.vue中才能显示

如果只在home中添加的话，是不显示添加的列表组件的

找到原因了，没有在index.js中注册

router层里index.js

要非常注意import语句，没有用import导入的话是无法注册路由的

import { createRouter, createWebHistory } from 'vue-router'

import Home from "../views/Home"
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  }
]
/.
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

11.可以设置国际化将英文显示为中文

网页链接

https://element-plus.gitee.io/zh-CN/guide/i18n.html
1

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {
  locale: zhCn,
})
1
2
3
4
5
6

12.为表格添加数据

添加排序

添加斑马纹

添加搜索

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

13.定义函数

要在method里面定义函数方法

用@click为按钮绑定函数事件

添加删除确认

https://element-plus.gitee.io/zh-CN/component/popconfirm.html
1

使用气泡确认框实现

14.添加分页

https://element-plus.gitee.io/zh-CN/component/pagination.html
1

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

添加函数

  },
    methods:{
      handleEdit(){

      },
      handleSizeChange(){

      },
      handleCurrentChange(){

      }

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

15.效果展示