美食杰(个人主页编辑资料)

逻辑:在保存的时候设置一个单击事件,上面没修改之前直接拿vuex的数据用v-model绑定即可,而在单击保存的时候我们调用我么之前封装的接口的请求,修改成功之后让他跳到自己的个人主页里

首先我们先拿到没修改之前的图片用户名和个人简介,我们可以直接从vuex中拿,我们之前判断登录页的token值是否合法的时候,就是把请求了用户信息,我们又把请求到的数据传到了vuex中,使用这里我们直接拿vuex中的数据即可

      <span class="label">修改头像</span><upload-imgimgageMaxwidth="210"action="/api/upload?type=user"imageUrl="avatar"@res-url="(data) =>{avatar=data.resImgurl}"></upload-img><span class="label">修改名称</span><div><el-input v-model="name" class="create-input" placeholder="请输入内容"></el-input></div><span class="label">个人简介</span><div><el-input  v-model="sign"  type="textarea" class="create-input" placeholder="请输入内容"></el-input></div>data(){const userInfo=this.$store.state.userInfo; //拿vuex中我们之前存的自己的自己的用户资料return {name:userInfo.name,sign:userInfo.sign,avatar:userInfo.avatar}},  //拿到数据直接用v-model来让各各的input显示自己的用户信息

之后我们开始修改图片用户名个人简介

我们先在编辑个人的组价中引入我们在api封装好的接口,之后在我们点击保存的时候,请求接口,传入指定参数,保存已经修改好的图片用户名个人简介

//api的接口
/*** 修改用户信息* @export* @param {Object} [params] - * @param {string} [params.name] - product user step* @param {string} [params.avatar] - product user step* @param {string} [params.sign] - product user step* @returns*/
export async function userEdit(params){return await http.post('/user/edit', params);
}<div><el-button class="send" type="primary" size="medium"@click="save">保存</el-button></div>import {userEdit} from '@/service/api'methods:{async save(){//请求数据修改的接口,修改对应的值let data=await userEdit({name:this.name,sign:this.sign,avatar:this.avatar})console.log(data)  if(data.code==0){  //请求成功之后去自己的个人主页this.$router.push('/space')}}}

最后我们写修改图片吧! 这里我们的图片是使用的组件,因为不止只有这个地方使用图片呀!

   import UploadImg from "@/components/upload-img"; //引入组件<upload-imgimgageMaxwidth="210"  //图片的最大宽度action="/api/upload?type=user"  //必选参数，上传的地址:imageUrl="avatar" //图片路径@res-url="(data) => {avatar = data.resImgurl}"> //接收一个新图路径,让之前图片等于这个新图路径</upload-img>

之后我们看upload-img组件注意:这里我们使用的是element-ui框架

<el-uploadclass="avatar-uploader":action="action"            //必选参数，上传的地址:show-file-list="false"     //是否显示已上传文件列表:on-success="avatarSuccess" //传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。  function(file):before-upload="beforeAvatar" //文件上传成功时的钩子    function(response, file, fileList)><img :src="url" :style="{ maxWidth: imgageMaxwidth + 'px' }" /></el-upload>props: {action: String,imageUrl: {//图片路径type: String,default: "",},imgageMaxwidth: {//图片最大宽度type: [Number, String],default: "auto",},maxSize: {//图片的最大 大小type: Number,default: 2,},data() { return {url: this.imageUrl,};},methods: {beforeAvatar(file) {//上传文件之前的钩子console.log(file);const isJPG = file.type === "image/jpeg" || file.type === "image/gif";const isLt2M = file.size / 1024 / 1024 < this.maxSize;if (!isJPG) {//图片格式this.$message.error("上传的头像只能是jpeg或者gif格式的");}if (!isLt2M) {//图片大小this.$message.error("上传图片的大小不能超过2M");}return isJPG && isLt2M;},avatarSuccess(res, file, fileList) {//上传文件成功的钩子console.log(res);console.log(file);console.log(fileList);if (res.code === 1) {//如果code的码为1 的话就给出警告this.$message({message: res.mes,type: "warning",});return;}this.url = URL.createObjectURL(file.raw);// URL.createObjectURL()实现本地上传图片 并预览功能this.$emit("res-url", {resImgurl: res.data.url,});},},

这就是我的美食杰编辑个人资料谢谢!!!

美食杰(个人主页编辑资料)相关推荐

美食杰项目 -- 编辑个人资料（六）
目录前言: 具体实现思路: 步骤: 1. 展示美食杰编辑个人资料效果 2. 引入element-ui 3. 代码总结: 前言: 本文给大家讲解,美食杰项目中实现编辑个人资料页的效果,和具体代码. ...
美食杰(个人主页) 上
逻辑:登录自己的个人主页直接跳转,登录别人的个人主页要id值登录自己的个人主页,自己的个人主页不需要userId值,直接通过router-link跳到个人主页的页面,数据直接拿vuex的数据,原因是 ...
美食杰(个人主页) 下
逻辑:先实现tab切换在个人主页router的组件中加入子组件,通过绑定单击事件,编程式导航的形式,来跳转不同的子组件中显示不同的内容,之后从api里拿接口封装接口请求,拿到数据通过父传子的形式把请求 ...
美食杰项目 -- 个人主页（四）
目录前言: 具体实现思路: 步骤: 1. 展示美食杰菜谱大全效果 2. 引入element-ui 3. 代码总结: 前言: 本文给大家讲解,美食杰项目中实现个人主页的效果,和具体代码. 具体实现 ...
美食杰项目（五）个人主页
目录前言具体效果代码思路相应组件具体代码总结: 前言本节给大家讲的是美食杰项目的个人主页的主要功能和具体样式,希望我的代码能够帮助到你,也希望你能够看懂具体效果作品和收藏的具体样式( ...
美食杰项目---个人页和他人主页
美食杰项目-个人页和他人主页跳转个人主页. 跳转他人主页. 点击他人关注或取消关注. 点击他人菜谱,粉丝及关注. 效果图展示点击跳转到个人空间,个人空间没有关注和取消关注. 点击个人跳转如下图: ...
美食杰项目（六）发布菜谱
目录前言具体效果实现的具体功能代码思路主要引入的element ui的具体样式相关代码总结: 前言本节给大家讲的是美食杰项目的发布菜谱的主要功能和具体样式,希望我的代码能够帮助到你,也 ...
美食杰项目 -- 发布菜谱（七）
目录前言: 具体实现思路: 步骤: 1. 展示美食杰发布菜谱页效果 2. 引入element-ui 3. 代码总结: 前言: 本文给大家讲解,美食杰项目中实现发布菜谱页的效果,和具体代码. 具体 ...
vue美食杰个人空间
文章目录效果图在这里插入图片描述 router文件下的index.js space.vue MenuList fans 如果一直报这个效果图 router文件下的index.js import ...

美食杰(个人主页编辑资料)

美食杰(个人主页编辑资料)相关推荐

最新文章

热门文章