1. 修改个人信息
关键类：net.mingsoft.people.action.people.PeopleAction.java
关键方法：PeopleAction.update(...)
1.1. 范例：用户修改个人信息
实例中贴出了修改个人信息的完整代码
1.1.1. 实例： 修改个人信息
注意：若想直接操作并实现以下代码，请先登录
<html>
<head>
<meta charset="utf-8">
<title>修改个人信息</title>
<meta http-equiv="content-type" content="text/html"/>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
<meta name="viewport"
content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="app-mobile-web-app-capable" content="yes"/>
<meta name="app-mobile-web-app-status-bar-style" content="black-translucent"/>
<!--引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--通用图标-->
<link rel="stylesheet" href="https://cdn.mingsoft.net/iconfont/iconfont.css"/>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://cdn.bootcss.com/qs/6.9.0/qs.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://cdn.mingsoft.net/ms/1.0/ms.js"></script>
<script src="http://cdn.mingsoft.net/ms/1.0/ms.http.js"></script>
<script src="http://cdn.mingsoft.net/ms/1.0/ms.util.js"></script>
<style>
[v-cloak] {
display: none;
}
.custom-body {
width: 300px;
margin: auto;
}
</style>
</head>
<body class="custom-body">
<div id="app" v-cloak>
<div v-if="isLogin">
<div class="class-31">
<div class="class-32">
<div class="class-33 ">基本信息</div>
</div>
<el-form ref="peopleInfo" :model="peopleInfo" :rules="rules" label-width="100px" size="medium">
<el-form-item label="头像" prop="puIcon">
<el-upload
class="avatar-uploader"
:action="ms.base+'/file/upload.do'"
:show-file-list="false"
:on-success="puIconSuccess"
>
<img v-if="peopleInfo.puIcon" :src="ms.base + peopleInfo.puIcon" class="avatar"
@error="showdefaultimage($event)">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="用户名" prop="peopleName">
<el-input v-model="peopleInfo.peopleName"
:disabled="true"
:style="{width: '80%'}"
:clearable="true"
placeholder="请输入用户名">
</el-input>
</el-form-item>
<el-form-item label="昵称" prop="puNickname">
<el-input v-model="peopleInfo.puNickname"
:disabled="false"
:style="{width: '80%'}"
:clearable="true"
placeholder="请输入昵称">
</el-input>
</el-form-item>
<el-form-item label="性别" prop="puSex">
<el-radio-group v-model="peopleInfo.puSex"
:style="{width: ''}"
:disabled="false">
<el-radio :style="{display: true ? 'inline-block' : 'block'}" :label="item.label"
v-for='(item, index) in puSexOptions' :key="item.value">
{{item.value}}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="生日" prop="puBirthday">
<el-date-picker
v-model="peopleInfo.puBirthday"
placeholder="请选择生日"
start-placeholder=""
end-placeholder=""
:readonly="false"
:disabled="false"
:editable="true"
:clearable="true"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:style="{width:'80%'}"
type="date">
</el-date-picker>
</el-form-item>
</el-form>
<el-button @click="edit"
class="class-43 ">
提交
</el-button>
</div>
</div>
<div v-else><span style="color: red;">请先登录！</span></div>
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#app',
watch: {},
data: {
errorImg: "//cdn.mingsoft.net/global/images/msheader.png",
//是否登录
isLogin: false,
//表单数据
peopleInfo: {
// 头像
puIcon: '',
// 用户名
peopleName: '',
// 昵称
puNickname: '',
// 性别
puSex: '',
// 生日
puBirthday: '',
},
puSexOptions: [{"value": "男", "label": 0}, {"value": "女", "label": 1}],
rules: {
puNickname: [
{required: true, message: '请输入昵称', trigger: 'blur'},
{pattern: /^.{4,20}$/, message: '长度为4-20个字符', trigger: 'blur'}
],
},
},
methods: {
info: function () {
var that = this;
ms.http.get("/people/user/info.do").then(function (data) {
if (data) {
data.peopleDateTime = ms.util.date.fmt(data.peopleDateTime, "yyyy-MM-dd hh:mm:ss");
data.puBirthday = ms.util.date.fmt(data.puBirthday, "yyyy-MM-dd");
that.peopleInfo = data;
if (data.puBirthday == "NaN-aN-aN") {
that.peopleInfo.puBirthday = "";
}
}
});
},
//puIcon文件上传完成回调
puIconSuccess: function (response, file, fileList) {
this.peopleInfo.puIcon = response;
this.$forceUpdate();
},
//修改
edit: function () {
var that = this;
that.$refs.peopleInfo.validate((valid) => {
if(valid) {
that.$confirm('确认修改个人信息吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
ms.http.post("/people/user/update.do", that.peopleInfo).then(function (data) {
if (data.result) {
that.$notify.success("修改成功");
}
});
})
;
}else{
that.$notify.error(fields[0].message);
}
})
;
},
showdefaultimage: function (event) {
let img = event.srcElement;
img.src = this.errorImg;
img.onerror = null; //防止闪图
}
},
created() {
var that = this;
that.info();
ms.http.get('/people/user/info.do').then(function (data) {
if (data.peopleId) {
that.isLogin = true;
}
})
}
})
</script>