finished avatar upload and some little functions.

DEV
PeterAlbus 3 years ago
parent 9ec450989f
commit 94ccb9a657

@ -76,4 +76,14 @@ public class AdminController
} }
return "error"; return "error";
} }
@ResponseBody
@RequestMapping("/setAdmin")
public String setAdmin(Long userId)
{
if(userService.setAdmin(userId)>0)
{
return "success";
}
return "error";
}
} }

@ -93,4 +93,11 @@ public class UserService
{ {
return userDao.selectById(userId); return userDao.selectById(userId);
} }
public int setAdmin(Long userId)
{
User user=userDao.selectById(userId);
user.setUserClass(0);
return userDao.updateById(user);
}
} }

@ -20,11 +20,16 @@
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<Modal
v-model="modal1"
title="如何创建管理员?">
<p>如果需要创建管理员账号,请先注册一个任意类型的新账号,然后联系网站管理员将您设为管理员</p>
</Modal>
<Row class="login-box"> <Row class="login-box">
<i-col span="12"> <i-col span="12">
<img src="${pageContext.request.contextPath}/img/1.jpeg" alt="" class="login-img"/> <img src="${pageContext.request.contextPath}/img/1.jpeg" alt="" class="login-img"/>
</i-col> </i-col>
<i-col span="12"> <i-col span="12" style="overflow: hidden">
<i-form ref="form" :model="form" :rules="rule" :label-width="80" class="login-form"> <i-form ref="form" :model="form" :rules="rule" :label-width="80" class="login-form">
<h1 class="login-title">用户注册</h1> <h1 class="login-title">用户注册</h1>
<Alert type="error" show-icon v-if="info!==''">{{info}}</Alert> <Alert type="error" show-icon v-if="info!==''">{{info}}</Alert>
@ -32,7 +37,10 @@
<Avatar :src="form.avatarSrc" size="large"></Avatar> <Avatar :src="form.avatarSrc" size="large"></Avatar>
</Form-item> </Form-item>
<Form-item> <Form-item>
<Upload action="#" on-success="uploadSuccess"> <Upload action="https://www.peteralbus.com:8089/photo/customUpload/"
:data="upData"
:default-file-list="fileList"
:on-success="handleAvatarSuccess">
<i-button type="primary" icon="ios-cloud-upload-outline">上传头像</i-button> <i-button type="primary" icon="ios-cloud-upload-outline">上传头像</i-button>
</Upload> </Upload>
</Form-item> </Form-item>
@ -69,7 +77,7 @@
</i-select> </i-select>
</Form-item> </Form-item>
<Form-item> <Form-item>
<Checkbox v-model="canRegister">我同意本站的许可条款</Checkbox> <Checkbox v-model="canRegister">我同意本站的许可条款</Checkbox><Icon type="ios-help" @click="modal1=true"></Icon>
</Form-item> </Form-item>
<Form-item> <Form-item>
<i-button type="primary" @click="handleSubmit('form')" size="large" shape="circle" :loading="loading" :disabled="!canRegister">注册</i-button> <i-button type="primary" @click="handleSubmit('form')" size="large" shape="circle" :loading="loading" :disabled="!canRegister">注册</i-button>
@ -93,8 +101,10 @@
} }
}; };
return { return {
fileList:[],
canRegister:false, canRegister:false,
loading:false, loading:false,
modal1:false,
info:'', info:'',
form: { form: {
username: '', username: '',
@ -171,9 +181,34 @@
} }
}) })
}, },
handleSuccess (res, file) { handleAvatarSuccess(res, file, fileList) {
console.log(res.data) console.log(res)
this.form.avatarSrc = res;
this.fileList=[]
this.$Message.success('上传头像成功!')
}, },
uuid() {
var s = [];
var hexDigits = "0123456789abcdef";
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] = "-";
var uuid = s.join("");
return uuid;
}
},
computed:{
upData:function () {
let uuid=this.uuid();
return {
path: 'social/',
saveName: uuid
}
}
} }
}) })
</script> </script>

@ -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>

@ -73,6 +73,14 @@
<el-table-column prop="version" label="版本"></el-table-column> <el-table-column prop="version" label="版本"></el-table-column>
<el-table-column prop="gmtCreate" label="创建时间" width="250"></el-table-column> <el-table-column prop="gmtCreate" label="创建时间" width="250"></el-table-column>
<el-table-column prop="gmtModified" label="上次更改" width="250"></el-table-column> <el-table-column prop="gmtModified" label="上次更改" width="250"></el-table-column>
<el-table-column width="120">
<template #header>
给与权限
</template>
<template #default="scope">
<el-button size="mini" @click="setAdmin(scope.row.userId)" type="danger" v-if="scope.row.userClass!=='0'">设为管理员</el-button>
</template>
</el-table-column>
<el-table-column align="right" fixed="right" width="100"> <el-table-column align="right" fixed="right" width="100">
<template #header> <template #header>
<el-input v-model="keyWord" size="mini" placeholder="搜索用户"></el-input> <el-input v-model="keyWord" size="mini" placeholder="搜索用户"></el-input>
@ -166,6 +174,32 @@
} }
}) })
}) })
},
setAdmin(id){
this.$messageBox.confirm(
'确认要将该用户设置为管理员吗?',
'警告',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
axios({
method: "get",
url: "/admin/setAdmin?userId="+id,
}).then(res=>{
if(res.data==="error")
{
this.$message.error('设置失败!')
}
else
{
this.$message.success('设置成功!')
}
})
})
} }
}, },
computed:{ computed:{

@ -5,7 +5,7 @@
<div class="navbar"> <div class="navbar">
<div class="hamburger-container"><i class="el-icon-s-grid"></i> 社会实践活动管理系统-{{title}}</div> <div class="hamburger-container"><i class="el-icon-s-grid"></i> 社会实践活动管理系统-{{title}}</div>
<div class="right-menu"> <div class="right-menu">
<el-avatar :src="user.avatarSrc" size="small"></el-avatar>&emsp; <el-avatar :src="user.avatarSrc" size="small" onclick="location.href='/userCenter'"></el-avatar>&emsp;
<shiro:hasRole name="student">欢迎学生:{{user.realName}}!</shiro:hasRole> <shiro:hasRole name="student">欢迎学生:{{user.realName}}!</shiro:hasRole>
<shiro:hasRole name="teacher">欢迎老师:{{user.realName}}!</shiro:hasRole> <shiro:hasRole name="teacher">欢迎老师:{{user.realName}}!</shiro:hasRole>
<shiro:hasRole name="admin">欢迎管理员:{{user.realName}}!</shiro:hasRole> <shiro:hasRole name="admin">欢迎管理员:{{user.realName}}!</shiro:hasRole>

@ -139,7 +139,11 @@
<h4>成员信息</h4> <h4>成员信息</h4>
<el-table :data="memberList" style="width: 100%" stripe> <el-table :data="memberList" style="width: 100%" stripe>
<el-table-column prop="username" label="用户名"></el-table-column> <el-table-column prop="username" label="用户名"></el-table-column>
<el-table-column prop="realName" label="姓名"></el-table-column> <el-table-column prop="realName" label="姓名">
<template #default="scope">
<el-link type="primary" :href="'/user?userId='+scope.row.userId">{{scope.row.realName}}</el-link>
</template>
</el-table-column>
<el-table-column align="right" label="加入状态"> <el-table-column align="right" label="加入状态">
<template #default="scope"> <template #default="scope">
<el-tag type="success" v-if="scope.row.isAccept">已通过</el-tag> <el-tag type="success" v-if="scope.row.isAccept">已通过</el-tag>

@ -116,7 +116,11 @@
</template> </template>
<el-table :data="item.memberList" style="width: 100%" stripe> <el-table :data="item.memberList" style="width: 100%" stripe>
<el-table-column prop="username" label="用户名"></el-table-column> <el-table-column prop="username" label="用户名"></el-table-column>
<el-table-column prop="realName" label="姓名"></el-table-column> <el-table-column prop="realName" label="姓名">
<template #default="scope">
<el-link type="primary" :href="'/user?userId='+scope.row.userId">{{scope.row.realName}}</el-link>
</template>
</el-table-column>
<el-table-column align="right" label="加入状态"> <el-table-column align="right" label="加入状态">
<template #default="scope"> <template #default="scope">
<el-tag type="success" v-if="scope.row.isAccept">已通过</el-tag> <el-tag type="success" v-if="scope.row.isAccept">已通过</el-tag>

Loading…
Cancel
Save