caojiezi2003/bookmark
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
CN32479-詹红柱 2021-08-19 16:17:49 +08:00
parent 39263dd9be
commit 1efc3b67b2
12 changed files with 130 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dist/css/app.7c24a282.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/css/app.7d81bd73.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/index.html vendored
View File

@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en" style="height: 100%;"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><link href="./static/css/bootstrap.css" rel="stylesheet"><link href="./static/css/style.css" rel="stylesheet"><link href="./static/css/index.css" rel="stylesheet"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><meta name="keywords" content="红隼书签, docschina, JavaScript, webpack, Node.js, Vue, React, Babel, Parcel, Rollup, RxJS, ECMAScript, Koa, Preact, PostCSS, 开源翻译, 开源技术文档, 中文文档, Web 前端中文文档, webpack 中文文档, doc.webpack-china.org, Node.js 中文文档, nodejs.cn, Vue.js 中文文档, vuefe.cn, React 中文文档, doc.react-china.org, Babel 中文文档, babeljs.cn, Parcel 中文文档, parceljs.io, Rollup 中文文档, rollupjs.cn, RxJS 中文文档, ECMAScript 中文文档, Koa 中文文档, koajs.cn, Preact 中文文档, Polymer, TypeScript, Element UI, iView UI, Vuetify, San, Lavas, Mint UI, Ant Design, ThinkJS, egg, Express, ESLint, 前端周刊, JavaScript Weekly, Node Weekly, Vue News, CSS Weekly, react status, Frontend Focus, Mobile Dev Weekly, Bitcoin Weekly, Golang Weekly"><meta name="description" content="红隼书签，深入挖掘国外前端新领域，为中国 Web 前端开发人员提供优质文档!!"><meta name="author" content="leehey, lizhihua, liqichang"><title>红隼书签-为中国 Web 前端开发人员提供优质网站导航</title><link href="css/app.7d81bd73.css" rel="preload" as="style"><link href="css/chunk-vendors.0d1c5105.css" rel="preload" as="style"><link href="js/app.d852d3ce.js" rel="preload" as="script"><link href="js/chunk-vendors.c88644cf.js" rel="preload" as="script"><link href="css/chunk-vendors.0d1c5105.css" rel="stylesheet"><link href="css/app.7d81bd73.css" rel="stylesheet"></head><body style="height:100%;margin: 0;"><noscript><strong>We're sorry but luotian-dev doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app" style="height: 100%;"></div><div id="mybookmark" style="height: 100%;display: none;opacity: 0;"></div><canvas id="canvas-complex" style="width:100vw;height:100vh;position: absolute;z-index:-99;top:0;opacity: 0.35;"></canvas><div class="demo-2"><div class="content"><div id="large-header" class="large-header"><canvas id="demo-canvas"></canvas></div></div></div><script src="./static/js/granim.min.js"></script><script src="./static/js/bg.js"></script><script>// 也可以切换成其他背景 <!DOCTYPE html><html lang="en" style="height: 100%;"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><link href="./static/css/bootstrap.css" rel="stylesheet"><link href="./static/css/style.css" rel="stylesheet"><link href="./static/css/index.css" rel="stylesheet"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><meta name="keywords" content="红隼书签, docschina, JavaScript, webpack, Node.js, Vue, React, Babel, Parcel, Rollup, RxJS, ECMAScript, Koa, Preact, PostCSS, 开源翻译, 开源技术文档, 中文文档, Web 前端中文文档, webpack 中文文档, doc.webpack-china.org, Node.js 中文文档, nodejs.cn, Vue.js 中文文档, vuefe.cn, React 中文文档, doc.react-china.org, Babel 中文文档, babeljs.cn, Parcel 中文文档, parceljs.io, Rollup 中文文档, rollupjs.cn, RxJS 中文文档, ECMAScript 中文文档, Koa 中文文档, koajs.cn, Preact 中文文档, Polymer, TypeScript, Element UI, iView UI, Vuetify, San, Lavas, Mint UI, Ant Design, ThinkJS, egg, Express, ESLint, 前端周刊, JavaScript Weekly, Node Weekly, Vue News, CSS Weekly, react status, Frontend Focus, Mobile Dev Weekly, Bitcoin Weekly, Golang Weekly"><meta name="description" content="红隼书签，深入挖掘国外前端新领域，为中国 Web 前端开发人员提供优质文档!!"><meta name="author" content="leehey, lizhihua, liqichang"><title>红隼书签-为中国 Web 前端开发人员提供优质网站导航</title><link href="css/app.7c24a282.css" rel="preload" as="style"><link href="css/chunk-vendors.0d1c5105.css" rel="preload" as="style"><link href="js/app.47d659b8.js" rel="preload" as="script"><link href="js/chunk-vendors.c88644cf.js" rel="preload" as="script"><link href="css/chunk-vendors.0d1c5105.css" rel="stylesheet"><link href="css/app.7c24a282.css" rel="stylesheet"></head><body style="height:100%;margin: 0;"><noscript><strong>We're sorry but luotian-dev doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app" style="height: 100%;"></div><div id="mybookmark" style="height: 100%;display: none;opacity: 0;"></div><canvas id="canvas-complex" style="width:100vw;height:100vh;position: absolute;z-index:-99;top:0;opacity: 0.35;"></canvas><div class="demo-2"><div class="content"><div id="large-header" class="large-header"><canvas id="demo-canvas"></canvas></div></div></div><script src="./static/js/granim.min.js"></script><script src="./static/js/bg.js"></script><script>// 也可以切换成其他背景
var granimInstance = new Granim({ var granimInstance = new Granim({
element: '#canvas-complex', element: '#canvas-complex',
direction: 'left-right', direction: 'left-right',
@ -18,4 +18,4 @@
] ]
} }
} }
});</script><script src="js/chunk-vendors.c88644cf.js"></script><script src="js/app.d852d3ce.js"></script></body></html> });</script><script src="js/chunk-vendors.c88644cf.js"></script><script src="js/app.47d659b8.js"></script></body></html>

2
dist/js/app.47d659b8.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/app.47d659b8.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
dist/js/app.d852d3ce.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/app.d852d3ce.js.map vendored
View File

File diff suppressed because one or more lines are too long

6
src/Api/common.js
View File

@ -5,10 +5,8 @@ export const saveObject = (className, params) => {
const Todo = AV.Object.extend(className) const Todo = AV.Object.extend(className)
const user = AV.User.current() const user = AV.User.current()
var todo = new Todo() var todo = new Todo()
for (var i in params) { todo.set('formDatas', params.formDatas)
todo.set(i, params[i]) todo.set('user', user)
}
todo.set(user, user)
todo.save().then((res) => { todo.save().then((res) => {
resolve(res) resolve(res)
}, (error) => { }, (error) => {

113
src/App.vue
View File

@ -72,7 +72,7 @@
<!-- 新增/修改弹窗 --> <!-- 新增/修改弹窗 -->
<Dialog class="my-dialog" v-model="isDetailVisible" @closeViews="closeViews" :detail="detail" :selectType="activeIndex" @fresh="search" /> <Dialog class="my-dialog" v-model="isDetailVisible" @closeViews="closeViews" :detail="detail" :selectType="activeIndex" @fresh="search" />
<!-- 登录弹窗 --> <!-- 登录弹窗 -->
<Login v-model="isLoginVisible" @closeViews="closeLoginViews" @setUser="setUsername"/> <Login v-model="isLoginVisible" @closeViews="closeLoginViews" @setUser="setUsername" />
</template> </template>
<script> <script>
import { reactive, toRefs } from '@vue/reactivity' import { reactive, toRefs } from '@vue/reactivity'
@ -82,22 +82,11 @@ import Dialog from './components/Dialog.vue'
import Login from './components/Login.vue' import Login from './components/Login.vue'
import gsap from 'gsap' import gsap from 'gsap'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import { importBookmark, exportBookmark, getRemoteList } from './components/utils.js' import { saveObject, getObject } from './Api/common.js'
import { exportBookmark, walkBookmarksTree } from './components/utils.js'
import Cookie from 'js-cookie' import Cookie from 'js-cookie'
import Api from './Api/user.js' import Api from './Api/user.js'
var rowData = [] var rowData = []
function getData(fn = () => {}) {
// 数据持久化
if (localStorage.getItem('BOOKMARK')) {
console.log('持久化数据')
rowData = JSON.parse(localStorage.getItem('BOOKMARK'))
} else {
localStorage.setItem('BOOKMARK', JSON.stringify(myData))
rowData = myData
}
fn()
}
getData()
export default { export default {
components: { Dialog, Login }, components: { Dialog, Login },
name: 'kestrel-bookmark', name: 'kestrel-bookmark',
@ -114,10 +103,10 @@ export default {
const data = reactive({ const data = reactive({
activeIndex: 0, activeIndex: 0,
data: rowData, data: [],
bookMark: rowData[0].children, bookMark: [],
searchVal: '', searchVal: '',
allData: flatten(rowData), allData: [],
isDetailVisible: false, isDetailVisible: false,
isLoginVisible: false, isLoginVisible: false,
detail: {}, detail: {},
@ -125,18 +114,59 @@ export default {
username: '未登录' username: '未登录'
} }
}) })
/*
**数据来源
1.未登录 缓存无数据 取默认
2.未登录 缓存有数据 取缓存
3.已登录 系统无数据 取默认
4.已登录 系统有数据 取系统数据
*/
const getBookmarkList = (fn = () => {}) => {
if (Cookie.get('userInfo')) {
data.userInfo = JSON.parse(Cookie.get('userInfo'))
}
if (!data.userInfo.objectId) {
if (localStorage.getItem('BOOKMARK')) {
rowData = JSON.parse(localStorage.getItem('BOOKMARK'))
} else {
localStorage.setItem('BOOKMARK', JSON.stringify(myData))
rowData = JSON.parse(JSON.stringify(myData))
}
data.data = rowData
data.bookMark = rowData[0].children
data.allData = flatten(rowData)
fn()
} else {
// 已登录 系统无数据
getObject('BOOKMARK').then((res) => {
if (res.length > 0) {
rowData = JSON.parse(res[0].attributes.formDatas)
} else {
localStorage.setItem('BOOKMARK', JSON.stringify(myData))
rowData = JSON.parse(JSON.stringify(myData))
}
}).catch(() => {
localStorage.setItem('BOOKMARK', JSON.stringify(myData))
rowData = JSON.parse(JSON.stringify(myData))
}).finally(() => {
fn()
data.data = rowData
data.bookMark = rowData[0].children
data.allData = flatten(rowData)
})
}
}
// 设置用户 // 设置用户
const setUsername = () => { const setUsername = () => {
if (Cookie.get('userInfo')) { if (Cookie.get('userInfo')) {
data.userInfo = JSON.parse(Cookie.get('userInfo')) data.userInfo = JSON.parse(Cookie.get('userInfo'))
} else { } else {
data.userInfo = {username: '未登录'} data.userInfo = { username: '未登录' }
} }
getBookmarkList()
} }
setUsername() setUsername()
getRemoteList()
// 全部数据筛选功能 // 全部数据筛选功能
watch( watch(
() => data.searchVal, () => data.searchVal,
@ -181,14 +211,14 @@ export default {
const closeViews = (v) => (data.isDetailVisible = v) const closeViews = (v) => (data.isDetailVisible = v)
const closeLoginViews = (v) => (data.isLoginVisible = v) const closeLoginViews = (v) => (data.isLoginVisible = v)
// 获取数据 // 获取书签分类数据
const search = async () => { const search = async () => {
await getData(() => { await getBookmarkList(() => {
data.data = rowData data.data = rowData
data.bookMark = rowData[data.activeIndex].children data.bookMark = rowData[data.activeIndex].children
}) })
} }
// 删除 // 删除书签
const deleteClick = (row) => { const deleteClick = (row) => {
const myData = JSON.parse(localStorage.getItem('BOOKMARK')) const myData = JSON.parse(localStorage.getItem('BOOKMARK'))
const delDetail = Object.assign(row, { const delDetail = Object.assign(row, {
@ -217,13 +247,12 @@ export default {
}).then(() => { }).then(() => {
const params = { username: '', password: '' } const params = { username: '', password: '' }
Api.logout(params.username, params.password).then((res) => { Api.logout(params.username, params.password).then((res) => {
console.log(res)
Cookie.remove('userInfo') Cookie.remove('userInfo')
setUsername() setUsername()
}) })
ElMessage({ ElMessage({
type: 'success', type: 'success',
message: '删除成功!' message: '已退出登录'
}) })
}) })
} }
@ -232,6 +261,38 @@ export default {
data.userInfo.objectId ? LoginOut() : handleUserLogin() data.userInfo.objectId ? LoginOut() : handleUserLogin()
} }
// 导入书签
const importBookmark = () => {
if (data.userInfo.objectId) {
const file = document.getElementById('file')
file.dispatchEvent(new MouseEvent('click'))
const mybookmark = document.getElementById('mybookmark')
document.getElementById('file').addEventListener('change', function () {
var file = document.getElementById('file').files[0]
var reader = new FileReader()
reader.readAsText(file, 'utf-8')
reader.onload = function () {
mybookmark.innerHTML = reader.result
const formDatas = JSON.stringify(walkBookmarksTree(mybookmark))
if (formDatas) {
const params = { formDatas: formDatas }
saveBookmarkList(params)
}
}
})
} else {
ElMessage.warning('请先登录')
}
}
// 书签数据存储
const saveBookmarkList = (params) => {
saveObject('BOOKMARK', params).then((res) => {
ElMessage.success('导入成功')
getBookmarkList()
})
}
return { return {
deleteClick, deleteClick,
...toRefs(data), ...toRefs(data),

1
src/components/Dialog.vue
View File

@ -112,7 +112,6 @@ export default {
} }
} else { } else {
// 新增书签 // 新增书签
console.log('---?')
if (v.type === formData.type) { if (v.type === formData.type) {
v.children.push(formData) v.children.push(formData)
ElMessage.success('新增成功') ElMessage.success('新增成功')

24
src/components/Login.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-dialog custom-class="my-dialog" title="用户登录" :visible="isLoginVisible" width="400px"> <el-dialog custom-class="my-dialog" title="用户登录" :visible="isLoginVisible" width="400px">
<el-form status-icon ref="refruleForm" :rules="rules" :model="ruleForm" label-width="80px" size="small"> <el-form status-icon ref="refruleForm" :rules="rules" :model="ruleForm" label-width="60px" size="small">
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="邮箱" prop="email"> <el-form-item label="邮箱" prop="email">
@ -50,7 +50,7 @@ export default {
// 定义校验规则 表单代码中必须以 :rules 接收 // 定义校验规则 表单代码中必须以 :rules 接收
const rules = { const rules = {
password: [{ required: true, message: '请输入密码', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
email: [{type: 'email', required: true, message: '请输入邮箱', trigger: 'blur' }] email: [{type: 'email', required: true, message: '请输入正确的邮箱', trigger: 'blur' }]
} }
const refruleForm = ref(null) const refruleForm = ref(null)
// 确定按钮的格式 // 确定按钮的格式
@ -60,18 +60,22 @@ export default {
const formData = { ...form.ruleForm } const formData = { ...form.ruleForm }
Api.login(formData.email, formData.password) Api.login(formData.email, formData.password)
.then((res) => { .then((res) => {
// 存储token
Cookie.set('userInfo', JSON.stringify(res)) Cookie.set('userInfo', JSON.stringify(res))
context.emit('setUser')
ElMessage.success('登录成功') ElMessage.success('登录成功')
closeViews() closeViews()
}) })
.catch(() => { .catch((err) => {
Api.register(formData.email, formData.password).then((res) => { if (err.code === 210) {
Cookie.set('userInfo', JSON.stringify(res)) ElMessage.error('账号或密码不正确')
context.emit('setUser') } else if (err.code === 211) {
ElMessage.success('注册成功') Api.register(formData.email, formData.password).then((res) => {
closeViews() Cookie.set('userInfo', JSON.stringify(res))
}) context.emit('setUser')
ElMessage.success('注册成功')
closeViews()
})
}
}) })
} }
}) })

57
src/components/utils.js
View File

@ -1,7 +1,5 @@
import {saveObject, getObject} from '../Api/common.js' // 格式化浏览器书签
import { ElMessage } from 'element-plus' export function walkBookmarksTree(root) {
function walkBookmarksTree(root) {
const result = [] const result = []
// 深度优先遍历 // 深度优先遍历
const walk = (node, list) => { const walk = (node, list) => {
@ -29,7 +27,7 @@ function walkBookmarksTree(root) {
// 文件夹 // 文件夹
if (isDir) { if (isDir) {
child = { child = {
name: item.tagName === 'DT' ? item.querySelector('h3') ? item.querySelector('h3').innerText : '' : '', type: item.tagName === 'DT' ? item.querySelector('h3') ? item.querySelector('h3').innerText : '' : '',
folder: true, folder: true,
children: [] children: []
} }
@ -38,7 +36,7 @@ function walkBookmarksTree(root) {
const _item = item.querySelector('a') const _item = item.querySelector('a')
if (_item) { if (_item) {
child = { child = {
name: _item?.innerText, title: _item?.innerText,
url: _item?.href url: _item?.href
} }
} }
@ -49,33 +47,27 @@ function walkBookmarksTree(root) {
} }
} }
walk(root, result) walk(root, result)
return result const myBookmark = result.filter(v => v.folder)
return flagBrowerList(myBookmark)
} }
// 导入 // 降维书签数据
export function importBookmark() { const flagBrowerList = v => {
const file = document.getElementById('file') const res = []
file.dispatchEvent(new MouseEvent('click')) const flatten = (v) => {
const mybookmark = document.getElementById('mybookmark') for (let i = 0; i < v.length; i++) {
document.getElementById('file').addEventListener('change', function () { if (v[i].folder) {
var file = document.getElementById('file').files[0] flatten(v[i].children)
var reader = new FileReader() const result = v[i]
reader.readAsText(file, 'utf-8') result.children = result.children.filter(v => !v.folder)
reader.onload = function () { res.push(result)
mybookmark.innerHTML = reader.result }
console.log(walkBookmarksTree(mybookmark))
const formDatas = localStorage.getItem('BOOKMARK')
const params = {formDatas: formDatas}
console.log(params)
saveObject('BOOKMARK', params).then(res => {
console.log('导入成功', res)
ElMessage.success('导入成功')
})
// const myData = walkBookmarksTree(mybookmark)
// myData && localStorage.setItem('BOOKMARK', myData)
} }
}) }
flatten(v)
return res
} }
// 导出数据为JSON下载 // 导出数据为JSON下载
export function exportBookmark() { export function exportBookmark() {
if (localStorage.getItem('BOOKMARK')) { if (localStorage.getItem('BOOKMARK')) {
@ -95,10 +87,3 @@ export function exportBookmark() {
this.$message.warning('暂无可导出数据') this.$message.warning('暂无可导出数据')
} }
} }
// 获取远程书签
export const getRemoteList = () => {
getObject('BOOKMARK').then(res => {
console.log('获取书签', res)
})
}