vue实现个人信息查看和密码修改功能_vue个人信息展示页面,vue修改密码页面

5星 · 超过95%的资源 197 浏览量更新于2023-05-03 评论 2 收藏 52KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue实现个人信息查看和密码修改功能实现个人信息查看和密码修改功能

下面一段代码给大家介绍vue实现个人信息查看和密码修改功能，具体代码如下所述：

//用了element组件，自己要加载和引入

<el-tabs v-model="activeName" @tab-click="handleClick">

<el-tab-pane label="基本信息" name="first">

<el-form :model="userlist" :rules="rules" ref="EditorUserForms">

<el-form-item label="头像" prop="avatar_url" :label-width="formLabelWidth">

<el-upload class="avatar-uploader" action="//shujiaoke.oss-cn-hangzhou.aliyuncs.com" :before-upload="beforeupload" :data="uploadParm" :show-file-

list="false" :on-success="handleUpSuccess">

</el-upload>

</el-form-item>

<el-form-item label="用户名" prop="username" :label-width="formLabelWidth">

<el-col :span="8"> <el-input v-model="userlist.username" disabled ></el-input></el-col>

</el-form-item>

<el-form-item label="电话" prop="phone" :label-width="formLabelWidth">

<el-col :span="8"> <el-input v-model="userlist.phone" placeholder="请输入电话"></el-input></el-col>

</el-form-item>

<el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">

<el-col :span="8"> <el-input v-model="userlist.email" placeholder="请输入邮箱"></el-input></el-col>

</el-form-item>

<el-form-item label="用户角色" prop="full_name" :label-width="formLabelWidth">

<el-col :span="8">

<el-input v-model="userlist.full_name" disabled ></el-input>

</el-col>

</el-form-item>

</el-form>

<el-button type="primary" @click="EditorUserClick('userlist')" >保存</el-button>

</div>

</el-tab-pane>

<el-tab-pane label="修改密码" name="second">

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">

<el-form-item label="原密码" prop="pass" :label-width="formLabelWidth">

<el-col :span="8"> <el-input v-model="ruleForm.pass" placeholder="请输入原密码" type="password"></el-input></el-col>

</el-form-item>

<el-form-item label="新密码" prop="newpass" :label-width="formLabelWidth">

<el-col :span="8"><el-input v-model="ruleForm.newpass" placeholder="请输入新密码" id="newkey" type="password"></el-input></el-col>

</el-form-item>

<el-form-item label="重复新密码" prop="checknewpass" :label-width="formLabelWidth">

<el-col :span="8"> <el-input v-model="ruleForm.checknewpass" placeholder="请再次输入新密码" id='newkey1' type="password"></el-input></el-col>

</el-form-item>

</el-form>

<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>

</div>

</el-tab-pane>

</el-tabs>

</div>

</template>

//这些不要在意，这些是我们自定义的接口，用的时候就直接拿来了

import {fetchAll,fetchByID,fetchList,postData,putData,deleteByID,deleteAllByID,guid,bytesToSize} from "@/api/dbhelper";

//这一步很重要，一般我们直接从后台拿过来输出来会是在data里面，但是我发现却在store里面，这里就要用到vuex

import { mapGetters } from "vuex";

export default {

data() {

/*****检验两次密码是否一致***/

var validatePass = (rule, value, callback) => {

if (value === "") {

callback(new Error("请输入密码"));

} else {

if (this.ruleForm.checknewpass !== "") {

this.$refs.ruleForm.validateField("checknewpass");

}

callback();

}

};

var validatePass2 = (rule, value, callback) => {

if (value === "") {

callback(new Error("请再次输入密码"));

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

芊暖

2023-07-24

这个文件提供了清晰明了的指导，让我能够轻松地实现个人信息查看和密码修改功能。

weixin_38746926

粉丝: 13
资源: 995

会员权益专享

vue实现个人信息查看和密码修改功能

评论5

会员权益专享

最新资源

vue实现个人信息查看和密码修改功能

评论5

zhanghecool：个人信息展示页面

vue-cli+elementUI：个人信息提交表格显示Demo

一个用vuejs20写的直播类应用web端个人中心

构建安全的聊天室：Vue和GraphQL的安全防护策略

Springboot +vue个人中心功能方法调用

基于vue的企业信息门户

基于Vue和Node.js的个人博客系统的设计与实现的主要内容和基本要求

springboot+vue实现用户注册登录身份证验证开题报告

基于SpringBoot和vue的博物馆网站的设计与实现 系统实现 具体模块及功能

手写一个基于vue和springboot的用户信息管理系统

个人中心vue组件实现

写一个springboot+redis+vue框架的商城系统，前台功能：商品选购页面，各商品介绍页面，登陆注册页面，个人信息页面，购物车页面，订单页面，物流页面等等，要有商品搜索功能

基于Vue和Node.js的个人博客系统的设计与实现的主要内容和基本要求，超详细

写一份基于Vue和Node.js的个人博客系统的设计与实现的开题报告的研究方案，超详细

基于vue和springboot的毕业设计

基于spring boot 和vue的个人博客系统的设计

springboot+vue系统总体功能模块设计

vue用户管理系统实战

会员权益专享

最新资源

基于SpringBoot和vue的博物馆网站的设计与实现系统实现具体模块及功能