no message
This commit is contained in:
CN32479-詹红柱
parent
39263dd9be
commit
1efc3b67b2
1
dist/css/app.7c24a282.css
vendored
Normal file
1
dist/css/app.7c24a282.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/css/app.7d81bd73.css
vendored
1
dist/css/app.7d81bd73.css
vendored
File diff suppressed because one or more lines are too long
4
dist/index.html
vendored
4
dist/index.html
vendored
@ -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({
|
||||
element: '#canvas-complex',
|
||||
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
2
dist/js/app.47d659b8.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/js/app.47d659b8.js.map
vendored
Normal file
1
dist/js/app.47d659b8.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/js/app.d852d3ce.js
vendored
2
dist/js/app.d852d3ce.js
vendored
File diff suppressed because one or more lines are too long
1
dist/js/app.d852d3ce.js.map
vendored
1
dist/js/app.d852d3ce.js.map
vendored
File diff suppressed because one or more lines are too long
@ -5,10 +5,8 @@ export const saveObject = (className, params) => {
|
||||
const Todo = AV.Object.extend(className)
|
||||
const user = AV.User.current()
|
||||
var todo = new Todo()
|
||||
for (var i in params) {
|
||||
todo.set(i, params[i])
|
||||
}
|
||||
todo.set(user, user)
|
||||
todo.set('formDatas', params.formDatas)
|
||||
todo.set('user', user)
|
||||
todo.save().then((res) => {
|
||||
resolve(res)
|
||||
}, (error) => {
|
||||
|
||||
113
src/App.vue
113
src/App.vue
@ -72,7 +72,7 @@
|
||||
<!-- 新增/修改弹窗 -->
|
||||
<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>
|
||||
<script>
|
||||
import { reactive, toRefs } from '@vue/reactivity'
|
||||
@ -82,22 +82,11 @@ import Dialog from './components/Dialog.vue'
|
||||
import Login from './components/Login.vue'
|
||||
import gsap from 'gsap'
|
||||
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 Api from './Api/user.js'
|
||||
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 {
|
||||
components: { Dialog, Login },
|
||||
name: 'kestrel-bookmark',
|
||||
@ -114,10 +103,10 @@ export default {
|
||||
|
||||
const data = reactive({
|
||||
activeIndex: 0,
|
||||
data: rowData,
|
||||
bookMark: rowData[0].children,
|
||||
data: [],
|
||||
bookMark: [],
|
||||
searchVal: '',
|
||||
allData: flatten(rowData),
|
||||
allData: [],
|
||||
isDetailVisible: false,
|
||||
isLoginVisible: false,
|
||||
detail: {},
|
||||
@ -125,18 +114,59 @@ export default {
|
||||
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 = () => {
|
||||
if (Cookie.get('userInfo')) {
|
||||
data.userInfo = JSON.parse(Cookie.get('userInfo'))
|
||||
} else {
|
||||
data.userInfo = {username: '未登录'}
|
||||
data.userInfo = { username: '未登录' }
|
||||
}
|
||||
getBookmarkList()
|
||||
}
|
||||
setUsername()
|
||||
|
||||
getRemoteList()
|
||||
|
||||
// 全部数据筛选功能
|
||||
watch(
|
||||
() => data.searchVal,
|
||||
@ -181,14 +211,14 @@ export default {
|
||||
const closeViews = (v) => (data.isDetailVisible = v)
|
||||
const closeLoginViews = (v) => (data.isLoginVisible = v)
|
||||
|
||||
// 获取数据
|
||||
// 获取书签分类数据
|
||||
const search = async () => {
|
||||
await getData(() => {
|
||||
await getBookmarkList(() => {
|
||||
data.data = rowData
|
||||
data.bookMark = rowData[data.activeIndex].children
|
||||
})
|
||||
}
|
||||
// 删除
|
||||
// 删除书签
|
||||
const deleteClick = (row) => {
|
||||
const myData = JSON.parse(localStorage.getItem('BOOKMARK'))
|
||||
const delDetail = Object.assign(row, {
|
||||
@ -217,13 +247,12 @@ export default {
|
||||
}).then(() => {
|
||||
const params = { username: '', password: '' }
|
||||
Api.logout(params.username, params.password).then((res) => {
|
||||
console.log(res)
|
||||
Cookie.remove('userInfo')
|
||||
setUsername()
|
||||
})
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
message: '已退出登录'
|
||||
})
|
||||
})
|
||||
}
|
||||
@ -232,6 +261,38 @@ export default {
|
||||
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 {
|
||||
deleteClick,
|
||||
...toRefs(data),
|
||||
|
||||
@ -112,7 +112,6 @@ export default {
|
||||
}
|
||||
} else {
|
||||
// 新增书签
|
||||
console.log('---?')
|
||||
if (v.type === formData.type) {
|
||||
v.children.push(formData)
|
||||
ElMessage.success('新增成功')
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<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-col :span="24">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
@ -50,7 +50,7 @@ export default {
|
||||
// 定义校验规则 表单代码中必须以 :rules 接收
|
||||
const rules = {
|
||||
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)
|
||||
// 确定按钮的格式
|
||||
@ -60,18 +60,22 @@ export default {
|
||||
const formData = { ...form.ruleForm }
|
||||
Api.login(formData.email, formData.password)
|
||||
.then((res) => {
|
||||
// 存储token
|
||||
Cookie.set('userInfo', JSON.stringify(res))
|
||||
context.emit('setUser')
|
||||
ElMessage.success('登录成功')
|
||||
closeViews()
|
||||
})
|
||||
.catch(() => {
|
||||
Api.register(formData.email, formData.password).then((res) => {
|
||||
Cookie.set('userInfo', JSON.stringify(res))
|
||||
context.emit('setUser')
|
||||
ElMessage.success('注册成功')
|
||||
closeViews()
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err.code === 210) {
|
||||
ElMessage.error('账号或密码不正确')
|
||||
} else if (err.code === 211) {
|
||||
Api.register(formData.email, formData.password).then((res) => {
|
||||
Cookie.set('userInfo', JSON.stringify(res))
|
||||
context.emit('setUser')
|
||||
ElMessage.success('注册成功')
|
||||
closeViews()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import {saveObject, getObject} from '../Api/common.js'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
function walkBookmarksTree(root) {
|
||||
// 格式化浏览器书签
|
||||
export function walkBookmarksTree(root) {
|
||||
const result = []
|
||||
// 深度优先遍历
|
||||
const walk = (node, list) => {
|
||||
@ -29,7 +27,7 @@ function walkBookmarksTree(root) {
|
||||
// 文件夹
|
||||
if (isDir) {
|
||||
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,
|
||||
children: []
|
||||
}
|
||||
@ -38,7 +36,7 @@ function walkBookmarksTree(root) {
|
||||
const _item = item.querySelector('a')
|
||||
if (_item) {
|
||||
child = {
|
||||
name: _item?.innerText,
|
||||
title: _item?.innerText,
|
||||
url: _item?.href
|
||||
}
|
||||
}
|
||||
@ -49,33 +47,27 @@ function walkBookmarksTree(root) {
|
||||
}
|
||||
}
|
||||
walk(root, result)
|
||||
return result
|
||||
const myBookmark = result.filter(v => v.folder)
|
||||
return flagBrowerList(myBookmark)
|
||||
}
|
||||
|
||||
// 导入
|
||||
export function importBookmark() {
|
||||
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
|
||||
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)
|
||||
// 降维书签数据
|
||||
const flagBrowerList = v => {
|
||||
const res = []
|
||||
const flatten = (v) => {
|
||||
for (let i = 0; i < v.length; i++) {
|
||||
if (v[i].folder) {
|
||||
flatten(v[i].children)
|
||||
const result = v[i]
|
||||
result.children = result.children.filter(v => !v.folder)
|
||||
res.push(result)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
flatten(v)
|
||||
return res
|
||||
}
|
||||
|
||||
// 导出数据为JSON下载
|
||||
export function exportBookmark() {
|
||||
if (localStorage.getItem('BOOKMARK')) {
|
||||
@ -95,10 +87,3 @@ export function exportBookmark() {
|
||||
this.$message.warning('暂无可导出数据')
|
||||
}
|
||||
}
|
||||
|
||||
// 获取远程书签
|
||||
export const getRemoteList = () => {
|
||||
getObject('BOOKMARK').then(res => {
|
||||
console.log('获取书签', res)
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user