Merge branch 'master' of https://github.com/FleyX/bookmark
This commit is contained in:
fanxb
commit
a3b439e877
14
bookMarkDocker/Dockerfile
Normal file
14
bookMarkDocker/Dockerfile
Normal file
@ -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
|
||||
@ -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:
|
||||
6
bookMarkDocker/init.sh
Normal file
6
bookMarkDocker/init.sh
Normal file
@ -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即可"
|
||||
48
bookMarkDocker/nginx/nginx.conf
Normal file
48
bookMarkDocker/nginx/nginx.conf
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
259
bookMarkDocker/settings.xml
Normal file
259
bookMarkDocker/settings.xml
Normal file
@ -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>
|
||||
Binary file not shown.
3
front/.gitignore
vendored
3
front/.gitignore
vendored
@ -21,4 +21,5 @@
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.vscode
|
||||
.vscode
|
||||
yarn.lock
|
||||
@ -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",
|
||||
@ -42,4 +43,4 @@
|
||||
"devDependencies": {
|
||||
"less-loader": "^5.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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"
|
||||
|
||||
111
front/src/pages/manage/OverView/AddModal.jsx
Normal file
111
front/src/pages/manage/OverView/AddModal.jsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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() {
|
||||
if (this.state.checkedKeys.length > 1) {
|
||||
message.error("选中过多");
|
||||
return;
|
||||
} else if (this.state.checkedKeys.length === 1) {
|
||||
const id = this.state.checkedKeys[0];
|
||||
if (bookmarkIdList.indexOf(parseInt(id)) > -1) {
|
||||
message.error("只能选择文件夹节点");
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.setState({ isShowModal: true });
|
||||
export function renderNodeContent(item) {
|
||||
const { isEdit } = this.state;
|
||||
// 节点内容后面的操作按钮
|
||||
const btns = (
|
||||
<div className={styles.btns}>
|
||||
{item.type === 0 ? (
|
||||
<Button
|
||||
size="small"
|
||||
className="copy-to-board"
|
||||
data-clipboard-text={item.url}
|
||||
type="primary"
|
||||
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() {
|
||||
console.log(1);
|
||||
if (this.state.addType === 2) {
|
||||
addHtmlFile();
|
||||
return;
|
||||
export function renderTreeNodes(items) {
|
||||
if (!(items && items.length >= 0)) {
|
||||
return null;
|
||||
}
|
||||
let body = {
|
||||
type: this.state.addType,
|
||||
path: parentNode == null ? "" : parentNode.path + "." + parentNode.bookmarkId,
|
||||
name: this.state.addName,
|
||||
url: this.state.addValue
|
||||
};
|
||||
httpUtil.put("/bookmark", body).then(res => {
|
||||
let arr;
|
||||
if (parentNode == null) {
|
||||
arr = this.data[""] ? this.data[""] : [];
|
||||
} else {
|
||||
arr = this.data[body.path] ? this.data[body.path] : [];
|
||||
return items.map(item => {
|
||||
const isLeaf = item.type === 0;
|
||||
if (!isLeaf) {
|
||||
return (
|
||||
<TreeNode
|
||||
icon={<IconFont type="icon-folder" />}
|
||||
isLeaf={isLeaf}
|
||||
title={renderNodeContent.call(this, item)}
|
||||
key={item.bookmarkId}
|
||||
dataRef={item}
|
||||
>
|
||||
{renderTreeNodes.call(this, item.children)}
|
||||
</TreeNode>
|
||||
);
|
||||
}
|
||||
arr.push(res);
|
||||
if (this.state.treeData.length === 0) {
|
||||
this.state.treeData.push(arr);
|
||||
}
|
||||
this.data[body.path] = arr;
|
||||
this.setState({ treeData: [...this.state.treeData], addType: 0, addName: "", addValue: "", isShowModal: false });
|
||||
return (
|
||||
<TreeNode
|
||||
icon={<IconFont type="icon-bookmark" />}
|
||||
isLeaf={isLeaf}
|
||||
title={renderNodeContent.call(this, item)}
|
||||
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));
|
||||
bookmarkIdList.forEach(item => set.add(item));
|
||||
folderIdList.forEach(item => set.add(parseInt(item)));
|
||||
bookmarkIdList.forEach(item => set.add(parseInt(item)));
|
||||
deleteTreeData(_this.state.treeData, set);
|
||||
_this.setState({ treeData: [..._this.state.treeData], checkedKeys: [] });
|
||||
resolve();
|
||||
|
||||
@ -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";
|
||||
|
||||
const { TreeNode } = Tree;
|
||||
import { batchDelete, renderTreeNodes, onExpand, closeAll, onCheck } from "./function.js";
|
||||
import AddModal from "./AddModal";
|
||||
|
||||
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,
|
||||
//新增类别
|
||||
addType: 0,
|
||||
addName: "",
|
||||
addValue: "",
|
||||
file: null
|
||||
currentAddFolder: null
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化第一级书签
|
||||
*/
|
||||
componentDidMount() {
|
||||
httpUtil
|
||||
.get("/bookmark/currentUser")
|
||||
.get("/bookmark/currentUser/path?path=")
|
||||
.then(res => {
|
||||
this.data = res;
|
||||
if (res[""]) {
|
||||
this.setState({ treeData: res[""] });
|
||||
}
|
||||
this.setState({ isLoading: false });
|
||||
this.setState({ treeData: res, 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]) {
|
||||
item.children = this.data[newPath];
|
||||
httpUtil.get("/bookmark/currentUser/path?path=" + newPath).then(res => {
|
||||
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] });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染树节点中节点内容
|
||||
* @param {*} item
|
||||
* 将新增的数据加入到state中
|
||||
*/
|
||||
renderNodeContent(item) {
|
||||
// const { isEdit } = this.state;
|
||||
// const bts = (
|
||||
// <div className={styles.btns}>
|
||||
// <Button size="small" type="primary" name="copy" icon="copy" shape="circle" />
|
||||
// <Button size="small" type="danger" id={item.bookmarkId} icon="delete" shape="circle" onClick={this.deleteOne} />
|
||||
// </div>
|
||||
// );
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Tooltip placement="bottom" title={item.url}>
|
||||
<span>{item.name}</span>
|
||||
</Tooltip>
|
||||
{/* {isEdit ? bts : null} */}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染树节点
|
||||
* @param {*} items
|
||||
*/
|
||||
renderTreeNodes(items) {
|
||||
if (!(items && items.length >= 0)) {
|
||||
return null;
|
||||
}
|
||||
return items.map(item => {
|
||||
const isLeaf = item.type === 0;
|
||||
if (!isLeaf) {
|
||||
return (
|
||||
<TreeNode icon={<IconFont type="icon-folder" />} isLeaf={isLeaf} title={item.name} key={item.bookmarkId} dataRef={item}>
|
||||
{this.renderTreeNodes(item.children)}
|
||||
</TreeNode>
|
||||
);
|
||||
addToTree = node => {
|
||||
const { currentAddFolder, treeData } = this.state;
|
||||
if (currentAddFolder === null) {
|
||||
treeData.push(node);
|
||||
} else {
|
||||
//存在children说明该子节点的孩子数据已经加载，需要重新将新的子书签加入进去
|
||||
if (currentAddFolder.children) {
|
||||
currentAddFolder.children.push(node);
|
||||
this.setState({ treeData: [...treeData] });
|
||||
}
|
||||
return (
|
||||
<TreeNode
|
||||
icon={<IconFont type="icon-bookmark" />}
|
||||
isLeaf={isLeaf}
|
||||
title={this.renderNodeContent(item)}
|
||||
key={item.bookmarkId}
|
||||
dataRef={item}
|
||||
/>
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭新增书签弹窗
|
||||
*/
|
||||
closeAddModal = () => {
|
||||
this.setState({ isShowModal: false });
|
||||
};
|
||||
|
||||
/**
|
||||
* 新增书签
|
||||
*/
|
||||
addOne = (item, e) => {
|
||||
e.stopPropagation();
|
||||
this.setState({ currentAddFolder: item, isShowModal: true });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { isLoading, isEdit, treeData, expandKeys, checkedKeys, isShowModal, addType, addValue, addName } = 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: []
|
||||
};
|
||||
const { isLoading, isEdit, treeData, expandKeys, checkedKeys, isShowModal, currentAddFolder } = this.state;
|
||||
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}
|
||||
|
||||
<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>
|
||||
<AddModal isShowModal={isShowModal} currentAddFolder={currentAddFolder} closeModal={this.closeAddModal} addToTree={this.addToTree} />
|
||||
</div>
|
||||
</MainLayout>
|
||||
);
|
||||
|
||||
@ -28,7 +28,10 @@
|
||||
|
||||
.btns {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -0.45em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.btns > button {
|
||||
margin-right: 0.4em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,7 +31,11 @@ class Login extends Component {
|
||||
}
|
||||
|
||||
valueChange = e => {
|
||||
this.setState({ [e.target.name]: e.target.value });
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user