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