Merge branch 'master' of https://github.com/FleyX/bookmark

bookMarkDocker/Dockerfile

@@ -0,0 +1,14 @@
+FROM registry.cn-hangzhou.aliyuncs.com/fleyx/node:v1
+COPY settings.xml /opt/settings.xml
+RUN cd /opt && \
+    wget https://download.java.net/openjdk/jdk11/ri/openjdk-11+28_linux-x64_bin.tar.gz && \
+    tar -xvf openjdk-11+28_linux-x64_bin.tar.gz && \
+    mv jdk-11 jdk11 && \
+    rm openjdk-11+28_linux-x64_bin.tar.gz && \
+    wget http://mirrors.tuna.tsinghua.edu.cn/apache/maven/maven-3/3.6.1/binaries/apache-maven-3.6.1-bin.tar.gz && \
+    tar -xvf apache-maven-3.6.1-bin.tar.gz && \
+    mv apache-maven-3.6.1 maven && \
+    rm apache-maven-3.6.1-bin.tar.gz && \ 
+    mv maven/conf/settings.xml maven/conf/settings.xml.bak && \
+    mv settings.xml maven/conf/settings.xml
+ENV PATH=$PATH:/opt/jdk11/bin:/opt/maven/bin

bookMarkDocker/docker-compose.yml

@@ -14,7 +14,7 @@ services:
       - /etc/localtime:/etc/localtime
       - ./timezone:/etc/timezone
     environment: 
-      - MYSQL_ROOT_PASSWORD=${MYSQL_PASS}
+      - MYSQL_ROOT_PASSWORD=
       - MYSQL_DATABASE=bookmark
   bookmark-redis:
     image: redis:3.2.10
@@ -25,9 +25,49 @@ services:
     networks: 
       - bookmark
     ports:
-      - 6380:6379
+      # redis未设置密码，如端口暴露可能会被攻击
-
+      # - 6380:6379
-    
+  bookmark-front:
-
+    image: nginx
+    container_name: bookmark-front
+    networks: 
+      - bookmark
+    volumes: 
+      - /etc/localtime:/etc/localtime
+      - ./timezone:/etc/timezone
+      - ../front/build:/opt/dist
+      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
+      - ./nginx/log:/var/log/nginx
+    ports: 
+      - 8083:8080
+  bookmark-service:
+    image: registry.cn-hangzhou.aliyuncs.com/fleyx/node-java-env:v1
+    container_name: bookmark-service
+    depends_on: 
+      - bookmark-mysql
+      - bookmark-redis
+    networks: 
+      - bookmark
+    volumes: 
+      - /etc/localtime:/etc/localtime
+      - ./timezone:/etc/timezone
+      - ../bookMarkService/web/target/web-1.0-SNAPSHOT.jar:/opt/app/service.jar
+    working_dir: /opt/app
+    command: 
+      - /bin/bash
+      - -c
+      - |
+        sleep 20 && \
+        java -jar -DisDev=false \
+        -DjwtSecret= \
+        -Dmybatis.configuration.log-impl=org.apache.ibatis.logging.nologging.NoLoggingImpl \
+        -Dspring.mail.host= \
+        -Dspring.mail.username= \
+        -Dspring.mail.password= \
+        -Dspring.mail.port= \
+        -Dspring.datasource.druid.password= \
+        -Dspring.datasource.druid.url=jdbc:mysql://bookmark-mysql:3306/psn?useUnicode=true&characterEncoding=utf-8&useSSL=false \
+        -Dspring.redis.host=bookmark-redis \
+        service.jar
 networks: 
   bookmark:

bookMarkDocker/init.sh

@@ -0,0 +1,6 @@
+#/bin/bash
+
+# 用于前后端打包
+docker run -it --rm --name buildBookmark -v ../front:/opt/front -v ../bookMarkService:/opt/backend registry.cn-hangzhou.aliyuncs.com/fleyx/node-java-env:v1 sh -c "cd /opt/front && npm --registry https://registry.npm.taobao.org install && npm run build && cd /opt/backend && mvn package"
+
+echo "打包完毕，export MYSQL_PASS=xxx 设置环境变量后执行docker-compose up -d即可"

bookMarkDocker/nginx/nginx.conf

@@ -0,0 +1,48 @@
+user root;
+worker_processes auto;
+pid /run/nginx.pid;
+events {
+    worker_connections 768;
+}
+http {
+# Basic Settings
+    sendfile on;
+# SSL Settings
+    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
+# Logging Settings
+    access_log /var/log/nginx/access.log;
+    error_log /var/log/nginx/error.log;
+# Gzip Settings
+    gzip on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    types_hash_max_size 2048;
+    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
+    gzip_min_length 1K;
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+    ssl_prefer_server_ciphers on;
+    upstream bookmark-service{
+        server bookmark-service:8088;
+        keepalive 2000;
+    }
+    server {
+        listen 8080;
+        listen [::]:8080;
+        index index.html;
+        root /opt/dist/;
+        server_name _;
+        location /bookmark/api/ {
+            proxy_pass http://bookmark-service;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            client_max_body_size 100m;
+        }
+        location / {
+            root /opt/dist;
+            index index.html;
+            try_files $uri $uri/ /index.html;
+        }
+    }
+}

bookMarkDocker/settings.xml

@@ -0,0 +1,259 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<!--
+ | This is the configuration file for Maven. It can be specified at two levels:
+ |
+ |  1. User Level. This settings.xml file provides configuration for a single user,
+ |                 and is normally provided in ${user.home}/.m2/settings.xml.
+ |
+ |                 NOTE: This location can be overridden with the CLI option:
+ |
+ |                 -s /path/to/user/settings.xml
+ |
+ |  2. Global Level. This settings.xml file provides configuration for all Maven
+ |                 users on a machine (assuming they're all using the same Maven
+ |                 installation). It's normally provided in
+ |                 ${maven.conf}/settings.xml.
+ |
+ |                 NOTE: This location can be overridden with the CLI option:
+ |
+ |                 -gs /path/to/global/settings.xml
+ |
+ | The sections in this sample file are intended to give you a running start at
+ | getting the most out of your Maven installation. Where appropriate, the default
+ | values (values used when the setting is not specified) are provided.
+ |
+ |-->
+<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
+          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+          xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">
+  <!-- localRepository
+   | The path to the local repository maven will use to store artifacts.
+   |
+   | Default: ${user.home}/.m2/repository 
+   -->
+  <localRepository>/opt/mavenRep</localRepository>
+
+
+  <!-- interactiveMode
+   | This will determine whether maven prompts you when it needs input. If set to false,
+   | maven will use a sensible default value, perhaps based on some other setting, for
+   | the parameter in question.
+   |
+   | Default: true
+  <interactiveMode>true</interactiveMode>
+  -->
+
+  <!-- offline
+   | Determines whether maven should attempt to connect to the network when executing a build.
+   | This will have an effect on artifact downloads, artifact deployment, and others.
+   |
+   | Default: false
+  <offline>false</offline>
+  -->
+
+  <!-- pluginGroups
+   | This is a list of additional group identifiers that will be searched when resolving plugins by their prefix, i.e.
+   | when invoking a command line like "mvn prefix:goal". Maven will automatically add the group identifiers
+   | "org.apache.maven.plugins" and "org.codehaus.mojo" if these are not already contained in the list.
+   |-->
+  <pluginGroups>
+    <!-- pluginGroup
+     | Specifies a further group identifier to use for plugin lookup.
+    <pluginGroup>com.your.plugins</pluginGroup>
+    -->
+  </pluginGroups>
+
+  <!-- proxies
+   | This is a list of proxies which can be used on this machine to connect to the network.
+   | Unless otherwise specified (by system property or command-line switch), the first proxy
+   | specification in this list marked as active will be used.
+   |-->
+  <proxies>
+    <!-- proxy
+     | Specification for one proxy, to be used in connecting to the network.
+     |
+    <proxy>
+      <id>optional</id>
+      <active>true</active>
+      <protocol>http</protocol>
+      <username>proxyuser</username>
+      <password>proxypass</password>
+      <host>proxy.host.net</host>
+      <port>80</port>
+      <nonProxyHosts>local.net|some.host.com</nonProxyHosts>
+    </proxy>
+    -->
+  </proxies>
+
+  <!-- servers
+   | This is a list of authentication profiles, keyed by the server-id used within the system.
+   | Authentication profiles can be used whenever maven must make a connection to a remote server.
+   |-->
+  <servers>
+    <!-- server
+     | Specifies the authentication information to use when connecting to a particular server, identified by
+     | a unique name within the system (referred to by the 'id' attribute below).
+     |
+     | NOTE: You should either specify username/password OR privateKey/passphrase, since these pairings are
+     |       used together.
+     |
+    <server>
+      <id>deploymentRepo</id>
+      <username>repouser</username>
+      <password>repopwd</password>
+    </server>
+    -->
+
+    <!-- Another sample, using keys to authenticate.
+    <server>
+      <id>siteServer</id>
+      <privateKey>/path/to/private/key</privateKey>
+      <passphrase>optional; leave empty if not used.</passphrase>
+    </server>
+    -->
+  </servers>
+
+  <!-- mirrors
+   | This is a list of mirrors to be used in downloading artifacts from remote repositories.
+   |
+   | It works like this: a POM may declare a repository to use in resolving certain artifacts.
+   | However, this repository may have problems with heavy traffic at times, so people have mirrored
+   | it to several places.
+   |
+   | That repository definition will have a unique id, so we can create a mirror reference for that
+   | repository, to be used as an alternate download site. The mirror site will be the preferred
+   | server for that repository.
+   |-->
+  <mirrors>
+    <!-- mirror
+     | Specifies a repository mirror site to use instead of a given repository. The repository that
+     | this mirror serves has an ID that matches the mirrorOf element of this mirror. IDs are used
+     | for inheritance and direct lookup purposes, and must be unique across the set of mirrors.
+     |
+	 -->
+    <mirror>
+	  <id>AliMaven</id>
+      <name>aliyun maven</name>
+      <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
+      <mirrorOf>central</mirrorOf>
+    </mirror>
+     
+  </mirrors>
+
+  <!-- profiles
+   | This is a list of profiles which can be activated in a variety of ways, and which can modify
+   | the build process. Profiles provided in the settings.xml are intended to provide local machine-
+   | specific paths and repository locations which allow the build to work in the local environment.
+   |
+   | For example, if you have an integration testing plugin - like cactus - that needs to know where
+   | your Tomcat instance is installed, you can provide a variable here such that the variable is
+   | dereferenced during the build process to configure the cactus plugin.
+   |
+   | As noted above, profiles can be activated in a variety of ways. One way - the activeProfiles
+   | section of this document (settings.xml) - will be discussed later. Another way essentially
+   | relies on the detection of a system property, either matching a particular value for the property,
+   | or merely testing its existence. Profiles can also be activated by JDK version prefix, where a
+   | value of '1.4' might activate a profile when the build is executed on a JDK version of '1.4.2_07'.
+   | Finally, the list of active profiles can be specified directly from the command line.
+   |
+   | NOTE: For profiles defined in the settings.xml, you are restricted to specifying only artifact
+   |       repositories, plugin repositories, and free-form properties to be used as configuration
+   |       variables for plugins in the POM.
+   |
+   |-->
+  <profiles>
+    <!-- profile
+     | Specifies a set of introductions to the build process, to be activated using one or more of the
+     | mechanisms described above. For inheritance purposes, and to activate profiles via <activatedProfiles/>
+     | or the command line, profiles have to have an ID that is unique.
+     |
+     | An encouraged best practice for profile identification is to use a consistent naming convention
+     | for profiles, such as 'env-dev', 'env-test', 'env-production', 'user-jdcasey', 'user-brett', etc.
+     | This will make it more intuitive to understand what the set of introduced profiles is attempting
+     | to accomplish, particularly when you only have a list of profile id's for debug.
+     |
+     | This profile example uses the JDK version to trigger activation, and provides a JDK-specific repo.
+    <profile>
+      <id>jdk-1.4</id>
+
+      <activation>
+        <jdk>1.4</jdk>
+      </activation>
+
+      <repositories>
+        <repository>
+          <id>jdk14</id>
+          <name>Repository for JDK 1.4 builds</name>
+          <url>http://www.myhost.com/maven/jdk14</url>
+          <layout>default</layout>
+          <snapshotPolicy>always</snapshotPolicy>
+        </repository>
+      </repositories>
+    </profile>
+    -->
+
+    <!--
+     | Here is another profile, activated by the system property 'target-env' with a value of 'dev',
+     | which provides a specific path to the Tomcat instance. To use this, your plugin configuration
+     | might hypothetically look like:
+     |
+     | ...
+     | <plugin>
+     |   <groupId>org.myco.myplugins</groupId>
+     |   <artifactId>myplugin</artifactId>
+     |
+     |   <configuration>
+     |     <tomcatLocation>${tomcatPath}</tomcatLocation>
+     |   </configuration>
+     | </plugin>
+     | ...
+     |
+     | NOTE: If you just wanted to inject this configuration whenever someone set 'target-env' to
+     |       anything, you could just leave off the <value/> inside the activation-property.
+     |
+    <profile>
+      <id>env-dev</id>
+
+      <activation>
+        <property>
+          <name>target-env</name>
+          <value>dev</value>
+        </property>
+      </activation>
+
+      <properties>
+        <tomcatPath>/path/to/tomcat/instance</tomcatPath>
+      </properties>
+    </profile>
+    -->
+  </profiles>
+
+  <!-- activeProfiles
+   | List of profiles that are active for all builds.
+   |
+  <activeProfiles>
+    <activeProfile>alwaysActiveProfile</activeProfile>
+    <activeProfile>anotherAlwaysActiveProfile</activeProfile>
+  </activeProfiles>
+  -->
+</settings>

front/.gitignore

@@ -22,3 +22,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .vscode
+yarn.lock

front/package.json

@@ -7,6 +7,7 @@
     "antd": "^3.19.8",
     "axios": "^0.19.0",
     "babel-plugin-import": "^1.12.0",
+    "clipboard": "^2.0.4",
     "customize-cra": "^0.2.14",
     "less": "^3.9.0",
     "query-string": "^6.8.1",

front/public/index.html

@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>签签世界</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -34,5 +34,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>
   </body>
 </html>

front/src/App.jsx

@@ -1,7 +1,9 @@
 import React, { Component } from "react";
 import { Route, Switch, Redirect } from "react-router-dom";
+import { message } from "antd";
 import { withRouter } from "react-router-dom";
 import { Provider } from "react-redux";
+import Clipboard from "clipboard";
 import store from "./redux";
 import NotFound from "./pages/public/notFound/NotFound";
 
@@ -17,6 +19,15 @@ class App extends Component {
     window.reactHistory = this.props.history;
   }
 
+  componentDidMount() {
+    //初始化clipboard
+    let clipboard = new Clipboard(".copy-to-board");
+    clipboard.on("success", function(e) {
+      message.success("复制成功");
+      e.clearSelection();
+    });
+  }
+
   render() {
     const mainStyle = {
       fontSize: "0.14rem"

front/src/pages/manage/OverView/AddModal.jsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { Modal, Form, Upload, Button, Radio, Input, Icon, message } from "antd";
+import httpUtil from "../../../util/httpUtil";
+
+export default class AddModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      addType: 0,
+      addName: "",
+      addValue: "",
+      file: null
+    };
+  }
+
+  addOne = () => {
+    const { currentAddFolder, addToTree, closeModal } = this.props;
+    const path = currentAddFolder == null ? "" : currentAddFolder.path + "." + currentAddFolder.bookmarkId;
+    if (this.state.addType === 2) {
+      const form = new FormData();
+      form.append("path", path);
+      form.append("file", this.state.file.originFileObj);
+      httpUtil
+        .put("/bookmark/uploadBookmarkFile", form, {
+          headers: { "Content-Type": "multipart/form-data" }
+        })
+        .then(res => {
+          window.location.reload();
+        });
+    } else {
+      let body = {
+        type: this.state.addType,
+        path,
+        name: this.state.addName,
+        url: this.state.addValue
+      };
+      httpUtil.put("/bookmark", body).then(res => {
+        addToTree(res);
+        message.success("加入成功");
+        closeModal();
+      });
+    }
+  };
+
+  close = () => {
+    const { closeModal } = this.props;
+    this.setState({ file: null, addType: 0, addValue: "", addName: "" });
+    closeModal();
+  };
+
+  render() {
+    const { isShowModal } = this.props;
+    const { addType, addName, addValue } = this.state;
+    const formItemLayout = {
+      labelCol: {
+        xs: { span: 4 },
+        sm: { span: 4 }
+      },
+      wrapperCol: {
+        xs: { span: 20 },
+        sm: { span: 20 }
+      }
+    };
+    const uploadProps = {
+      accept: ".html,.htm",
+      onChange: e => {
+        this.setState({ file: e.fileList[0] });
+      },
+      beforeUpload: file => {
+        return false;
+      },
+      fileList: []
+    };
+    return (
+      <Modal destroyOnClose title="新增" visible={isShowModal} onCancel={this.close} footer={false}>
+        <Form {...formItemLayout}>
+          <Form.Item label="类别">
+            <Radio.Group defaultValue={0} onChange={e => this.setState({ addType: e.target.value })}>
+              <Radio value={0}>书签</Radio>
+              <Radio value={1}>文件夹</Radio>
+              <Radio value={2}>上传书签html</Radio>
+            </Radio.Group>
+          </Form.Item>
+          {addType < 2 ? (
+            <Form.Item label="名称">
+              <Input type="text" onChange={e => this.setState({ addName: e.target.value })} value={addName} />
+            </Form.Item>
+          ) : null}
+          {addType === 0 ? (
+            <Form.Item label="URL">
+              <Input type="text" value={addValue} onChange={e => this.setState({ addValue: e.target.value })} />
+            </Form.Item>
+          ) : null}
+          {addType === 2 ? (
+            <Upload {...uploadProps}>
+              <Button type="primary">
+                <Icon type="upload" />
+                {this.state.file == null ? "选择文件" : this.state.file.name.substr(0, 20)}
+              </Button>
+            </Upload>
+          ) : null}
+          <div style={{ textAlign: "center", paddingTop: "1em" }}>
+            <Button type="primary" onClick={this.addOne}>
+              提交
+            </Button>
+          </div>
+        </Form>
+      </Modal>
+    );
+  }
+}

front/src/pages/manage/OverView/function.js

@@ -1,5 +1,9 @@
 import httpUtil from "../../../util/httpUtil";
-import { Modal, message } from "antd";
+import React from "react";
+import { Modal, Button, Tooltip, Tree } from "antd";
+import styles from "./index.module.less";
+import IconFont from "../../../components/IconFont";
+const { TreeNode } = Tree;
 
 /**
  * 选中的文件夹id列表
@@ -10,11 +14,6 @@ let folderIdList = [];
  */
 let bookmarkIdList = [];
 
-/**
- * 新增书签的父节点node
- */
-let parentNode = null;
-
 /**
  * 展开/关闭
  * @param {*} keys
@@ -39,71 +38,108 @@ export function onCheck(keys, data) {
   this.setState({ checkedKeys: keys });
   bookmarkIdList = [];
   folderIdList = [];
-  parentNode = null;
   data.checkedNodes.forEach(item => {
     const bookmark = item.props.dataRef;
-    parentNode = bookmark;
     bookmark.type === 0 ? bookmarkIdList.push(bookmark.bookmarkId) : folderIdList.push(bookmark.bookmarkId);
   });
 }
 
 /**
- * 弹出新增modal
+ * 渲染树节点中节点内容
+ * @param {*} item
  */
-export function showAddModel() {
+export function renderNodeContent(item) {
-  if (this.state.checkedKeys.length > 1) {
+  const { isEdit } = this.state;
-    message.error("选中过多");
+  // 节点内容后面的操作按钮
-    return;
+  const btns = (
-  } else if (this.state.checkedKeys.length === 1) {
+    <div className={styles.btns}>
-    const id = this.state.checkedKeys[0];
+      {item.type === 0 ? (
-    if (bookmarkIdList.indexOf(parseInt(id)) > -1) {
+        <Button
-      message.error("只能选择文件夹节点");
+          size="small"
-      return;
+          className="copy-to-board"
-    }
+          data-clipboard-text={item.url}
-  }
+          type="primary"
-  this.setState({ isShowModal: true });
+          name="copy"
+          icon="copy"
+          shape="circle"
+          title="点击复制url"
+        />
+      ) : null}
+      {item.type === 1 ? <Button size="small" type="primary" icon="plus" shape="circle" onClick={this.addOne.bind(this, item)} /> : null}
+      <Button size="small" type="danger" icon="delete" shape="circle" onClick={deleteOne.bind(this, item)} />
+    </div>
+  );
+  return (
+    <span style={{ display: "inline-block" }}>
+      <Tooltip placement="bottom" title={item.url}>
+        <span>{item.name}</span>
+      </Tooltip>
+      {isEdit ? btns : null}
+    </span>
+  );
 }
 
 /**
- * 新增书签
+ * 渲染树节点
+ * @param {*} items
  */
-export function addOne() {
+export function renderTreeNodes(items) {
-  console.log(1);
+  if (!(items && items.length >= 0)) {
-  if (this.state.addType === 2) {
+    return null;
-    addHtmlFile();
-    return;
   }
-  let body = {
+  return items.map(item => {
-    type: this.state.addType,
+    const isLeaf = item.type === 0;
-    path: parentNode == null ? "" : parentNode.path + "." + parentNode.bookmarkId,
+    if (!isLeaf) {
-    name: this.state.addName,
+      return (
-    url: this.state.addValue
+        <TreeNode
-  };
+          icon={<IconFont type="icon-folder" />}
-  httpUtil.put("/bookmark", body).then(res => {
+          isLeaf={isLeaf}
-    let arr;
+          title={renderNodeContent.call(this, item)}
-    if (parentNode == null) {
+          key={item.bookmarkId}
-      arr = this.data[""] ? this.data[""] : [];
+          dataRef={item}
-    } else {
+        >
-      arr = this.data[body.path] ? this.data[body.path] : [];
+          {renderTreeNodes.call(this, item.children)}
+        </TreeNode>
+      );
     }
-    arr.push(res);
+    return (
-    if (this.state.treeData.length === 0) {
+      <TreeNode
-      this.state.treeData.push(arr);
+        icon={<IconFont type="icon-bookmark" />}
-    }
+        isLeaf={isLeaf}
-    this.data[body.path] = arr;
+        title={renderNodeContent.call(this, item)}
-    this.setState({ treeData: [...this.state.treeData], addType: 0, addName: "", addValue: "", isShowModal: false });
+        key={item.bookmarkId}
+        dataRef={item}
+      />
+    );
   });
 }
 
-export function addHtmlFile() {
+/**
-  
+ * 删除一个
+ * @param {*} e
+ */
+export function deleteOne(item, e) {
+  e.stopPropagation();
+  if (item.type === 0) {
+    deleteBookmark.call(this, [], [item.bookmarkId]);
+  } else {
+    deleteBookmark.call(this, [item.bookmarkId], []);
+  }
 }
 
 /**
  * 批量删除
  */
 export function batchDelete() {
-  console.log("1");
+  deleteBookmark.call(this, folderIdList, bookmarkIdList);
+}
+
+/**
+ * 删除书签
+ * @param {*} folderIdList
+ * @param {*} bookmarkIdList
+ */
+function deleteBookmark(folderIdList, bookmarkIdList) {
   const _this = this;
   Modal.confirm({
     title: "确认删除？",
@@ -115,8 +151,8 @@ export function batchDelete() {
           .then(() => {
             //遍历节点树数据，并删除
             const set = new Set();
-            folderIdList.forEach(item => set.add(item));
+            folderIdList.forEach(item => set.add(parseInt(item)));
-            bookmarkIdList.forEach(item => set.add(item));
+            bookmarkIdList.forEach(item => set.add(parseInt(item)));
             deleteTreeData(_this.state.treeData, set);
             _this.setState({ treeData: [..._this.state.treeData], checkedKeys: [] });
             resolve();

front/src/pages/manage/OverView/index.jsx

@@ -1,12 +1,10 @@
 import React from "react";
-import { Icon, Tree, Empty, Button, Tooltip, Modal, Form, Input, Radio, Upload } from "antd";
+import { Tree, Empty, Button } from "antd";
 import MainLayout from "../../../layout/MainLayout";
 import httpUtil from "../../../util/httpUtil";
-import IconFont from "../../../components/IconFont";
 import styles from "./index.module.less";
-import { batchDelete, onExpand, closeAll, onCheck, addOne, showAddModel } from "./function.js";
+import { batchDelete, renderTreeNodes, onExpand, closeAll, onCheck } from "./function.js";
-
+import AddModal from "./AddModal";
-const { TreeNode } = Tree;
 
 export default class OverView extends React.Component {
   constructor(props) {
@@ -17,131 +15,99 @@ export default class OverView extends React.Component {
       isLoading: true,
       checkedKeys: [],
       expandKeys: [],
-      //显示新增弹窗
+      //是否显示新增书签弹窗
       isShowModal: false,
-      //新增类别
+      currentAddFolder: null
-      addType: 0,
-      addName: "",
-      addValue: "",
-      file: null
     };
   }
 
+  /**
+   * 初始化第一级书签
+   */
   componentDidMount() {
     httpUtil
-      .get("/bookmark/currentUser")
+      .get("/bookmark/currentUser/path?path=")
       .then(res => {
-        this.data = res;
+        this.setState({ treeData: res, isLoading: false });
-        if (res[""]) {
-          this.setState({ treeData: res[""] });
-        }
-        this.setState({ isLoading: false });
       })
       .catch(() => this.setState({ isLoading: false }));
   }
 
+  /**
+   * 异步加载
+   */
   loadData = e =>
     new Promise(resolve => {
       const item = e.props.dataRef;
       const newPath = item.path + "." + item.bookmarkId;
-      if (this.data[newPath]) {
+      httpUtil.get("/bookmark/currentUser/path?path=" + newPath).then(res => {
-        item.children = this.data[newPath];
+        item.children = res;
         this.setState({ treeData: [...this.state.treeData] });
         resolve();
-      } else {
+      });
-        resolve();
-      }
     });
 
+  /**
+   * 节点选择
+   * @param {*} key
+   * @param {*} e
+   */
   treeNodeSelect(key, e) {
+    if (e.nativeEvent.delegateTarget.name === "copy") {
+      return;
+    }
     const { expandKeys } = this.state;
     const item = e.node.props.dataRef;
     if (item.type === 0) {
       window.open(item.url);
     } else {
-      expandKeys.push(item.bookmarkId);
+      const id = item.bookmarkId.toString();
+      const index = expandKeys.indexOf(id);
+      index === -1 ? expandKeys.push(id) : expandKeys.splice(index, 1);
+      this.setState({ expandKeys: [...expandKeys] });
     }
   }
 
   /**
-   * 渲染树节点中节点内容
+   * 将新增的数据加入到state中
-   * @param {*} item
    */
-  renderNodeContent(item) {
+  addToTree = node => {
-    // const { isEdit } = this.state;
+    const { currentAddFolder, treeData } = this.state;
-    // const bts = (
+    if (currentAddFolder === null) {
-    //   <div className={styles.btns}>
+      treeData.push(node);
-    //     <Button size="small" type="primary" name="copy" icon="copy" shape="circle" />
+    } else {
-    //     <Button size="small" type="danger" id={item.bookmarkId} icon="delete" shape="circle" onClick={this.deleteOne} />
+      //存在children说明该子节点的孩子数据已经加载，需要重新将新的子书签加入进去
-    //   </div>
+      if (currentAddFolder.children) {
-    // );
+        currentAddFolder.children.push(node);
-    return (
+        this.setState({ treeData: [...treeData] });
-      <React.Fragment>
-        <Tooltip placement="bottom" title={item.url}>
-          <span>{item.name}</span>
-        </Tooltip>
-        {/* {isEdit ? bts : null} */}
-      </React.Fragment>
-    );
       }
+    }
+  };
 
   /**
-   * 渲染树节点
+   * 关闭新增书签弹窗
-   * @param {*} items
    */
-  renderTreeNodes(items) {
+  closeAddModal = () => {
-    if (!(items && items.length >= 0)) {
+    this.setState({ isShowModal: false });
-      return null;
+  };
-    }
+
-    return items.map(item => {
+  /**
-      const isLeaf = item.type === 0;
+   * 新增书签
-      if (!isLeaf) {
+   */
-        return (
+  addOne = (item, e) => {
-          <TreeNode icon={<IconFont type="icon-folder" />} isLeaf={isLeaf} title={item.name} key={item.bookmarkId} dataRef={item}>
+    e.stopPropagation();
-            {this.renderTreeNodes(item.children)}
+    this.setState({ currentAddFolder: item, isShowModal: true });
-          </TreeNode>
+  };
-        );
-      }
-      return (
-        <TreeNode
-          icon={<IconFont type="icon-bookmark" />}
-          isLeaf={isLeaf}
-          title={this.renderNodeContent(item)}
-          key={item.bookmarkId}
-          dataRef={item}
-        />
-      );
-    });
-  }
 
   render() {
-    const { isLoading, isEdit, treeData, expandKeys, checkedKeys, isShowModal, addType, addValue, addName } = this.state;
+    const { isLoading, isEdit, treeData, expandKeys, checkedKeys, isShowModal, currentAddFolder } = this.state;
-    const formItemLayout = {
-      labelCol: {
-        xs: { span: 4 },
-        sm: { span: 4 }
-      },
-      wrapperCol: {
-        xs: { span: 20 },
-        sm: { span: 20 }
-      }
-    };
-    const uploadProps = {
-      accept: ".html,.htm",
-      onChange: e => {
-        this.setState({ file: e.fileList[0] });
-      },
-      beforeUpload: file => {
-        return false;
-      },
-      fileList: []
-    };
     return (
       <MainLayout>
         <div className={styles.main}>
           <div className={styles.header}>
             <div className={styles.left}>
               <span className={styles.myTree}>我的书签树</span>
+              {isEdit ? <Button size="small" type="primary" icon="plus" shape="circle" onClick={this.addOne.bind(this, null)} /> : null}
               {expandKeys.length > 0 ? (
                 <Button type="primary" size="small" onClick={closeAll.bind(this)}>
                   收起
@@ -154,9 +120,6 @@ export default class OverView extends React.Component {
                   <Button size="small" type="danger" onClick={batchDelete.bind(this)}>
                     删除选中
                   </Button>
-                  <Button size="small" type="primary" onClick={showAddModel.bind(this)}>
-                    新增
-                  </Button>
                 </React.Fragment>
               ) : null}
               <Button size="small" type="primary" onClick={() => this.setState({ isEdit: !isEdit })}>
@@ -164,7 +127,6 @@ export default class OverView extends React.Component {
               </Button>
             </div>
           </div>
-          {/* {treeData.length ? ( */}
           <Tree
             showIcon
             checkedKeys={checkedKeys}
@@ -174,49 +136,14 @@ export default class OverView extends React.Component {
             onExpand={onExpand.bind(this)}
             defaultExpandParent
             checkable={isEdit}
-            onSelect={this.treeNodeSelect}
+            onSelect={this.treeNodeSelect.bind(this)}
             onDoubleClick={this.copyUrl}
             blockNode
           >
-            {this.renderTreeNodes(treeData)}
+            {renderTreeNodes.call(this, treeData)}
           </Tree>
-          {/* ) : null} */}
           {isLoading === false && treeData.length === 0 ? <Empty description="还没有数据" /> : null}
-
+          <AddModal isShowModal={isShowModal} currentAddFolder={currentAddFolder} closeModal={this.closeAddModal} addToTree={this.addToTree} />
-          <Modal destroyOnClose title="新增" visible={isShowModal} onCancel={() => this.setState({ isShowModal: false })} footer={false}>
-            <Form {...formItemLayout}>
-              <Form.Item label="类别">
-                <Radio.Group defaultValue={0} onChange={e => this.setState({ addType: e.target.value })}>
-                  <Radio value={0}>书签</Radio>
-                  <Radio value={1}>文件夹</Radio>
-                  <Radio value={2}>上传书签html</Radio>
-                </Radio.Group>
-              </Form.Item>
-              {addType < 2 ? (
-                <Form.Item label="名称">
-                  <Input type="text" onChange={e => this.setState({ addName: e.target.value })} value={addName} />
-                </Form.Item>
-              ) : null}
-              {addType === 0 ? (
-                <Form.Item label="URL">
-                  <Input type="text" value={addValue} onChange={e => this.setState({ addValue: e.target.value })} />
-                </Form.Item>
-              ) : null}
-              {addType === 2 ? (
-                <Upload {...uploadProps}>
-                  <Button type="primary">
-                    <Icon type="upload" />
-                    {this.state.file == null ? "选择文件" : this.state.file.name.substr(0, 20)}
-                  </Button>
-                </Upload>
-              ) : null}
-              <div style={{ textAlign: "center", paddingTop: "1em" }}>
-                <Button type="primary" onClick={addOne.bind(this)}>
-                  提交
-                </Button>
-              </div>
-            </Form>
-          </Modal>
         </div>
       </MainLayout>
     );

front/src/pages/manage/OverView/index.module.less

@@ -28,7 +28,10 @@
 
   .btns {
     display: inline-block;
-    position: relative;
+    padding-left: 1em;
-    top: -0.45em;
+  }
+
+  .btns > button {
+    margin-right: 0.4em;
   }
 }

front/src/pages/public/Login/index.jsx

@@ -31,7 +31,11 @@ class Login extends Component {
   }
 
   valueChange = e => {
+    if (e.target.name === "rememberMe") {
+      this.setState({ rememberMe: e.target.checked });
+    } else {
       this.setState({ [e.target.name]: e.target.value });
+    }
   };
 
   submit = () => {
@@ -81,7 +85,7 @@ class Login extends Component {
             placeholder="密码"
           />
           <div className={styles.action}>
-            <Checkbox value={rememberMe} name="rememberMe" onChange={this.valueChange}>
+            <Checkbox checked={rememberMe} name="rememberMe" onChange={this.valueChange}>
               记住我
             </Checkbox>
             <Link to="/public/resetPassword">忘记密码</Link>