fanxb/bookmark
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

✨ Feat: [前台]:书签树,增删查,点击复制链接完成

Browse Source
This commit is contained in:
fanxb 2019-07-15 18:21:19 +08:00
parent 122124d7bb
commit f1b5836cd5
9 changed files with 285 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
front/.gitignore vendored
View File

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

1
front/package.json
View File

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

3
front/public/index.html
View File

@ -19,7 +19,7 @@
work correctly both with client-side routing and a non-root public URL. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>签签世界</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <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 begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. 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> </body>
</html> </html>

11
front/src/App.jsx
View File

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

111
front/src/pages/manage/OverView/AddModal.jsx Normal file
View 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>
);
}
}

136
front/src/pages/manage/OverView/function.js
View File

@ -1,5 +1,9 @@
import httpUtil from "../../../util/httpUtil"; 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列表 * 选中的文件夹id列表
@ -10,11 +14,6 @@ let folderIdList = [];
*/ */
let bookmarkIdList = []; let bookmarkIdList = [];
/**
* 新增书签的父节点node
*/
let parentNode = null;
/** /**
* 展开/关闭 * 展开/关闭
* @param {*} keys * @param {*} keys
@ -39,71 +38,108 @@ export function onCheck(keys, data) {
this.setState({ checkedKeys: keys }); this.setState({ checkedKeys: keys });
bookmarkIdList = []; bookmarkIdList = [];
folderIdList = []; folderIdList = [];
parentNode = null;
data.checkedNodes.forEach(item => { data.checkedNodes.forEach(item => {
const bookmark = item.props.dataRef; const bookmark = item.props.dataRef;
parentNode = bookmark;
bookmark.type === 0 ? bookmarkIdList.push(bookmark.bookmarkId) : folderIdList.push(bookmark.bookmarkId); 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() { export function batchDelete() {
console.log("1"); deleteBookmark.call(this, folderIdList, bookmarkIdList);
}
/**
* 删除书签
* @param {*} folderIdList
* @param {*} bookmarkIdList
*/
function deleteBookmark(folderIdList, bookmarkIdList) {
const _this = this; const _this = this;
Modal.confirm({ Modal.confirm({
title: "确认删除？", title: "确认删除？",
@ -115,8 +151,8 @@ export function batchDelete() {
.then(() => { .then(() => {
//遍历节点树数据，并删除 //遍历节点树数据，并删除
const set = new Set(); 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); deleteTreeData(_this.state.treeData, set);
_this.setState({ treeData: [..._this.state.treeData], checkedKeys: [] }); _this.setState({ treeData: [..._this.state.treeData], checkedKeys: [] });
resolve(); resolve();

187
front/src/pages/manage/OverView/index.jsx
View File

@ -1,12 +1,10 @@
import React from "react"; 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 MainLayout from "../../../layout/MainLayout";
import httpUtil from "../../../util/httpUtil"; import httpUtil from "../../../util/httpUtil";
import IconFont from "../../../components/IconFont";
import styles from "./index.module.less"; 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 { export default class OverView extends React.Component {
constructor(props) { constructor(props) {
@ -17,131 +15,99 @@ export default class OverView extends React.Component {
isLoading: true, isLoading: true,
checkedKeys: [], checkedKeys: [],
expandKeys: [], expandKeys: [],
//显示新增弹窗 //是否显示新增书签弹窗
isShowModal: false, isShowModal: false,
//新增类别 currentAddFolder: null
addType: 0,
addName: "",
addValue: "",
file: null
}; };
} }
/**
* 初始化第一级书签
*/
componentDidMount() { componentDidMount() {
httpUtil httpUtil
.get("/bookmark/currentUser") .get("/bookmark/currentUser/path?path=")
.then(res => { .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 })); .catch(() => this.setState({ isLoading: false }));
} }
/**
* 异步加载
*/
loadData = e => loadData = e =>
new Promise(resolve => { new Promise(resolve => {
const item = e.props.dataRef; const item = e.props.dataRef;
const newPath = item.path + "." + item.bookmarkId; 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] }); this.setState({ treeData: [...this.state.treeData] });
resolve(); resolve();
} else { });
resolve();
}
}); });
/**
* 节点选择
* @param {*} key
* @param {*} e
*/
treeNodeSelect(key, e) { treeNodeSelect(key, e) {
if (e.nativeEvent.delegateTarget.name === "copy") {
return;
}
const { expandKeys } = this.state; const { expandKeys } = this.state;
const item = e.node.props.dataRef; const item = e.node.props.dataRef;
if (item.type === 0) { if (item.type === 0) {
window.open(item.url); window.open(item.url);
} else { } 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() { 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 ( return (
<MainLayout> <MainLayout>
<div className={styles.main}> <div className={styles.main}>
<div className={styles.header}> <div className={styles.header}>
<div className={styles.left}> <div className={styles.left}>
<span className={styles.myTree}>我的书签树</span> <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 ? ( {expandKeys.length > 0 ? (
<Button type="primary" size="small" onClick={closeAll.bind(this)}> <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 size="small" type="danger" onClick={batchDelete.bind(this)}>
删除选中 删除选中
</Button> </Button>
<Button size="small" type="primary" onClick={showAddModel.bind(this)}>
新增
</Button>
</React.Fragment> </React.Fragment>
) : null} ) : null}
<Button size="small" type="primary" onClick={() => this.setState({ isEdit: !isEdit })}> <Button size="small" type="primary" onClick={() => this.setState({ isEdit: !isEdit })}>
@ -164,7 +127,6 @@ export default class OverView extends React.Component {
</Button> </Button>
</div> </div>
</div> </div>
{/* {treeData.length ? ( */}
<Tree <Tree
showIcon showIcon
checkedKeys={checkedKeys} checkedKeys={checkedKeys}
@ -174,49 +136,14 @@ export default class OverView extends React.Component {
onExpand={onExpand.bind(this)} onExpand={onExpand.bind(this)}
defaultExpandParent defaultExpandParent
checkable={isEdit} checkable={isEdit}
onSelect={this.treeNodeSelect} onSelect={this.treeNodeSelect.bind(this)}
onDoubleClick={this.copyUrl} onDoubleClick={this.copyUrl}
blockNode blockNode
> >
{this.renderTreeNodes(treeData)} {renderTreeNodes.call(this, treeData)}
</Tree> </Tree>
{/* ) : null} */}
{isLoading === false && treeData.length === 0 ? <Empty description="还没有数据" /> : 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> </div>
</MainLayout> </MainLayout>
); );

7
front/src/pages/manage/OverView/index.module.less
View File

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

6
front/src/pages/public/Login/index.jsx
View File

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