跨浏览器免费书签管理系统

news2024/10/22 9:48:50

随着互联网信息的爆炸式增长，如何有效管理我们日常浏览中发现的重要网页，成为了每个重度互联网用户的需求。一个跨平台的书签管理网站能够帮助用户在不同设备之间无缝同步和管理书签。本文将分享如何使用 Python 和 SQLite 构建一个简单、易于维护的跨平台书签管理网站。

欢迎使用极星书签：https://navfinder.cn/

在这里插入图片描述

功能介绍：
1、输入地址，自动获取网站title,描述，icon等。支持自定义描述说明
2、支持全局搜索
3、支持分类保存，分类卡片模式探索某事和简约模式。更方便直观查找
4、支持收藏分享
5、跨浏览器
6、免费

项目概述

我们将构建一个跨平台的书签管理工具，使用 SQLite 作为数据库，Python 作为后端的核心技术。这个工具的特点在于轻量化和易于扩展，用户能够通过网页界面管理书签，并且能够支持在手机、平板、电脑等多个平台使用。

技术栈选择

后端：Python
数据库：SQLite
前端：HTML5 + CSS3 + JavaScript（可选）
Web 框架：Flask（Python 简单且轻量的 Web 框架）

为什么选择 SQLite？

轻量级：SQLite 是一个非常轻量的数据库，它直接嵌入到应用程序中，并且无需单独的数据库服务器，适合个人或小型团队的项目。
跨平台：SQLite 是一个文件数据库，任何支持 SQLite 的操作系统都可以使用同一份数据库文件。
简单：SQLite 易于集成，与 Python 的标准库 sqlite3 模块直接配合，极大减少了数据库配置和管理的复杂性。

步骤一：准备工作

安装必要的依赖包

首先，我们需要安装 Python 和一些必备的依赖库。确保安装了 Flask 和 SQLite 的支持库。

pip install flask

SQLite 不需要额外的安装，因为 Python 标准库中已经内置了 sqlite3 模块。

步骤二：创建 SQLite 数据库

书签数据需要持久化存储，首先我们需要创建 SQLite 数据库，并定义一张书签表，包含以下字段：

ID：主键，唯一标识
Title：书签标题
URL：书签链接
Description：书签描述
Date Added：添加书签的日期

我们可以创建一个 init_db.py 脚本来初始化数据库：

import sqlite3

def create_database():
    connection = sqlite3.connect('bookmarks.db')
    cursor = connection.cursor()
    
    cursor.execute('''
    CREATE TABLE IF NOT EXISTS bookmarks (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        title TEXT NOT NULL,
        url TEXT NOT NULL,
        description TEXT,
        date_added TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    )
    ''')
    
    connection.commit()
    connection.close()

if __name__ == '__main__':
    create_database()

运行 init_db.py 后，将生成一个名为 bookmarks.db 的 SQLite 数据库文件。

步骤三：创建 Flask 应用

接下来，我们创建一个简单的 Flask 应用，提供书签的 CRUD（创建、读取、更新、删除）操作。以下是一个基本的 Flask 应用结构：

from flask import Flask, render_template, request, redirect, url_for
import sqlite3

app = Flask(__name__)

def get_db_connection():
    conn = sqlite3.connect('bookmarks.db')
    conn.row_factory = sqlite3.Row
    return conn

@app.route('/')
def index():
    conn = get_db_connection()
    bookmarks = conn.execute('SELECT * FROM bookmarks').fetchall()
    conn.close()
    return render_template('index.html', bookmarks=bookmarks)

@app.route('/add', methods=('GET', 'POST'))
def add():
    if request.method == 'POST':
        title = request.form['title']
        url = request.form['url']
        description = request.form['description']
        
        conn = get_db_connection()
        conn.execute('INSERT INTO bookmarks (title, url, description) VALUES (?, ?, ?)',
                     (title, url, description))
        conn.commit()
        conn.close()
        return redirect(url_for('index'))

    return render_template('add.html')

if __name__ == '__main__':
    app.run(debug=True)

步骤四：前端界面设计

在前端部分，我们使用简单的 HTML 页面展示书签数据，并提供添加书签的表单。以下是基本的前端模板 index.html 和 add.html：

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bookmarks</title>
</head>
<body>
    <h1>My Bookmarks</h1>
    <ul>
        {% for bookmark in bookmarks %}
        <li>
            <a href="{{ bookmark['url'] }}">{{ bookmark['title'] }}</a> - {{ bookmark['description'] }}
        </li>
        {% endfor %}
    </ul>
    <a href="{{ url_for('add') }}">Add a new bookmark</a>
</body>
</html>

add.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Bookmark</title>
</head>
<body>
    <h1>Add Bookmark</h1>
    <form method="POST">
        <label for="title">Title:</label>
        <input type="text" id="title" name="title"><br>
        
        <label for="url">URL:</label>
        <input type="url" id="url" name="url"><br>
        
        <label for="description">Description:</label>
        <textarea id="description" name="description"></textarea><br>
        
        <button type="submit">Add</button>
    </form>
</body>
</html>