美食杰项目 -- 编辑个人资料（六）

前言：

本文给大家讲解，美食杰项目中 实现编辑个人资料页的效果，和具体代码。

---

具体实现思路：

1. 在个人主页中点击编辑个人资料进入当前页
2. 引入element-ui进行图片的上传
3. 修改完所有信息后
4. 点击保存会对个人资料进行更改
5. 并跳转至个人主页

---

步骤：

1. 展示美食杰编辑个人资料效果

---

2. 引入element-ui

点击跳转至 element-ui 中 Upload 上传使用方法：https://element.eleme.cn/#/zh-CN/component/upload

点击跳转至 element-ui 中 MessageBox 弹框使用方法：https://element.eleme.cn/#/zh-CN/component/message-box

---

3. 代码

element-ui 中 Upload 上传 功能要单独封装一个组件，因为它需要在发布菜谱页面中使用
其他的在代码中写有注释，按注释理解即可，不了解的也可以在评论区里问我，或者私聊我询问

• 修改个人资料页

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

• 上传图片页

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

---

总结：

以上就是 美食杰项目 中 编辑个人资料页的具体实现方法，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog