完善注册信息前端内容
This commit is contained in:
parent
0efbc830ae
commit
f3eadc6477
|
|
@ -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;
|
||||
}
|
||||
|
||||
// 异常情况判断结束,开始将合法用户注册信息注入数据库
|
||||
// 对密码进行加密
|
||||
|
|
@ -75,7 +79,7 @@ public class RegisterServiceImpl implements RegisterService {
|
|||
User user = new User(null, username, encodedPassword, photo);
|
||||
userMapper.insert(user);
|
||||
|
||||
map.put("error_message","成功注册");
|
||||
map.put("error_message", "successRegister");
|
||||
return map;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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 函数
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue