前端学习(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)> 更新头像成功,发布通知头部

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/416557.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C# 依据KeyEventArgs与组合键字符串相互转换

/// 快捷键相关的类/// </summary>public static class HotKeyInfo{/// <summary>/// 依据KeyEventArgs生成组合键字符串/// </summary>/// <param name"e"></param>/// <returns></returns>public static string GetStri…

lpc2000 filash utility 程序烧写工具_单片机烧录程序的次数

单片机是可编程器件&#xff0c;开发者把程序写好、编译完之后&#xff0c;需要烧录到单片机中&#xff0c;单片机才能按照开发者的逻辑去执行。在这个烧录的过程中需要用到专用的烧录工具。比如51单片机的USB/TTL、STM单片机的STlink等。使用过单片机开发板的同学都清楚&#…

工作总结21:阅读代码之axios

/*基础接口请求地址*/ const apiBaseUrl "http://xxxxxxxx";/*创建instance实例*/ const service axios.create({baseURL: apiBaseUrl,timeout: 10000 }); 读懂该接口 这边是设置的基础url

工作总结22:拦截器

//设置拦截器 拦截 // request interceptor service.interceptors.request.use(config > {const token Vue.ls.get(ACCESS_TOKEN);// if (token) {// config.headers["X-Access-Token"] token; // 让每个请求携带自定义 token 请根据实际情况自行修改// }retu…

ug建模文本怎么竖着_入门到成为UG编程高手,这些步骤你不得不了解

入门到成为UG编程高手&#xff0c;这些步骤你不得不了解加工中心是数控设备的一种&#xff0c;日常的作业离不开数控加工&#xff0c;编程是要害。我们常见的编程软件有不少&#xff0c;mastercam、cimatron、ug、powermill、hypermill等等许多不同的软件&#xff0c;不同的编程…

工作23:vue---封装request做数据请求

import axios from axios// 创建一个axios实例 const service axios.create({// headers: {// content-type: application/json;charsetUTF-8,// token: one // },baseURL: http://dianphp.fyz.com,withCredentials: true,timeout: 5000 })// 添加请求拦截器 service.inte…

华为手机记事本导出_深夜浅谈怎样用一部手机做电影解说?

小编从兴趣而至&#xff0c;到开始做第一部电影解说已经过去半个月了&#xff0c;作品也发布了三部&#xff0c;全程没用过一次电脑&#xff0c;自己之前也没接触过专业的软件&#xff0c;什么PR&#xff0c;AU之类的一概不懂&#xff0c;全程一部手机&#xff0c;只用剪映&…

MySQL多项模糊查询

最近有个需求&#xff0c;就是要根据搜索框里面的关键字&#xff0c;找到符合条件的数据。 如果是单个条件的话&#xff0c;其实就是一个普通的select语句。 但是需求是这个关键字&#xff0c;要在id&#xff0c;desc&#xff0c;step等多个字段模糊查找。 然后最直观的一个思路…

工作24:封装请求

import { axios } from "./axios";export { axios };export function httpAction(url, parameter, method) {return axios({url: url,method: method,data: parameter}); } /*封装系统需要的post请求 第一个参数传入url地址 第二个传入数据参数*/ export function po…

保存的图数据丢失_锡柴自主刷写和备份共享数据文件使用介绍

刷写功能锡柴自主 ECU刷写可以恢复损坏的数据或是新ECU刷上相应车型的数据注意事项确认车辆电瓶电量充足&#xff0c;平板电脑电量充足。发动机不启动。车辆处于刹车状态。建议使用USB线进行刷写可以提高刷写速度。部分车上其它系统对刷写有影响&#xff0c;可拆下来在车下接线…

设置MySQL自动增长从某个指定的数开始

设置一个自增字段&#xff0c;必须为primary key。 设置uid以1001开始自增长。 CREATE TABLE user (uid int(11) NOT NULL PRIMARY KEY,username varchar(20) DEFAULT NULL,password varchar(40) DEFAULT NULL,email varchar(20) DEFAULT NULL,phone varchar(15) DEFAULT NULL,…

用户思维模型,围绕用户核心四大模块,拉新、养熟、成交、裂变循环的效果...

用户思维模型&#xff0c;围绕用户核心四大模块&#xff0c;拉新、养熟、成交、裂变循环的效果 用户思维模型1、拉新越勾引人的诱惑设计&#xff0c;借力软文、好友、大V、媒体等推广的方法来获得源源不断高质量的粉丝&#xff0c;给予别人有价值的东西才能心甘情愿的成为你的粉…

德标螺纹规格对照表_抚顺船用外螺纹铜减压阀带NK船检证书

抚顺船用外螺纹铜减压阀带NK船检证书产品详情&#xff1a;品牌&#xff1a;“上海上循”牌(上海上循船用阀门制造有限公司)具体产品型号及详情&#xff0c;请致电咨询&#xff01;(V同号)QQ&#xff1a;1633370867材质&#xff1a;铸铁&#xff0c;铸钢&#xff0c;不锈钢&…

工作27:组件封装

<!--封装部门选择的插件 需要的组件--> <template><el-select :value"value" placeholder"请选择所属栏目" change"handleChange"><!--注意用户的返回值--><el-option v-for"value in column" :label&quo…

codeblocks如何导入项目_T3如何利用系统工具导入导出复制存货档案

问题现象&#xff1a;如何把旧账的存货档案复制到新建一个公司帐&#xff0c;如何在系统工具中操作&#xff1f;解决方案&#xff1a;1、点击电脑左下角“开始”-“程序”-“T3系列管理软件”-“T3”-“系统工具”&#xff0c;在此注册控制台界面输入(用户名、密码、选择帐套、…

2017-06-19 (cp mkdir rm 运行级别及修改)

mkdir 用于创建目录 mkdir -p 递归创建目录 mkdir -p /linux/linux rm 用于删除文件与目录 rm -r 删除目录 -f 强制删除 &#xff08;一般情况下 rf 组合使用&#xff09; cp 用于复制文件或者目录 cp [选项] [原文件或者目录] [目标目录] cp -r 复制目录 -p 连带…

用户画像标签维度_一文看懂用户画像标签体系(包括维度、应用场景)

一文看懂用户画像标签体系(包括维度、应用场景)互联网相关企业在建立用户画像时一般除了基于用户维度(userid)建立一套用户标签体系外&#xff0c;还会基于用户使用设备维度(cookieid)建立相应的标签体系。基于cookieid维度的标签应用也很容易理解&#xff0c;当用户没有登录账…