如何使用 PostgreSQL FETCH 检索查询返回的部分行

Postgresql - FETCH


在这篇文章，我们将把我们已经非常出色的弹出式浏览器扩展变得更加个性化。

为了维护用户选择的内容，我们将利用 chrome 的存储能力。

<video
  src="https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/storage_fdefvm.webm"
  autoPlay
></video>

## 增加浏览器扩展存储权限

修改`manifest.json`，在权限数组新增`storage`

```json
{
  "permissions": ["alarms", "notifications", "storage"]
}
```

编写扩展主体

```jsx
import {useState} from 'react'

const colorMatch = {
  indigo: 'bg-indigo-400',
  pink: 'bg-pink-400',
  purple: 'bg-purple-400'
}

export function App() {
  const [color, setColor] = useState('indigo')

  const createNotification = () => {
    chrome.alarms.create('motivation_alarm', {
      periodInMinutes: 60
    })
    window.close()
  }

  const stopNotification = () => {
    chrome.alarms.clearAll()
    window.close()
  }

  chrome.storage.sync.get('color', (storedColor) => {
    setColor(storedColor.color)
  })

  const pickColor = (pickedValue) => {
    setColor(pickedValue)
    chrome.storage.sync.set({color: pickedValue})
  }

  return (
    <div
      className={`flex flex-col items-center justify-center w-screen h-auto ${colorMatch[color]} p-4`}
    >
      <select
        onChange={(event) => pickColor(event.target.value)}
        value={color}
        className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500"
      >
        <option>Pick a color</option>
        <option value="indigo">Indigo</option>
        <option value="pink">Pink</option>
        <option value="purple">Purple</option>
      </select>
      <br />
      <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 text-2xl px-4 rounded"
        onClick={createNotification}
      >
        Motivate me 🎉
      </button>
      <br />
      <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 text-2xl px-4 rounded"
        onClick={stopNotification}
      >
        Stop motivating me 😅
      </button>
    </div>
  )
}
```

## Source Code

[【Source Code】](https://github.com/rebelchris/popup-extension/tree/storage)


基于react、tailwindcss开发自己的chrome插件

Chrome插件开发 - Using storage


## useRouter 钩子

使用方式：

```jsx
import {useRouter} from 'next/router'

export default function Home() {
  const router = useRouter()
  console.log(router)
  return <></>
}
```

`useRouter`钩子返回一个对象，包含了路由相关的信息，包括：

- `router.query`：路由参数
- `router.pathname`：路由路径
- `router.asPath`：当前页面的完整路径
- `router.route`：当前路由的路径
- `router.events`：事件监听器

### router.push

- `url`: 路径
- `as`:dom 中标签
- `options`:路由配置
- `shallow`:是否深度渲染，默认为 false，更新路由时，会重新调用`getStaticProps`, `getServerSideProps`, `getInitialProps`并渲染新的页面。

### router.replace

`router.replace`方法类似于`router.push`，但是会替换当前的路由，而不是增加一个新的路由。

<video
  src="https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/Next.js-navigate-programmatically.mp4"
  controls
  width={640}
  height={320}
  autoPlay
></video>

## 代码

feedback.js

```jsx
const FeedBack = (props) => {
  return (
    <div style={{padding: 50}}>
      <h1>Feedback Page</h1>
    </div>
  )
}

export default FeedBack
```

index.js

```jsx
import {useRouter} from 'next/router'

export default function Home() {
  const router = useRouter()
  return (
    <div style={{padding: 50}}>
      <h1>Home Page</h1>
      <h2>push()</h2>
      <p>
        <button onClick={() => router.push('/feedback')}>
          Go to the feedback page
        </button>
      </p>
      <p>
        <input type="checkbox" onChange={() => router.push('/feedback')}></input>{' '}
        Check me to go to the feedback page
      </p>
      <br />

      <h2>replace()</h2>
      <div>
        <button onClick={() => router.replace('/feedback')}>
          Go to the feedback page and not go back
        </button>
      </div>
    </div>
  )
}
```


Next.js - how-to-programmatically-navigate-in-next-js


CSS 中的权重（specificity）是用来确定在多个 CSS 规则中，哪个规则的样式应该优先被应用的一种机制。权重是由不同类型的选择器组成的值，通常用一个四元组（a, b, c, d）来表示，其中：

- a 代表内联样式（inline styles），它的值为 1。
- b 代表 ID 选择器（id selectors），它的值为 ID 选择器的个数。
- c 代表类选择器（class selectors）、属性选择器（attribute selectors）和伪类选择器（pseudo-class selectors），它的值为这些选择器的个数之和。
- d 代表元素选择器（type selectors）和伪元素选择器（pseudo-element selectors），它的值为这些选择器的个数之和。

举个例子，如果一个 CSS 规则为：

```css
div#myId.myClass {
  color: red;
}
```

那么它的权重为 (0, 1, 1, 2)。

当多个 CSS 规则应用于同一个元素时，CSS 引擎会根据它们的权重来确定哪一个规则的样式应该被应用。具体来说，CSS 引擎会选择权重最高的规则。如果有多个规则的权重相同，则后定义的规则会覆盖先定义的规则。

需要注意的是，!important 关键字可以用来提高一个规则的权重。具体来说，它会给这个规则的权重添加一个极高的值，相当于 (0, 0, 0, ∞)。因此，一般情况下应该避免使用 !important，除非必须这样做。

以下是一些关于 CSS 权重的案例，用来帮助理解权重的计算方法和作用：

内联样式的权重最高，例如：

```html
<p style="color: red;">Hello, world!</p>
```

这个样式规则的权重为 (1, 0, 0, 0)，因此它的样式会优先于其他样式被应用。

ID 选择器的权重比类选择器和元素选择器高，例如：

```html
<div id="myDiv" class="myClass"></div>
```

```css
#myDiv.myClass {
  color: red;
}
```

这个样式规则的权重为 (0, 1, 1, 0)，因此它的样式优先于其他样式被应用。

选择器的权重是可以叠加的，例如：

```html
<p class="myClass"></p>
```

```css
p.myClass {
  color: red;
}
```

这个样式规则的权重为 (0, 0, 1, 1)，因为它包含了一个类选择器和一个元素选择器。

通配选择器和关系选择器的权重较低，例如：

```html
<div>
  <p>Hello, world!</p>
</div>
```

```css
div p {
  color: red;
}
```

这个样式规则的权重为 (0, 0, 0, 2)，因为它包含了两个元素选择器，但没有类选择器或 ID 选择器。因此，如果有一个包含类或 ID 选择器的规则也适用于这个元素，那么它的样式会优先于这个规则被应用。

!important 关键字会覆盖其他所有样式，例如：

```css
p {
  color: blue !important;
}

p {
  color: red;
}
```

即使第二个规则的权重更高，但由于第一个规则使用了 !important，因此它的样式会优先于第二个规则被应用。这也是为什么应该谨慎使用 !important 的原因。

总之，了解 CSS 权重机制对于编写高效、可维护的 CSS 代码非常重要，可以避免样式冲突和覆盖等问题。


css - 权重


`Node.js`提供一些基本系统相关的函数：

`os.arch()` 返回当前计算机的 CPU 体系结构，比如：可能的值为`x32`、`x64`、`arm`、`arm64`、`s390`、`s390x`、`mipsel`、`ia32`、`mips`、`ppc`、`ppc64`

`os.cpus()`返回包含有关每个逻辑 CPU 内核的信息的对象数组

`os.endianness()`返回标识为其编译 Node.js 二进制文件的 CPU 的字节序的字符串。 可能的值是大端序的 'BE' 和小端序的 'LE'

`os.freemem()`返回可用系统内存

`os.getPriority()`获取进程优先级

`os.homedir()`返回当前用户主目录

`os.hostname()`返回系统主机名

`os.lodavg()`用于获取平均负载

`os.networkInterfaces()`返回网络接口列表

`os.platform()`返回当前系统平台，比如：`darwin`、`win32`、`freebsd`、`linux`

`os.release()`返回当前系统版本

`os.setPriority()`设置进程优先级

`os.tmpdir()`返回当前系统临时文件默认目录

`os.totalmem()`返回当前系统内存，以字节为单位

`os.type()`返回当前操作系统名称，比如：`linux`、`darwin`、`windows_nt`

`os.userInfo()`返回当前用户信息

`os.uptime()`返回系统正常运行时间

`os.version()`返回当前系统内核、时间、发行版本等信息

`os.constants`包含用于错误码、进程信号等的常用操作系统特定常量

`os.EOL`返回当前操作系统的换行符

`os.devNull`空设备的特定于平台的文件路径。


Node.js - os


## Tutorials

- [Install](/blog/nodejs/01-install)
- [First Program](/blog/nodejs/02-first-program)
- [NPM & CLI](/blog/nodejs/03-npm&cli)
- [Globals](/blog/nodejs/04-globals)
- [OS](/blog/nodejs/05-os)
- [Error](/blog/nodejs/06-error)
- [DNS & NET](/blog/nodejs/07-dns&net)
- [Crypto](/blog/nodejs/08-crypto)
- [TSL & SSL & DEBUGGER](/blog/nodejs/09-tsl&ssl&debugger)
- [Process](/blog/nodejs/10-process)
- [Child Process](/blog/nodejs/11-child_process)
- [Buffers](/blog/nodejs/12-buffers)
- [Streams](/blog/nodejs/13-Streams)
- [File System](/blog/nodejs/14-File%20System)
- [Path](/blog/nodejs/15-Path)
- [StringDecoder](/blog/nodejs/16-StringDecoder)
- [Query String](/blog/nodejs/17-Query%20String)
- [zlib](/blog/nodejs/18-zlib)
- [Assertion](/blog/nodejs/19-Assertion)
- [V8](/blog/nodejs/20-V8)
- [Callbacks](/blog/nodejs/21-Callbacks)
- [Events](/blog/nodejs/22-Events)

## Node.js 技术栈学习指南路线图

![GPZuTn](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/GPZuTn.jpg)


Learning Node.js


React components 由一组元素构成。

基本函数组件的编写方式与常规 `JavaScript` 函数类似，但有几个不同之处。

- 组件名称必须以大写字母开头（即 MyComponent，而不是 myComponent）。
- 与 `JavaScript` 函数不同，组件必须返回 JSX。

以下是 `React` 函数组件的基本语法：

```jsx
function App() {
  return <div>Hello world!</div>
}
```


React是一个JavaScript库，致力于使UI开发变得简单