🀡 Introduction (Name)

πŸ‘‰πŸ‘‰πŸ‘‰ Kestrel Bookmarks is a simple online bookmark navigation site. The origin of the name is actually, in line with the protection of animals, love animals, think of the name of a bird, in fact, the first to think of a lot of names, small Zhan bookmark, sparrow bookmark and so on.

But they don’t sound loud enough. Later, Pipi helped me think of a carnivorous, fierce and cute bird name, kestrel [English translation: Kestrel], thumbs up. So that’s the name, but it sounds good. So the development plan began.

Data Source (Impressed by Chinese)

His default data for me is the impression Chinese web navigation data; I actually collect more navigation data myself, but a lot of design goes into some of the company’s visiting websites. Think or calculate, so used the impression of Chinese data. It can modify data; Global search filter function; Single page to complete the logic is very simple, novice xiao Bai can also complete the second modification development; The granim plug-in is used to complete the background animation. More animations to choose from; Cool halo background animation effect.

πŸ’Ή features/features (cool halo background animation effect, can import browser data into LeanCloud)

  • βœ… 1. Synchronize the web navigation data of impression Chinese. Bookmarks can be added, modified and deleted
  • βœ… 2. Global search and filtering function; Local offline data persistence, bookmark add delete change check
  • βœ… 3. Log in to leanCloud to obtain the bookmark data saved in leanCloud and don’t worry about the loss of bookmark data
  • βœ… 4. Use granim plug-in to complete background animation; More animations to choose from;
  • βœ… 5. Support importing browser bookmark data (Google, Firefox) and storing it in LeanCloud;
  • βœ… 6. Register leanCloud and change the appId and appKey. Deploy bookmarks yourself;
  • βœ… 7. Adopt Vue3.0 Composition API; It is also a learning project for Vue3.0; Hope to help more friends who are learning VUe 3.0;

πŸ“ features under development

  • πŸ‘‰ Customize background image uploading
  • πŸ‘‰ Custom background animation effect
  • πŸ‘‰ Customize toolbar
  • πŸ‘‰ Import and parse browser bookmarks, which can be modified, deleted, and saved to LeanCloud
  • πŸ‘‰ Bookmarks support multiple layout styles (card, list, tree bookmark structure, etc.)
  • πŸ‘‰ support to modify the entire bookmark icon; The current use is a red dot icon, also pretty good;
  • .

πŸ’Œ bookmark

========⚑⚑⚑ Kestrel Bookmark Note: ⚑ This project will continue to add features, but continuous maintenance. If any problem is found, please leave a message or submit an issue. Thanks!!

πŸ“š Installation Procedure

  • 1. Cloning project gitee.com/zhanhongzhu…
  • 2. Access the project directorynpm install
  • 3. Start the projectnpm run serve
  • Localhost :8080 localhost:8080
  • 5. Pack the commandnpm run build

πŸš€ effect

πŸ˜„ source address

Completely open source, you can research, secondary development. Of course, you are still welcome to click Star⭐⭐⭐ πŸ‘‰ ⭐ source link (gitee) Source link (github) source link (Github)

The project structure

β”œβ”€ SRC β”œβ”€ Api β”‚ β”œβ”€ β”œβ”€ common.js β”‚ β”œβ”€ user.js β”‚ β”œβ”€ exercises β”‚ β”œβ”€ exercises β”‚ β”œβ”€ exercises β”‚ β”œβ”€ exercises β”‚ β”œβ”€ exercises β”‚ β”œβ”€ exercises β”‚ β”œβ”€ exercises β”‚ β”œβ”€ exercises β”‚ β”œβ”€ β”œβ”€ β”œβ”€ β”œβ”€ β”œβ”€ β”œβ”€ login. TXT // β”œβ”€ app.vue β”œβ”€ main.jsCopy the code

πŸ’‘ Project icon (ICONS can be modified later)

The kestrel bookmark uses iconfont, and the little sister is a pinellia duck. Thanks for the great icon design. ღ(Β΄ Β· α΄— Β· ‘)

I love this icon;

πŸ‘¨ little sister’s icon portfolio address icon portfolio address

πŸ˜€ Main functions

πŸ˜€1. Parse browser bookmarks into JSON data

Export function walkBookmarksTree(root) {const result = [] // list) => { const els = node.children if (els && els.length > 0) { for (let i = 0; i < els.length; I++) {const item = els [I] / / p tags or h3 tags just skip the if (item. TagName = = = 'p' | | item. TagName = = = 'h3') {continue} / / folder don't have to create the element if (item.tagName === 'DL') { walk(els[i], List)} else {// DT node 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}} / / folder 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) // Filter bookmarks that are not folders, Const myBookmark = result.filter(v => v.older) return flagBrowerList(myBookmark)}Copy the code

πŸ˜€2. Native Input file upload – Hide the Input label and click upload

< I class="el-icon-upload2" title=" importBookmark"> <input type="file" ref="filElem" id="file">Copy the code
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)) // })} else {elmessage. warning(' Please log in first ')}}Copy the code

πŸ˜„3. Access leanCloud to store Server Ess data

In fact, THIS part of the function has been simple encapsulation, it is very convenient to use, there are a lot of usage can refer to the leanCloud documentation, the specific usage is very detailed.

In fact, using the following several encapsulated functions, the basic can achieve a system to add, delete, change, or very fast and convenient. Data is stored in JSON data format.

πŸ˜„4.1 Object Storage public functions (passing in table names and stored data)

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) }) }) }Copy the code

πŸ˜„4.2 Obtaining the list data of the Object Store (passing in table names and conditions)

Export const getObject = (className, params) => {return new Promise((resolve, resolve)) Reject) => {const query = new av.query (className) // Query multiple conditions 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) }) }) }Copy the code

πŸ˜„4.3 Deleting object Data (passing in table name and data ID)

Export const deleteObject = (className, id) => {return new Promise((resolve, resolve) reject) => { const todo = AV.Object.createWithoutData(className, id) todo.destroy().then((res) => { resolve(res) }, (error) => { reject(error) }) }) }Copy the code

πŸ˜„4.4 Update object data (pass table name and stored data +ID)

// export const updateObject = (className, params) => {return new Promise((resolve, 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) }) }) }Copy the code

πŸ“–πŸ“–πŸ“– Others seem to be quite simple, ha ha ha, I am still learning Vue3.0, I often see a lot of leaders’ articles, such as Ruochuan, Yang Junning, Chokcoco and other leaders, continue to learn from them, come on, be a lifelong learner.

If you need any new requirements or designs, please send me an issue, thank you, or give a thumbs-up if you like.

πŸ’― thanks

It’s the first time to make an open source thing, I just want to do this small project well. Thanks for the reward [66.6] from [Blank I], I’m so excited. Keep up the good work and hope to make more refined open source works. Keep it up. πŸ˜€ πŸ˜€ πŸ˜€

πŸ˜€ Other links

  • My blog (collect study notes and official documents of various gods, highly recommended)
  • Kestrel bookmarks
  • The Denver nuggets
  • Think no
  • CSDN
  • Jane’s book
  • Language Sparrow (over 430 development notes)