# 八、賬戶設置## 創建頁面組件并配置路由1、創建 `src/views/account/index.vue` 組件```html <template><div><el-form ref="form" :model="form" label-width="80px"><el-form-item label="用戶頭像"><el-uploadclass="avatar-uploader"action="https://jsonplaceholder.typicode.com/posts/":show-file-list="false"><imgwidth="100"src="http://toutiao.meiduo.site/FuLZH0vzKbdXi-On88NArXegOjXk"class="avatar"/><!-- <i class="el-icon-plus avatar-uploader-icon"></i> --></el-upload></el-form-item><el-form-item label="用戶昵稱"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="個人介紹"><el-input type="textarea" v-model="form.name"></el-input></el-form-item><el-form-item label="用戶郵箱"><el-input v-model="form.name"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">保存修改</el-button></el-form-item></el-form></div> </template><script>export default {name: "AccountIndex",components: {},props: {},data() {return {form: {name: "",region: "",date1: "",date2: "",delivery: false,type: [],resource: "",desc: ""}};},computed: {},watch: {},created() {},methods: {onSubmit() {console.log("保存");}}}; </script><style scoped></style> ```2、配置路由3、配置側邊欄導航鏈接## 展示賬戶信息```html <template><div><el-form ref="form" :model="user" label-width="80px"><el-form-item label="用戶頭像"><el-uploadclass="avatar-uploader"action="https://jsonplaceholder.typicode.com/posts/":show-file-list="false"><img width="100" :src="user.photo" class="avatar" /><!-- <i class="el-icon-plus avatar-uploader-icon"></i> --></el-upload></el-form-item><el-form-item label="用戶昵稱"><el-input v-model="user.name"></el-input></el-form-item><el-form-item label="個人介紹"><el-input type="textarea" v-model="user.intro"></el-input></el-form-item><el-form-item label="用戶郵箱"><el-input v-model="user.email"></el-input></el-form-item><el-form-item label="手機號"><el-input v-model="user.mobile"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">保存修改</el-button></el-form-item></el-form></div> </template><script>export default {name: 'AccountIndex',components: {},props: {},data () {return {+++ user: {email: '', // 郵箱intro: '', // 簡介mobile: '', // 手機號name: '', // 昵稱photo: '' // 頭像}}},computed: {},watch: {},created () {+ this.loadUserProfile()},methods: {onSubmit () {console.log('保存')},+++ loadUserProfile () {this.$axios({method: 'GET',url: '/user/profile'}).then(res => {// res.date undefined// undefined.data 報錯了this.user = res.data.data}).catch(err => {console.log(err)this.$message.error('獲取數據失敗')})}}} </script><style scoped></style> ```## 修改賬戶信息1、注冊表單提交2、在事件處理函數中```js onSubmit () {// const name = this.user.name// const email = this.user.email// const intro = this.user.intro// 對象解構：等價于上面的三句代碼const { name, email, intro } = this.userthis.$axios({method: 'PATCH',url: '/user/profile',data: {// name: this.user.name,// email: this.user.email,// intro: this.user.introname,email,intro}}).then(res => {this.$message({type: 'success',message: '修改成功'})}).catch(err => {console.log(err)this.$message.error('修改失敗')}) }, ```## 用戶頭像上傳由于 element 的 upload 組件不支持自定義請求方法（默認是 POST，我們的接口要的是 PATCH），所以我們需要自定義上傳組件的請求行為：然后在 `onUpload` 函數中```js onUpload (config) {const fd = new FormData()fd.append('photo', config.file)this.$axios({method: 'PATCH',url: '/user/photo',data: fd}).then(res => {// 更新圖片地址this.user.photo = res.data.data.photo}).catch(err => {console.log(err)this.$message.error('上傳失敗')}) } ```## 頭像裁切上傳``` viewMode: 1, dragMode: 'move', aspectRatio: 1, cropBoxMovable: false, cropBoxResizable: false, background: false, movable: true ```## 展示當前登錄用戶信息1、請求獲取數據2、數據綁定## 將修改同步到頭部如何讓非父子組件通信？Events Bus。一、基本語法規則1、創建 `src/utils/event-bus.js` 并寫入```js import Vue from "vue";// 直接導出一個空的 Vue 實例 export default new Vue(); ```2、使用 `event-bus` 通信在通信的 a 端初始化 `created` 的時候注冊監聽一個自定義事件：```js import eventBus from '@/utils/event-bus'export default {...created () {// 參數1：一個字符串，自定義事件名稱// 參數2：一個函數，事件發布以后就會調用eventBus.$on('自定義事件名稱', () => {// 業務邏輯代碼})// 如果有參數的話，就聲明接收eventBus.$on('自定義事件名稱', (arg) => {// 業務邏輯代碼})} } ```在通信的 b 端發布調用自定義事件```js import eventBus from '@/utils/event-bus'export default {...methods: {// 在某個業務方法中test () {// 參數1：自定義事件名稱，必須是訂閱的名字一致eventBus.$emit('自定義事件名稱')// 如果需要傳遞額外的數據參數，就從第2個參數開始傳eventBus.$emit('自定義事件名稱', 123)}} } ```注意，通信的雙向的：- a 給 b 發：b 來訂閱，a 來發布 - b 給 a 發：a 來訂閱，b 來發布另外，同類型的事件可以訂閱多次：```js eventBus.$on("abc", () => {console.log("abc1"); });eventBus.$on("abc", () => {console.log("abc2"); });eventBus.$on("ddd", () => {console.log("ddd"); });eventBus.$emit("abc"); // abc1、abc2eventBus.$emit("ddd"); // dddeventBus.$emit("hello"); // 不會報錯，無人響應 ```二：使用 `event-bus` 處理我們的業務1、在頭部組件中使用 event-bus 訂閱一個自定義事件，更新用戶信息2、在賬戶信息組件中，修改成功以后發布通知頭部更新數據> 更新基本信息，發布通知更新> 更新頭像成功，發布通知頭部

?

總結

以上是生活随笔為你收集整理的前端学习（2459）：账户设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。