增加了修改昵称功能，以及修改密码功能
This commit is contained in:
parent
7684b29629
commit
cb2064b437
|
|
@ -4,7 +4,8 @@ import { Message } from "element-ui";
|
|||
|
||||
//创建axios实例
|
||||
const axiosInstance = axios.create({
|
||||
baseURL: 'http://localhost:8887', // 设置默认发送地址为后端端口
|
||||
// baseURL: 'http://119.29.254.99:8887', // 设置默认发送地址为后端端口
|
||||
baseURL: 'http://localhost:8887',
|
||||
});
|
||||
|
||||
//添加拦截器，在每次ajax之前都会执行这个操作
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div v-for="(message, index) in messageList" :key="index">
|
||||
|
||||
|
||||
<div class="word" v-if="!(message.nickname == myName)">
|
||||
<div class="word" v-if="!(message.account == myAccount)">
|
||||
<div class="information">
|
||||
<p>{{ message.nickname }} {{ message.sendTime }}</p>
|
||||
</div>
|
||||
|
|
@ -71,6 +71,7 @@ export default {
|
|||
myName: '',
|
||||
myPic: '',
|
||||
dateNow: '',
|
||||
myAccount:'',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -78,6 +79,7 @@ export default {
|
|||
container.scrollTop = container.scrollHeight;
|
||||
this.init();
|
||||
this.myName = localStorage.getItem("nickname");
|
||||
this.myAccount=localStorage.getItem("account");
|
||||
},
|
||||
methods: {
|
||||
getDate() {
|
||||
|
|
@ -102,6 +104,7 @@ export default {
|
|||
pic: this.myPic,
|
||||
sendTime: this.dateNow,
|
||||
message: this.textarea,
|
||||
account: localStorage.getItem("account")
|
||||
}
|
||||
this.messageList.push(SendMessage)
|
||||
this.$nextTick(function () {
|
||||
|
|
@ -141,8 +144,7 @@ export default {
|
|||
socket.onmessage = function (msg) {
|
||||
var data = JSON.parse(msg.data);
|
||||
that.messageList = data
|
||||
console.log(that.messageList[1].message, "nickname")
|
||||
console.log(that.messageList, 2)
|
||||
|
||||
that.$nextTick(function () {
|
||||
var container = document.getElementById('chat');
|
||||
container.scrollTop = container.scrollHeight;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<el-col>
|
||||
<el-dropdown trigger="click" @command="handleCommand" class="dropdown">
|
||||
<div class="el-dropdown-link">
|
||||
|
|
@ -16,14 +17,46 @@
|
|||
<el-dropdown-menu slot="dropdown" class="dropdownMenu">
|
||||
<p style="color: aliceblue; font-size: 14px;text-align: center;">已登录用户{{ myName }}</p>
|
||||
<hr style="border:none;height:1px;background-color: rgb(82, 87, 103);">
|
||||
<el-dropdown-item icon="el-icon-user-solid" command="a" class="item">个人信息</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-chat-dot-round" command="b" class="item">消息通知</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-setting" command="c" class="item">设置</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-question" command="d" class="item">帮助</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-picture-outline-round" command="a" class="item">更换头像</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-user-solid" command="b" class="item">修改昵称</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-edit-outline" command="c" class="item">修改密码</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-circle-close" command="d" class="item">注销账号</el-dropdown-item>
|
||||
<el-dropdown-item icon=el-icon-switch-button command="e" class="item">退出</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
</el-col>
|
||||
<!-- 修改头像dialog -->
|
||||
<el-dialog :visible.sync="isShowHeadDialog" title="更换头像" width="300px" class="dialog">
|
||||
|
||||
<el-upload class="avatar-uploader" action="http://119.29.254.99:8887/index/modifyHead" :show-file-list="false"
|
||||
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="{ 'Token': Token }">
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
<div class="buttonDiv">
|
||||
<el-button @click="cancel()">取消</el-button>
|
||||
<el-button @click="determine()">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 修改密码Dialog -->
|
||||
<el-dialog :visible.sync="isShowPasswordDialog" title="修改密码" width="500px" class="dialog">
|
||||
<el-form :model="form" :rules="rules" ref="form" label-width="80px">
|
||||
<el-form-item label="原密码" prop="oldPassword">
|
||||
<el-input v-model="form.oldPassword" type="password" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword">
|
||||
<el-input v-model="form.newPassword" type="password" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="checkPassword">
|
||||
<el-input v-model="form.checkPassword" type="password" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="buttonDiv">
|
||||
<el-button @click="isShowPasswordDialog=false">取消</el-button>
|
||||
<el-button @click="determinePassword()">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -47,13 +80,66 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import router from "@/router";
|
||||
import axiosInstance from "@/store/request";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageUrl: '',
|
||||
isShowHeadDialog: false,
|
||||
isShowPasswordDialog: false,
|
||||
form: {
|
||||
oldPassword: "",
|
||||
newPassword: "",
|
||||
checkPassword: "",
|
||||
},
|
||||
rules: {
|
||||
oldPassword: [
|
||||
{ message: "请输入原密码", trigger: "blur" },
|
||||
|
||||
],
|
||||
newPassword: [{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入新密码"));
|
||||
}
|
||||
if (value.length < 6) {
|
||||
callback(new Error("请输入六位以上的密码"));
|
||||
}
|
||||
if (value.length > 16) {
|
||||
callback(new Error("请输入16位以下的密码"));
|
||||
}
|
||||
else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur",
|
||||
}
|
||||
|
||||
],
|
||||
checkPassword: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请再次输入密码"));
|
||||
} else if (value !== this.form.newPassword) {
|
||||
callback(new Error("两次输入密码不一致!"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur",
|
||||
}
|
||||
|
||||
|
||||
],
|
||||
},
|
||||
myName: "",
|
||||
headPic: "",
|
||||
imgBlob: '',
|
||||
Token: localStorage.getItem("token"),
|
||||
nickname: localStorage.getItem("nickname"),
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -66,10 +152,79 @@ export default {
|
|||
this.init()
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.isShowDialog = false
|
||||
this.$message({
|
||||
message: "取消上传",
|
||||
type: "info",
|
||||
});
|
||||
this.imageUrl = ''
|
||||
},
|
||||
determine() {
|
||||
this.isShowDialog = false
|
||||
this.$message({
|
||||
message: "上传成功",
|
||||
type: "success",
|
||||
});
|
||||
const formData = new FormData();
|
||||
console.log(this.imageUrl, "isBlob");
|
||||
formData.append("file", this.imgBlob, localStorage.getItem("nickname") + ".jpg");
|
||||
axiosInstance.post("/index/modifyHead", formData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
}).then(function (response) {
|
||||
console.log(response);
|
||||
});
|
||||
},
|
||||
determinePassword(){
|
||||
const that = this
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
axiosInstance.post("/index/modifyPassword", {
|
||||
account: localStorage.getItem("account"),
|
||||
oldPassword: this.form.oldPassword,
|
||||
password: this.form.newPassword,
|
||||
}).then(function (response) {
|
||||
if (response.data === "success") {
|
||||
that.$message({
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
});
|
||||
that.form.oldPassword = ""
|
||||
that.form.newPassword = ""
|
||||
that.form.checkPassword = ""
|
||||
that.isShowPasswordDialog = false
|
||||
} else {
|
||||
that.$message({
|
||||
message: "原密码错误",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
handleAvatarSuccess(res, file) {
|
||||
this.imageUrl = URL.createObjectURL(file.raw);
|
||||
this.imgBlob = file.raw;
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
|
||||
const typeList = ["image/jpeg", "image/png", "image/jpg"]
|
||||
const isJPG = typeList.includes(file.type);
|
||||
const isLt5M = file.size / 1024 / 1024 < 5;
|
||||
|
||||
if (!isJPG) {
|
||||
this.$message.error('上传头像图片只能是 JPG 格式!');
|
||||
}
|
||||
if (!isLt5M) {
|
||||
this.$message.error('上传头像图片大小不能超过 5MB!');
|
||||
}
|
||||
return isJPG && isLt5M;
|
||||
},
|
||||
init() {
|
||||
const that=this
|
||||
const that = this
|
||||
axiosInstance.post("/getHead", {
|
||||
account: localStorage.getItem("account"),
|
||||
}).then(function (response) {
|
||||
|
|
@ -103,10 +258,65 @@ export default {
|
|||
message: "退出成功",
|
||||
type: "success",
|
||||
});
|
||||
} else if (command == "d") {
|
||||
this.$confirm('此操作将注销您的账号, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
axiosInstance.post("/index/deleteUser", {
|
||||
account: localStorage.getItem("account"),
|
||||
}).then(function () {
|
||||
router.push("/login");
|
||||
});
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '注销成功!'
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
});
|
||||
});
|
||||
} else if (command == "a") {
|
||||
this.isShowHeadDialog = true
|
||||
} else if (command == "b") {
|
||||
const that=this
|
||||
this.$prompt('请输入昵称', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
//输入长度为6-16
|
||||
inputPattern: /^.{3,8}$/,
|
||||
inputErrorMessage: '请输入长度在3-8的昵称'
|
||||
}).then(({ value }) => {
|
||||
axiosInstance.post("/index/modifyUsername", {
|
||||
account: localStorage.getItem("account"),
|
||||
username: value,
|
||||
}).then(function () {
|
||||
localStorage.setItem("nickname", value);
|
||||
that.myName = value;
|
||||
});
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '修改成功!'
|
||||
});
|
||||
}
|
||||
|
||||
).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '取消输入'
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
else if (command == "c") {
|
||||
this.isShowPasswordDialog = true
|
||||
} else {
|
||||
this.$message({
|
||||
message: "功能开发中" + command,
|
||||
type: "warning",
|
||||
type: 'info',
|
||||
message: '取消输入'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
@ -115,7 +325,23 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dropdown {}
|
||||
.buttonDiv {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
text-align: center;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.avatar-uploader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.el-dropdown-link {
|
||||
margin-top: 8px;
|
||||
|
|
@ -286,4 +512,31 @@ export default {
|
|||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue