前端学习（2459）：账户设置

# 八、账户设置## 创建页面组件并配置路由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、配置路由![image-20191119164334109](assets/image-20191119164334109.png)3、配置侧边栏导航链接![image-20191119164350858](assets/image-20191119164350858.png)## 展示账户信息```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、注册表单提交![image-20191121095013595](assets/image-20191121095013595.png)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），所以我们需要自定义上传组件的请求行为：![image-20191121100549256](assets/image-20191121100549256.png)然后在 `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、请求获取数据![image-20191121101750936](assets/image-20191121101750936.png)2、数据绑定![image-20191121101819981](assets/image-20191121101819981.png)## 将修改同步到头部如何让非父子组件通信？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 订阅一个自定义事件，更新用户信息![image-20191121110212041](assets/image-20191121110212041.png)2、在账户信息组件中，修改成功以后发布通知头部更新数据![image-20191121110320453](assets/image-20191121110320453.png)> 更新基本信息，发布通知更新![image-20191121110347255](assets/image-20191121110347255.png)> 更新头像成功，发布通知头部

前端学习（2459）：账户设置相关推荐

前端学习笔记之——设置文本样式
设置文本样式 1.应用基本文本样式 1.1.对齐文本有好几个属性可以用来设计文本内容的对齐方式. 属性说明值 text-align 指定文本块的对齐方式 start end left right ...
【FE前端学习】第二阶段任务-基础
技能学习部分: 1.需要熟练掌握HTML标签以及CSS各个常用属性. 2.掌握CSS3 常用属性 3.掌握jquery的基本用法,对于JS基本逻辑语句需要熟练掌握上文 [FE前端学习]第二阶段任务- ...
hbuilder前端需要的插件_最新web前端学习路线
随着互联网的深入发展,前端开发工程师已成为市场上极具竞争力的人才.许多学生,包括以前的UI,java,或完全零基础,想学习的前端.下面的思维导图是在互联网上广泛传播的前端学习地图.许多初学者说,当他们 ...
html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
黑马程序员：从零基础到精通的前端学习路线
黑马程序员:从零基础到精通的前端学习路线随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习前端.下图是网上 ...
js怎么在一个div中嵌入另一网站_好程序员web前端学习路线分享HTML5常见面试题集锦一...
好程序员web前端学习路线分享HTML5常见面试题集锦,接下来将会持续为大家分享几篇HTML5常见面试题. 1.布局左边20% 中间自适应右边200px 不能用定位答案:圣杯布局/双飞翼布局或者 ...
前端学习资料及路线名称网站
IT前端学习资料及路线名称网站 JQuery文件网 https://code.jquery.com/jquery/ jQuery手册(pc端) http://jquery.cuishifeng.c ...
css清除浮动的几种方法_web前端学习路线分享CSS浮动-清除浮动篇
web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响.那么到底会有什么影响呢? 1．高度塌陷举个例子我们看一下. 我们在 ...
前端开始学java_[Java教程]开启前端学习之路
[Java教程]开启前端学习之路 0 2014-06-10 17:00:06 前言第一次在博客园写博客,写写自己开启前端学习之路.应该是受邢师兄的影响吧,不得不说邢师兄人很好,学习也很认真,师兄的前 ...

前端学习（2459）：账户设置

前端学习（2459）：账户设置相关推荐

最新文章

热门文章