💄 UI: 加入loading状态展示

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(() => {
+    let isOk = this.checkValue("name", name) && (type === 0 ? this.checkValue("url", url) : true);
-      message.success("编辑成功");
+    if (!isOk) {
-      node.name = name;
+      return;
-      node.url = url;
+    }
-      this.props.closeModal();
+    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 => {
+      let isOk = this.checkValue("name", name) && (body.type === 0 ? this.checkValue("url", url) : true);
-        // addToTree(res);
+      if (!isOk) {
-        message.success("加入成功");
+        return;
-        if (currentAddFolder === null) {
+      }
-          treeData.push(res);
+      this.state({ isLoading: true });
-        } else {
+      httpUtil
-          //存在children说明该子节点的孩子数据已经加载，需要重新将新的子书签加入进去
+        .put("/bookmark", body)
-          if (currentAddFolder.children) {
+        .then(res => {
-            currentAddFolder.children.push(res);
+          // addToTree(res);
+          message.success("加入成功");
+          if (currentAddFolder === null) {
+            treeData.push(res);
+          } else {
+            //存在children说明该子节点的孩子数据已经加载，需要重新将新的子书签加入进去
+            if (currentAddFolder.children) {
+              currentAddFolder.children.push(res);
+            }
           }
-        }
+          updateTreeData(treeData);
-        updateTreeData(treeData);
+          closeModal();
-        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}
           <div style={{ textAlign: "center", paddingTop: "1em" }}>
-            <Button type="primary" onClick={this.submit}>
+            <Button type="primary" onClick={this.submit} loading={isLoading}>
               提交
             </Button>
           </div>

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);
     });

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 => {
+    this.setState({ isLoading: true });
-      const token = res.token;
+    axios
-      delete res.token;
+      .post("/user/login", this.state)
-      localStorage.setItem("token", token);
+      .then(res => {
-      window.token = token;
+        this.setState({ isLoading: false });
-      this.props.updateToken(token);
+        const token = res.token;
-      if (this.query.redirect) {
+        delete res.token;
-        this.props.history.replace(decodeURIComponent(this.query.redirect));
+        localStorage.setItem("token", token);
-      } else {
+        window.token = token;
-        this.props.history.replace("/");
+        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 (
       <LoginLayout type={LOGIN_TYPE}>
         <div className={styles.main}>
@@ -114,7 +120,7 @@ class Login extends Component {
             </Checkbox>
             <Link to="/public/resetPassword">忘记密码</Link>
           </div>
-          <Button type="primary" onClick={this.submit} block>
+          <Button type="primary" onClick={this.submit} block loading={isLoading}>
             登录
           </Button>
         </div>

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(() => {
+      axios
-        message.success("注册成功");
+        .put("/user", form)
-        setTimeout(() => this.props.history.replace("/public/login"), 500);
+        .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(() => {
+      axios
-        message.success("操作成功");
+        .post("/user/resetPassword", form)
-        console.log(this.location);
+        .then(() => {
-        setTimeout(() => this.props.history.replace("/public/login"), 500);
+          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 (
       <LoginLayout type={current}>
         <div className={styles.main}>
@@ -194,7 +203,7 @@ export default class Register extends React.Component {
             }
             placeholder="验证码"
           />
-          <Button type="primary" className={styles.submit} onClick={this.submit} block>
+          <Button type="primary" className={styles.submit} onClick={this.submit} block loading={isLoading}>
             {current === REGISTER_TYPE ? "注册" : "重置密码"}
           </Button>
         </div>