Web 开发

BlockSuite 一款 Block Style 的编辑器,仅仅是编辑器!

先说结论 我的博客不太适合用 BlockSuite 作为编辑器,因为: 不知道如何渲染,我可以编辑,但是如何展示给匿名用户看? SEO 不太明确,也想着转成 HTML 来做,但是成本太高? 其他博主的调研:https://blog.nineya.com/archives/154.html 开始! 学习一下:https://block-suite.com/ Scratch(QuickStart) 简单安装一下,目前是 canary 版本, AFFiNE 也是用的这个版本,每次都打包的 master 分支,基本上每天都有更新。

阅读更多
如何在 React 中轻松路由?使用 React Router!

开始 import React from "react"; import ReactDOM from "react-dom/client"; import { createBrowserRouter, RouterProvider, } from "react-router-dom"; import Root from "./routes/root"; const router = createBrowserRouter([ { path: "/", element: <Root />, }, ]); ReactDOM.createRoot(document.getElementById("root")).render( <React.StrictMode> <RouterProvider router={router} /> </React.StrictMode> ); root 路由比较特殊。 Not Found import ErrorPage from "./error-page"; const router = createBrowserRouter([ { path: "/", element: <Root />, **errorElement: <ErrorPage />,** }, ]); ReactDOM.createRoot(document.getElementById("root")).render( <React.StrictMode> <RouterProvider router={router} /> </React.StrictMode> ); 嵌套路由 让 <Contact /> 渲染在 <Root /> 的 children(<Outlet />) 中: const router = createBrowserRouter([ { path: "/", element: <Root />, errorElement: <ErrorPage />, **children**: [ { path: "contacts/:contactId", element: <Contact />, }, ], }, ]); 使用 Layout 也能解决。

阅读更多
如何在 React 中进行状态管理?使用 Zustand!

计数器 import { create } from 'zustand' const useStore = create(set => ({ count: 1, inc: () => set(state => ({ count: state.count + 1 })), })) function Controls() { const inc = useStore(state => state.inc) return <button onClick={inc}>one up</button> } function Counter() { const count = useStore(state => state.count) return <h1>{count}</h1> } 用法 创建状态 state 操作 action Basic typescript usage doesn’t require anything special except for writing create<State>()(...) instead of create(...)… import { create } from 'zustand' interface BearState { bears: number increase: (by: number) => void } const useBearStore = create<BearState>()((set) => ({ bears: 0, increase: (by) => set((state) => ({ bears: state.bears + by })), })) const useFishStore = create((set) => ({ salmon: 1, tuna: 2, deleteEverything: () => set({}, true), // clears the entire store, actions included deleteTuna: () => set((state) => omit(state, ['tuna']), true), })) const useSoundStore = create((set, get) => ({ sound: "grunt", action: () => { const sound = get().sound // you still have access to state outside of it through get // ... } }) export default useBearStore 在 react 之外使用呢?

阅读更多
GORM 自动填充 UUID 的 2 种方式

使用 uuid 库手动生成 采用这个库:github.com/gofrs/uuid 在 GORM 中定义一个 BaseModel,并增加钩子函数: import "github.com/gofrs/uuid" type BaseModel struct { ID uuid.UUID CreatedAt time.Time UpdatedAt time.Time DeletedAt gorm.DeletedAt `gorm:"index"` EffectiveTime *time.Time } func (m *BaseModel) BeforeCreate() (err error) { m.ID, err = uuid.NewV4() if err != nil { log.Logger.Err(err).Msg("uuid create failed") return fmt.Errorf("uuid create with ID failed, %w", err) } return nil } 使用 postgresql 的 uuid-ossp 插件 首先要启用插件 要么手动 Navicat 界面上增加: 要么执行查询语句:

阅读更多
图数据库 Cypher 查询语言的子查询 CALL (subquery)

子查询允许将查询组合起来,这在使用UNION或聚合时特别有用。 子查询与封闭查询交互的方式有一些限制: 子查询只能引用外部查询中显式导入的变量。 子查询不能返回与外围查询中变量名称相同的变量。 从子查询返回的所有变量随后都可在外部查询中使用。 WITH导入变量进子句必须:

阅读更多
Neo4j: 图数据基本概念、语法与增删改查

Neo4j 简介 Neo4j 使用属性图(Property Graph)模型1。 一个图包含节点(Objects)和边(Relationships)。 Neo4j 的属性图模型包含了: 节点 节点标签:用于区分节点的类型,0个或多个 边:源节点与目标节点之间的一条有向边 边类型:用于区分边的类型,有且仅有1个 属性:节点和边都可以有属性(键值对)用于描述节点和边 注意这些名词的英文:node、relationship、label(节点可以有0个或多个标签)、type(边只有一个类型)、property

阅读更多
JWT 的应用场景思考

JWT 的应用场景思考 简述 JWT JWT,全称 JSON Web Token。是一种开放标准,用于在各方之间安全传递信息,它是以 Base64 编码 json 对象的 token 。基于 token 的权限验证,与传统的 Session 认证完全不同,它不需要服务端保持 Session 记录,连用户状态都不需要关心。一旦用户登录网站,服务器就会生成 token,之后客户端每次登录时在HTTP的头信息中带上 token 即可。

阅读更多