Personal Bookmark Manager

on:: Index / Personal Bookmark Manager
updated:: 2022-11-14
status:: Closed

2023-02-20: 已放弃该项目，使用pinboard.in做为代替

Idea

我原先一直使用的是start.me 的书签管理，但网络访问一直不是很顺畅，加载的很慢，可能我的书签太多了吧，再加上最近一直弹窗广告。。。

所以就有了迁移的念头了，这几周试用过国内外不同的在线书签管理应用，但都没有一个能满足需求的

因此就萌生了这么个想法。

Build

下面介绍下主要的几个开发重点，如需查看具体的开发过程(流水账)，请查看这里。

首先，在Codepen上建个pen，方便实施查看，也不用本地搭建环境，在公司或者在家里都可以继续编程。

然后先用模板代码：

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"> 
    <title>My Bookmarks</title> 
  </head> 
  <body> 
    <header> 
      <nav> </nav> 
    </header> 
  <main> </main> 
  <footer> </footer> 
</body> 
</html>

是的，依旧使用Bulma的css框架， 真的很好用。

整体的UI设计参考Linkding的，简洁直观，个人很喜欢它的风格

我的设计呢，很简单，单栏模式，所有的操作均在当前页面上完成，减少跳转，比如点击书签编辑按钮，直接浮现对话框来修改。

经过几天的调试，整体效果如下：

发布第一版代码 ，并部署到Cloudflare的Pages上

接下来就是编写功能代码了，原先想直接使用Flask来搭建，毕竟用python真的很爽，但后来想了下，这个项目主要的目的是深入熟悉JavaScript和DOM，所以决定还是用纯js来实现。

考虑到数据存储，用SQLite最方便，但不知道cloudflare的Pages服务要怎么使用SQLite数据库。

搜索了下官方文档，发现还真可以，使用D1 databases即可实现，因为这个服务还是Alpha阶段，所以是免费的，看来还得做好备份。。

首先，创建个数据库

然后还需要创建个worker来供pages去操作这个db

创建完以后，进入Pages，选择对应的网站名称，进入Settings下的Funstions设置