Flask实现云栖笔记｜开箱即用网页版本地笔记本

Flask实现云栖笔记｜开箱即用网页版本地笔记本

标签：Python Flask SQLite 网页笔记 前后端分离

摘要：云栖笔记是开箱即用的网页版笔记本项目，基于Flask后端 + 原生HTML/CSS/JS前端，零前端构建依赖，SQLite本地存储，自带一键启动脚本，双击脚本直接打开浏览器使用，支持笔记自动保存、模糊搜索，适合学习Flask小型web开发，也可以当作本地简易笔记工具。

一、项目简介

云栖笔记是Python小项目集中的其中一个子项目，目录位于notebook/。

• 技术栈：后端Flask提供REST接口，前端原生三件套HTML+CSS+JavaScript，不需要Vue、React等构建工具。
• 存储：SQLite本地数据库，全部数据保存在本地，不需要部署数据库服务。
• 端口：默认8766
• 启动方式：目录自带start.py一键启动脚本，运行脚本自动唤起浏览器打开页面。
• 核心能力：网页端编写笔记、自动保存、笔记模糊搜索。

适合两类人群：

1. Python Flask初学者，学习小型web完整前后端交互，REST接口、sqlite数据库增删改查。
2. 需要轻量本地网页笔记工具，不想安装重型笔记软件，开箱即用。
   

二、项目整体架构

整体采用前后端分离模式：

1. 前端：纯静态HTML页面，浏览器完成渲染，JS调用后端接口完成新增、编辑、查询、搜索笔记。无打包编译，修改html/css直接生效。
2. 后端：Flask实现REST API，接收前端请求，完成SQLite数据库CRUD操作。
3. 数据库：SQLite文件数据库，不需要额外安装MySQL，整个数据库就是一个文件，迁移复制直接拷贝文件即可。
4. 启动脚本start.py：封装端口、host配置，启动Flask服务，服务成功之后自动调用系统接口打开浏览器访问页面。

项目目录结构

notebook/
├─ start.py          # 一键启动入口脚本
├─ app.py            # Flask后端主程序
├─ static/           # 静态资源 css js
├─ templates/        # html页面模板
└─ note.db           # SQLite数据库文件（运行后自动生成）

三、主要功能

1. ✅ 网页端新建笔记，编辑笔记内容
2. ✅ 自动保存：编辑内容自动保存到本地SQLite，不用手动点保存按钮
3. ✅ 模糊搜索：根据标题、内容模糊检索笔记，快速定位笔记
4. ✅ 笔记列表浏览，笔记删除
5. ✅ 一键启动，运行start.py自动打开浏览器，无需手动输入地址
6. ✅ 全部数据本地保存在note.db，不上传第三方服务器，隐私可控

对比传统笔记软件：不需要安装客户端，浏览器就是编辑器；对比在线笔记：所有数据存在本地文件，不用担心网络、账号、数据泄露。

四、环境准备与运行

1.依赖安装

只需要安装Flask

pip install flask

2.获取源码

仓库地址：https://gitee.com/ordinary-world3/my_progect_ceshi/tree/ceshi/notebook

把notebook整个文件夹下载到本地。

3.运行项目

进入notebook目录，执行启动脚本

python start.py

脚本执行完成，会自动打开浏览器访问 http://127.0.0.1:8766。

如果没有自动打开浏览器，可以手动访问：http://127.0.0.1:8766

首次运行会自动生成note.dbSQLite数据库文件，无需手动建表。

五、核心代码简单解析

start.py 一键启动脚本

import webbrowser
from app import app

if __name__ == '__main__':
    host = "127.0.0.1"
    port = 8766
    # 自动打开浏览器
    webbrowser.open(f"http://{host}:{port}")
    app.run(host=host,port=port,debug=True)

作用：启动flask服务，同时调用webbrowser模块，直接唤起浏览器访问页面，实现"开箱即用"体验。

后端核心要点（app.py）

• 使用Flask写REST接口，提供获取笔记列表、新增笔记、更新笔记、删除笔记、搜索笔记接口。
• 使用sqlite3操作数据库，程序首次运行自动初始化数据表。
• 返回JSON数据，交给前端JS处理。

简单示例接口片段：

from flask import Flask,request,jsonify,render_template
import sqlite3

app = Flask(__name__)

# 返回前端页面
@app.route("/")
def index():
    return render_template("index.html")

# 获取笔记列表接口
@app.route("/api/note/list")
def note_list():
    conn = sqlite3.connect("note.db")
    cur = conn.cursor()
    cur.execute("select id,title,content,createtime from note order by id desc")
    res = cur.fetchall()
    conn.close()
    return jsonify(res)

前端逻辑

templates/index.html里面原生JS，fetch调用后端接口：

• 页面加载完成，请求/api/note/list拿到全部笔记渲染列表
• 编辑区输入内容，触发自动保存，调用更新接口
• 搜索框输入关键词，调用模糊搜索接口，过滤笔记列表

六、学习拓展方向（适合二次开发）

拿到源码可以自行扩展功能：

1. Markdown渲染：引入marked.js，支持markdown笔记渲染
2. 笔记分类标签功能，数据库增加tag字段
3. 笔记导出，导出txt/md文件
4. 简单密码访问，增加基础登录
5. 修改start.py，修改端口，开启局域网访问，host="0.0.0.0"

七、总结

云栖笔记是非常适合练手的小型完整web项目：

1. 技术轻量化：Flask+SQLite，没有复杂依赖，零前端工程化，新手友好。
2. 完整闭环：从前端页面、ajax请求、后端接口、数据库存储，完整一套业务流程。
3. 开箱即用：start.py脚本一键启动，拿来就可以当本地简易笔记工具。
4. 数据本地SQLite存储，隐私安全。

---