diff --git a/front/src/pages/manage/OverView/AddModal.jsx b/front/src/pages/manage/OverView/AddModal.jsx index 2d797e2..17cfb16 100644 --- a/front/src/pages/manage/OverView/AddModal.jsx +++ b/front/src/pages/manage/OverView/AddModal.jsx @@ -39,7 +39,8 @@ class AddModal extends React.Component { url: "", nameHelp: "", urlHelp: "", - file: null + file: null, + isLoading: false }; } @@ -59,8 +60,10 @@ class AddModal extends React.Component { const rule = reg[key]; if (rule.reg.test(value)) { this.setState({ [key + "Help"]: "" }); + return true; } else { this.setState({ [key + "Help"]: rule.text }); + return false; } } @@ -93,12 +96,21 @@ class AddModal extends React.Component { url: url, type }; - httpUtil.post("/bookmark/updateOne", body).then(() => { - message.success("编辑成功"); - node.name = name; - node.url = url; - this.props.closeModal(); - }); + let isOk = this.checkValue("name", name) && (type === 0 ? this.checkValue("url", url) : true); + if (!isOk) { + return; + } + this.setState({ isLoading: true }); + httpUtil + .post("/bookmark/updateOne", body) + .then(() => { + message.success("编辑成功"); + node.name = name; + node.url = url; + this.setState({ isLoading: false }); + this.props.closeModal(); + }) + .catch(() => this.setState({ isLoading: false })); } /** @@ -113,6 +125,7 @@ class AddModal extends React.Component { message.error("请先选择文件"); return; } + this.setState({ isLoading: true }); const form = new FormData(); form.append("path", path); form.append("file", file.originFileObj); @@ -121,8 +134,10 @@ class AddModal extends React.Component { headers: { "Content-Type": "multipart/form-data" } }) .then(res => { + this.setState({ isLoading: false }); window.location.reload(); - }); + }) + .catch(res => this.setState({ isLoading: false })); } else { let body = { type: this.state.addType === "bookmark" ? 0 : 1, @@ -130,20 +145,29 @@ class AddModal extends React.Component { name, url }; - httpUtil.put("/bookmark", body).then(res => { - // addToTree(res); - message.success("加入成功"); - if (currentAddFolder === null) { - treeData.push(res); - } else { - //存在children说明该子节点的孩子数据已经加载,需要重新将新的子书签加入进去 - if (currentAddFolder.children) { - currentAddFolder.children.push(res); + let isOk = this.checkValue("name", name) && (body.type === 0 ? this.checkValue("url", url) : true); + if (!isOk) { + return; + } + this.state({ isLoading: true }); + httpUtil + .put("/bookmark", body) + .then(res => { + // addToTree(res); + message.success("加入成功"); + if (currentAddFolder === null) { + treeData.push(res); + } else { + //存在children说明该子节点的孩子数据已经加载,需要重新将新的子书签加入进去 + if (currentAddFolder.children) { + currentAddFolder.children.push(res); + } } - } - updateTreeData(treeData); - closeModal(); - }); + updateTreeData(treeData); + closeModal(); + this.state({ isLoading: false }); + }) + .catch(() => this.setState({ isLoading: false })); } } @@ -174,7 +198,7 @@ class AddModal extends React.Component { render() { const { isShowModal, currentEditNode, closeModal } = this.props; - const { addType, name, url, nameHelp, urlHelp } = this.state; + const { addType, name, url, nameHelp, urlHelp, isLoading } = this.state; const type = currentEditNode == null ? "add" : "edit"; const formItemLayout = { labelCol: { @@ -210,7 +234,7 @@ class AddModal extends React.Component { ) : null} {addType === "file" ? this.renderFileUpload() : null}
-
diff --git a/front/src/pages/manage/OverView/function.js b/front/src/pages/manage/OverView/function.js index 2b133c7..e3f66d9 100644 --- a/front/src/pages/manage/OverView/function.js +++ b/front/src/pages/manage/OverView/function.js @@ -193,6 +193,7 @@ export function onDrop(info) { message.error("无法移动到书签内部"); return; } + this.setState({ isLoading: true }); const current = info.dragNode.props.dataRef; const body = { bookmarkId: current.bookmarkId, @@ -243,8 +244,10 @@ export function onDrop(info) { .then(res => { message.success("移动完成"); updateTreeData([...treeData]); + this.setState({ isLoading: false }); }) .catch(() => { + this.setState({ isLoading: false }); message.error("后台移动失败,将于2s后刷新页面,以免前后台数据不一致"); setTimeout(window.location.reload, 2000); }); diff --git a/front/src/pages/public/Login/index.jsx b/front/src/pages/public/Login/index.jsx index 0805af2..d622850 100644 --- a/front/src/pages/public/Login/index.jsx +++ b/front/src/pages/public/Login/index.jsx @@ -26,7 +26,8 @@ class Login extends Component { str: "", password: "", rememberMe: false, - errorText: "" + errorText: "", + isLoading: false }; this.query = queryString.parse(window.location.search); } @@ -70,22 +71,27 @@ class Login extends Component { if (!(this.checkStr(str) && this.checkPassword(password))) { return; } - axios.post("/user/login", this.state).then(res => { - const token = res.token; - delete res.token; - localStorage.setItem("token", token); - window.token = token; - this.props.updateToken(token); - if (this.query.redirect) { - this.props.history.replace(decodeURIComponent(this.query.redirect)); - } else { - this.props.history.replace("/"); - } - }); + this.setState({ isLoading: true }); + axios + .post("/user/login", this.state) + .then(res => { + this.setState({ isLoading: false }); + const token = res.token; + delete res.token; + localStorage.setItem("token", token); + window.token = token; + this.props.updateToken(token); + if (this.query.redirect) { + this.props.history.replace(decodeURIComponent(this.query.redirect)); + } else { + this.props.history.replace("/"); + } + }) + .catch(() => this.setState({ isLoading: false })); }; render() { - const { str, password, rememberMe, errorText } = this.state; + const { str, password, rememberMe, errorText, isLoading } = this.state; return (
@@ -114,7 +120,7 @@ class Login extends Component { 忘记密码
- diff --git a/front/src/pages/public/RegisterOrReset/index.jsx b/front/src/pages/public/RegisterOrReset/index.jsx index 3e6f5b2..f107282 100644 --- a/front/src/pages/public/RegisterOrReset/index.jsx +++ b/front/src/pages/public/RegisterOrReset/index.jsx @@ -38,7 +38,8 @@ export default class Register extends React.Component { authCode: "", authCodeText: "获取验证码", isCountDown: false, - errorText: "" + errorText: "", + isLoading: false }; } @@ -121,23 +122,31 @@ export default class Register extends React.Component { if (!isOk) { return; } + this.setState({ isLoading: true }); if (current === REGISTER_TYPE) { - axios.put("/user", form).then(() => { - message.success("注册成功"); - setTimeout(() => this.props.history.replace("/public/login"), 500); - }); + axios + .put("/user", form) + .then(() => { + message.success("注册成功"); + this.setState({ isLoading: false }); + setTimeout(() => this.props.history.replace("/public/login"), 500); + }) + .catch(() => this.setState({ isLoading: false })); } else { delete form.username; - axios.post("/user/resetPassword", form).then(() => { - message.success("操作成功"); - console.log(this.location); - setTimeout(() => this.props.history.replace("/public/login"), 500); - }); + axios + .post("/user/resetPassword", form) + .then(() => { + message.success("操作成功"); + this.setState({ isLoading: false }); + setTimeout(() => this.props.history.replace("/public/login"), 500); + }) + .catch(() => this.setState({ isLoading: false })); } }; render() { - const { current, username, email, password, repassword, authCode, authCodeText, isCountDown, errorText } = this.state; + const { current, username, email, password, repassword, authCode, authCodeText, isCountDown, errorText, isLoading } = this.state; return (
@@ -194,7 +203,7 @@ export default class Register extends React.Component { } placeholder="验证码" /> -