|
|
@ -11,169 +11,196 @@
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<head>
|
|
|
|
<title>用户中心</title>
|
|
|
|
<title>用户中心</title>
|
|
|
|
<!-- 导入 Vue 3 -->
|
|
|
|
<!-- 导入 Vue 3 -->
|
|
|
|
<script src="${pageContext.request.contextPath}/vue/vue@next/vue.global.js"></script>
|
|
|
|
<script src="${pageContext.request.contextPath}/vue/vue@next/vue.global.js"></script>
|
|
|
|
<!-- 导入组件库 -->
|
|
|
|
<!-- 导入组件库 -->
|
|
|
|
<script src="${pageContext.request.contextPath}/vue/element/index.full.js"></script>
|
|
|
|
<script src="${pageContext.request.contextPath}/vue/element/index.full.js"></script>
|
|
|
|
<script src="${pageContext.request.contextPath}/vue/axios/axios.js"></script>
|
|
|
|
<script src="${pageContext.request.contextPath}/vue/axios/axios.js"></script>
|
|
|
|
<script src="${pageContext.request.contextPath}/vue/qs.min.js"></script>
|
|
|
|
<script src="${pageContext.request.contextPath}/vue/qs.min.js"></script>
|
|
|
|
<!-- 引入样式 -->
|
|
|
|
<!-- 引入样式 -->
|
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/vue/font-awesome/css/font-awesome.css">
|
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/vue/font-awesome/css/font-awesome.css">
|
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css">
|
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css">
|
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/avatarUploader.css">
|
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/avatarUploader.css">
|
|
|
|
<link rel="stylesheet" href="//unpkg.com/element-plus@1.1.0-beta.9/dist/index.css" />
|
|
|
|
<link rel="stylesheet" href="//unpkg.com/element-plus@1.1.0-beta.9/dist/index.css"/>
|
|
|
|
</head>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<body>
|
|
|
|
<div id="app">
|
|
|
|
<div id="app">
|
|
|
|
<el-dialog v-model="dialogVisible" title="修改密码">
|
|
|
|
<el-dialog v-model="dialogVisible" title="修改密码">
|
|
|
|
<el-form action="/user/changePassword" label-width="80px">
|
|
|
|
<el-form action="/user/changePassword" label-width="80px">
|
|
|
|
<el-form-item label="原密码">
|
|
|
|
<el-form-item label="原密码">
|
|
|
|
<el-input v-model="oldPassword" type="password"></el-input>
|
|
|
|
<el-input v-model="oldPassword" type="password"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="新密码">
|
|
|
|
<el-form-item label="新密码">
|
|
|
|
<el-input v-model="newPassword" type="password"></el-input>
|
|
|
|
<el-input v-model="newPassword" type="password"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</el-form>
|
|
|
|
<template #footer>
|
|
|
|
<template #footer>
|
|
|
|
<span class="dialog-footer">
|
|
|
|
<span class="dialog-footer">
|
|
|
|
<el-button @click="dialogVisible = false">Cancel</el-button>
|
|
|
|
<el-button @click="dialogVisible = false">Cancel</el-button>
|
|
|
|
<el-button type="primary" @click="changePass">修改</el-button>
|
|
|
|
<el-button type="primary" @click="changePass">修改</el-button>
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-dialog>
|
|
|
|
</el-dialog>
|
|
|
|
<header>
|
|
|
|
<header>
|
|
|
|
<%@ include file="/jsp/header.html" %>
|
|
|
|
<%@ include file="/jsp/header.html" %>
|
|
|
|
</header>
|
|
|
|
</header>
|
|
|
|
<div class="main">
|
|
|
|
<div class="main">
|
|
|
|
<div class="container">
|
|
|
|
<div class="container">
|
|
|
|
<el-container>
|
|
|
|
<el-container>
|
|
|
|
<el-aside width="80px">
|
|
|
|
<el-aside width="80px">
|
|
|
|
<%@ include file="/jsp/aside.html" %>
|
|
|
|
<%@ include file="/jsp/aside.html" %>
|
|
|
|
</el-aside>
|
|
|
|
</el-aside>
|
|
|
|
<el-main>
|
|
|
|
<el-main>
|
|
|
|
<el-page-header icon="el-icon-arrow-left" :content="title" @back="goBack"></el-page-header>
|
|
|
|
<el-page-header icon="el-icon-arrow-left" :content="title" @back="goBack"></el-page-header>
|
|
|
|
<br/>
|
|
|
|
<br/>
|
|
|
|
<div class="container">
|
|
|
|
<div class="container">
|
|
|
|
<el-alert :title="info" type="error" show-icon v-if="info!==''"></el-alert>
|
|
|
|
<el-alert :title="info" type="error" show-icon v-if="info!==''"></el-alert>
|
|
|
|
<el-form ref="form" :model="user" :rules="rule" :label-width="80" class="login-form">
|
|
|
|
<el-form ref="form" :model="user" :rules="rule" :label-width="80" class="login-form">
|
|
|
|
<el-form-item label="头像">
|
|
|
|
<el-form-item label="头像">
|
|
|
|
<el-upload
|
|
|
|
<el-upload
|
|
|
|
class="avatar-uploader"
|
|
|
|
class="avatar-uploader"
|
|
|
|
action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
|
action="https://www.peteralbus.com:8089/photo/customUpload/"
|
|
|
|
:show-file-list="false"
|
|
|
|
:show-file-list="false"
|
|
|
|
<%-- :on-success="handleAvatarSuccess"--%>
|
|
|
|
:data="upData"
|
|
|
|
<%-- :before-upload="beforeAvatarUpload"--%>
|
|
|
|
:on-success="handleAvatarSuccess"
|
|
|
|
>
|
|
|
|
<%-- :before-upload="beforeAvatarUpload"--%>
|
|
|
|
<img v-if="user.avatarSrc" :src="user.avatarSrc" class="avatar" />
|
|
|
|
>
|
|
|
|
<i class="el-icon-plus avatar-uploader-icon" v-else></i>
|
|
|
|
<img v-if="user.avatarSrc" :src="user.avatarSrc" class="avatar"/>
|
|
|
|
</el-upload>
|
|
|
|
<i class="el-icon-plus avatar-uploader-icon" v-else></i>
|
|
|
|
</el-form-item>
|
|
|
|
</el-upload>
|
|
|
|
<el-form-item prop="username" label="用户名">
|
|
|
|
</el-form-item>
|
|
|
|
<el-input type="text" v-model="user.username" placeholder="用户名"></el-input>
|
|
|
|
<el-form-item prop="username" label="用户名">
|
|
|
|
</el-form-item>
|
|
|
|
<el-input type="text" v-model="user.username" placeholder="用户名"></el-input>
|
|
|
|
<el-form-item prop="realName" label="姓名">
|
|
|
|
</el-form-item>
|
|
|
|
<el-input type="text" v-model="user.realName" placeholder="name"></el-input>
|
|
|
|
<el-form-item prop="realName" label="姓名">
|
|
|
|
</el-form-item>
|
|
|
|
<el-input type="text" v-model="user.realName" placeholder="name"></el-input>
|
|
|
|
<el-form-item prop="password" label="密码">
|
|
|
|
</el-form-item>
|
|
|
|
<el-button type="danger" @click="dialogVisible=true" size="small" round>修改密码</el-button>
|
|
|
|
<el-form-item prop="password" label="密码">
|
|
|
|
</el-form-item>
|
|
|
|
<el-button type="danger" @click="dialogVisible=true" size="small" round>修改密码</el-button>
|
|
|
|
<el-form-item prop="userPhone" label="手机号">
|
|
|
|
</el-form-item>
|
|
|
|
<el-input type="text" v-model="user.userPhone" placeholder="phone number"></el-input>
|
|
|
|
<el-form-item prop="userPhone" label="手机号">
|
|
|
|
</el-form-item>
|
|
|
|
<el-input type="text" v-model="user.userPhone" placeholder="phone number"></el-input>
|
|
|
|
<el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
<el-button type="primary" @click="handleSubmit('form')" size="large" :loading="loading">保存</el-button>
|
|
|
|
<el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
<el-button type="primary" @click="handleSubmit('form')" size="large" :loading="loading">
|
|
|
|
</el-form>
|
|
|
|
保存
|
|
|
|
</div>
|
|
|
|
</el-button>
|
|
|
|
</el-main>
|
|
|
|
</el-form-item>
|
|
|
|
</el-container>
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</el-main>
|
|
|
|
|
|
|
|
</el-container>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<footer>
|
|
|
|
<footer>
|
|
|
|
<%@ include file="/jsp/foot.html" %>
|
|
|
|
<%@ include file="/jsp/foot.html" %>
|
|
|
|
</footer>
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
const App = {
|
|
|
|
const App = {
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return{
|
|
|
|
return {
|
|
|
|
info: '${info}',
|
|
|
|
info: '${info}',
|
|
|
|
title:'用户中心',
|
|
|
|
title: '用户中心',
|
|
|
|
user:{
|
|
|
|
user: {
|
|
|
|
userId:'',
|
|
|
|
userId: '',
|
|
|
|
username:'',
|
|
|
|
username: '',
|
|
|
|
realName:'',
|
|
|
|
realName: '',
|
|
|
|
userPhone:'',
|
|
|
|
userPhone: '',
|
|
|
|
avatarSrc: '',
|
|
|
|
avatarSrc: '',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
rule: {
|
|
|
|
|
|
|
|
username: [
|
|
|
|
|
|
|
|
{required: true, message: '请填写用户名', trigger: 'blur'}
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
userPhone: [
|
|
|
|
|
|
|
|
{required: true, message: '请填写手机号', trigger: 'blur'},
|
|
|
|
|
|
|
|
{len: 11, message: '请输入正确格式手机号', trigger: 'blur'}
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
realName: [
|
|
|
|
|
|
|
|
{required: true, message: '请输入真实姓名', trigger: 'blur'}
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
dialogVisible: false,
|
|
|
|
|
|
|
|
newPassword: '',
|
|
|
|
|
|
|
|
oldPassword: '',
|
|
|
|
|
|
|
|
loading: false,
|
|
|
|
|
|
|
|
activeIndex: '8'
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
rule: {
|
|
|
|
mounted() {
|
|
|
|
username: [
|
|
|
|
this.user.userId = '${userId}'
|
|
|
|
{ required: true, message: '请填写用户名', trigger: 'blur' }
|
|
|
|
this.user.realName = '${realName}'
|
|
|
|
],
|
|
|
|
this.user.username = '${username}'
|
|
|
|
userPhone: [
|
|
|
|
this.user.avatarSrc = '${avatarSrc}'
|
|
|
|
{ required: true, message: '请填写手机号', trigger: 'blur' },
|
|
|
|
this.user.userPhone = '${userPhone}'
|
|
|
|
{ len: 11, message: '请输入正确格式手机号', trigger: 'blur' }
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
realName: [
|
|
|
|
|
|
|
|
{ required: true, message: '请输入真实姓名', trigger: 'blur' }
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
dialogVisible:false,
|
|
|
|
methods: {
|
|
|
|
newPassword:'',
|
|
|
|
handleAvatarSuccess(res, file) {
|
|
|
|
oldPassword:'',
|
|
|
|
console.log(res)
|
|
|
|
loading:false,
|
|
|
|
this.user.avatarSrc = res;
|
|
|
|
activeIndex:'8'
|
|
|
|
this.$message.success('上传头像成功!点击保存进行保存')
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
goBack() {
|
|
|
|
mounted(){
|
|
|
|
window.history.go(-1);
|
|
|
|
this.user.userId='${userId}'
|
|
|
|
},
|
|
|
|
this.user.realName='${realName}'
|
|
|
|
handleSubmit(name) {
|
|
|
|
this.user.username='${username}'
|
|
|
|
this.$refs[name].validate((valid) => {
|
|
|
|
this.user.avatarSrc='${avatarSrc}'
|
|
|
|
if (valid) {
|
|
|
|
this.user.userPhone='${userPhone}'
|
|
|
|
this.loading = true
|
|
|
|
},
|
|
|
|
axios({
|
|
|
|
methods: {
|
|
|
|
method: "post",
|
|
|
|
goBack(){
|
|
|
|
url: "/user/updateUser",
|
|
|
|
window.history.go(-1);
|
|
|
|
data: this.user,
|
|
|
|
},
|
|
|
|
transformRequest: [function (data) {
|
|
|
|
handleSubmit(name) {
|
|
|
|
return Qs.stringify(data) //使用Qs将请求参数序列化
|
|
|
|
this.$refs[name].validate((valid) => {
|
|
|
|
}],
|
|
|
|
if (valid) {
|
|
|
|
headers: {
|
|
|
|
this.loading=true
|
|
|
|
'Content-Type': 'application/x-www-form-urlencoded' //必须设置传输方式
|
|
|
|
axios({
|
|
|
|
}
|
|
|
|
method: "post",
|
|
|
|
})
|
|
|
|
url: "/user/updateUser",
|
|
|
|
.then(res => {
|
|
|
|
data: this.user,
|
|
|
|
this.loading = false
|
|
|
|
transformRequest: [ function(data){
|
|
|
|
if (res.data === "success") {
|
|
|
|
return Qs.stringify(data) //使用Qs将请求参数序列化
|
|
|
|
location.reload()
|
|
|
|
}],
|
|
|
|
} else {
|
|
|
|
headers: {
|
|
|
|
this.info = '修改失败!';
|
|
|
|
'Content-Type': 'application/x-www-form-urlencoded' //必须设置传输方式
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
.then(res=>{
|
|
|
|
})
|
|
|
|
this.loading=false
|
|
|
|
},
|
|
|
|
if(res.data==="success")
|
|
|
|
changePass() {
|
|
|
|
{
|
|
|
|
location.href = '/user/changePassword?oldPassword=' + this.oldPassword + '&newPassword=' + this.newPassword
|
|
|
|
location.reload()
|
|
|
|
},
|
|
|
|
}
|
|
|
|
uuid() {
|
|
|
|
else
|
|
|
|
var s = [];
|
|
|
|
{
|
|
|
|
var hexDigits = "0123456789abcdef";
|
|
|
|
this.info='修改失败!';
|
|
|
|
for (var i = 0; i < 36; i++) {
|
|
|
|
}
|
|
|
|
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
|
|
|
|
})
|
|
|
|
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
|
|
|
|
},
|
|
|
|
s[8] = s[13] = s[18] = s[23] = "-";
|
|
|
|
changePass(){
|
|
|
|
|
|
|
|
location.href='/user/changePassword?oldPassword='+this.oldPassword+'&newPassword='+this.newPassword
|
|
|
|
var uuid = s.join("");
|
|
|
|
}
|
|
|
|
return uuid;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
const app = Vue.createApp(App);
|
|
|
|
computed: {
|
|
|
|
app.use(ElementPlus);
|
|
|
|
upData: function () {
|
|
|
|
app.mount("#app");
|
|
|
|
let uuid = this.uuid();
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
path: 'social/',
|
|
|
|
|
|
|
|
saveName: uuid
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
const app = Vue.createApp(App);
|
|
|
|
|
|
|
|
app.use(ElementPlus);
|
|
|
|
|
|
|
|
app.mount("#app");
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
</html>
|
|
|
|