Code Monkey home page Code Monkey logo

my-bookmark's Introduction

在线书签管理工具

image

1 在线体验(demo)

在线书签管理系统,体验账号:test。密码:123456。

2 为什么要做个网络书签

每个浏览器上面都会有个书签可以供你收藏你以后可能还要用到的网址。但是你可能还是会遇到下列问题:
1、如果你重装系统,或者换浏览器怎么办?
2、如果你有多个浏览器书签该如何整合?
3、如何快速搜索保存的书签?比如我只想搜索某个时间段保存的书签?
4、如果一个分类下面书签过多,如何方便快速查看?
5、我能不能查看别人收藏的书签?
6、在其他地方上网的时候能不能查看我自己的书签?
7、如果公用一台电脑,如何区分我收藏的跟别人收藏的书签?
在线书签管理工具,帮助你快速记录你喜欢的网站,并可以随时随地查看这些站点,而不必拘泥于使用的浏览器。无论在什么地方,只要能接入网络,就能打开属于你自己的网络书签,看到自己收藏的页面网址。

3 主要功能(开发计划)

  • 需要注册账号用户。
  • 在书签分类里面,可以更新分类,删除分类,新增分类,对分类显示进行排序。分类的标签默认按照添加日期展示,但是可以点击表格的标题,按照点击次数,添加日期,最后点击从大到小进行排序。
  • 可以按照指定添加时间段,指定分类目录,指定网址关键字等进行查询。
  • 添加书签的时候,会自动获取title,供用户编辑。其中:Insert键打开添加页面,再次按Insert键保存书签,Esc取消添加。
  • 可以导入Chrome的书签导出文件,暂时做在设置里面。
  • 书签可以作为公有或者私有,公有可供所有人搜索。
  • 可以将搜索到其他用户的书签转存为自己的书签。
  • 可以将书签导出来,然后导入到浏览器。
  • 在热门标签里面,有在网上找的热门书签。
  • 新增备忘录功能,有时候随手要做点纪录,就方便了。任意界面按快捷键A增加备忘录。双击备忘录可查看详情!亦可分享备忘。
  • 在设置的全局链接,可设置快捷键,用来在任何页面,快速打开设置的链接。
  • 增加Chrome插件,可在任意界面快速添加书签至系统。如果你无法访问该插件,可以按照Chrome如何安装插件(开发版本/自制)方法安装插件,插件请到bookmark-plugin下载。
  • 适配手机平板,手机端请访问mb.lucq.fun

4 主要用到的软件与模块说明

Node.jsv12.13.0 用来做后台服务。
MySQL: v5.7.23用来做数据存储。
AngularJSv1.5.8前端JavaScript框架。
jQuery: v3.1.1本来用了AngularJS是不需要再使用jQuery了的。但是有些功能AngularJS要大费周章才能完成,jQuery一句代码就能解决。所以还是忍不住将它导入了进来。
Semanticv2.4.0由于没有美工人员,自己开发的,不想界面太丑,用了这套UI。

5 目录结构

my-bookmark/
├── development.js                # 开发环境下的入口文件
├── logs/                         # 日志目录
├── Dockerfile                    # Dockerfile 构建文件
├── nginx.conf                    # nginx 配置文件
├── package.json                  # 项目依赖包
├── pm2.json                      # pm2 配置文件
├── production.js                 # 生产环境下的入口文件
├── runtime/                      # 后台运行文件夹
├── schema.sql                    # mysql数据库建表文件
├── src/                          # 后台实现文件夹
│   ├── bootstrap/                # 启动自动执行目录 
│   │   ├── master.js             # Master 进程下自动执行
│   │   └── worker.js             # Worker 进程下自动执行
│   ├── config/                   # 后台配置文件夹
│   │   ├── adapter.js            # 后台适配器文件
│   │   ├── config.js             # 后台配置文件
│   │   ├── config.production.js  # 后台生产环境配置文件
│   │   ├── extend.js             # 后台extend配置文件
│   │   ├── middleware.js         # 后台middleware配置文件
│   │   └── router.js             # 自定义路由配置文件
│   ├── controller/               # 后台控制器文件夹
│   │   ├── api.js                # 后台api控制器实现
│   │   ├── base.js               # 后台base控制器实现
│   │   └── index.js              # 后台index控制器实现
│   ├── logic/                    # 后台逻辑文件夹
│   │   ├── api.js                # 后台逻辑api文件
│   │   └── index.js              # 后台逻辑index文件
│   └── model/                    # 后台模型文件夹
│       └── index.js              # 后台模型文件
├── test/                         # 后台测试文件夹
│   └── index.js                  # 后台测试文件
├── update.sql                    # MySQL更新文件
├── view/                         # 网站主页显示文件夹
│   ├── 404.html                  # 默认404页面
│   ├── css/                      # 样式表文件夹
│   │   ├── externe/              # 外部引入引来的css文件
│   │   └── style.css             # 自己写的css文件
│   ├── favicon.ico               # 网站favicon
│   ├── images/                   # 图片文件夹
│   ├── scripts/                  # 前端逻辑实现的JS文件以及引入的JS文件
│   │   ├── app-angular.js        # AngularJS路由配置文件
│   │   ├── controllers/          # 所有的AngularJS控制器
│   │   ├── directives/           # 所有的AngularJS指令
│   │   ├── externe/              # 外部引入的JS文件
│   │   └── services/             # 所有的AngularJS服务文件
│   ├── views/                    # 页面实现文件
│   └── index.html                # 网站主页
└── README.md                     # 项目工程说明文件

6 Docker安装部署

此部署方式适合新手。

如果你的Linux环境中没有安装Docker环境。那么请先执行如下命令安装Docker环境。

curl -fsSL get.docker.com -o get-docker.sh
sudo sh get-docker.sh --mirror Aliyun

安装好docker环境之后,执行命令 docker run -d -p 2000:2000 -p 3306:3306 luchenqun/mybookmark 安装并启动应用即可。然后在浏览器输入: http://你的IP:2000/ 即可访问书签应用。安装好的环境默认了一个账号test,密码为123456

如果MySQL需要远程访问,那么你需要进入容器之后更新 /etc/mysql/mysql.conf.d/mysqld.cnf,将绑定地址 127.0.0.1 改为 0.0.0.0。然后执行命令service mysql restart重启数据库服务。安装后的 MySQL默认有两个账户,一个是root账户,无密码。一个是在文件/etc/mysql/debian.cnf有个账号密码。当然这些账号都是只能在本地访问的,你需要手动创建一个可供远程访问的账号。

另外,有人做了arm架构的docker,如果有需要的请按如下命令执行安装

docker run -itd --name mybookmark -p 2000:2000 -p 3306:3306 740162752/bookmark

7 安装部署指南

这种适合动手能力比较强的人员。

1、安装MySQL数据库。如果不会,请戳教程MySQL 数据库安装教程。有点需要注意的是,MySQL的版本至少要是5.6。否则执行schema.sql文件会出错。
2、新建一个数据库名,使用MySQL将根目录下面的schema.sql文件执行一遍,创建数据库表格。有个问题尤其要注意:数据库一定要使用UTF-8的编码,否则执行一些汉字的sql语句会出错!如果是Ubuntu,大概过程如下。

mysql -u root -p // 使用root账号进入mysql数据库。按回车之后输入安装时候root的密码。
CREATE DATABASE mybookmarks DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; // 创建mybookmarks数据库。
CREATE USER 'test'@'%' IDENTIFIED BY '123456';// 创建一个以用户名为test,密码为123456的用户
GRANT ALL ON *.* TO 'test'@'%';  // 给刚创建的test用户数据库所有的权限
use mybookmarks; //选择刚创建的数据库。
source /home/lcq/schema.sql; // 执行schema.sql文件创建数据库表格。注意,将路径换为你schema.sql所在路径。   

3、如果你是全新部署,你可忽略此步骤。如果之前部署过此应用,那么需要执行update.sql文件需要升级。注意:升级之前,请务必备份数据库!确认是否需要运行此升级sql文件也很简单,看一下你之前的数据库mybookmarks下面有没有tags_bookmarks这个数据表。如果有,那么需要执行。执行方法还是如上类似source /home/lcq/update.sql;
4、安装Node.js。Node.js版本至少要求12.0以上。不会的话,请按照上面步骤1提供的方法自行解决。
5、克隆代码git clone [email protected]:luchenqun/my-bookmark.git,切换到项目根目录下面,执行npm install安装package。
6、在根目录,更新pm2.json文件,只需要更新cwd项即可。该项为你项目所在的路径。更新src/config/adapter.js下面exports.model关于你的MySQL的账号密码信息。注意,该账号必须要有写数据库的权限!
7、如果上面的都做好了,执行命令npm install pm2 -g安装pm2模块。再执行命令pm2 startOrReload pm2.json。以后如果项目代码有升级,更新代码之后,执行此命令即可重启该应用。
8、在浏览器里面输入:http://你的IP:2000/
9、如果需要域名部署的话,推荐使用nginx作为HTTP和反向代理服务器,根目录有一份nginx.conf文件,你只需要更新root项即可使用。相关知识,请自行百度。

8 其他说明

1、我没有做浏览器兼容测试,只在Google Chrome下面进行了测试开发。

9 开源许可证

MIT License
你可以随意使用此项目,无需通知我,因为我可能很忙没时间。注意,手机版当前没开源

my-bookmark's People

Contributors

luchenqun avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

my-bookmark's Issues

建议:mysql以环境变量方式配置使用

docker把mysql一块打包,使用时没有指定挂载,那么下次更新app容器时,数据会不会丢失呢?建议定义数据目录,可挂载或者mysql以环境变量形式引入使用

部署出错

请问部署时候还需要创建设置mongodb数据库吗

有计划sqlite版本吗

看到国产都支持一下。
软件感觉很好,可否考虑sqlite版本?用于轻量部署?

作者可以考虑 导入OneTab格式书签的功能吗

OneTab的导出文件就是一个txt 每行一个网址+网页标题
平时喜欢把看到过的内容全扔进进去OneTab 但内容多起来之后就开始卡
用到现在的结果是有十多个备份文件了 希望能找一个程序集中管理这些东西
如果能加入这个功能 就太方便了

目录只有一层?

我的chrome书签有3层文件夹,导入后只剩下最外面的文件夹了,点开后这不乱了嘛,作者怎么解决的

书签字体不够显眼

1 页面上下左右空白太大, 至少上面的空白要调小一点
2 书签下方的分页条, 建议字体小一点, 以突出书签。
3 书签字体要大一点

非常棒非常棒的extention

哥们你好, 无意间发现了您的这个extention,我觉得思路太牛逼了,开发者大多用vimium,但是正常的存储书签方式太图形化了,非常麻烦.您的这个就解决了这个问题.存入书签之后可以通过链接导航到书签页面,这是所有的书签extention做不到的.给你的思路点赞一万次.

不过这个也是稍微有点儿小bug,不知道是不是我使用的问题,首先没有找到同步chrome书签的选项,然后右键加入书签的时候,每次提示要重新登录,所以暂时还不能实际应用起来,但是思路真的很棒,我相信,这是vim化书签的最好解决方案,期待你的进一步开发.

再次点赞.

容器更新会不会导致配置文件丢失

我看docker部署那里没有映射容器的config路径到本机上,这样如果以后更新不久什么都没了?
望改进,我也不懂配置文件是在容器的哪个路径上,所以自己不会设置,,,

my-bookmark项目存在跨站脚本攻击漏洞

关于XSS

来自百度百科:

XSS攻击全称跨站脚本攻击,是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS,XSS是一种在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中。

项目中的XSS

漏洞文件:https://github.com/luchenqun/my-bookmark/blob/master/routes/api.js#L1450
代码行数:1450

<pre id="note" style="background-color:RGB(243,244,245); padding:0px 10px 0px 10px; margin:0px; width:60%; min-height:100%;display: inline-block;text-align: left; font-size: 15px; font-family:italic arial,sans-serif;word-wrap: break-word;white-space: pre-wrap;">\n\n${data}\n\n</pre>

在处理留言内容并且输出到页面中的时候直接将留言内容输出到了页面中,我这里评论了一段恶意的XSS的攻击代码<svg/onload=alert(1)>,其表示弹一个框并且内容为1。

测试案例:https://mybookmark.cn/api/notes/?shareNote=329

0

修复建议

建议在处理的时候使用HTML实体化编码的方式对留言内容进行编码然后再输出。

关于我

Vulkey_Chen,信息安全爱好者。
团队:米斯特安全团队
博客:gh0st.cn

如何启用/禁用用户注册

非常不错的项目 已经部署在了VPS上,不过作为自托管项目,仅靠robots.txt可能不能很好屏蔽某些访问。仅作为个人使用,如何在需要的情况下关闭注册或开启访问限制呢?

增加arm64 和armv7 版本的docker

使用很好,可惜没有arm架构的docker支持,索性自己做了一个

docker run -itd --name mybookmark -p 2000-2000 -p 3306-3306 740162752/bookmark

方便大家部署使用

mysql5.7默认字符集默认utf8mb3,导致标题带有emoji报错

以下为报错网站https://emojixd.com/书签报错信息

Error: ER_TRUNCATED_WRONG_VALUE_FOR_FIELD: Incorrect string value: '\xF0\x9F\xA4\xA3 E...' for column 'title' at row 1
    at Query.Sequence._packetToError (/app/node_modules/mysql/lib/protocol/sequences/Sequence.js:47:14)
    at Query.ErrorPacket (/app/node_modules/mysql/lib/protocol/sequences/Query.js:79:18)
    at Protocol._parsePacket (/app/node_modules/mysql/lib/protocol/Protocol.js:291:23)
    at Parser._parsePacket (/app/node_modules/mysql/lib/protocol/Parser.js:433:10)
    at Parser.write (/app/node_modules/mysql/lib/protocol/Parser.js:43:10)
    at Socket.<anonymous> (/app/node_modules/mysql/lib/Connection.js:88:28)
    at Socket.<anonymous> (/app/node_modules/mysql/lib/Connection.js:526:10)
    at Socket.emit (events.js:315:20)
    at addChunk (_stream_readable.js:309:12)
    --------------------
    at Protocol._enqueue (/app/node_modules/mysql/lib/protocol/Protocol.js:144:48)
    at PoolConnection.query (/app/node_modules/mysql/lib/Connection.js:198:25)
    at /app/node_modules/think-helper/index.js:83:10
    at new Promise (<anonymous>)
    at /app/node_modules/think-helper/index.js:82:12
    at ThinkMysql.[think-mysql-query] (/app/node_modules/think-mysql/index.js:169:12)
    at /app/node_modules/think-mysql/index.js:247:25
    at processTicksAndRejections (internal/process/task_queues.js:93:5) {
  code: 'ER_TRUNCATED_WRONG_VALUE_FOR_FIELD',
  errno: 1366,
  sqlMessage: "Incorrect string value: '\\xF0\\x9F\\xA4\\xA3 E...' for column 'title' at row 1",
  sqlState: 'HY000',
  index: 0,
  sql: "INSERT INTO `bookmarks` (`userId`,`tagId`,`title`,`url`,`clickCount`,`createdAt`,`lastClick`) VALUES (2,2,'🤣 Emoji表情大全,颜文字百科  - EmojiXD','https://emojixd.com/',1,'2022-03-15 03:14:11','2022-03-26 09:19:36')"

如何解决?

  1. 修改书签,去掉emoji表情。 治标不治本
  2. 修改mysql5.7默认字符集为utf8mb4。可以参考这篇博客:https://www.lovesofttech.com/database/mysql5.7ToUtf8mb4.html

手机版chrome插件无法读取登录状态

Yandex安卓浏览器安装chrome插件,通过插件操作书签添加,可正常弹出添加书签/备忘录的弹出窗,但不管实际是否已登录账号,均提示未登录的错误提示,之后跳转到登录界面,如实际已登录则再跳转到手机版主页(https://m.mybookmark.cn/#/tags) ,之后重复操作依旧无法添加书签

请问,可以添加一个,打开当前所有书签的功能吗?

我平时也烦恼管理书签,试过很多开源软件,都不太适合。
看了下你这个功能,和我需要的比较贴近,然后只是我还有个小功能,就是当前这个文件夹分类下的标签,我需要能够同时打开到一个新的浏览器窗口中,请问,有这个计划吗?

image

比如在上面加按钮功能,点一下可以把当前这个分类下面的所有页面都打开

SyntaxError: Unexpected token

在执行完 npm install ,接下来我使用命令 node ./bin/www,出现错误如下:

[root@izuf69vcnr1ik26qj06t0cz my-bookmark]# node ./bin/www
/root/my-bookmark/routes/api.js:1225
let downloadFavicon = async () => {
^
SyntaxError: Unexpected token (
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:528:28)
at Object.Module._extensions..js (module.js:565:10)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)
at Function.Module._load (module.js:424:3)
at Module.require (module.js:483:17)
at require (internal/module.js:20:19)
at Object. (/root/my-bookmark/app.js:10:11)
at Module._compile (module.js:556:32)

nodejs:v6.6.0
mysql:v5.7.24

自建服务器,网页小图标依然通过favicon.lucq.fun解析

在购买的云服务器中,通过docker安装,发现网址前面的小图标依然需要favicon.lucq.fun解析。如果开了代理连不上favicon.lucq.fun,所有图标就都是默认的小e。这是一个BUG吗?还是正常的设计?

总之很感谢你!我也是因为浏览器的书签同步功能老出错,才想要找个书签收藏网站。想说自己写个呢,github上搜索居然真的有

启动就报错

pm2.json

{
"apps": [{
"name": "my-bookmark",
"script": "adapter.js",
"cwd": "/data/mystack/sites/mybookmark/src/config",
"exec_mode": "fork",
"max_memory_restart": "1G",
"autorestart": true,
"node_args": [],
"args": [],
"env": {

}

}]
}

Error: Cannot find module 'think-cache-file'

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.