IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue美食杰项目实现个人编辑资料效果 -> 正文阅读

[JavaScript知识库]Vue美食杰项目实现个人编辑资料效果

1.需求介绍:

(1)先点击编辑个人资料跳转到个人编辑页。
(2)到编辑页进行对头像,名称,个人简介进行修改点击保存获取信息后发送给后端。
(3)后端拿到数据进行页面渲染。

2.效果展示

在这里插入图片描述
在这里插入图片描述

1.先点击编辑个人资料跳转到个人编辑页。

(1)需要在router下的index.js文件中写路由配置实现路由跳转功能 在这里插入图片描述(2)导入edit.vue文件:import Edit from ‘@/views/user-space/edit.vue’

(3)在路由表里进行路由配置:{ path:'/edit', name:"edit", title:'编辑', component:Edit },
(4)实现跳转:
在这里插入图片描述

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
import {userInfo} from '@/service/api';
import Store from '@/store'


import Home from '@/views/home/Home.vue'
import Login from '@/views/user-login/index.vue'
import Space from '@/views/user-space/space.vue'
import Recipe from '@/views/recipe/recipe.vue'
import Detail from '@/views/detail/detail.vue'
import Edit from '@/views/user-space/edit.vue'
const router = new Router({
    mode:"history",
    routes:[
        {
            path:'/',
            name:"Home",
            title:'首页',
            component:Home
        },
        {
            path:'/edit',
            name:"edit",
            title:'编辑',
            component:Edit
        },
        {
            path:'/detail',
            name:"detail",
            title:'详情',
            component:Detail
        },
        {
            path:'/login',
            name:'login',
            title:'登录页',
            component:Login,
            meta:{
                login:true
            },
        },
        {
            path:'/space',
            name:'space',
            title:'我的',
            component:Space,
            meta:{
                login:true
            },
        },
        {
            path:'/recipe',
            name:'recipe',
            title:'菜谱大全',
            component:Recipe,
            meta:{
                login:true
            },
        }
    ]
});
const isLogin=true;


2.到编辑页进行对头像,名称,个人简介进行修改点击保存获取信息后发送给后端。

(1)向后端拿数据引入:import {userEdit} from ‘@/service/api’

(2) Element详情链接

(2)在edit.vue中写代码如下:

<template>
  <div class="edit">
    <div class="edit-item">
      <span class="label">修改头像</span>
      <upload-img
        imgMaxWidth="210"
        action="/api/upload?type=user" :imageUrl="avatar" @res-url="(data)=>{avatar=data.resImgUrl}"


      ></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.userInfo
    return {
      avatar:userInfo.avatar,
      name:userInfo.name,
      sign:userInfo.sign
    }
  },
  methods:{
    async save(){
      let data=await userEdit({
        /*
          为啥用this,而不用userInfo的数据
          return '',return true/false 的返回会对当前函数有啥影响
        */


        avatar:this.avatar,
        name:this.name,
        sign:this.sign
      });
      if(data.code === 0){
        this.$router.push({
          name:'space'
        })
      }
    }
  }
}
</script>
<style lang="stylus">
.edit
  background-color #fff
  padding 10px 0 20px 20px
  .edit-item 
    display flex
    margin-bottom 20px
    .label
      margin-right 10px
</style>

(2)在upload-img.vue中进行头像上传限制图片类型等…

maxSize进行对图片的修饰
type:Number限制类型,必须是Number
default:默认值

maxSize:{
        type:Number,
        default:2
      },
<template>
  <el-upload
    class="avatar-uploader"
    :action="action"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    >
    <img src="url" />
  </el-upload>
</template>
<script>
export default {
  props:{
      action:String,
      maxSize:{
        type:Number,
        default:2
      },
      imageUrl:{
        type:String,
        default:''
      },
      imgMaxWidth:{
        type:[Number,String],
        default:'auto'
      }
  },
  data(){
    return {


    }
  },
   methods: {
     //图片上传成功之后
      handleAvatarSuccess(res, file) {
        console.log(file)
        //存图片地址以参数的形式传递
        if(res.code===1){
          this.$message({
            message:res.mes,
            type:'warning',
          })
          return ;
        }
        this.imageUrl = URL.createObjectURL(file.raw);
        thsi.$emit('res-url',{
          resImgUrl:res.data.url
        })
      },
      //图片上传之前
      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>
  JavaScript知识库 最新文章
vue路由 无法给router-link添加点击等事件的
vue项目打包后 修改配置
前端面试题以及平时碰到的小问题
解决VUE修改数据页面不重新渲染问题
ckeditor5 自定义图标
【React】antd上传文件组件customRequest自
create-react-app 创建ts项目 import tsx文
笔记--javascript构造函数和原型,继承,ES
前端监控原理及实践
vue+leaflet 删除地图全部markers
上一篇文章      下一篇文章      查看所有文章
加:2021-09-26 10:04:39  更:2021-09-26 10:07:11 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
360图书馆 购物 三丰科技 阅读网 日历 万年历 2021年10日历 -2021/10/28 11:52:11-
图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码