Vue.js 实战系列之实现视频类WebApp的项目开发——16. 用户信息编辑提交保存的实现

最新推荐文章于 2024-04-09 11:29:04 发布

八了个戒

最新推荐文章于 2024-04-09 11:29:04 发布

阅读量283

点赞数

分类专栏： Vue 实战系列文章标签：新星计划 vue html js

本文链接：https://blog.csdn.net/XH_jing/article/details/117330559

版权

Vue 实战系列专栏收录该内容

22 篇文章 3 订阅

订阅专栏

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。

项目仓库地址，欢迎 Star

实现效果

在这里插入图片描述

功能实现

创建修改信息页面

在 src/views/mine 下创建 updateInfo.vue 页面

updateInfo.vue

<template>
  <div>
    <Header :title="修改名字" hasLeft hasRight rightText="保存"></Header>
    <div class="update">
        <p class="title">我的{{title}}</p>
        <input type="text" v-model="content">
        <span class="iconfont icon-guanbi1"></span>
        <span class="length">{{content.length}}/{{maxLenght}}</span>
    </div>
  </div>
</template>

<script>
import Header from '@/common/components/index/Header.vue';

export default {
    data() {
        return {
            title: '',
            content: '',
            maxLenght: 20,
        };
    },
    components: {
        Header,
    },
    created() {
        this.title = this.$route.params.title;
        this.content = this.$route.params.content;
    },
};
</script>

<style lang="less" scoped>
.update {
    background-color: #101821;
    height: calc(100vh - 48px);
    color: #fff;
    border-top: 1px solid rgb(199, 199, 199);
    padding: 20px;
    .title {
        color: #a7a7a7;
        font-size: 16px;
        margin-top: 0px;
    }
    input {
        color: #fff;
        background-color: #101821;
        border: none;
        height: 46px;
        width: 100%;
        font-size: 14px;
        border-bottom: 1px solid #a7a7a7;
        position: relative;
        margin-bottom: 20px;
    }
    .icon-guanbi1 {
        color: #a7a7a7;
        font-size: 20px;
        position: absolute;
        right: 15px;
        margin-top: -55px;
    }
    .length {
        color: #a7a7a7;
        font-size: 14px;
    }
}
</style>

实现效果：
在这里插入图片描述

通过 editInfo.vue 页面跳转至该页面，并携带相关参数

editInfo.vue

<div class="edit-box">
    <div 
    	class="edit-item" 
    	@click="$router.push({name: 'update', params: {title: '名字' , content: userInfo.name, desc: 20, type: 'name'}})"
    >
      <span class="label">名字</span>
      <span>
        {{ userInfo.name }}
        <span class="iconfont icon-right"></span>
      </span>
    </div>
    <div 
    	class="edit-item" 
    	@click="$router.push({name: 'update', params: {title: '抖音号' , content: userInfo.dyh, desc: '最多16个字，只允许包含字母、数字、下划线和点，30天内仅能修改一次', type: 'dyh'}})"
    >
      <span class="label">抖音号</span>
      <span>
        {{ userInfo.dyh }}
        <span class="iconfont icon-right"></span>
      </span>
    </div>
    <div 
    	class="edit-item" 
    	@click="$router.push({name: 'update', params: {title: '简介' , content: userInfo.desc, desc: '填写个人简介更容易获得别人关注哦', type: 'desc'}})"
    >
      <span class="label">简介</span>
      <span class="desc">
        点击设置
        <span class="iconfont icon-right"></span>
      </span>
    </div>
</div>

将其他标签内容修改成修改参数跳转。

用户信息修改保存

目前只对名称，抖音号，简介进行修改，其他内容的修改后续添加

区分修改的内容并实现保存功能

updateInfo.vue

<template>
  <div>
    <Header
      :title="'修改' + title"
      hasLeft
      hasRight
      rightText = "保存"
      :isChange = "isChange"
      @saveInfo = "saveInfo"
    ></Header>
    <div class="update">
      <!-- 修改名称 -->
      <div v-if="type === 'name'">
        <p class="title">我的{{ title }}</p>
        <input type="text" v-model="content" v-on:input="changeInput" />
        <span class="iconfont icon-guanbi1" @click="clear"></span>
        <span class="length">{{ content.length }}/{{ maxLenght }}</span>
      </div>

      <!-- 修改抖音号 -->
      <div v-if="type === 'dyh'">
        <p class="title">我的{{ title }}</p>
        <input type="text" v-model="content" v-on:input="changeInput" />
        <span class="iconfont icon-guanbi1" @click="clear"></span>
        <span class="desc">{{ desc }}</span>
      </div>

      <!-- 修改简介 -->
      <div v-if="type === 'desc'">
        <p class="title">个人{{ title }}</p>
        <textarea v-model="content" :placeholder="desc" v-on:input="changeInput" ></textarea>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/common/components/index/Header.vue';
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      title: '',
      content: '',
      maxLenght: 20,
      isChange: false,
      desc: '',
    };
  },
  components: {
    Header,
  },
  created() {
    this.title = this.$route.params.title;
    this.content = this.$route.params.content;
    this.desc = this.$route.params.desc;
    this.type = this.$route.params.type;
  },
  methods: {
    ...mapActions('user', ['UpdateUserInfo']),
    changeInput() {
      if (this.content !== this.$route.params.content) {
        this.isChange = true;
      } else {
        this.isChange = false;
      }
    },
    clear() {
      this.content = '';
    },
    saveInfo() {
      const that1 = this;
      this.UpdateUserInfo({
        key: this.type,
        value: this.content,
        that: that1,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.update {
  background-color: #101821;
  height: calc(100vh - 48px);
  color: #fff;
  border-top: 1px solid rgb(199, 199, 199);
  padding: 20px;
  .title {
    color: #a7a7a7;
    font-size: 16px;
    margin-top: 0px;
  }
  input {
    color: #fff;
    background-color: #101821;
    border: none;
    height: 46px;
    width: 100%;
    font-size: 14px;
    border-bottom: 1px solid #a7a7a7;
    position: relative;
    margin-bottom: 20px;
  }
  .icon-guanbi1 {
    color: #a7a7a7;
    font-size: 20px;
    position: absolute;
    right: 15px;
    margin-top: -55px;
  }
  .length {
    color: #a7a7a7;
    font-size: 14px;
  }
  .desc {
    color: #a7a7a7;
    font-size: 14px;
    line-height: 20px;
    text-align: justify;
  }
  textarea {
    width: 100%;
    height: 200px;
    background-color: #3b3b3b;
    border: none;
    padding: 15px 10px;
    box-sizing: border-box;
    font-size: 14px;
  }
}
</style>

顶部 Header 公共组件触发保存按钮

Header.vue

<template>
  <div class="header">
    <div class="left" v-if="hasLeft">
      <span class="iconfont icon-fanhui" v-if="isBack" @click="$router.back()" ></span>
      <span class="iconfont icon-guanbi" v-if="isClose" @click="$router.go(-1)" ></span>
    </div>
    <div class="title">
      <span>{{ title }}</span>
    </div>
    <div class="right" v-if="hasRight">
      <span :style="isChange ? 'opacity: 1;' : 'opacity: 0.8;'" @click="sava">
        {{rightText}}
      </span>
    </div>
  </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: '',
            required: true,
        },
        hasLeft: {
            type: Boolean,
            default: true,
        },
        hasRight: {
            type: Boolean,
            default: false,
        },
        rightText: {
            type: String,
            default: '',
        },
        isBack: {
            type: Boolean,
            default: true,
        },
        isClose: {
            type: Boolean,
            default: false,
        },
        isChange: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
      // 触发父组件中的 保存 功能
      sava() {
        this.$emit('saveInfo');
      },
    },
};
</script>

<style lang="less" scoped>
.header {
  height: 48px;
  width: 100%;
  background-color: #101821;
  color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  padding: 0 10px;
  box-sizing: border-box;
  .left {
    position: absolute;
    left: 10px;
    .iconfont {
      font-size: 24px;
    }
  }
  .right {
    position: absolute;
    right: 20px;
    font-weight: 600;
    color: #fa5c00;
    font-size: 18px;
  }
}
</style>

通过 Vuex 实现数据管理

在 src/store/modules/user.js 修改

注意: vue axios 不能 post 本地 .json 数据,所以此处只对 state 中的数据进行修改.

import { GET } from '@/request/http';
import router from '../../router';

const user = {
    namespaced: true,
    state: {
        userInfo: {},
    },
    mutations: {
        updateUseInfo(state, res) {
            const key1 = res.key;
            const value1 = res.value;
            const that1 = res.that;
            state.userInfo[key1] = value1;
            // 使用自定义的组件提示修改成功
            that1.$toast('修改成功');
            setTimeout(() => {
                // 修改成功之后 返回上一层
                router.back();
            }, 1500);
        },
    },
    actions: {
        GetUserInfo({ state, commit }, params) {
            // ...
        },
        UpdateUserInfo({ state, commit }, params) {
            commit('updateUseInfo', params);
        },
    },
};

export default user;

实现效果:
在这里插入图片描述

总结

本章节需要注意的几个点：

在公共子组件中触发父组件的保存功能
$router.push 路由跳转
axios post 修改数据

上一章节： 15. 用户信息编辑页面的实现

下一章节： 17. 我的消息页面的实现

项目整体介绍：Vue.js 项目实战之实现视频播放类WebApp的项目开发（仿抖音app）

项目仓库地址，欢迎 Star。

有任何问题欢迎评论区留言讨论。

八了个戒

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 实战系列之实现视频类WebApp的项目开发——16. 用户信息编辑提交保存的实现

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star实现效果功能实现创建修改信息页面在 src/views/mine 下创建 updateInfo.vue 页面updateInfo.vue<template> <div> <Header :title="修改名字" hasLeft hasRight rightText="保存"></Header>
复制链接

扫一扫

专栏目录