每個瀏覽器上面都會有個書簽可以供你收藏你以后可能還要用到的網(wǎng)址。但是你可能還是會遇到下列問題：
1、如果你重裝系統(tǒng)，或者換瀏覽器怎么辦？
2、如果你有多個瀏覽器書簽該如何整合？
3、如何快速搜索保存的書簽？比如我只想搜索某個時間段保存的書簽？
4、如果一個分類下面書簽過多，如何方便快速查看？
5、我能不能查看別人收藏的書簽？
6、在其他地方上網(wǎng)的時候能不能查看我自己的書簽？
7、如果公用一臺電腦，如何區(qū)分我收藏的跟別人收藏的書簽？
在線書簽管理工具，幫助你快速記錄你喜歡的網(wǎng)站，并可以隨時隨地查看這些站點，而不必拘泥于使用的瀏覽器。無論在什么地方，只要能接入網(wǎng)絡(luò)，就能打開屬于你自己的網(wǎng)絡(luò)書簽，看到自己收藏的頁面網(wǎng)址。
3 主要功能(開發(fā)計劃)（已完成）
- ?需要注冊賬號用戶。
- ?網(wǎng)站展示有三種展示方式：導(dǎo)航，標(biāo)簽，列表。其中導(dǎo)航以分類展示，分類順序可以在書簽分類下面拖動編輯。按照點擊的次數(shù)從高到低在每個分類里面提取16個書簽，再按照最近添加的書簽提取前面的16個書簽，然后合并起來。標(biāo)簽是一個快捷方式。列表以表格展示，顯示書簽詳細(xì)類容，按照點擊次數(shù)優(yōu)先顯示，點擊次數(shù)相同，則按添加順序優(yōu)先。這幾種展示方式，可以在設(shè)置里面默認(rèn)一種你常用的方式。
- ?在書簽分類里面，可以更新分類，刪除分類，新增分類，對分類顯示進(jìn)行排序。分類的標(biāo)簽?zāi)J(rèn)按照添加日期展示，但是可以點擊表格的標(biāo)題，按照點擊次數(shù)，添加日期，最后點擊從大到小進(jìn)行排序。
- ?可以按照指定添加時間段，指定分類目錄，指定網(wǎng)址關(guān)鍵字等進(jìn)行查詢。
- ?添加書簽的時候，會自動獲取title，供用戶編輯。其中：Insert鍵打開添加頁面，再次按Insert鍵保存書簽，Esc取消添加。
- ?可以導(dǎo)入Chrome的書簽導(dǎo)出文件，暫時做在設(shè)置里面。
- ?書簽可以作為公有或者私有，公有可供所有人搜索。
- ?可以將搜索到其他用戶的書簽轉(zhuǎn)存為自己的書簽。
- ?可以將書簽導(dǎo)出來，然后導(dǎo)入到瀏覽器。
- ?在熱門標(biāo)簽里面，有在網(wǎng)上找的熱門書簽。可以轉(zhuǎn)存收藏到自己書簽里面，快捷鍵R隨機查看熱門書簽。
- ?新增備忘錄功能，有時候隨手要做點紀(jì)錄，就方便了。任意界面按快捷鍵A增加備忘錄。雙擊備忘錄可查看詳情！亦可分享備忘。
- ?在設(shè)置的全局鏈接，可設(shè)置快捷鍵，用來在任何頁面，快速打開設(shè)置的鏈接。
- ?增加Chrome插件，可在任意界面快速添加書簽至系統(tǒng)。
- ?適配手機平板，手機端請訪問m.mybookmark.cn。
主要用到的軟件與模塊說明
Node.js：v8.12.0?用來做后臺服務(wù)。
MySQL:?v5.7.23用來做數(shù)據(jù)存儲。
AngularJS：v1.5.8前端JavaScript框架。
jQuery:?v3.1.1本來用了AngularJS是不需要再使用jQuery了的。但是有些功能AngularJS要大費周章才能完成，jQuery一句代碼就能解決。所以還是忍不住將它導(dǎo)入了進(jìn)來。
Redis：v3.0.6后臺保存登陸的session。
Semantic：v2.4.0由于沒有美工人員，自己開發(fā)的，不想界面太丑，用了這套UI。
?目錄結(jié)構(gòu)
my-bookmark/
├── bin/ # 應(yīng)用啟動文件夾
│ └── www # 后臺啟動文件
├── common/ # 自己寫的一些模塊
│ └── parse_html.js # 用來解析從瀏覽器導(dǎo)出來的書簽文件
├── database/ # 數(shù)據(jù)庫相關(guān)操作文件夾
│ └── db.js # 所有數(shù)據(jù)庫的操作都在這里
├── node_modules/ # nodejs模塊安裝文件夾
│ ├── express/ # 一個nodejs Web 應(yīng)用程序框架
│ ├── ..... # 其他nodejs用到的包
│ └── mysql/ # mysql包
├── public/ # 網(wǎng)站實現(xiàn)文件夾
│ ├── css/ # 樣式表文件夾
│ │ ├── externe/ # 外部引入引來的css文件
│ │ └── style.css # 自己寫的css文件
│ ├── images/ # 圖片文件夾
│ │ ├── favicon/ # 下載書簽的favicon文件夾
│ │ ├── snap/ # 書簽的截圖文件夾
│ │ ├── ..... # 其他圖片文件
│ │ ├── screenshot.png # 應(yīng)用截圖，Github展示
│ │ └── edit.png # 編輯圖片
│ ├── scripts/ # 前端邏輯實現(xiàn)的JS文件以及引入的JS文件
│ │ ├── controllers/ # 所有的AngularJS控制器
│ │ │ ├── advice-controller.js # 留言頁面控制器
│ │ │ ├── bookmark-info-controller.js # 書簽詳情頁面控制器
│ │ │ ├── bookmarks-controller.js # 書簽頁面控制器
│ │ │ ├── edit-controller.js # 編輯書簽頁面控制器
│ │ │ ├── home-controller.js # 未登錄時首頁頁面控制器
│ │ │ ├── weixin-article-controller.js # 熱門收藏頁面控制器
│ │ │ ├── login-controller.js # 登陸注冊頁面控制器
│ │ │ ├── menus-controller.js # 菜單欄控制器
│ │ │ ├── note-controller.js # 備忘錄控制器
│ │ │ ├── praise-controller.js # 贊賞控制器
│ │ │ ├── search-controller.js # 搜索書簽頁面控制器
│ │ │ ├── settings-controller.js # 設(shè)置頁面控制器
│ │ │ └── tags-controller.js # 分類頁面控制器
│ │ ├── directives/ # 所有的AngularJS指令
│ │ │ ├── js-init-directive.js # 一些初始化指令
│ │ │ └── module-directive.js # 模塊指令(如：分頁模塊等)
│ │ ├── externe/ # 外部引入的JS文件
| | | ├── angular.min.js # angular文件
| | | ├── angular-cookies.min.js # angular前臺cookies模塊
| | | ├── angular-sortable-view.min.js # 可以拖拽元素的控件，用于分類頁面
| | | ├── angular-ui-router.min.js # angular web客戶端的路由
| | | ├── calendar.min.js # 一個日歷控件，用于搜索頁面
| | | ├── clipboard.min.js # 用于復(fù)制粘貼庫，不需要flash
| | | ├── jquery.form.js # 表單異步提交(想不起哪里用了)
| | | ├── jquery.uploadfile.min.js # 文件上傳控件，用于上傳瀏覽器導(dǎo)出書簽
| | | ├── jquery-3.1.1.min.js # jquery文件
| | | ├── ngDialog.min.js # 一個angular對話框控件
| | | ├── ng-infinite-scroll.min.js # 一個angular無限滾動加載數(shù)據(jù)控件
| | | ├── semantic.min.js # semantic文件
| | | ├── timeago.min.js # 一個將時間戳轉(zhuǎn)換成易讀的時間軸
| | | └── toastr.min.js # 一個消息提示插件
│ │ ├── services/ # 所有的AngularJS服務(wù)文件
| | | ├── bookmark-service.js # 前端與后端交互服務(wù)
| | | ├── data-service.js # 數(shù)據(jù)服務(wù)(本來想將一些數(shù)據(jù)結(jié)構(gòu)放這里)
| | | └── pub-sub-service.js # 控制器之間消息通訊服務(wù)組件
│ │ └── app-angular.js # AngularJS路由配置文件
│ ├── views # 頁面實現(xiàn)文件
| | ├── advice.html # 留言頁面
| | ├── bookmark-info.html # 書簽詳情頁面
| | ├── bookmarks.html # 書簽頁面
| | ├── dialog-add-tag.html # 分類添加頁面
| | ├── dialog-del-bookmark.html # 書簽刪除確認(rèn)頁面
| | ├── dialog-del-note.html # 備忘錄刪除確認(rèn)頁面
| | ├── dialog-del-tag.html # 分類刪除確認(rèn)頁面
| | ├── edit.html # 書簽添加修改頁面
| | ├── home.html # 未登錄時首頁頁面
| | ├── weixin-article.html # 熱門收藏頁面
| | ├── login.html # 登陸注冊頁面
| | ├── menus.html # 菜單組件
| | ├── note.html # 備忘錄頁面
| | ├── pagination.html # 分頁組件
| | ├── praise.html # 贊賞頁面
| | ├── search.html # 搜索書簽頁面
| | ├── settings.html # 設(shè)置頁面
| | └── tags.html # 分類頁面
│ ├── favicon.ico # 網(wǎng)站favicon
│ └── index.html # 前端單頁面應(yīng)用主頁
├── routes/ # 路由文件夾
│ └── api.js # 整個應(yīng)用路由實現(xiàn)
├── uploads/ # 文件上傳文件夾
├── app.js # app文件
├── package.json # nodejs package文件
├── README.md # 項目工程說明文件
└── schema.sql # mysql數(shù)據(jù)庫建表文件
6 用到的Node.js模塊說明
"body-parser": bodyParser用于解析客戶端請求的body中的內(nèi)容,內(nèi)部使用JSON編碼處理
"connect-redis": 用于將session存入Redis
"cheerio": 用于后端的jQuery，解析從瀏覽器導(dǎo)出來上傳到服務(wù)器的書簽html文件
"cookie-parser": 處理每一個請求的cookie
"crypto": 加密模塊，主要用來加密用戶的密碼
"debug": Node.js后臺日志模塊，bin/www用到。
"download": 主要用來下載書簽的favicon文件
"express": Web 應(yīng)用程序框架
"express-session": session模塊
"js-beautify": 用來格式化導(dǎo)出的書簽的html文件
"morgan": 一個Node.js關(guān)于http請求的日志中間件
"multer": 文件上傳模塊
"mysql": sql數(shù)據(jù)庫操作模塊
"node-readability": 獲取網(wǎng)頁title(添加書簽用到)跟內(nèi)容(書簽詳情用到)模塊。
"path": 路徑處理模塊。
"request": http請求模塊。主要用來獲取熱門書簽數(shù)據(jù)。
"supervisor": 文件改變監(jiān)視文件，開發(fā)使用。
7 安裝部署指南
1、安裝MySQL數(shù)據(jù)庫。如果不會，請戳教程MySQL 數(shù)據(jù)庫安裝教程。有點需要注意的是，MySQL的版本至少要是5.6。否則執(zhí)行schema.sql文件會出錯。
2、新建一個數(shù)據(jù)庫名，使用MySQL將根目錄下面的schema.sql文件執(zhí)行一遍，創(chuàng)建數(shù)據(jù)庫表格。有個問題尤其要注意：數(shù)據(jù)庫一定要使用UTF-8的編碼，否則執(zhí)行一些漢字的sql語句會出錯！如果是Ubuntu，大概過程如下。
mysql -u root -p // 使用root賬號進(jìn)入mysql數(shù)據(jù)庫。按回車之后輸入安裝時候root的密碼。
CREATE DATABASE mybookmarks DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; // 創(chuàng)建mybookmarks數(shù)據(jù)庫。
CREATE USER 'test'@'%' IDENTIFIED BY '123456';// 創(chuàng)建一個以用戶名為test，密碼為123456的用戶
GRANT ALL ON *.* TO 'test'@'%'; // 給剛創(chuàng)建的test用戶數(shù)據(jù)庫所有的權(quán)限
use mybookmarks; //選擇剛創(chuàng)建的數(shù)據(jù)庫。
source /home/lcq/schema.sql; // 執(zhí)行schema.sql文件創(chuàng)建數(shù)據(jù)庫表格。注意，將路徑換為你schema.sql所在路徑。
3、安裝Redis 安裝教程。如果不會，請戳教程Redis 安裝教程，安裝完成之后如果Redis沒有啟動，請啟動Redis。
4、安裝Node.js。Node.js版本至少要求8.0以上。不會的話，請按照上面步驟1、3提供的方法自行解決。
5、克隆代碼git@github.com:luchenqun/my-bookmark.git，切換到項目根目錄下面，執(zhí)行npm install安裝package。
6、在根目錄，根據(jù)config.default.js文件內(nèi)容創(chuàng)建一個新的文件config.js，更新你的MySQL的賬號密碼信息。注意，該賬號必須要有寫數(shù)據(jù)庫的權(quán)限！ 7、如果上面的都做好了，在項目根目錄下面執(zhí)行node ./bin/www，如果是開發(fā)，可以使用npm start。
8、在瀏覽器里面輸入：127.0.0.1:2000。
9、部署的話，推薦使用nginx作為HTTP和反向代理服務(wù)器，使用forever讓nodejs應(yīng)用后臺執(zhí)行。相關(guān)知識，請自行百度。
8 其他說明
1、對于favicon的下載，如果你部署在國內(nèi)的服務(wù)器上，優(yōu)先從國內(nèi)提供的服務(wù)獲取。代碼在api.js文件下面的api.getFaviconByTimer函數(shù)處調(diào)整。
2、我沒有做瀏覽器兼容測試，只在Google Chrome下面進(jìn)行了測試開發(fā)。
9 開源許可證
MIT License
你可以隨意使用此項目，無需通知我，因為我可能很忙沒時間。