个人空间的编辑个人资料案例（简单介绍 仅供参考）
1.本次效果会用 Element UI Vue脚手架来完成
2.看一下本次的效果展示图：
下面这张是保存后的状态本次主要说上图的效果
3.对用到的组件进行一个简单说明
补充：
上传图片的效果在项目中还有别的地方用所以要放到公共组件中方便复用
还有平时项目遇到有两个地方及以上都要用的就放到公共的文件夹方便区分复用
以上是对本次效果简单介绍下面来说如何实现
4.大家在个人空间中点击编辑个人资料肯定要跳转路由下面是跳转路由如何跳转及路由配置
4.1
<router-link to="/edit" >编辑个人资料</router-link>//点击跳转到adit
4.2
{path: '/edit',name: "edit",// component: edit//普通跳转方式用这种上方要引入要进入的路径注意component: () =>import ( /* webpackChunkName:"create"*/ '@/views/user- space/edit.vue'),//路由懒加载的方式无需在上在引入},5.从vuex获取储存的数据vuex的数据也是从后台请求的
vuex的代码
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state:{userInfo: {}},getters:{isLogin(state){return !!Object.keys(state.userInfo).length;}},mutations:{changeUserInfo(state, data){state.userInfo = data;}},actions:{}
})export default store;6.打开个人空间获取vuex从后端获取的数据也就是编辑个人信息里储存的数据
export default {name: 'Space',data(){const userInfo =this.$store.state.userInfoconsole.log(userInfo)return {avatar : userInfo.avatar}}
}7.编辑个人资料页代码我会在代码中进行简单的说明
<template><div class="edit"><div class="edit-item"><span class="label">修改头像</span><!--在ElementUI中拿头像上传中代码 --><upload-imgimgMaxWidth="210"//对头像宽度限制action ="/api/upload?type=user"//传输接口的路径？后对类型进行限制:imageUrl="avatar"//绑定传输图片@res-url="(data)=>{avatar=data}"//监听上传图片></upload-img></div><div class="edit-item"><span class="label">修改名称</span><div><el-input v-model="name" class="create-input" placeholder="请输入内容"></el-input></div></div><div class="edit-item"><span class="label">个人简介</span><div><el-input v-model="sign" type="textarea" class="create-input" placeholder="请输入内容"></el-input></div></div><div><el-button class="send" type="primary" size="medium"@click="save"//设置点击事件的函数名点击保存数据>保存</el-button></div></div>
</template>
<script>
import UploadImg from '@/components/upload-img'
import {userEdit} from '@/service/api'
export default {components: {UploadImg},data(){const userInfo =this.$store.state.userInfoconsole.log(userInfo)return {avatar : userInfo.avatar,//获取头像name:userInfo.name,//名字sign:userInfo.sign//个人简介}},methods:{//向后端发送数据async save(){let data= await userEdit({//传入当前页面的数据avatar:this.avatar,name:this.name,sign:this.sign})//保存成功跳转到个人空间页if(data.code === 0){this.$router.push({name:'space'})}}}
}
</script>8.这一步就是对上传图片页进行限制代码参考Element UIElement - The world's most popular Vue UI framework
中的upload上传
<template><el-uploadclass="avatar-uploader":action="action":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="data:imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>
</template>
<script>
export default {
//接受编辑个人信息传入的数据并对类型进行限制props:{action:String,maxSize:{type:Number,default:2},imageUrl:{type:String,default:''},imgMaxWidth:{type:[String,Number],default:'auto'}},data(){return {}},methods: {//图片上传成功之后handleAvatarSuccess(res, file) {console.log(file)this.imageUrl = URL.createObjectURL(file.raw);//把图片上传到本地//对图片上传是否正确if(res.code===1){this.$message({message:res.mes,type:'warning'});return}this.imageUrl=URL.createObjectURL(file.raw)this.$emit('res-url',{resImgUrl:res.data.url//自定义事件把拿到的路径传给父亲也就是编辑信息页})this.$emit('res-url',URL.createObjectURL(file.raw))},//图片上传之前beforeAvatarUpload(file) {//限制图片类型const isJPG = file.type === 'image/jpeg';//限制图片内存大小const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!');}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');}return isJPG && isLt2M;}}
}
</script>好了这就是以上步骤今天的总结完成我们明天见
拜拜
个人空间的编辑个人资料案例（简单介绍 仅供参考）相关推荐
- Android 仿京东商品分类(简单实现 仅供参考)
//导入依赖 implementation 'com.android.support:recyclerview-v7:28.0.0' //首先在activity页面添加两个水平的RecyclerVie ...
- 人类基因编辑技术及背后的伦理问题 【个人观点，仅供参考】
人类基因编辑技术及背后的伦理问题 [个人观点,仅供参考] 摘要 本文根据遗传学专家詹妮弗·道娜(Jennifer Doudna)在TED国际会议上关于一个被称为CRISPR-Cas9的"基因 ...
- C++ 简化 推箱子 小游戏 完整代码 参考网络资料 命令行运行 仅供初学者参考交流
C++ 简化 推箱子 小游戏 完整代码 参考网络资料 命令行运行 仅供初学者参考交流 说明:学做了4关推箱子, 仅供初学者参考可用g++ 编译,可以将内容复制到TXT文件,将后缀改为".cp ...
- Spring Security是什么，以及如何在Spring Boot项目中整合Spring Security并且使用它，下面我们通过一个登录案例简单介绍一下Spring Security。
1.什么是Spring Security? 在了解Spring Security之前,我们是不是应该先思考一个问题,我们自己写的web案例一般都需要先登录,之后登录之后才能访问其他页面,或者说我们不同 ...
- ASP.NET一款免费富文本（RichText）编辑器KindEditor，实现在线排版编辑文章。这里简单介绍下如何使用
一般用到富文本编辑器的地方:留言板,论坛的发帖页以及回复页等. 所用软件VS2012旗舰版 KindEditor下载地址(本文实例中所用版本4.1.10): http://download.csdn. ...
- 如意验证对接TV 神，马搭建 源码，搭建简单，仅供学习交流
最近研究了一写电视的app,研究透了还是很简单的,我用了7天7夜才搞明白, 下面我吧自己的新得告诉大家! 核心是一定要对接好,不对接好一切都说白扯 对接好以后,别忘记改API里的chengcheng文 ...
- 简单教教大家如何移植MIUI。（仅供参考）！！！
此教程仅介绍如何移植MIUI,原理方面的东西不会涉及太多,主要是因为我对原理方面的东西也不是很懂,怕误导了大家. 我以移植MIUI到Incredible为例子: 接下来我们正式讲如何移植MIUI.An ...
- Scrum之成败——从自身案例说起，仅供参考
从07年中初次接触Scrum的概念到其中几年项目中逐渐实践CI.TDD,到亲自掌握项目实践Scrum近一年,最终我们放弃了Scrum这个框架和所谓的"自组织".原因为何? 1.成员 ...
- 每日分享-sql注入简单检测小工具（仅供参考学习）
python版本:3.9.6 代码如下: #!/usr/bin/python3 # -*- coding:UTF-8 -*- import requests url = 'http://localho ...
最新文章
- Spark Streaming中的操作函数分析
- Python爬虫对json数据解析爬取
- java白钱买白_java实现百钱买白鸡
- thinkphp index.php隐藏,thinkphp5怎么隐藏index.php入口文件？
- 一加6怎么刷android p6,一加6秒速跟进安卓P 教你尝鲜速成开发者
- Mysql8.0Mysql5.7Mysql5.6Mysql5.5特性对比
- 泛型类的定义与实例化 c#
- 20190228 搭建Hadoop基础环境
- 使用VSCode编写LaTeX
- docker镜像与容器概念
- java什么是工作空间_[Java教程]Java开发工具(Eclipse工作空间的基本配置)
- Harris角点检测原理分析
- 延时消息推送的正确姿势你get到了吗？
- 计算机工程与工艺截稿,中国计算机学会第二十届计算机工程与工艺学术年会
- 网络存储NAS网络存储器术语解释
- 基于pyagme用python做接小球游戏
- vue-如何获取上一个路由地址
- 如何在PPT中用文本框制作海报？这个方法很简单，不信来看
- OJ old1226 算法提高 质数的后代
- 练手小项目(1)——智能聊天机器人