💡 项目图标（后续支持修改图标）
红隼书签使用了的是iconfont图标,设计的小姐姐是是半夏鸭,设计的图标太棒了，在此表示感谢。ღ( ´･ᴗ･` )
很喜欢这个图标的；
👨小姐姐的图标作品集地址图标作品集地址
💡 主要代码
😀主要功能函数--1、解析浏览器书签为JSON数据
export function walkBookmarksTree(root) { const result = [] // 深度优先遍历 const walk = (node, list) => { const els = node.children if (els && els.length > 0) { for (let i = 0; i < els.length; i++) { const item = els[i] // p标签或h3标签直接跳过 if (item.tagName === 'P' || item.tagName === 'H3') { continue } // 文件夹不用创建元素 if (item.tagName === 'DL') { walk(els[i], list) } else { // DT节点 let child = null // 判断是否是文件夹 const children = item.children let isDir = false for (let j = 0; j < children.length; j++) { if (children[j].tagName === 'H3' || children[j].tagName === 'DL') { isDir = true } } // 文件夹 if (isDir) { child = { type: item.tagName === 'DT' ? item.querySelector('h3') ? item.querySelector('h3').innerText : '' : '', folder: true, children: [] } walk(els[i], child.children) } else { // 书签 const _item = item.querySelector('a') if (_item) { child = { title: _item?.innerText, url: _item?.href } } } child && list.push(child) } } } } walk(root, result) //过滤不为 folder的书签，保证书签能够识别 const myBookmark = result.filter(v => v.folder) return flagBrowerList(myBookmark) }
😀2、原生Input文件上传-隐藏input标签，实现点击上传
<i class="el-icon-upload2" title="导入浏览器书签" @click="importBookmark"> <input type="file" ref="filElem" id="file"> </i> // 导入书签 const 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 const formDatas = JSON.stringify(walkBookmarksTree(mybookmark)) //此处已经获取了我们上传的bookmark.html文件的内容了，并且已经格式化 }) } else { ElMessage.warning('请先登录') } }
😄3、接入leanCloud 实现serveless数据存储
其实这部分我已经进行了简单的函数封装，用起来是很方便的，还有很多用法可以参考leancloud文档,具体用法是非常详细的。
其实使用下面几个封装的函数，基本就可以实现一个系统的增删改查了，还是非常快速方便的。数据以JSON数据格式进行存储。
😄4.1 对象存储公共函数（传入表名和存储的数据）
import AV from 'leancloud-storage' // 对象存储公共函数 export const saveObject = (className, params) => { return new Promise((resolve, reject) => { const Todo = AV.Object.extend(className) const user = AV.User.current() var todo = new Todo() todo.set('formDatas', params.formDatas) todo.set('user', user) todo.save().then((res) => { resolve(res) }, (error) => { reject(error) }) }) }
😄4.2 获取对象存储的列表数据（传入表名和条件）
// 获取对象列表 export const getObject = (className, params) => { return new Promise((resolve, reject) => { const query = new AV.Query(className) // 查询多个条件 const user = AV.User.current() for (const v in params) { if (params[v]) { query.equalTo(v, params[v]) } } query.equalTo('user', user) query.find().then((res) => { resolve(res) }, (error) => { reject(error) }) }) }
😄4.3 删除对象数据（传入表名和数据ID）
// 删除对象 export const deleteObject = (className, id) => { return new Promise((resolve, reject) => { const todo = AV.Object.createWithoutData(className, id) todo.destroy().then((res) => { resolve(res) }, (error) => { reject(error) }) }) }
😄4.4 更新对象数据（传入表名和存的数据+ID）
// 更新对象 export const updateObject = (className, params) => { return new Promise((resolve, reject) => { const todo = AV.Object.createWithoutData(className, params.id) for (var i in params) { todo.set(i, params[i]) } todo.save().then((res) => { resolve(res) }, (error) => { reject(error) }) }) }
📖📖📖其他的好像都挺简单的，哈哈哈 ，目前也还在学习Vue3.0,经常看到很多大佬的文章，比如 若川，杨俊宁，chokcoco 等大佬，继续向他们学习，加油，做一个终身学习者。
需要什么新的需求或者设计，可以给我提issue,感谢，喜欢的也可以点个赞。
💯 致谢
第一次做一个开源的东西，只想把这个小项目做好，感谢 【空白i】 的打赏 【66.6】，太激动啦；继续加油，希望可以做出更多更精致开源的作品处理。继续加油。😀 😀 😀
