Projects - 分类 - 菠菜眾長

Cell Watermark

Lruihao — Sun, 23 May 2021 17:15:41 +0000

Usage

Browser

Clone source

1

git clone git@github.com:Lruihao/watermark.git

Load Watermark

1
2
3
4
5


<script type="text/javascript" src="./src/watermark.js">script>
<script type="text/javascript" src="./src/watermark.min.js">script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cell-watermark@1.0.3/src/watermark.js">script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cell-watermark@1.0.3/src/watermark.min.js">script>

Initialization

1
2
3
4
5


document.addEventListener('DOMContentLoaded', function () {
  new Watermark({
    content: "cell-watermark"
  })
});

NPM

Install
1

npm i cell-watermark

Import

1
2
3


import Watermark from 'cell-watermark'
/* Or */
var Watermark = require("cell-watermark")

Class: Watermark

Watermark(options)

new Watermark(options)

Parameters:

Name	Type	Description
options	Object	The options of watermark（Properties）

Properties:

Name	Type	Default	Description
content	String		watermark’s text
appendTo	String	‘body’	parent of watermark’s container
width	Number	150	watermark’s width. unit: px
height	Number	20	watermark’s height. unit: px
rowSpacing	Number	60	row spacing of watermarks. unit: px
colSpacing	Number	30	col spacing of watermarks. unit: px
rotate	Number	15	watermark’s tangent angle. unit: deg
opacity	Number	0.1	watermark’s transparency
fontSize	Number	0.85	watermark’s fontSize. unit: rem
fontFamily	String	‘inherit’	watermark’s fontFamily

Author: Lruihao

Methods

upload(content)

Upload watermark’s text content

Parameters:

Name	Type	Description
content	String	watermark’s text

render(options)

Rerender watermark

Parameters:

Name	Type	Description
options	Object	The options of watermark（Properties）

destroy()

Force destroy watermark

基于 leancloud-storage 实现的无后端记账本

Lruihao — Tue, 02 Mar 2021 21:46:40 +0000

起因

事情是這樣，年前和朋友一起合租了一個房子，然後捏，生活嘛，除了開心，當然是乾飯最大啦！

自然就會有購物，買菜等日常消費，那就要記賬，一開始是各自記在手機的便簽上，最後再算一下；
三個人，一共七种組合消費，排除各自消費的三種情況，也有四種 (AB, AC, BC, ABC)。好麻煩啊！！！

經過

作為一個程序猿，怎麼能接受這麼麻煩的記賬方式呢，拿起筆就開始畫，於是有了下面這張圖的公式。簡單說明一下就是：
設前面說的四種組合為：X1, X2, X3, X4，個人實際付款總額為：Y1, Y2, Y3，那麼帶入未知數，我們就可以算出每個人最後結算時的錢：S1, S2, S3，
綜上所述，很好理解，當 S >= 0 時，收紅包，當 S < 0 時，發紅包。

OK，一個簡單的初中方程式已經到位了，下一步，思考一下，用什麼來運作這個這個方程。來，先跑個題，春節期間，不是每天都要在騰訊文檔上填表記錄活動軌跡嗎？再回來，那不如就用 excel 實現吧，三個人都可以在手機上編輯。好的，說做就做。

一頓操作，10 minutes later…
只新建了一個 excel 文件，O.o! 不會 excel，果斷放棄，另尋他路。

結果

回到本職，那不如寫個網站吧，可是畢業後，學生機服務器也過期了，怎麼搞？那就寫個純前端的，數據呢存哪裡？
別急，重新擼一擼需求先：

存取消費數據
計算每月，實付（總分），應付以及最後計算結算金額
按月查詢，月結賬單
三人皆可編輯

主要就是存取數據這點，沒有服務器，數據庫怎麼實現？
valine 可以實現無後端，那我是不是也可以，leancloud 文檔走一波，然後“數據表”設計一下，其實是 leancloud-storage Object ，於是有了以下東西，源碼放在 Github

bill-note http://github.com/Lruihao/bill-note

數據設計

去 leancloud 创建一个应用，再新增一个 Bill Class, 补充一下字段：

name	type	description
pay	Number	消费金额
pay_description	String	消费描述
pay_type	String	消费类型
pay_user	String	付款人

主要邏輯

初始化

set for yourself.

1
2
3
4
5


AV.init({
  appId: '',
  appKey: '',
  serverURL: ''
});

存數據

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


//記賬提交按鈕事件監聽
document.querySelector('.submit').addEventListener('click', function (event) {
  event.preventDefault();
  let formPay = document.querySelector('#form-pay');
  let bill = new AV.Object('Bill');
  bill.set('pay', Number(formPay.pay.value));
  bill.set('pay_type', Number(formPay.pay_type.value));
  bill.set('pay_user', Number(formPay.pay_user.value));
  bill.set('pay_description', formPay.pay_description.value);
  bill.save().then(
    (object) => {
      formPay.reset();
    },
    function (error) {
      console.log(JSON.stringify(error));
      alert('保存失敗');
    }
  );
});

取數據

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60


/**
 * 獲取歷史消費記錄數據
 * @param [start=0] 開始位置
 * @param [count=15] 每次查詢筆數
 */
function getBillData(start = 0, count = 15) {
  queryBill
    .descending('createdAt')
    .skip(start * count)
    .limit(count)
    .find()
    .then(function (response) {
      let billLength = response.length;
      if (billLength > 0) {
        billVm.noMore = billLength !== count ? true : false;
        for (bill of response) {
          billVm.bills.push({
            pay: bill.attributes.pay,
            payType: payType[bill.attributes.pay_type],
            payUser: payUser[bill.attributes.pay_user],
            payDescription: bill.attributes.pay_description,
            payDt: new Date(bill.createdAt).toLocaleString()
          });
        }
      } else {
        billVm.noMore = true;
      }
    });
}

/**
 * 獲取月賬單數據
 * @param month 年月份 fmt: yyyy-MM
 */
function getMonthBill(month) {
  let dateTime = `${month} 00:00:00`;
  let startMonth = new Date(dateTime);
  let nextMonth = new Date(new Date(dateTime).setMonth(startMonth.getMonth() + 1));
  let startDateQuery = new AV.Query('Bill');
  startDateQuery.greaterThanOrEqualTo('createdAt', startMonth);
  let endDateQuery = new AV.Query('Bill');
  endDateQuery.lessThan('createdAt', nextMonth);
  let MonthBillQuery = AV.Query.and(startDateQuery, endDateQuery);
  MonthBillQuery.find().then(function (response) {
    billVm.monthBill = {
      payType0: 0,
      payType1: 0,
      payType2: 0,
      payType3: 0,
      payUser0: 0,
      payUser1: 0,
      payUser2: 0
    };
    for (bill of response) {
      let { pay, pay_type, pay_user } = bill.attributes;
      billVm.monthBill[`payType${pay_type}`] += pay;
      billVm.monthBill[`payUser${pay_user}`] += pay;
    }
  });
}

技術棧

leancloud-storage
Vue.js
HTML,CSS,JS

總結

簡單總結一下，登录功能不做，安不安全自己说了算。删除修改功能也不做，直接上 leancloud 操作，css 美化的样式也不写，干净又卫生！
然后衍生一下，什么过年斗地主，天炸，麻将，字牌记账系统那不也是同理可得嘛！

over!

效果

cell-blog 功能介绍与安装

Lruihao — Sat, 25 Jul 2020 20:51:11 +0000

基于 Laravel7 开发，Markdown 语法的个人独立博客。Cell Blog, 也是我的毕业设计作品，目前已開源。

功能

支持 Markdown, 文章实时预览效果
支持多种编程语言代码高亮
编辑器图片上传
后台上传文件管理
文章搜索
文章分类
文章标签
热门文章
随机格言
文章管理（发布，评论开关，排序）
自定义导航（显示开关，排序）
自定义页面（发布开关）
友情链接（显示开关，排序）
COS 桶相册
丰富的博客配置（方便扩展，支持自定义 JS 脚本）
不蒜子计数
Leancloud 计数
Valine 评论插件
文章分享插件

截图

安装

注意事项：PHP 取消禁用函数putenv()和symlink()，安装fileinfo扩展。

下载

1

git clone https://github.com/Lruihao/cell-blog.git

进入站点

1

cd cell-blog

生成。env

1

cp .env.example .env

编辑。env 环境配置

1
2
3
4
5
6
7


APP_URL=http://localhost #使用本地文件系统存储文件时，必须填写正确地址
APP_DEBUG=false #关闭调试
DB_HOST= #数据库地址
DB_PORT=3306 #数据库端口
DB_DATABASE= #数据库名称
DB_USERNAME= #数据库用户
DB_PASSWORD= #数据库密码

打开app\Providers\AppServiceProvider.php, 注释SystemController:load() 防止后续步骤报错

1
2
3
4
5


    public function boot()
    {
        Schema::defaultStringLength(191);
        //SystemController::load();
    }

安装项目依赖

1

composer install

生成 key

1

php artisan key:generate

运行数据迁移和后台数据填充

php artisan admin:install已包含数据迁移命令php artisan migrate
G:\cell-blog\app\Admin directory already exists !无需理会，继续执行剩下命令即可。

1
2
3
4
5


php artisan admin:install

php artisan admin:import media-manager

php artisan db:seed

默认下使用了本地文件系统，创建 storage 目录在 public 的软链接

1

php artisan storage:link

打开app\Providers\AppServiceProvider.php, 取消注释SystemController:load()

1
2
3
4
5


    public function boot()
    {
        Schema::defaultStringLength(191);
        SystemController::load();
    }

将博客网站根目录指向入口 public 目录

如果使用 Nginx，要设置伪静态

1
2
3


location / {
    try_files $uri $uri/ /index.php?$query_string;
}

启动服务后，在浏览器打开http://localhost/admin/, 使用用户名admin和密码admin登录。

License

Cell Blog is open-sourced software licensed under the MIT license.

利用腾讯云为静态页面添加“动态”相册

Lruihao — Sun, 24 Nov 2019 10:52:34 +0000

信息

cos 桶相册，终于！！终于来了！！，idea 来自 [兰州小红鸡 - 给 hexo 静态博客添加动态相册功能]，
功能虽好，但是还是先友情提示！
开放 API 是一个很危险的操作，意味着你的 cos 桶里面的所有资源包括目录结构都暴露的整个世界中，所以建议不要放一些比较私密的照片，保护自己的隐私，提防不良用心之人。下面就开始吧！

创建腾讯云 cos 存储桶

就创建一个 COS 就好了！有几点注意事项：

权限设置为共有读私有写
policy 权限设置整个桶的读操作
跨域访问 CORS 设置，自己随意

上传照片

首先我这个 cos 相册，相册分类就是文件夹分类，所以 cos 桶里面先新建不同的文件夹，文件夹名称就是相册名称，每个相册里面需要放置一张名称为**“封面.jpg”**的图片作为该相册的封面。

上传工具

COSBrowser GUI 工具，桌面/移动版【官方、推荐】
COSCMD 命令行工具【官方】
PicGo 图床上传工具【第三方、推荐】

食用方式

cos album 相册源码下载地址，别忘点赞哈 http://github.com/Lruihao/cos-album

首先，下载源码，引入 cos-album.css 和 cos-album.js
然后，在你的 js 中 new 一个 Cosalbum 对象 ( xmlLink 后不需要添加/)

Step1

1
2


<link rel="stylesheet" type="text/css" href="cos-album.min.css?v=1.1.2">
<script type="text/javascript" src="cos-album.min.js?v=1.1.2"></script>

Step2

1
2
3
4
5
6
7
8


<script type="text/javascript">
  new Cosalbum({
    'xmlLink': 'https://img-xxxxxxxxxx.cos.ap-chengdu.myqcloud.com',
    'prependTo': '.cos-album',
    'viewNum': 8,
    'imgUrl': '//img.lruihao.cn'
  });
</script>

Params

param	type	default	description
xmlLink	String		需要解析的騰訊云 COS 桶 XML 鏈接
prependTo	String	‘body’	可選解析相冊到某個節點
viewNum	Number	4	每個相冊顯示的照片數目
copyUrl	String	href	CDN 链接，雙擊複製 URL Since: 1.1.6
imgType	String	[‘jpg’, ‘jpeg’, ‘png’, ‘gif’, ‘svg’]	图片類型 Since: 1.1.6
videoType	String	[‘mp4’, ‘mp3’, ‘avi’, ‘mov’, ‘qt’]	視頻類型 Since: 1.1.6

viewport 视个人情况添加。
hexo 中使用时 css 和 js 都需要做适当调整，配合加密功能使用等等，这里不再展开。
注：代码设定不加载根目录文件，所以可以利用静态服务把源码部署在根目录，配合 PicGo、COSBrowser 上传来搭建个人图床。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21



<html>
  <head>
    <meta charset="UTF-8" />
    <title>cos-albumtitle>
    
    <link rel="stylesheet" type="text/css" href="cos-album.css" />
    <script type="text/javascript" src="cos-album.js" defer>script>
  head>
  <body>
    <script type="text/javascript">
      new Cosalbum({
        xmlLink: 'https://img-xxxxxxxxxx.cos.ap-chengdu.myqcloud.com',
        prependTo: '.cos-album',
        viewNum: 8,
        copyUrl: '//img.lruihao.cn'
      });
    script>
    
  body>
html>

cos-album demo

changelog

2020-9-28 22:46
1. 升級：相冊封裝成類，可以更方便 new 出來
2. 優化：相冊圖片樣式優化
2019-11-24 10:52:34 修改整理了一下代码，分割功能为函数，并写了注释，更加方便伸手党!

沐目体

Lruihao — Fri, 12 Oct 2018 19:39:19 +0000

预览

{{ message || '「沐目之，湘也」\n 从下笔到停笔，从开始到结束，沐目体见证了我们稚嫩到成熟。\n故事的开头往往极具温柔，但结局常常不尽人意。\n那些忘不掉的人和事，岁月都已替我轻描淡写。' }}

From playlist, Powered By mmt-netease

点击展开更多