增加了修改昵称功能，以及修改密码功能

src/store/request.js

@@ -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之前都会执行这个操作

src/views/main/Chat.vue

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

src/views/main/Index.vue

@@ -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-picture-outline-round" 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-user-solid" 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-edit-outline" 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-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: 'info',
-          type: "warning",
+          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>