学习TailwindCss:02、响应式设计

接下来的练习可在如下工具进行:

Tailwind Play (tailwindcss.com)

如果之前接触过 Bootstrap, 那应该熟悉 col-lg-6col-md-6col-sm-6 这样的写法,来适配不同大小的屏幕,实质是根据屏幕的宽度来计算的。

Tailwindcss 也预设了不同的屏幕大小,类似的用 smmdlgxl2xl 来表示不同的屏幕大小,具体可参考文档 Responsive Design - Tailwind CSS 中的说明,开发者也可自行定义划分标准,参考文档 Customizing Screens - Tailwind CSS

默认情况,Tailwindcss 按移动端优先(Mobile First)的理念设计的。即不带前缀的属性(如uppercase)对所有大小的屏幕起作用,而带前缀的属性 (如 md:uppercase) 仅在指定的屏幕断点或大于时起作用。

断点(breakpoint),指的是最小屏幕宽度,比如 sm 的定义 @media (min-width: 640px) { ... },断点则是 640px.

Tailwind Play (tailwindcss.com) 中运行如下代码:

1
<div class="text-center sm:text-left"><p>响应式设计</p></div>

拖动中间的分界线可看具体效果,注意右侧显示的屏幕宽度, 可知 sm 可以用来适配平板或更大的屏幕(即带 sm 前缀的属性,仅在屏幕宽度大于 640px 时起作用)。

学习TailwindCss:02、Backgrounds

背景色

文档:Background Color - Tailwind CSS

框架本身预定义了一些颜色,除开 bg-inherit (继承)、bg-currentbg-transparentbg-blackbg-white 之外,名称规则为 bg-颜色名-数值,其中数值可以是:50100200300400500600700800900,数值越大,颜色越深。

基本使用:

1
<p class="bg-green-500">Hello World!</p>

修改透明度:

1
<p class="bg-green-500/100">Hello World!</p>

透明度可以是 0 ~ 100 的任意值。

鼠标悬浮、获取焦点或者处于其他状态

鼠标悬浮:在按钮、链接等的效果

1
<button class="bg-green-500 hover:bg-green-700">Hello World!</button>

获取焦点:输入框等

1
<input type="text" class="bg-gray-300 focus:bg-gray-50">

适配不同的屏幕

1
<button class="bg-blue-500 sm:bg-green-500">Subscribe</button>

描边(Background Clip)

1
<div class="bg-clip-border p-6 bg-violet-600 border-4 border-violet-300 border-dashed"></div>

border-4 即 css 中的 border-width 属性;
border-violet-300 即 css 中的 border-color 属性;
border-dashed 即 css 中的 # border-style 属性;

背景图片

bg-fixed

学习TailwindCss:初始设置

使用 vs code 编辑器,可以安装 Tailwind CSS IntelliSense 插件, 参考 Editor Setup - Tailwind CSS

如果没安装 NodeJs 环境则需要安装。

新建文件夹 tailwindcssdemo,并进入目录, 在 Terminal 运行:

1
2
3
4
5
6
7
// 初始化项目详细,demo 项目,连按回车即可 😀
npm init


npm install -D tailwindcss

npx tailwindcss init

接下来的配置可按文档进行 Installation: Tailwind CLI - Tailwind CSS

修改 tailwind.config.js 配置:

1
2
3
4
5
6
7
8
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}

新建目录和文件 src/input.css:

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

在 Terminal 运行如下命令:

1
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

src 目录下新建 index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>

双击 index.html 可在浏览器预览。

或者可安装 http-server:

1
npm instll -g http-server

然后进入 src 目录运行:

1
http-server
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Starting up http-server, serving ./

http-server version: 14.1.1

http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
http://127.0.0.1:8080
Hit CTRL-C to stop the server

然后在浏览器访问http://127.0.0.1:8080 预览。

UI

Unlimited UI Kits, Icons, Templates, Themes and More - UpLabs

streamich/awesome-styleguides: A curated list of UI styleguides — 😎💄 (github.com)

Bootstrap

ColorlibHQ/AdminLTE: AdminLTE - Free admin dashboard template based on Bootstrap 4 (github.com)

tabler/tabler: Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap (github.com)

光年(Light Year Admin)后台管理系统模板 (itshubao.com)

StartBootstrap/startbootstrap-creative: A one page HTML theme for creatives by Start Bootstrap (github.com)

Vue

epicmaxco/vuestic-admin: Free and Beautiful Vue 3 Admin Template (github.com)

youzan/vant: Lightweight Mobile UI Components built on Vue (github.com)

介绍 - Vant Weapp (youzan.github.io)

heyui/heyui: 🎉UI Toolkit for Web, Vue3.0 (github.com)

面向 Vue3 的 Material 风格移动端组件库 (gitee.io)

Naive UI: 一个 Vue 3 组件库

NutUI - 移动端 Vue2、Vue3、小程序 组件库 (jd.com)

Getting Started | BootstrapVue (bootstrap-vue.org)

Tailwind CSS

Tailwind CSS 中文文档 - 无需离开您的HTML,即可快速建立现代网站。

aniftyco/awesome-tailwindcss: 😎 Awesome things related to Tailwind CSS (github.com)

Meraki UI Tailwind CSS Components

Charlie85270/tail-kit: Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 2.0. (github.com)

creativetimofficial/tailwind-starter-kit: Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source (github.com)

Wicked Blocks - 120+ Free Tailwind Components

daisyUI — Tailwind CSS Components

soheilpro/mailwind: Use Tailwind CSS to design HTML emails. (github.com)

Free Open Source Tailwind CSS Components | HyperUI

React

Ant Design - 一套企业级 UI 设计语言和 React 组件库

开箱即用的中台前端/设计解决方案 - Ant Design Pro

Semi Design

material-table

其他

Lemon-IMUI: 基于VUE的IM聊天组件 (gitee.com)

Framework7 - Full Featured Framework For Building iOS, Android & Desktop Apps

Hippyjs 为前端开发人员设计的跨端框架

rough-stuff/wired-elements: Collection of custom elements that appear hand drawn. Great for wireframes or a fun look. (github.com)

github/github-elements: GitHub’s Web Component collection.

github/time-elements: Web component extensions to the standard element.

Animated Backgrounds

theatre-js/theatre: Motion design editor for the web (github.com)

Pico.css • Minimal CSS Framework for semantic HTML (picocss.com)

Android MaterialButton

MarerialButton

继承关系:

1
2
3
4
5
6
java.lang.Object
↳android.view.View
↳android.widget.TextView
↳android.widget.Button
↳androidx.appcompat.widget.AppCompatButton
↳com.google.android.material.button.MaterialButton

属性:

属性 描述 参数
app:backgroundTint 背景颜色 默认为 ?attr/colorPrimary
app:backgroundTintMode 着色模式 add,multiply,screen,src_atop,src_in,src_over
app:strokeColor 描边颜色
app:strokeWidth 描边宽度
app:cornerRadius 圆角大小
app:rippleColor 按压水波纹颜色
app:icon
app:iconSize
app:iconGravity start, end, textStart, textEnd
app:iconTint
app:iconTintMode add,multiply,screen,src_atop,src_in,src_over
app:iconPadding 图标和文本之间的间距
  • 不可以使用android:background设置按钮背景,会破坏MaterialButton本身的绘制,而设置背景则推荐使用app:backgroundTint

  • MaterialButton创建后,按钮实际长度并不是设定值,因为它上下有留空,可以使用

    android:insetBottom=”0dp”android:insetTop=”0dp”去除

  • 去除阴影

    MD控件默认有阴影效果,但是有时候我们并不想要按钮有阴影,那么这时候可以指定style为 style="@style/Widget.MaterialComponents.Button.UnelevatedButton" 这样就能去掉阴影,让视图看起来扁平化

MaterialButtonToggleGroup

1
2
3
4
5
java.lang.Object
↳android.view.View
↳android.view.ViewGroup
↳android.widget.LinearLayout
↳com.google.android.material.button.MaterialButtonToggleGroup
属性 描述 参数
app:checkedButton 按钮ID
app:singleSelection true, false
app:selectionRequired 设置为 true 后,强制至少选中一个 true, false
1
2
3
4
5
6
7
MaterialButtonToggleGroup materialButtonToggleGroup = findViewById(R.id.toggleGroup);
materialButtonToggleGroup.addOnButtonCheckedListener(new MaterialButtonToggleGroup.OnButtonCheckedListener() {
@Override
public void onButtonChecked(MaterialButtonToggleGroup group, int checkedId, boolean isChecked) {
//TODO
}
});

Laravel 使用 Redis

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 \Redis::set('str','123');
$data = \Redis::get('library');
$data = \Redis::del('library');
$da = \Redis::exists('library');
\Redis::append('str','_123');
\Redis::get('str');
\Redis::strlen('str');
\Redis::rename('str','str2');
\Redis::expire('str2',10);
$data = \Redis::ttl('str2');//获取缓存时间
$data = \Redis::substr('str2',0,2);//获取第一到第三位字符,结果为123
$data = \Redis::keys('st*');//模糊搜索
$data = \Redis::lindex('str2',1);
dd($data);

//队列
$data = [1,2,3,4,5,6,'wa','oo','op','bar1','bar0'];
\Redis::expire('set2',10);//设置过期时间为10秒
\Redis::rpush('list1','bar1');
\Redis::rpush('list1','bar0');
\Redis::rpush('list1',$data);
$data = \Redis::lpop('list1');//随机取一个值
$data = \Redis::llen('list1');//获取长度
$data = \Redis::lrange('list1',0,-1);//获取队列中所以的值
$data = \Redis::lindex('list1',9);//返回指定下标的队列元素
\Redis::ltrim('list1',0,3);//只保留队列前4个元素,其余的都删掉。
$data = \Redis::lrange('list1',0,-1);//结果显示为0,1,2,3,4
\Redis::rpush('list2','ab1');
\Redis::rpoplpush('list1','list2');//从list1中取最后一个元素,放入list2的首位
\Redis::rpoplpush('list2','list2');
\Redis::linsert('list2','before','ab1','123');//在队列list2中的ab1之前插入123
\Redis::linsert('list2','after','ab1','456');//在队列list2中的ab1之后插入456
$data = \Redis::lrange('list2',0,-1);

// set无序集合操作
\Redis::sadd('set1','ab');
\Redis::sadd('set1','cd');
\Redis::sadd('set1','ef');
\Redis::srem('set1','ef');//移除set1集合中的ef这个元素
\Redis::smove('set1','set2','ab');//移动set1中的ab到set2返回true或者false
$data = \Redis::smembers('set2');//返回无序集合的所有值

// set有序集合操作
\Redis::zadd('zset1',1,'ab');
\Redis::zadd('zset1',2,'cd');
\Redis::zadd('zset1',10,'ef');
\Redis::zrem('zset1','ef');//移除ef这个元素
$data = \Redis::zrangebyscore('zset1',2,9);//返回cd,返回的是2到9这个区间的值
$data = \Redis::zcard('zset1');//统计元素的个数
$data = \Redis::zscore('zset1','ef');//获取ef这个元素的下标
\Redis::zremrangebyscore('zset1',0,2);//删除下标0到2之间的元素 返回ef
$data = \Redis::zrange('zset1',0,-1);//返回有序集合的所有值

// hash表操作
\Redis::hset('hash1','key1',123);
\Redis::hdel('hash1','key1');//删除key1这个key对应的元素
$data = \Redis::hget('hash1','key1');//取相应key对应的值
$data = \Redis::hlen('hash1');//返回hash1元素个数
\Redis::hsetnx('hash1','key1','v2');//增加一个元素,但不能重复
\Redis::hmset('hash1',$data);//添加数组
$data1 = [0,1,2,3,4,5,6,7,8,9];
$data = \Redis::hmget('hash1',$data1);//查询数组格式
$data = \Redis::hget('hash1','key1');
$data = \Redis::hgetall('hash1');//返回整个hash表元素
$data = \Redis::hvals('hash1');//返回hash表中的所有value值
\Redis::select(2);
\Redis::set('foo','bar');
\Redis::move('foo',2);
$data = \Redis::get('foo');

// 事务
\Redis::multi();
\Redis::set('book-name','Mastering C++ in 21 days');
\Redis::get('book-name');
\Redis::sadd('tag','c++','Programming','Mastering Series');
\Redis::smembers('tag');
\Redis::exec();
dd($data);

1,普通得set/get操作,set操作,如果键名存在,则会覆盖原有得值

$redis = app(“redis.connection”);

$redis->set(‘library’ , ‘phpredis’);//存储key为library ,值phpredis得记录

$redis->get(“library”);//获取key为library得记录值

set/get 多个key-value

$mkv = array(

                    "user:001"=>'First user',

                    "user:002"=>"Second user",

                    "user:003"=>"Third user"

);

$redis->mset($mkv); // 存储多个key对应的value

$retval = $redis->mget( array_keys($mkv) );//获取多个key对应的value

2 , setex 存放带存储时效的记录

$redis->setex(“library” , 10 , ‘phpredis’); //存储key为library,值为phpredis的记录,有效时长为10秒

add操作,不会覆盖已有值

$redis->setnx(“foo” , 12); //返回true, 添加成功 存在不做任何操作 否则创建

$redis->setnx('foo' , 34); //返回false ,添加失败,因为存在键名foo的记录

3, getset 是 set的变种,结果返回替换前的值

$redis->getset(‘foo’ , 56);//返回12;如果之前不存在记录,则返回null

4,incrby/incr/decrby/decr对值得递增和递减

$redis->incr(‘foo’); //返回57 ,递增 阶梯为1

$redis->incrby(‘foo’ , 2); //返回59 递增 阶梯为2

5, exists 检测是否存在 存在返回1 否则返回0

$redis->exists(“foo”);

6,type 类型检测,字符串返回 string ,列表返回 list , set表返回 set/zset ,hash表返回 hash

$redis->type(‘foo’);

7, append 连接到已存在字符串

$redis->get(‘str’);//返回test

$redis->append(‘str’ , “_123”);

8,setrange 部分替换操作,并返回字符串长度

$redis->setrange(‘str’ , 0 , ‘abc’); //返回3,第2个参数为0等同于set操作

$redis->setrange(‘str’ , 2 , ‘cd’); //返回4,表示从第2个字符后替换,这时‘str’ 为 ‘abcd’

9,substr 部分获取操作

$redis->substr(‘str’ , 0 , 2);//返回abc 表示从第0个起,取到第2个字符串

$redis->strlen('str'); // 返回4 此时‘str’ 为‘abcd’

10, setbit 位存储

$redis->setbit(‘library’ , 31 ,1); // 表示在第31位存入1

getbit 位获取

$redis->getbit('library' , 31); //返回1

11, keys 模糊查找功能,支持 * 号 以及 ?号 (匹配一个字符)

$redis->set('foo1',123);

$redis->set('foo2' , 456);

$redis->keys('foo*'); //返回foo1和foo2的array

$redis->keys('f?0?'); // 同上

12, randomkey 随机返回一个key

$redis->randomkey(); //可能是返回‘foo1’ 或者是foo2 及其它任何已存在的key

13, rename/renamenx 方式对key进行改名,所不同的是renamenx不允许改成已存在的key

 $redis->rename('str','str2'); // 把原先命名为 str 的key改成了 str2

14,expire 设置key-value的时效性

 ttl  获取剩余有效期

 persist  重新设置为永久存储

 $redis->expire('foo' , 10);//设置有效期为10秒

  $redis->ttl('foo'); // 返回剩余有效期值10秒

  $redispersist("fool");//取消有效期,变为永久存储

15,dbsize 返回redis当前数据库的记录总数

$redis->dbsize();

16,队列操作

rpush/rpushx有序列表操作,从队列后插入元素;

lpush/lpushx和rpush/rpushx的区别是插入到队列的头部,同上,‘x’含义是只对已存在的key进行操作

$redis->rpush(‘foolist’ , ‘bar1’); //返回列表长度1

$redis->rpush(‘foolist’ , ‘bar0’); // 返回列表长度2

$redis->rpushx(‘foolist’ , ‘bar2’); // 返回3 , rpushx只对已存在的队列做添加,否则返回0

$redis->llen(‘foolist’); //返回 3

17,lrange 返回队列中一个区间的元素

$redis->lrange(‘foolist’ , 0 , 1); //返回数组包含第0个至第1个,共2个元素

$redis->lrange(‘foolist’ , 0 , -1);//返回第0个至倒数第一个,相当于返回所有元素

18,lindex 返回指定顺序位置的list元素

$redis->lindex(‘foolist’ , 1); //返回bar1

19,lset 修改队列中指定位置的value

$redis->lset(‘foolist’ , 1 ,’123’); // 修改位置1的元素,返回true

20,lrem 删除队列中左起指定数量的字符

$redis->lrem(“foolist” , 1 , ‘_’); //删除队列中左起(右起使用-1)1个字符‘_’(若有)

21 lpop/rpop 类似栈结构地弹出(并删除)最左或最右的一个元素

$redis->lpop(‘foolist’);//左侧返回

$redis->rpop(‘foolist’); // 右侧返回

22,ltrim 队列修改,保留左边起若干元素,其余删除

$redis->ltrim(‘foolist’ , 0 , 1); // 保留左边起第0个至第1个元素

23,rpoplpush 从一个队列中pop元素并push到另一个队列

$redis->rpush(‘list1’ , ‘ab0’);

$redis->rpush(‘list1’,’ab1’);

$redis->rpush(‘list2’ , ‘ab2’);

$redis->rpush(‘list2’ , “ab3”);

$redis->rpoplpush(‘list1’ , “list2”);

$redis->rpoplpush(‘list2’ , ‘list2’);

24,linsert在队列的中间指定元素前或后插入元素

$redis->linsert(‘list2’ , ‘before’ , ‘ab1’ , ‘123’);//表示在元素 ‘ab1’ 之前插入‘123’

$redis->linser(‘list2’ , ‘after’ , ‘ab1’ , “456”);//表示在元素 ‘ab1’ 之后插入

25,blpop/brpop 阻塞并等待一个队列不为空时,在pop出最左或最右的一个元素(这个功能在php以外可以说非常好用)

$redis->blpop(‘list3’ , 10) ; //如果list3 为空则一直等待,知道不为空时将第一个元素弹出,10秒后超时

26,set集合操作

sadd增加set集合元素,返回true,重复返回false

$redis->sadd(‘set1’ , ‘ab’);

$redis->sadd(‘set1’ , ‘cd’);

$redis->sadd(‘set1’ , ‘ef’);

$redis->smembers(“set1”); // 查看集合元素

27,srem 移除指定元素

$redis->srem(‘set1’ , ‘cd’);//删除‘cd’ 元素

28,spop弹出首元素

$redis->spop(“set1”);//返回‘ab’

29, smove移动当前set集合的指定元素到另一个set集合

$redis->sadd(“set2”,’123’);

$redis->smove(‘set1’,’set2’,’ab’);//移动set1中的ab到set2 ,返回true or false;此时 set1 集合不存在 ab 这个值

30,scard 返回当前set表元素个数

$redis->scard(‘set2’);//返回2

31,sismember判断元素是否属于当前set集合

$redis->sismember(‘set2’,’123’); //返回true or false

32,smembers返回当前set集合的所有元素

$redis->smember(‘set2’); //返回array(123,ab)

33,sinter/sunion/sdiff 返回两个表中的交集/并集/补集

$redis->sadd(‘set1’ , ‘ab’);

$redis->sinter(‘set2’ , ‘set1’);//返回array(‘ab’);

sinterstore/sunionstore/sdiffstore 将两个表交集/并集/补集元素copy到第三个表中

$redis->set(‘foo’ , 0);

$redis->sinterstore(‘foo’ , ‘set1’);//等同于将set1 的内容copy到foo中,并将foo转为set表

$redis->sinterstore(‘foo’ , array(‘set1’ , ‘set2’));//将set1和set2中相同的元素copy到foo表中,覆盖foo原有内容

srandmember 返回表中一个随即元素

$redis->srandmember(‘set1’);

有序set表操作

zadd增加元素,并设置序号,成功返回true,重复返回false

$redis->zadd(“zset1” , 1 , ‘ab’);

$redis->zadd(‘zset1’ , 2 , ‘cd’);

$redis->zadd(‘zset1’ , 3 , ‘ef’);

zincrBy对指定元素索引值的增减,改变元素排序次序

$redis->zincryBy(‘zset1’ , 10 , ‘ab’); //返回11

zrem 移除指定元素

$redis->zrem(‘zset1’ , ‘ef’);//返回true or false

zrange按位置次序返回表中指定区间的元素

$redis->zrange(“zset1” , 0 , 1);//返回位置0 和 1 之间(两个)的元素

$redis->zrange(‘zset1’ , 1 , -1);//返回位置0和倒数第一个元素之间的元素(相当于所有元素)

zrevrange同上,返回表中指定区间的元素,按次序倒排

$redis->zrevrange(‘zset1’ , 0 ,-1);//元素顺序和zrange相反

zrangeByscore/zrevrangeByscore 按顺序/降序返回表中指定索引区间的元素

$redis->zadd(‘zset1’ , 3 , ‘ef’);

$redis->zadd(‘zset1’ , 5 , ‘gh’);

$redis->zrangeByscore(‘zset1’ , 2, 9);//返回索引值2-9之间的元素array(‘ef’ , ‘gh’);

$redis->zrangeByscore(‘zset1’ , 2 ,9 ,array(‘withscores’=>true , ‘limit’=>array(1,2)));//返回索引值2-9之间的元素,withscores=>true表示包含索引值;limit=>array(1,2),表示偏移1,返回2条,结果为array(array(‘ef’,3),array(‘gh’,5))

zcount统计一个索引区间的元素个数

$redis->zcount(‘zset1’ , 3 , 5);//返回2

$redis->zcount(‘zset1’ , ‘(3’ , 5 ) );//’(3‘ 表示索引的值在3-5之间但不含3,同理也可以使用’(5‘ 表示上限为5但不含5

zcard 统计元素个数

$redis->zcard(‘zset1’);//返回4

zremrangeByscore删除一个索引区间的元素

$redis->zremrangeByscore(‘zset1’ , 0 , 2);//删除索引在0-2之间的元素(ab , cd),返回删除元素个数2

zrank/zrevrank返回元素所在表顺序/降序的位置(不是索引)

$redis->zrank(‘zset1’ , ‘ef’);//返回0,因为它是一个元素;zrevrank则返回1(最后一个)

zremrangeByrank删除表中指定位置区间的元素

$redis->zremrangeByrank(‘zset1’ , 0 , 10);//删除位置为0-10的元素,返回删除的元素个数2

hash表操作

$redis->hset(‘hash1’ , ‘key1’ , ‘v1’);//将key为key1,value为v1的元素存入hash1表

$redis->hset(“hash1” , ‘key2’ , ‘v2’);

$redis->hget(‘hash1’ , ‘key1’);//取出表hash1中的key key key1的值,返回v1

hexists返回hash表中的指定key是否存在

$redis->hexists(“hash1” , ‘key1’);//true 或 false

hdel 删除hash表中指定key的元素

$redis->hdel(‘hash’ , ‘key2’);//true or false

hlen 返回hash表元素个数

$redis->hlen(‘hash1’); // 返回1

hsetnx增加一个元素,但不能重复

$redis->hsetnx(‘hash1’ , ‘key1’ , ‘v2’);

$redis->hsetnx(‘hash1’ , ‘key2’ , ‘v2’);

hmset/hmget存取多个元素到hash表

$redis->hmset( ‘hash1’ , array(‘key3’=>’v3’ , ‘key4’=>’v4’ ) );

$redis->hmget( ‘hash1’ , array(‘key3’ , ‘key4’) );//返回响应的值 array(‘v3’ , ‘v4’);

hincryby 对指定key进行累加

$redis->hincryBy(‘hash1’ , ‘key5’ , 3); //不存在,则存储并返回3 ;存在,即返回原有值 +3

$redis->hincryBy(“hash1” , ‘key5’ , 10);//返回13

hkeys返回hash表中的所有key

$redis->hkeys(‘hash1’); // 返回array(‘key1’ , ‘key2’ , ‘key3’ , ‘key4’ , ‘key5’);

hvals 返回hash表中的所有value

$redis->hvals(‘hash1’); // 返回array(‘v1’ , ‘v2’ , ‘v3’ , ‘v4’ , 13);

hgetall返回整个hash表元素

$redis->hgetall(‘hash1’);//返回hash1所有表元素

排序操作

sort排序

$redis->rpush(‘tab’ , 3);

$redis->rpush(‘tab’ , 2);

$redis->rpush(‘tab’ , ‘17’);

$redis->sort(‘tab’);//返回array(2,3,17);

$redis->sort(‘tab’ , array(‘sort’=>’desc’));//降序排序,返回array(17 , 3, 2)

$redis->sort(‘tab’ , array(‘limit’=>array(1,2)));//返回顺序位置中1的元素2个(这里的2是指个数,而不是位置),返回array(3,17)

$redis->sort(‘tab’ , array(‘limit’=>array(‘alpha’=>true)));//按首字符排序返回array(17 , 2 , 3 ),因为17的首字符是 1 所以排首位置

$redis->sort(‘tab’ , array(‘limit’=>array(‘store’=>’ordered’)));//表示永久性排序,返回元素个数

$redis->sort(‘tab’ , array(“limit”=>array(‘get’=>’pre_*’)));//使用了通配符 * 过滤元素,表示只返回以pre开头的元素

Redis 管理操作

info显示服务当状态信息

$redis->info();

select指定要操作的数据库

$redis->select(4);//指定数据库的下标

flushdb清空当前库

$redis->flushdb();

move移动当库的元素到其它数据库

$redis->set(‘tomove’ , ‘bar’);

$redis->move(‘tomove’ , 4);

slaveof 配置从服务器

$redis->slaveof(‘127.0.0.1’ , 80);//配置127.0.0.1端口80的服务器为从服务器

$redis->slaveof();//消除从服务器

同步保存服务器数据到磁盘

$redis->save();

异步保存服务器数据到磁盘

$redis->bgsave()

返回最后更新磁盘的时间

$redis->lastsave();


编辑器

Editor.js (editorjs.io)
Summernote - Super Simple WYSIWYG editor

Markdown

JavaScript Markdown Editor - SimpleMDE
Editor.md - 开源在线 Markdown 编辑器 (pandao.github.io)
mdnice/markdown-nice: 支持主题设计的 Markdown 编辑器,让排版变 Nice (github.com)
hinesboy/mavonEditor: mavonEditor - A markdown editor based on Vue that supports a variety of personalized features (github.com)
benweet/stackedit: In-browser Markdown editor (github.com)

md-block: Render styleable Markdown in your HTML (verou.me)

https://github.com/0xGG/crossnote https://crossnote.app

桌面版

marktext/marktext: 📝A simple and elegant markdown editor, available for Linux, macOS and Windows. (github.com) 推荐

Zettlr/Zettlr: A Markdown Editor for the 21st century. (github.com) 可以用

notable/notable: The Markdown-based note-taking app that doesn’t suck. (github.com)