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