完善注册信息前端内容

backend/src/main/java/com/kob/backend/service/impl/user/account/RegisterServiceImpl.java

@@ -44,15 +44,8 @@ public class RegisterServiceImpl implements RegisterService {
             map.put("error_message", "用户名过长");
             return map;
         }
-        if (password.length() > 100 || confirmedPassword.length() > 100) {
+
-            map.put("error_message", "密码过长");
+
-            return map;
-        }
-//        密码验证是 String 类型比较,应该用 equals() 方法
-        if (!confirmedPassword.equals(password)) {
-            map.put("error_message", "两次密码输入不一致");
-            return map;
-        }
 
 /*
         查询数据库里是否有用户名 this.username 已存在的用户,并将结果存入 users 中,
@@ -65,6 +58,17 @@ public class RegisterServiceImpl implements RegisterService {
             map.put("error_message", "用户名已存在");
             return map;
         }
+        // 密码验证是 String 类型比较,应该用 equals() 方法
+        else if (!confirmedPassword.equals(password)) {
+            map.put("error_message", "两次密码输入不一致");
+            return map;
+        } else if (password.length() < 6) {
+            map.put("error_message", "密码不能少于6位");
+            return map;
+        } else if (password.length() > 100) {
+            map.put("error_message", "密码过长");
+            return map;
+        }
 
 //        异常情况判断结束,开始将合法用户注册信息注入数据库
 //        对密码进行加密
@@ -72,10 +76,10 @@ public class RegisterServiceImpl implements RegisterService {
 //        默认头像
         String photo = "https://cdn.acwing.com/media/user/profile/photo/253652_lg_e3d8435b66.jpg";
 //        id 是数据库自增,这里生成新用户只需要将 id 参数写为 null 即可
-        User user = new User(null,username,encodedPassword,photo);
+        User user = new User(null, username, encodedPassword, photo);
         userMapper.insert(user);
 
-        map.put("error_message","成功注册");
+        map.put("error_message", "successRegister");
         return map;
     }
 }

web/src/components/NavBar.vue

@@ -58,7 +58,8 @@
           </li>
         </ul>
 
-        <ul class="navbar-nav" v-else>
+        <!-- 当没有拉取信息时,再去展示登录注册内容 -->
+        <ul class="navbar-nav" v-else-if="!$store.state.user.pulling_info">
           <!-- 下拉菜单样式 -->
           <li class="nav-item">
             <router-link

web/src/store/user.js

@@ -7,6 +7,7 @@ export default {
     photo: "",
     token: "",
     is_login: false,
+    pulling_info: true, // 当前是否在获取信息
   },
   getters: {},
   // 同步事件
@@ -30,6 +31,10 @@ export default {
       state.token = "";
       state.is_login = false;
     },
+    // 更新信息拉取状态
+    updatePullingInfo(state, pulling_info) {
+      state.pulling_info = pulling_info;
+    },
   },
   // 异步事件
   actions: {
@@ -45,6 +50,8 @@ export default {
         success(resp) {
           // console.log(resp.token, "\n成功了\n", resp.error_message);
           if (resp.error_message === "success") {
+            // 将登陆成功的信息存到 localStorage 中,用于浏览器的登录信息持久化(避免刷新后登录状态丢失)
+            localStorage.setItem("jwt_token", resp.token);
             /*
               登录成功则将获取到的 resp 里的 token 传给 mutations 里的
               updateToken 方法,对用户 token 信息进行更新
@@ -60,6 +67,30 @@ export default {
         },
       });
     },
+
+    // 注册函数
+    register(context, data) {
+      $.ajax({
+        url: "http://localhost:3000/user/account/register/",
+        type: "POST",
+        data: {
+          username: data.username,
+          password: data.password,
+          confirmedPassword: data.confirmedPassword,
+        },
+        success(resp) {
+          if (resp.error_message === "successRegister") {
+            data.success(resp);
+          } else {
+            data.error(resp);
+          }
+        },
+        error(resp) {
+          data.error(resp);
+        },
+      });
+    },
+
     // 获取登录成功后的用户信息
     getinfo(context, data) {
       $.ajax({
@@ -86,6 +117,8 @@ export default {
       });
     },
     logout(context) {
+      // 退出时,删除 localStorage 里的持久化信息
+      localStorage.removeItem("jwt_token");
       context.commit("logout");
     },
   },

web/src/views/user/account/UserAccountLoginView.vue

@@ -1,5 +1,6 @@
 <template>
-  <ContentBase>
+  <!-- !$store.state.user.pulling_info 正在拉取信息时,不展示登录状态 -->
+  <ContentBase v-if="!$store.state.user.pulling_info">
     <!-- justify-content-md-center 用于居中 -->
     <div class="row justify-content-md-center">
       <div class="col-3">
@@ -10,23 +11,11 @@
           <div class="mb-3">
             <label for="username" class="form-label">用户名</label>
             <!-- 使用 v-model 来绑定函数里的 username 变量 -->
-            <input
+            <input v-model="username" type="text" class="form-control" id="username" placeholder="请输入用户名" />
-              v-model="username"
-              type="text"
-              class="form-control"
-              id="username"
-              placeholder="请输入用户名"
-            />
           </div>
           <div class="mb-3">
             <label for="password" class="form-label">密码</label>
-            <input
+            <input v-model="password" type="password" class="form-control" id="password" placeholder="请输入密码" />
-              v-model="password"
-              type="password"
-              class="form-control"
-              id="password"
-              placeholder="请输入密码"
-            />
           </div>
           <div class="error-message">{{ error_message }}</div>
           <!-- float-start 左布局, float-end 右布局 -->
@@ -54,6 +43,27 @@ export default {
     let password = ref("");
     let error_message = ref("");
 
+
+    // 获取 localStorage 里存的 jwt_token
+    const jwt_token = localStorage.getItem("jwt_token");
+    // 如果 jwt_token 存在,则存下来,并直接从云端根据 token 获取用户信息
+    if (jwt_token) {
+      store.commit("updateToken", jwt_token);
+      store.dispatch("getinfo", {
+        // 本地 localStorage 成功获取到 token 信息,则直接跳转到首页
+        success() {
+          router.push({ name: "home" });
+          store.commit("updatePullingInfo", false);
+        },
+        error() {
+          // 信息拉取结束
+          store.commit("updatePullingInfo", false);
+        }
+      });
+    } else {
+      store.commit("updatePullingInfo", false);
+    }
+
     const login = () => {
       error_message.value = "";
       // 如果触发,则调用 store/user.js 里定义的 login 函数

web/src/views/user/account/UserAccountRegisterView.vue

@@ -1,15 +1,91 @@
 <template>
-  <ContentBase>注册</ContentBase>
+  <ContentBase>
+    <!-- justify-content-md-center 用于居中 -->
+    <div class="row justify-content-md-center">
+      <div class="col-3">
+        <!-- 定义注册表单 @submita="login" 表示表单提交时触发 login 函数; submit.prevent 用于阻止 submit 的默认提交行为,
+             而是调用自己定义的 login 函数来实现提交行为
+        -->
+        <form @submit.prevent="register">
+          <div class="mb-3">
+            <label for="username" class="form-label">用户名</label>
+            <!-- 使用 v-model 来绑定函数里的 username 变量 -->
+            <input v-model="username" type="text" class="form-control" id="username" placeholder="请输入用户名" />
+          </div>
+          <div class="mb-3">
+            <label for="password" class="form-label">密码</label>
+            <input v-model="password" type="password" class="form-control" id="password" placeholder="请输入密码" />
+          </div>
+          <div class="mb-3">
+            <label for="confirmed-password" class="form-label">确认密码</label>
+            <input v-model="confirmedPassword" type="password" class="form-control" id="confirmed-password"
+              placeholder="请再次输入密码" />
+          </div>
+          <div class="error-message">{{ error_message }}</div>
+          <!-- float-start 左布局, float-end 右布局 -->
+          <!-- type="submit" 提交类型 -->
+          <button type="submit" class="btn btn-primary btn-sm float-center">注册</button>
+        </form>
+      </div>
+    </div>
+  </ContentBase>
 </template>
 
 <script>
 import ContentBase from "../../../components/ContentBase.vue";
+// import $ from "jquery";
+import { ref } from "vue";
+import { useStore } from "vuex";
+import router from "../../../router/index";
 
 export default {
   components: {
     ContentBase,
   },
+  setup: () => {
+    const store = useStore();
+    let username = ref("");
+    let password = ref("");
+    let confirmedPassword = ref("");
+    let error_message = ref("");
+
+    const register = () => {
+      error_message.value = "";
+      // store->user->register() 注册函数调用
+      store.dispatch("register", {
+        username: username.value,
+        password: password.value,
+        confirmedPassword: confirmedPassword.value,
+        success() {
+          // console.log(resp);
+          router.push({ name: "user_account_login" });
+        },
+        error(resp) {
+          // console.log(resp);
+          error_message.value = resp.error_message;
+        }
+
+      })
+
+    }
+
+    return {
+      username,
+      password,
+      confirmedPassword,
+      error_message,
+      register,
+    };
+  },
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+div.error-message {
+  color: red;
+}
+
+button {
+  width: 100%;
+}
+</style>