How to use vue to view personal information and change passwords-JS Tutorial-php.cn

This time I will show you how to use vue to view personal information and change passwords. What are the precautions for using vue to view personal information and change passwords? The following is a practical case. Let’s take a look. .

The following code introduces Vue to implement personal information viewing and password modification functions. The specific code is as follows:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

//用了element组件，自己要加载和引入
<template>
   <p class="all-container">
    <p class="all-container-padding bg" >
     <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">
          <img v-if="userlist.avatar_url" :src="userlist.avatar_url" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon " style="width:80px;height:80px;"></i>
          </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>
      <p class="grid-content bg-purple">
       <el-button type="primary" @click="EditorUserClick(&#39;userlist&#39;)" >保存</el-button>
      </p>
     </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=&#39;newkey1&#39; type="password"></el-input></el-col>
        </el-form-item>
        </el-form>
        <p class="grid-content bg-purple">
       <el-button type="primary" @click="submitForm(&#39;ruleForm&#39;)">保存</el-button>
      </p>
     </el-tab-pane>
    </el-tabs>
    </p>
   </p>
</template>
<script>
//这些不要在意，这些是我们自定义的接口，用的时候就直接拿来了
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("请再次输入密码"));
   } else if (value !== this.ruleForm.newpass) {
    callback(new Error("两次输入密码不一致!"));
   } else {
    callback();
   }
  };
  return {
   uploadParm: {}, //图片的上传
   ruleForm: {},//修改密码的表单
   activeName: "first",
   loading: true,
   baseUrl: process.env.BASE_API,
   userlist: {},//用户信息表单
   formLabelWidth: "150px",
  /***校验***/
   rules: {
    phone: [
     {
      required: true,
      message: "请输入电话号码"
     },
     {
      pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
      message: "手机格式不对"
     }
    ],
    email: [
     {
      required: true,
      message: "请输入电子邮箱"
     },
     {
      pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/,
      message: "请输入有效的邮箱"
     }
    ],
    pass: [
     {
      required: true,
      trigger: "blur",
      message: "请输入密码"
     }
    ],
    newpass: [
     {
      validator: validatePass,
      trigger: "blur"
     }
    ],
    checknewpass: [
     {
      validator: validatePass2,
      trigger: "blur"
     }
    ]
   }
  };
 },
 created() {
  this.getUser();
  this.upload();
 },
 computed: {
  ...mapGetters(["username"])
 },
 methods: {
  //获取个人用户的信息
  getUser() {
   postData("接口", this.username).then(response => {
    if (response.status === 200) {
     this.userlist = response.data;
     this.loading = false;
     console.log(this.userlist, 9696);
    } else {
     this.$message({
      message: "获取信息失败," + response.message,
      type: "error"
     });
    }
   });
  },
  //tab切换
  handleClick(tab, event) {
   console.log(tab, event);
  },
  //上传参数图片初始化
  upload() {
   var currentTimeStamp = new Date().getTime() / 1000;
   if (
    this.uploadParams == null ||
    this.uploadParams.expire + 3 < currentTimeStamp
   ) {
    this.$store
     .dispatch("GetUploadParams")
     .then(req => {
      this.uploadParm = req.data;
     })
     .catch(err => {
      this.$message({ message: err.message, type: "warning" });
     });
   } else {
    this.uploadParm = this.uploadParams;
   }
  },
  //上传之前
  beforeupload(file) {
   this.uploadParm.key = this.uploadParm.dir + guid();
   // console.log(this.uploadParm)
  },
  //图片上传上传成功
  handleUpSuccess(response, file, fileList) {
   var newfile = {
    name: file.name,
    type: file.raw.type,
    size: bytesToSize(file.size),
    url: this.uploadParm.key
   };
   postData("file", newfile).then(response => {
    if (response.status == 200) {
     this.$message({ message: "修改成功", type: "success" });
     this.userlist.style_file_id = response.data.id;
     this.userlist.avatar_url = this.baseUrl + response.data.url;
    } else {
     this.$message({ message: "修改失败", type: "error" });
    }
   });
   console.log(this.userlist);
  },
  //修改密码
  submitForm(ruleForm) {
   var obj = {
    username: this.username,
    oldpwd: this.ruleForm.pass,
    newpwd: this.ruleForm.newpass
   };
   console.log(obj);
   postData("接口", obj).then(response => {
    if (response.status == 200) {
     this.$message({
      message: "保存成功",
      type: "success"
     });
    } else {
     this.$message({
      message: "修改失败" + response.message,
      type: "error"
     });
    }
   });
  },
  // 编辑提交的方法
  EditorUserClick() {
   this.$refs.EditorUserForms.validate(valid => {
    if (valid) {
     console.log(this.userlist);
     putData("接口", this.userlist).then(response => {
      if (response.status == 200) {
       this.$message({
        message: "编辑成功",
        type: "success"
       });
      } else {
       this.$message({
        message: "修改失败" + response.message,
        type: "error"
       });
      }
     });
    }
   });
  }
 }
};
</script>

Copy after login

I believe you have mastered the method after reading the case in this article. Please come for more exciting information. Pay attention to other related articles on php Chinese website!