完善注册信息前端内容

2023-02-22 16:08:04 +08:00 · 2023-02-22 16:08:04 +08:00 · f3eadc6477
parent 0efbc830ae
commit f3eadc6477
5 changed files with 157 additions and 33 deletions
--- a/backend/src/main/java/com/kob/backend/service/impl/user/account/RegisterServiceImpl.java
+++ b/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;
    }
 }
--- a/web/src/components/NavBar.vue
+++ b/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
--- a/web/src/store/user.js
+++ b/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");
    },
  },
--- a/web/src/views/user/account/UserAccountLoginView.vue
+++ b/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
-              v-model="username"
-              type="text"
-              class="form-control"
-              id="username"
-              placeholder="请输入用户名"
-            />
+            <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="请输入密码"
-            />
+            <input 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 函数
--- a/web/src/views/user/account/UserAccountRegisterView.vue
+++ b/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>