本文总共会接触到以下主要技术栈。

• Next.js
• TRPC
• Prisma
• Zod
• Auth.js

不是介绍 tRPC 吗，怎么突然出现这么多技术栈。好吧，主要这些技术栈都与 typescript 相关，并且在 trpc 的示例应用中都或多或少使用到，因此也是有必要了解一下。

在线体验地址：TRPC demo

End-to-end typesafe APIs(端到端类型安全)​

在介绍相关技术前，不妨思考一个问题。

当进行网络请求和 API 调用时，你是否知道本次请求的参数类型以及返回的响应数据类型？知道了请求的数据类型与响应的数据类型，会为得到的 json 数据定义 type/interface，使其有更好的类型提示？还是会在 any 类型下获取属性，但由于没有类型提示，导致写错个单词，最终提示 Cannot read properties of undefined (reading 'xxx')？

对于大部分前端应用而言，类型往往常被忽略的，这就导致不知道这个请求的提交参数、响应结果有什么数据字段。举个 axios 发送 post 请求的例子

这是一个 post 请求用于实现登录的，但是这个响应数据 data 没有任何具体提示（这里的提示是 vscode 记录用户最近输入的提示），这时候如果一旦对象属性拼写错误，就会导致某个数据没拿到，从而诱发 bug。同理提交的请求体 body 不做约束，万一这个请求还有验证码 code 参数，但是我没写上，那请求就会失败，这是就需要通过调试输出，甚至需要抓包比对原始数据包，其过程可想而知。

最主要的是没有类型约束的情况下，非常容易出现访问某个对象属性不存在，js 开发者肯定经常遇到如下错误提示。

Cannot read properties of undefined (reading 'xxx')

有太多时候就是因为没有类型，无形间诱发 bug，这也是很多做 api 接口都常常忽视的一点。

因此我个人所认为的未来 Web 框架形态是要满足的前提就是前后端类型统一，即可以将后端的类型无缝的给前端使用，反之同理。而像 Next、Nuxt 这样的全栈框架便是趋势所向。

当然 axios 是可以通过泛型的方式拿到 data 的数据类型提示，就如下图所示。

但这样为了更好的类型提示，无形之间又增加了工作量，我需要定义每个接口的 Response 与 Body 类型，就极易造成开发疲惫，不愿维护代码。而本次所要介绍的技术栈 tRPC 就能够帮你省去重复的类型定义的一个 web 全栈框架。

tRPC​

tRPC 是一个基于 TypeScript 的远程过程调用框架，旨在简化客户端与服务端之间的通信过程，并提供高效的类型安全。它允许您使用类似本地函数调用的方式来调用远程函数，同时自动处理序列化和反序列化、错误处理和通信协议等底层细节。

借官方 Feature

• Automatic type-safety（自动类型安全）
• Snappy DX（敏捷高效的开发者体验）
• Is framework agnostic （不依赖于特定框架）
• Amazing autocompletion（出色的自动补全功能）
• Light bundle size（轻量级打包大小）

什么时候该使用 tRPC​

这个问题非常好，因为我在了解到 tRPC，并参阅了一些基本示例与实践一段时间后发现 trpc 和 http 的应用场景可以说非常相似，完全可以使用 trpc 来替代 http，只不过写法上从 发送 http 请求 ⇒ 调用本地函数（这在后面会演示到）。

而 trpc 又以类型安全与高效著称，如果你的 Web 应用的程序是基于 typescript，并且需要有高效的性能，那么 tRPC 就是一个很好的选择。

tRPC 可以作为 REST/GraphQL 的替代品，如果前端与后端共享代码的 TypeScript monorepo，trpc 则可以无需任何类型转换，也不太会有心智负担。

请记住，tRPC 只有当您在诸如 Next、Nuxt、SvelteKit、SolidStart 等全栈项目中使用 TypeScript 时，tRPC 才会发挥其优势。

tRPC 如何进行接口调用​

一图胜千言，你可以点击 这里 在线体验一下 tRPC，并且查看其目录结构，以及调用方式。下面我一步步讲解如何进行接口调用。

定义服务端​

这里以 Next.js 的目录结构而定。创建 server/trpc.ts，如下代码。分别导出 router, middleware, procedure

import { initTRPC } from '@trpc/server'

const t = initTRPC.create()

export const router = t.router
export const middleware = t.middleware
export const publicProcedure = t.procedure

创建项目(根)路由文件 pages/api/trpc/[trpc].ts

import * as trpc from '@trpc/server'
import { publicProcedure, router } from './trpc'

const appRouter = router({
  greeting: publicProcedure.query(() => 'hello tRPC!'),
})

export type AppRouter = typeof appRouter

此时已经定义好了一个路由地址 api/trpc/[trpc].ts（这里 endpoint(端点)会在客户端中使用到），以及 greeting 函数，服务端的工作就暂且完毕。

创建客户端​

创建 utils/trpc.ts 文件，代码如下

import { httpBatchLink } from '@trpc/client'
import { createTRPCNext } from '@trpc/next'
import type { AppRouter } from '../pages/api/trpc/[trpc]'

function getBaseUrl() {
  if (typeof window !== 'undefined') {
    // In the browser, we return a relative URL
    return ''
  }
  // When rendering on the server, we return an absolute URL

  // reference for vercel.com
  if (process.env.VERCEL_URL) {
    return `https://${process.env.VERCEL_URL}`
  }

  // assume localhost
  return `http://localhost:${process.env.PORT ?? 3000}`
}

export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      links: [
        httpBatchLink({
          url: getBaseUrl() + '/api/trpc',
        }),
      ],
    }
  },
})

在 _app.tsx 包装一下

import type { AppType } from 'next/app'
import { trpc } from '../utils/trpc'

const MyApp: AppType = ({ Component, pageProps }) => {
  return <Component {...pageProps} />
}

export default trpc.withTRPC(MyApp)

有了这个对象后，我们就可以开始尽情调用服务端所定义好了函数了。

当你导入 trpc 并输入 trpc. 时，将会提示出服务端定义好的 greeting 函数，如下图所示。

此时通过 const result = trpc.greeting.useQuery() 便可调用 greeting 函数，其中 result.data 便可拿到 'hello tRPC!' 信息。

这个过程发生了什么？​

文档: useQuery() | tRPC

不妨此时打开控制台面板，看看请求

不难看出，调用 greeting 函数本质是向 /api/trpc/greeting 发送了 http 请求，并且携带参数 batch 和 input，虽然我们暂时还没有传。默认 input 为 。

要支持传递参数，首先需要在服务端定义传递参数的类型（会有 Zod 对参数效验），这样客户端才有对应的类型提示。然后调用 greeting 函数时，通过通过函数参数的形式来传递请求参数。

举例说明，比如说我们将 appRouter 改写成这样，通过 input 参数指定了 useQuery 需要传递一个 name 为字符串且不为空的对象。

import z from 'zod'

const appRouter = router({
  greeting: publicProcedure
    .input(
      z.object({
        name: z.string().nullish(),
      }),
    )
    .query(({ input }) => {
      return {
        text: `hello ${input?.name ?? 'world'}`,
      }
    }),
})

调用 trpc.greeting.useQuery({ name: 'night' }) 发送的请求的 query 参数则变为

不仅于此，你如果同时调用了多次 greeting 函数，如

const result1 = trpc.greeting.useQuery({ name: 'kuizuo1' })
const result2 = trpc.greeting.useQuery({ name: 'kuizuo2' })
const result3 = trpc.greeting.useQuery({ name: 'kuizuo3' })

tRPC 会将这三次函数调用合并成一次 http 请求，并且得到的响应本文也是以多条数据的形式返回

分别输出三者 result 也没有任何问题。

这是 tRPC 的一个特性：请求批处理，将同时发出的请求（调用）可以自动组合成一个请求。

useMutation() | tRPC​

tRPC 同样也支持 post 请求，例如

服务端代码

const appRouter = router({
  createUser: publicProcedure.input(z.object({ name: z.string() })).mutation(req => {
    const user: User = {
      name: req.input.name,
    }

    return user
  }),
})

客户端代码

export default function IndexPage() {
  const mutation = trpc.createUser.useMutation()

  // ERROR!
  // mutation.mutate({ name: 'night' });

  const handleCreate = () => {
    mutation.mutate({ name: 'night' })
  }

  return (
    <div>
      <button onClick={handleCreate} disabled={mutation.isLoading}>
        Create
      </button>
      {mutation.error && <p>Something went wrong! {mutation.error.message}</p>}
    </div>
  )
}

Unhandled Runtime Error
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

此时请求变为 post 请求，并且携带的参数也以 body 形式传递。

通过 useQuery 和 useMutation 就能够用 tRPC 实现最基本的 CRUD。此外还有 useInfiniteQuery 可以用作类似无限下拉查询，类似 SWR 无限加载。useQueries 批量查询，使用 Subscriptions 进行订阅 WebSocket 等等。

tRPC 针对 react 项目的查询主要依赖于 @tanstack/react-query，你也可以到 tRPC React Query documentation 查看相关 hook。

从上述例子中你就会发现，tRPC 将 http 请求给我们包装成了函数形式调用，即上文所说的，调用服务端接口的形式由 发送 http 请求 ⇒ 调用本地函数。

不足​

不过也并非没有缺点（个人认为）。

首先不如传统的 RESTFUL 来的直观，假设我现在在服务端定义了一个服务，那么我只能通过@trpc/client 创建客户端进行调用。虽然也能用 http 的形式，但调用的很不优雅。

在我印象中，RPC 框架通常是可以跨语言进行调用的，比如 gRPC 框架，然而tRPC 目前只能在 Typescript 项目中进行调用，我倒是希望能向 gRPC 那个方向发展，不过不同语言间的类型安全又是个大麻烦。

学习成本与项目成本偏高，tRPC 对整个全栈项目的技术要求比较高，并且限定于 typescript，如果你想将你的项目从传统的 Restful 迁移到 tRPC 上，无疑是个工程量大，且不讨好的事。

创建工程​

这里选用 Create T3 App 用于创建应用（也可以选择 trpc/examples-next-prisma-starter），Create T3 App 集成了诸多有关 TypeScript full-stack 相关的技术栈，其中就包括了本文所要介绍的几个技术栈。

pnpm create t3-app@latest

安装过程如下

prisma​

此时安装完先别急着 pnpm run dev 启动项目，首先执行

npx prisma db push

运行结果如下

Environment variables loaded from .env
Prisma schema loaded from prisma schema.prisma
Datasource "db": SQLite database "db.sqlite" at "file:./db.sqlite"

SQLite database db.sqlite created at file:./db.sqlite

Your database is now in sync with your Prisma schema. Done in 81ms

这会将数据库与 prisma 的 schema 同步，说人话就是将数据库的表与 schema.prisma 文件中的 model 对应。

generator client {
    provider = "prisma-client-js"
}

datasource db {
    provider = "sqlite"
    url      = env("DATABASE_URL")
}

model Example {
    id        String   @id @default(cuid())
    createdAt DateTime @default(now())
    updatedAt DateTime @updatedAt
}

// Necessary for Next auth
model Account {
    id                String  @id @default(cuid())
    userId            String
    type              String
    provider          String
    providerAccountId String
    refresh_token     String? // @db.Text
    access_token      String? // @db.Text
    expires_at        Int?
    token_type        String?
    scope             String?
    id_token          String? // @db.Text
    session_state     String?
    user              User    @relation(fields: [userId], references: [id], onDelete: Cascade)

    @@unique([provider, providerAccountId])
}

model Session {
    id           String   @id @default(cuid())
    sessionToken String   @unique
    userId       String
    expires      DateTime
    user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model User {
    id            String    @id @default(cuid())
    name          String?
    email         String?   @unique
    emailVerified DateTime?
    image         String?
    accounts      Account[]
    sessions      Session[]
}

model VerificationToken {
    identifier String
    token      String   @unique
    expires    DateTime

    @@unique([identifier, token])
}

create-t3-app 默认使用的 sqlite 数据库，优点就是你无需安装任何数据库的环境，将会在 prisma 目录下创建 db.sqlite 文件来存放数据。但是缺点很明显，性能与部署方面是远不如主流服务级别的数据库。尤其是部署，这在后面会说。

将会创建 Account Example Session User Verification Token 表，这里需要教你一个命令

npx prisma studio

此时访问 localhost:5555 将会得到一个 prisma 面板，即项目的所有 model 。

关于 prisma 更多命令请参考 Prisma CLI Command Reference

prisma 在线体验：Prisma Playground | Learn the Prisma ORM in your browser

由于 create-t3-app 已经封装好了数据库的操作，并且导出 prisma 对象，所以你只需要配置好环境变量便可。

主要代码如下

import { PrismaClient } from '@prisma/client'

export const prisma = new PrismaClient()

类型提示​

在上面所定义的 model，都会被 prisma client 创建对应的 typescript 类型（在node_modules/.prisma/index.d.ts），你就可以直接通过 prisma.modelName 来操作 model，例如 Example（这里就不做注释了）

import { prisma } from '~/server/db'

prisma.post.findUnique({ where: { id: 1 } })

prisma.post.create({ data: {} })

prisma.post.update(id, { data: {} })

prisma.post.delete(id)

prisma.post.count()

数据迁移​

我之前如果做数据库备份的话，我通常会在数据库管理软件（Navicat）将整个数据库转储为 SQL 文件，然后要用的时候在运行该 SQL 文件。而这样做呢虽然方便，但是数据都比较死，而且版本多了 sql 文件也多，导入繁琐。

此时就可以使用 Migrate，通过命令的方式自动为我们生成当前版本下的 sql 文件，而需要用到的也通过命令的形式运行 sql 文件。

数据生成​

你可以编写一个 seed 脚本，用于插种（生成）自定义数据。

prisma 不是本文重点，篇幅略少，但是作为 Typeorm 的长期使用者而言，我认为 prisma 会比 typeorm 友善一些，至少从文档上来说 prisma 大胜一筹，而且很多 node 的 web 框架都优先 prisma 作为 orm 框架（除了 nest.js），但不过这两个仓库的 issues 数量有点惨不忍睹。。。

next-auth​

我想先简单介绍一下 next-auth（背后由Auth.js 提供）。

从名字来看也不难猜出，这是一个 next.js 的 auth 库。该库提供了多种身份验证策略，如基于密码的身份验证，OAuth 等等。并且你只需要简单的几行代码，提供好相关信息便可启用身份验证和授权功能。

你可以到这个网站 NextAuth.js Example体验一番。下面是一些代码演示

由于 create-t3-app 默认是 Discord OAuth，因此我这边替换成使用者更多的 Github。（至于如何创建 Github OAuth Apps，在我之前的文章以及外面诸多文章中都有介绍到，这里不在演示了，附上配置图）

首先在

server/auth.ts 中 导入

import CredentialsProvider from 'next-auth/providers/credentials'
import GithubProvider from 'next-auth/providers/github'

并在 options 中设置好 providers，如下

export const authOptions: NextAuthOptions = {
  callbacks: {
    session({ session, user }) {
      if (session.user) {
        session.user.id = user.id
        // session.user.role = user.role; <-- put other properties on the session here
      }
      return session
    },
  },
  adapter: PrismaAdapter(prisma),
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        username: { label: 'Username', type: 'text', placeholder: 'night' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials, req) {
        // Add logic here to look up the user from the credentials supplied
        const user = { id: '1', name: 'night', email: 'hi@night.cn' }

        if (user) {
          return user
        } else {
          return null
        }
      },
    }),
    GithubProvider({
      clientId: env.GITHUB_CLIENT_ID,
      clientSecret: env.GITHUB_CLIENT_SECRET,
    }),
  ],
}

不过此时会提示 env 对象没有 GITHUB_CLIENT_ID 属性，需要在 env.mjs 定义好 GITHUB_CLIENT_ID 与 GITHUB_CLIENT_SECRET。类型安全嘛，你可不想 GITHUB 不小心输成 GAYHUB 导致找不到这个值把。

当上述在设置完毕后，点击 Sign in 按钮便可跳转到 next-auth 所提供的简单登录表单。

如果你想自定义修改登录页面，可以参考该视频Create your own next-auth Login Pages - YouTube

部署 tRPC​

通常来说 tRPC 会配合全栈框架使用，因此可以非常轻松的部署在 Vercel，Netlify 上。如今 Vercel 应该也已经家喻户晓了，因此这里就不演示如何部署，可到 Vercel • Create T3 App 中查看相关步骤。

DATABASE_URL=postgresql://myuser:mypassword@localhost:5432/mydb

至于说自行部署的话，create t3 app 提供了 docker 相关镜像，你可以直接使用 docker 部署，具体步骤可参考 Docker • Create T3 App。

示例​

这里我提供了一个简单的示例，你可以 点我 访问体验一下（项目部署在 Vercel，而数据库服务在腾讯云，登录服务又依赖 Github，所以项目会稍微有那么慢）。整个项目结构大致如下

你可以在 Example Apps | tRPC 查看 trpc 的示例应用。

结语​

如果你是用 Next，Nuxt 等这样的全栈框架，并且你的后端服务使用 Typescript 编写，不妨试试 trpc，你会惊喜地发现，它颠覆了传统的 API 交互，使你的 typescript 全栈应用程序的开发变得更加高效和流畅。

从 JavaScript 到 TypeScript 的演变，全栈应用的端到端类型安全，TypeScript 目前正在逐渐成为前端开发中不可或缺的一部分，也许未来的某一天当人们说起前端三件套时，不再是 HTML，CSS，JavaScript，而是 HTML，CSS，TypeScript。

再说到我为何会去尝试 tRPC，有很大的原因是因为厌倦了传统后端开发，厌倦了 nest.js 开发。然而现实生活中，你所厌倦的，往往是能为你提供收入的。人们总是做着自己不愿做的事，但生活所迫，谁又愿意呢。

对于只会前端的人来说，这是一个非常好的选择。后端即服务的平台使得开发人员能够快速构建应用程序，更快地将其推向市场。当然了，你可以将你的后端应用接入 Baas，这样你就无需配置数据库，编写复杂的身份效验。

如果你想了解 Baas，我想这篇文章或许对你有所帮助。

什么是 Supabase?​

在摘要部分也介绍到名词 BaaS (Backend as a Service) ，意思为后端即服务。这个概念是在我接触 Serverless 的时候了解到的，更准确来说是腾讯云开发。当时在编写小程序的时候，只需要专注与应用业务逻辑，而不用编写数据存储，身份验证，文件存储等后端服务，这些统统由 BaaS 平台所提供。 通常会配合 Serverless 函数使用，通常也叫 FaaS（Function as a Service）。通常来说，FaaS 会依赖于 BaaS 平台。

而 Supabase 便是 BaaS 的平台之一。Supabase 是一个开源的 Firebase 替代品。使用 Postgres 数据库、身份验证、即时 API、边缘函数、实时订阅和存储启动项目。

你也许听过 Firebase，由 Google 提供的私有云服务，但开发者无法修改和扩展其底层代码。而 Supabase 是开源的，提供了类似 Firebase 的功能，且定价灵活，并且官方自称为 Firebase的替代品。

BaaS 与 CMS 有何不同？​

BaaS 通常只专注于应用的后端服务，而 CMS 则是专注与内容管理。不过 BaaS 比较依赖云服务，而 CMS 通常只依赖于 web 后端技术。如果你想搭建一个内容站点（视频，音频，文章），并且作为网站管理员，那么 CMS 就是一个很好的选择，并且有相当多的主题模板。反之，不想搭建后端服务，减少运营程序，那么毫不犹豫的选择 BaaS。

注册 Supabase​

进入 supabase 登录界面 选择 Continue With Github

输入 Github 账号密码进入主页面，新建一个项目

为该项目起名，设置数据库密码，以及分配地区。

等待片刻，你将拥有一个免费的后端服务！

supabase 会提供一个二级域名供开发者访问，也就是这里 Project Configuration 的 URL，对应的这个二级域名 azlbliyjwcxxxxx 也就是你这个项目的唯一标识 Reference ID（下文称 项目 id）。你可以到 https://app.supabase.com/project/你的项目 id/settings/api 中查看相关配置。

体验一下​

这里参考到了官方文档 Serverless APIs。

首先，创建一个 todos 表，并新增字段（列）task 为 varchar 类型，Save 保存。

Insert row 添加一行记录，id 为 1，task 为 code。

现在有了数据后，正常来说我们应该做什么？请求一下数据看看？不不不，应该是设置数据的权限。

打开到下图界面，我们要为 todos 数据新增一个 policy 策略。

supabase 针对不同的场景提供了相应的策略方案模板，你也可以根据你的需求进行设置，这里作为演示不考虑太复杂，选择第一个允许任何人都可以请求到 todos 数据。

接着下一步即可

此时就新增了一个所有用户都可查询的 todo 的策略，同样的你还可以添加只有授权用户才能够创建更新删除 todo，更新与删除只能操作属于自己的 todo 资源。

这时候设置好了数据的权限后，就可以尝试去请求了，打开下图页面，将 URL 与 apikey 复制下来。

选择你一个 http 请求工具，这里我选用 hoppscotch，将信息填写上去，请求将会得到一开始所创建的 todo 数据。

除了 restful api 风格，还支持 graphql 风格，可查阅文档 Using the API

使用类库​

正常情况肯定不会像上面那样去使用，而是通过代码的方式进行登录，CRUD。这里使用 Javascript Client Library，替我们封装好了 supabase 的功能。

首先，安装依赖

npm install @supabase/supabase-js

创建 客户端实例

import { createClient } from '@supabase/supabase-js'

此时准备好上述的 URL 与 apikey，用于创建 supabase 实例，不过 supabase 还提供 type 类型支持，可以将生成的 database.types.ts 导入到实例中，如

import { createClient } from '@supabase/supabase-js'
import { Database } from 'lib/database.types'

const supabase = createClient<Database>(process.env.SUPABASE_URL, process.env.SUPABASE_ANON_KEY)

此时有了 supabse 对象后，就能够请求数据了，像上述通过 http 的方式获取 todos 数据，在这里对应的代码为

const { data, error } = await supabase.from('todos').select()

官方的演示例子 非常清晰，这里就不在演示新增更新等示例。

Supabase 主要功能​

Database 数据库​

supabase 基于 PostgreSQL 数据库，因此当你创建完项目后，就自动为你分配好了一个可访问的 PostgreSQL 数据库，你完全可以将其当做一个远程的 PostgreSQL 数据主机。

可以在如下页面中查看到有关数据库连接的信息，当然你看不到密码。

测试连接，结果如下，并无问题

Authentication 身份验证​

Auth | Supabase Docs

supabase 令我感兴趣的是 Row Level Security，supabase 使用 Postgres 的 Row-Level-Security（行级安全）策略，可以限制不同用户对同一张表的不同数据行的访问权限。这种安全机制可以确保只有授权用户才能访问其所需要的数据行，保护敏感数据免受未授权的访问和操作。

在传统的访问控制模型中，用户通常只有对整个表的访问权限，无法限制他们对表中特定数据行的访问。而行级安全技术则通过将访问权限授予到特定的数据行，从而让不同的用户只能访问他们被授权的行。这种行级安全有一个很经典应用场景-多租户系统：允许不同的客户在同一张表中存储数据，但每个客户只能访问其自己的数据行。

这对于传统后端开发而言，如果不借用一些安全框架，实现起来十分棘手，要么业务代码与安全代码逻辑混杂不堪。

权限细分方面，无需担心，supabase 已经为你做好了准备，就等你来进行开发。

第三方登录​

对于想要提供第三方登录，supabse 集成多数平台（除了国内），只需要提供 Clinet ID, Client Secret, Redirect URL 便可完成第三方登录。

这里演示下如何使用 Github，首先到打开New OAuth Application (github.com) 创建一个 Oauth Apps，其中 Authorization callback URL 由 supabase 提供，如下图。

当你创建完后，会提供 Client ID，与 Client secret，将这两个值填写到 supabase 中，并启用。

此时打开如下页面，将 Site URL 替换成开发环境，或是线上环境，在 Github 登录后将会跳转到这个地址上

此时 supabase 支持 github 登录就已经配置完毕，当你在前端触发登录按钮后，借助supabase 的 js 库，如

const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'github',
})

便可完成 Github 第三方登录。

Bucket 存储桶​

接触过对象存储的开发者对 Bucket 应该不陌生，相当于给你一个云盘，这里演示如何使用。

打开如下界面，这里选择公开存储桶，比如说用于图床。

点击右上角的 upload files，选择你要上传的图片。你可以为此生成一个访问 URL

你可以访问 1.png 来查看这张图片。如果是公开的话 一般都是类似https://azlbliyjwcemojkwazto.supabase.co/storage/v1/object/public/new-bucket/1.png

而私有的为 https://azlbliyjwcemojkwazto.supabase.co/storage/v1/object/sign/new-bucket/1.png?token=eyJhbGciOiJIUzI1NiIsInR5cCIxxxxxxxxxxxxxxxxx 路径稍微变化了下，还有就是多了个 token，如果不携带 token 则访问不了图片。

你可以到Supabase Storage API 查看 storage 相关 api。

Edge Functions 边缘函数​

边缘函数可以分布在全球的接近您的用户各个地方，类似与 CDN，但 CDN 主要服务于静态资源，而 Edge Functions 可以将你的后端应用接口，像 CDN 那样部署到全球各地。

有兴趣可自行了解。

使用 Supabase 编写一个简易图床​

如果只单纯看看 supabase 文档，不去动手实践接入一下，总觉得还是差点意思。于是我准备使用 Nuxt 作为前端框架接入 supabase，官方模块 Nuxt Supabase 去编写一个应用。

原本我是打算写个 Todo List 的（恼，怎么又是 Todo List），但是看到 官方示例（一堆 Todo List）后我瞬间就没了兴致 🥀。

思来想去，不妨就简单做个图床吧。项目地址：https://image.night.cn 有兴趣可自行阅读源码。（写的相对匆忙，仅作为演示，随时有可能删除，请勿将此站作为永久图床！）

一些你可能比较好奇的问题​

资源​

可以到 https://app.supabase.com/project/项目id/settings/billing/usage 中查看相关资源使用情况，这里我就将截图放出来了。

说实话，对于个人独立开发者的项目都绰绰有余了。

费用​

在 资费标准 中可以看到，免费版最多 2 个项目，不过在上述的资源，其实已经非常香了，毕竟只需要一个 GIthub 账号就能免费使用，还要啥自行车。

网速​

国内因为没有 supabase 的服务器节点，然后且有防火墙的存在，所以请求速度偏慢。不过体验下来至少不用梯子，速度慢点但也还在可接受范围。

域名​

用过 vercel 的你应该会想是不是也能自定义域名呢? 当然，不过这是 supabase pro 版才支持，一个月$25(美刀)，算了算了，再一眼 azlbliyjwcxxxxx.supabase.co就会爆炸感觉也蛮好记的。

结语​

说句实话，真心感觉 supabase 不错，尤其是对个人/独立开发者而言，没必要自行去购买服务器，去搭建后端服务，很多时候我们只想专注于应用程序的开发和功能实现，而不是花费大量时间和精力在服务器和后端服务的部署和管理上。

deno 刚出的时候就听闻了，传言 deno 是下一代 node.js。不过如今看来，还革不了 node.js 的命。如果要说两者字面上的区别，Deno 的来源是 Node 的字母重新组合（Node = no + de），表示"拆除 Node.js"（de = destroy, no = Node.js）。

趁着假期学了一段时间的 deno（指文档刷了一遍），想分享本人作为 node 开发者在学习 deno 时认为的一些亮点，以及个人对 deno 与 node 见解。

开发环境​

Installation | Manual | Deno

默认情况下 deno 会根据不同的系统，选择相应的安装目录，以及依赖目录，你可以配置环境变量来改变 deno 的默认行为。

这里我选用 vscode 进行开发，安装deno 官方插件。此时创建一个项目工程文件夹，打开 vscode，并创建 .vscode/settings.json 内容如下

{
  "deno.enable": true,
  "deno.lint": true,
  "editor.formatOnSave": true,
  "[typescript]": { "editor.defaultFormatter": "denoland.vscode-deno" }
}

在 vscode 中默认会将 ts 代码认为是 node 运行时环境，因此需要在项目工程下手动配置并启用 deno，让 vscode 以 deno 运行时环境来语法解析 ts 代码。

deno 的一些亮点💡​

因为 deno 与 node 一样，都是 javascript 运行时（deno 合理来说是 typescript 运行时）。所以在 javascript 的部分就没什么好说的了，主要对比 deno 相比与 node 的优势，或说我个人觉得一些使用亮点。

官方所介绍的亮点​

以下是官方所介绍的亮点，我对其做了翻译

• 提供web 平台功能，采用网络平台标准。例如，使用 ES 模块、Web worker 和支持 fetch()。

• 默认安全。除非显式启用，否则无法访问文件、网络或环境。

• 支持开箱即用的 TypeScript。

• 提供单个可执行文件 （deno）。

• 为编辑器提供内置的开发工具，如代码格式化程序 （deno fmt）、linter （deno lint）、测试运行程序（deno test）和语言服务器。

• 拥有一组经过审查（审核）的标准模块，保证与 Deno 一起使用。

• 可以将脚本捆绑到单个 JavaScript 文件或可执行文件中。

• 支持使用现有的 npm 模块

以下会针对部分亮点，进行个人的见解。

自带实用工具​

deno 则是自带代码格式化（deno fmt）、代码风格（deno lint）、代码测试（deno test）、依赖检查器（deno info）等等的功能。而这些在 node 中，你需要通过第三方的库，如 eslint，jest 才能实现。

你可以在项目工程中添加配置文件 deno.json来定制化代码风格（rust 中也有类似的功能），但在 node 中必须要借助第三方的库，或是 IDE 才能实现。

不过也能理解，在当时的编程环境背景下，javascript 还主要作为前端的脚本语言使用，又怎能让 node 来做相关规范呢？（这句话可能有点不妥）

这点我认为对开发者是否选用你这门语言的一个加分项，并且这些功能也应该作为编程语言所自带的，有官方的背书（保证），对代码风格才更有所保障。

这里有份 官方小抄 可以知道通过deno xxx等命令能够做到 node 原本需要通过第三方库才能实现的功能。

远程导入​

与 node 不同，使用 node 通常需要从 npm 官方包来下载并导，有 npm 这样的包管理器来统一管理这些包（package），我们通常称这种为中心化，而 deno 与 go 的做法很像，你可以将你的封装好的代码定义成一个包，并将其放在任何网络可访问的地方，比如 github，或是私有地址，然后通过网络读取文件的方式来导入，这种称为去中心化。

关于中心化与去中心化管理，各有优缺，这里不做细致讨论。

以下是 deno 官方远程导入的代码示例：

import { add, multiply } from 'https://x.nest.land/ramda@0.27.0/source/index.js'

function totalCost(outbound: number, inbound: number, tax: number): number {
  return multiply(add(outbound, inbound), tax)
}

console.log(totalCost(19, 31, 1.2))
console.log(totalCost(45, 27, 1.15))

/**
 * Output
 *
 * 60
 * 82.8
 */

而这里的 https://x.nest.land/ramda@0.27.0/source/index.js 可以替换成任何 ES module 特性（import/export）的模块。

http 的方式运行代码​

既然都能通过 http（cdn）远程导入模块，那远程运行文件自然也不成大问题。有时候像快捷体验一下别人的代码，或是想要在浏览器中运行一下代码，这时候就可以通过 http 的方式来运行代码。

这里我准备了一段代码，并部署到我的站点上，你可以通过如下命令得到该代码的执行结果（如果你有安装 deno 的话），放心这段代码并无危害，就是一段简单的 console.log 输出。

deno run https://deno.night.cn/main.ts

在第一次使用时下载并缓存代码，你可以通过

deno info http://deno.night.cn/main.ts

来查看文件信息，如下

deno info 还可以查看 deno 的相关配置，默认缓存都设置在 C 盘，你也可以设置DENO_DIR 环境变量来更改 deno 目录，可以到 Set Up Your Environment 查看 deno 相关环境变量。

依赖管理​

经常使用 node 的开发者应该对 node 的依赖感到无比厌烦，关于这部分强烈建议看 node_modules 困境，你就能知道 node 的 node_modules 设计的是有多少问题。看完你也就能知道为啥越来越多的 node 项目都使用 pnpm 作为包管理。

虽然 node 有了 pnpm 包管理器这种情况会好一些，但本质在项目目录还是需要 node_modules 文件。也许你用过其他语言的包管理器，你会发现基本都是将所有用到的依赖全局缓存起来，当不同的项目工程需要用到依赖时，直接去全局缓存中找，而不是像 npm 一样，下载到项目工程目录下，存放在 node_modules 里。

而 deno 也是采用这种这种方式，no npm install，no package.json，no node_modules/ ，使用 npm 包可以像下面这样，当你使用 deno run 时便会下载好依赖置全局缓存中。

// @deno-types="npm:@types/express@^4.17"
import express from 'npm:express@^4.17'
const app = express()

app.get('/', (req, res) => {
  res.send('Hello World')
})

app.listen(3000)
console.log('listening on http://localhost:3000/')

deno 刚发布的时候，甚至还不支持 NPM 软件包，这无非是要告诉用户 deno 社区没有轮子，要求用户自己去造一个。不过 deno 团队还是做出了比较正确的选择，支持 npm 软件包，并且还非常友好。

不过如果你在 deno 中使用了 npm 包，可能会存在一些兼容性问题，万一遇到了，也可以通过添加 --node-modules-dir 标识，在当前运行目录下创建 node_modules 文件夹。详见 --node-modules-dir flag

安全​

Permissions

在 2022 年 npm 出现过一些恶性的库，如 lodash-utils, faker.js, chalk-next。万一你不小心安装了上面，轻则项目无法运行，输出无意义乱码，重则删除本地文件。

又因为 npm 几乎没有代码审计的机制，任何开发者只需要有一个 npm 的账号就能在上面随意发布他想发布的包。通常来说电脑病毒都是通过随意读取与写入本地文件来达到病毒的目的，但在 deno 中，代码如果尝试写入与读入文件，都需要询问开发者是否允许操作。并且在 linux 系统，你可以指定像 /usr /etc 这样非 root 角色来操作该文件，避免真是病毒文件导致删除不该删除的文件。

此外像命令执行，网络访问，环境变量这些极易危害电脑的权限，deno 都会检测到，并做出提示告诫开发者是否允许执行。总之你能想到的电脑安全隐患，deno 都为你做好了。

内置浏览器环境（运行时）​

这是我认为 deno 最大的亮点。

总所周知，浏览器的 js 代码有很大概率是无法直接在 node 中跑起来的，原因就是 node 的全局对象中没有浏览器的对象，如 window，document，甚至连localStorage 都有！

这说明什么，往常如果你从别的网站扣了一段代码下来，想在 node 运行会发现什么 window is not defined，xxx is not defined。如果想在 node 运行，你必须需要补齐浏览器的环境，此外可以借助 js-dom，happy-dom 等 npm 包。而 window，xxx 这些全局只有浏览器才定义的全局对象在 deno 的运行时同样定义了，可以到这里查看支持的 Web 平台 API。

虽说与真实浏览器全局对象有些许差异，但这也足够让开发者少做很多工作。比如 Web 逆向者通常要扣取浏览器的 js 代码，并补齐环境使其能够在 node 中运行，而有了 deno 这将变得非常轻松！

与其说是 javascript/typescript 运行时，我更愿意说是浏览器运行时！

Web 框架​

你可以在 Web Frameworks 中看到 deno 官方所推荐的 Web 框架，其中 Fresh 也是最为推荐使用的（后续我也会尝试使用该框架）。

而在 node 社区中，你会看到像 express，koa，nestjs 等等这种非 Node 官方或大背景的 web 框架（而且还很多），而这时对于初学者而言，就有点不知道该如何做出抉择。

而像 java 中你完全可以不用担心该学什么，说学 spring 就是在学 java 这可一点都不为过。可能这也是国内 java，尤其是 spring 的开发者尤为诸多的原因。

吐槽归吐槽，但我想表明的是在有官方的支持下，用户和开发者能够统一使用某个框架，一起维护与使用一个更好的框架。而不是个个 Web 框架的都有各自的优缺点，让使用者去选择，搞得这个框架是另一个框架的轮子一般。

所以我认为这种支持是很有必要。

公共托管服务​

Project - Deploy (deno.com)

deno 像 vercel/netfily 一样提供了一个代码托管服务，可以将你的 deno 应用部署上去。对，目前来看还无法部署前端应用，因为要指明一个入门文件（main.ts）。

你可以通过 https://night.deno.dev/ 来访问我使用 deno Deploy 所创建的一个在线项目。将会输出一个Hello World! 的页面。

提供一个免费的线上环境体验，对开发者而言尤为重要，尤其是在将自己的项目成果分享给他人展示时，成就感油然而生。

node 转 deno 开发的一些帮助​

deno 相关的亮点我也差不多介绍完了，也许你对 deno 已经有一丝兴趣想尝试一番，以下我整理的对你也许有所帮助。

• 如果你是一个 Node 用户，考虑切换到 Deno，这里有一个官方小抄来帮助你。

• 如果你不想刷 deno 文档，想快速上手 deno 的话，这里我建议推荐看看 deno 官方所推荐的deno 代码例子 ，能够非常快速有效了直接了解 deno 标准库以及依赖导入导出。

• deno 是集成了 node 与 npm 的，也就是说允许直接使用 npm 包与 node 标准库，如果你想用 deno 来写 node，也行，详看Interoperating with Node.js and npm。

• 想要在 deno 中连接数据库，可看Connecting to Databases。

• 如果想看 deno 如何使用 deno 生态的 Web 框架创建一个 Web 服务，推荐fresh框架，并查看该例子fresh/examples/counter

node 火吗?​

关于 deno 就暂且落下笔墨，不妨思考一个问题，node 火吗。

作为 node 开发者，我肯定会说 node 火，不过更多是对 javascript 来说火。

如今 typescript 大势所趋，说 javascript 就等同于说 typescript，而 javascript 和 node 绑定已成事实，而前端也与 javascript 所绑定，如今的前端工程师要是不会 node，都不好意思说自己是个前端工程师。就现阶段看，没了 nodejs，前端技术得倒退十年（不夸张）。

如果是在 Web 前端，Node 确实已经火的一塌糊涂了，然而它的诞生并不是为了 Web 前端，而是希望将 javascript 作为服务器端语言发展。只是后来没有想到的是 Node.js 在前端领域却大放异彩，造就了如今大前端的盛世。

所以在 Web 后端的领域，Node 确实是不温不火，更多的公司都宁可选主流的后端开发语言，而不是优先考虑 Node。不过倒是在 Serverless 领域中，Node 有着一席之地。

所以我想 deno 的出现，不仅是针对 Node.js 的缺陷，更是针对 Node.js 后端开发的不足。至于说 deno 能否完成原先 node 的使命，只有时间能给我们答案。

总结​

从上述看来，你应该会发现 deno 并不和 node 一样是一个纯运行时环境。因为他不仅仅做了 javascript/typescript 运行时环境，还做了很多开发者好评的功能，一个为 javascript/typescript 提供更好的开发支持的产品。

但好评并不能直接决定销量，这些功能看似可有可无，没有激起用户从 Node.js 切换过来的杰出之处。就我体验完发现，好像 deno 能做的东西 node 大部分也能做，只是相对繁琐重复一些而已。但人们更倾向于做一件繁琐重复的事情，而不是做一个新的事情。

扪心自问，我真的很希望 deno 能火，就开发体验而言，比 node 好用太多了，但好用的东西代表不了用的人就多，这个领域中，生态尤为重要。想要让 node 用户转到 deno 开发还有很长一段路要走。

再来反问自己，我现在会将 deno 作为 node 替代品吗，我想我和多数 node 开发者一样，都不会将 deno 作为主力语言(因为有很多项目都已经使用node来进行开发与推动)。但作为个人开发者，尤其是 node 开发者，我认为还是非常有必要去尝试一番 deno，亲手目睹"下一代Node"。

希望本文能对你了解 deno 有所帮助。

相关推荐文章​

Deno vs. Node.js 哪个更好 - 掘金 (juejin.cn)

为什么 Deno 没有众望所归？超越 Node.js 还要做些什么？ - 掘金 (juejin.cn)

连发明人都抛弃 node.js 了，还有前途吗？ - 知乎 (zhihu.com)

已经 2022 年了 Deno 现在怎么样了? - 知乎 (zhihu.com)

同时也有很多人，只局限于使用手头已掌握的技术，而不愿去尝试新技术。举个例子，如今 vue3 都已经正式发布，但仍还有停留在 vue2 不愿尝试 vue3 的开发者。而 java 都发布 18 版本了，可还有很多人都还使用着 java8，这种现象可以说是非常常见了。

这里说说我个人编码经验与看法，仅作为个人观点，没别的意思。

熟悉我的人应该都知道，我对很多新鲜的技术有一种难以用言语表达的情感，又哭又笑。属于是那种看到感兴趣的就会开始尝试，在之前也许更强烈。

驱使我去接触的原因无非就以下几点：

• 开发体验、性能提升
• 对已有技术的厌倦感和对新鲜事物的好奇心
• 更多机会与方向
• 对未来技术趋势有更好的了解

写不完的代码​

首先要知道一点，在任何的软件开发迭代中都没有最终形态的代码。说白话就是代码都是不断更新的，永远写不出最好的代码。

你能看到如今很多开源项目或者商业项目都在不断新增代码或者功能，除非作者不维护了，不然这份代码可以说写到世界末日。

究其原因还是因为社会不断在发展，硬件升级，性能提升，不断的业务需求。毕竟人都在进步，社会难道还不能进步。所以必然会有新的技术出现，只是出现的时间快慢，与技术难点突破。

开发体验、性能提升​

毋庸置疑，在购买方面，肯定是买新不买旧，同样的在技术（软件更新）方面也是则从用新不用旧。驱使软件和框架更新的原因也就是新增了某些功能（特性），对用户（开发者）的体验有所提升。一般而言比较少的会存在反向更新的操作，这里除了某些国产软件~~（如某信，某 Q 等等）~~

就我对此的看法也是如此，假设一个开发工具启动花费了 5s 钟启动，而在它的最新版只需要 1s 钟就能够启动，你会选择更新尝试吗？。再比如一个框架原先的代码需要 10 行代码才能实现的功能，由于新版本提供一个语言级别的语法糖，使该功能只需一行。

并且我对开发体验非常在意，尤其是不好用，或者不好配置的东西，我基本秉持能不用就不用的原则，像 vue2 与 webpack 就是这样，我跟愿意使用 vue3 或 vite。诸如此类的替换有非常多，便不一一列举。

要我肯定毫不犹豫的更新去使用，但有些人可能对此提升不是很在意，又或者是升级的成本相对较高，也可能是因为这个开发工具（框架）他用的比较少，更新的意义自然就不大。

对代码厌倦和对新事物的好奇心​

我写代码时常处于三分钟热度的状态，有些东西可能也就一开始的时候感觉比较新奇，然后就不了了之了。我对此的看法主要还是容易对代码产生厌倦感，不想写代码，不愿意学习。当厌倦感产生了，自然而然就放弃编写，也就是三分钟热度的状态。不过也能侧重体验一点，那就是肯定我对此不是那么感兴趣，既然不是那么感兴趣的东西，又何必在写下去呢？

接着过段时间又遇到了一个新的技术，冲击了我的好奇心，开始尝试。 如此重复，就会发现啥都学了一点，但实际是啥都没学到。但至少，让我肯去学习，而不是在原地踏步。而从心底里就想接触的新鲜事物，每次接触到就能满足自己内心的好奇心，就这一点我便知足了。

重构的艺术​

如果回头看看自己 1，2 年前写的代码，会发现原来自己也曾写过丑陋不堪的代码，也成为过自己所讨厌的样子。如果这份代码我将来还会用到，那么我就尝试去重构，也许在当时还不支持某种特性，代码就无法简化。基于现有的水平，便会发现很多代码都有可改善的地方，可以化繁为简。代码重构属于将杂乱摆放的东西，收拾的整整齐齐的样子。重构是在提升观赏度和舒适度的同时，还减少 bug 的诱发概率。

在编程语言级别水平上，也就是我为什么会想去使用最新的版本（ES2022，TypeScript 4.9），即便是兼容性的问题，我也会去使用，就是因为能够满足我对代码的舒适度，这便足以。

生态与解决问题方面​

我是很感谢新技术的出现，他实实在在的解决了一些我已有的痛点，提升了我的开发体验。当然它也让我踩了无数的坑，也折磨过我。但不可否认的是，我的自我解决问题的能力也在不断提升，如果我学的是一门比较流行的技术，那么我所遇到的问题，很有可能别人也遇到过，并将他的解决方案分享出来。而我就很容易根据报错描述找他的解决方案来解决我的问题。但在新技术下，用的人自然而然就少了，所分享的问题解决方案也就少了，所以在这种环境下，我就需要自行翻看源码，查阅文档，提出 issues 才能够解决问题。自然而然解决问题的能力也就有所提升。

像流行框架能有这么有问题解决方案，就是因为强大的生态，同时这也是生态好处之一。

因此也有很多人顾忌使用新技术，就是因为遇到问题不知如何解决。包括我也是，但通常我会观察一段时间，等成熟了我才去尝试，而不是直接上手，避免踩一些不必要且耗时的坑。

总是活在舒适圈​

在圈内有着熟悉的环境，与认识的人相处，做自己会做的事，所以会感到很轻松、很自在。但是当踏出这个圈子的界限的时候，就马上会面对不熟悉的变化与挑战，因而感到不舒适，很自然的想要退回到舒适圈内。

我在阅读英文博客的时候，我也时常感到不舒适，阅读不下去。我也很想回到舒适圈，使用翻译软件来翻译但是这样就会导致我非常依赖翻译软件，就间接失去了一次英文环境与英语能力的提升。

长时间待在舒适圈，会让自己过得很舒服，但是却很难提升自己。不过想想也是，提升的过程不就是苦尽甘来。

以目前来看有一种这样的学习趋势，别人学什么，当下什么技术火，就去学什么。我其实特别反感这种现象，也不推崇这种学习理念。我会做出我的解释：

首先，什么技术会火就学什么，这固然没什么问题，如果一门技术没有热度，没有生态，那么学了的意义不大，一是难有长久稳定的技术发展，二是不能将技术变现。而绝大多数人之所以选择火的技术，有很大一点是因为有前人给他铺了很多“路”，如学习指南，思维导图，视频教程仿佛跟着学就能成为编程大牛似的。可一旦没有这些，就不知道该如何下手。始终都是跟着别人步伐学习，思维很难扩散出去。

并且这种现象必然会导致内卷，首先看看国内的技术，Vue 和 Spring boot 的可以说 10 个 web 开发程序员中有 8 个技术栈是这套，比麻花还是卷了，可薪资呢？

这里我并不想贴相关的薪资图片，你完全可以自行去了解，但是我可以肯定且直接告诉你，React 的薪资普遍会比 Vue 高上一截，而 Java 后端开发，如果技术只停留在 CRUD 的层面，工资普遍也高不了多少。

如果你不去拓展自身的技术栈，不多去了解一些未来的可能会火的技术，还停留在当下，活在舒适圈。那么薪资大概率不变，并且自身会有很大被劝退的概率。

与时俱进，这是我认为不断学习新技术，提升自身技术栈，非常重要的一点。过得舒服，反而过得难受

更多的机会与方向​

技术更新迭代越来，也带来越多的机会，这对于接触前端的我感到尤为明显。假设当下又出了某某技术，那么必然会引起软件开发者的关注，于此同时就带来了维护者，贡献者，甚至是一些金主投资商。像 Tailwind CSS 与 Vercel 就是一个很好的例子，两个前端明星项目，有兴趣可以了解它们的故事。

不过这种机会在国内不太多见，反而在国外特别普遍。

但必须要承认的一个事实，如今技术发展过于迅猛，加上目前就业行情不容乐观，当别人了解过的东西，你却不了解，那么别人所能遇到的机会自然就比你多。说的难听点也就是没有对技术提升的想法，今后项目迭代的过程中使用到一些前沿技术就难以胜任。

没有目标的学习，等同于乱学​

没有一个明确的目标，学任何（新）技术都是乱学，充其量也就只比不学好一点。

这在我初学阶段尤为明显，我一开始也不清楚我以后会从事什么行业，可以说是什么都乱学一顿。在我的一篇年终总结 2019.7-2020.7 编程年记 中可以说是尤为明显，尤其是在 定一下明年的目标 的段落中，最后我真正深入学习的也就是只有 Web 开发。

我相信很多初学者也会遇到类似的问题，不知道学什么，想学好找工作的但是薪资不高，想学感兴趣的但又不知如何下手。说实话，要我回到当初，我也难以抉择。也有可能处于摆烂状态或是乱学一同，到头来啥都会一点点，但是又好像啥也不会的样子。

这里我是奉劝先定一个短期的目标，为了这个目标我要去学习哪些技术知识。这里就说我未来一年的目标为例：我未来一年想写开源项目，为开源社区做一份微薄贡献，乃至从事开源行业。那么我就需要了解写开源我需要那些预备知识，例如 Github 的使用，项目规范，英文交流等对应开源项目的技能知识，这才是我所该学的，并且能够实实在在用到的，且对我未来有用的。

对未来技术趋势有更好的了解​

**当你了解的技术越多，你就越能知道自己适合哪些技术。**并且当你去尝试过后，更能加深你对某个技术的信仰。

在未来技术只会越来越多，因为当下要解决太多问题，有太多的业务需求开发。只要不断有需求，就不断会有技术更新。但技术更新必然是朝着好的方向去发展，即技术趋势方向。而了解的越多，能看到技术趋势也就更远，方向就更难偏移。

像我目前就比较看好未来 js/ts 的发展，这也是使我从逆向和爬虫转到 Web 开发行业上，并且将会长期发展下去。

但很多程序员就缺乏这种对技术的认可，甚至眼光比较浅薄，认为自己当下所学的就足以，可没却从未到真正的”外面”去看过。

当有了对未来技术趋势的了解，自身就有相对明确的目标学习，而不是漫无目的学习，跟风学习。

我是如何了解到这些技术的？​

也许有些人并不在意新技术是否学习，而是好奇我是如何知道这些技术的。这个问题非常好，我自己简单总结通过那些途径来获取到这些相关技术的新闻。

主要有以下几种来源：

• 多加技术群，不定时看群聊
• 多刷技术大佬文章（推特），或者是技术公众号和掘金（最多的也是最有效的）
• 订阅一些技术周刊，或订阅某个项目

没啥技巧，就靠刷技术文章，自然而然的了解也就越来越多了。

尤其是第二点，也是我了解这些新技术的最直接途径。与其自己去主动了解新的技术，将刷抖音的时间改成刷技术文章，了解新技术就是分分钟的事情。可以说我写博客是因为这个契机，记录自己用到的技术的开发过程，并分享个人的开发体验，让更多人了解到这些新技术。

面对新技术该怎么学？​

其实更多时候是比较在意如何去学一门新技术，而不是找一门新技术，当阅历多了，技术自然就了解的多。这里我分享下我对于新技术是如何起步与学习的。

首先我会列举出我近期感兴趣的技术，这一步很关键，我当然不可能每个技术都去尝试一遍，时间精力根本不够。通常在我了解到这个技术的时候，比如文章与视频中，都会介绍到这个的优点与用法，这就足以了。

但想要进一步的学习，还是得依靠实战项目（至少我都是通过实战项目来学习的），这时候我会看看手头的项目，看看有没有能够基于上面所列举出的新技术升级的想法，如果有的话，那正好就当重构与新技术的学习，这是最好的，也是相对比较节省时间的。

但如果没有的话，我通常是会考虑另写一个项目，而这个项目可能是某个灵感的实现，也可能是久违想写的项目，或者是复刻某个感兴趣的站点，总之从上面所列举出来的技术中去选择一个来进行实践。在项目实践中去尝试使用这些新技术，哪怕只是实现一个简单的 demo，也总比单纯的刷文档，看代码来的有效。

在项目实践中学习，永远是最直接也是最有效的。回想你编写课设或者工作的项目，是不是在项目开发中进步的最快？如果这时候还有点时间紧迫感，进步反而会更快。（当然焦虑和压力也会随之提升）

最后感悟​

关于本文，必然有引来一些不同看法与见解，每个人都有对不同事物的理解，我只是将我对新技术的看法，以文章的方式输出出来。本文并未带有任何的技术的偏见，我对任何技术都保持一视同仁，并且愿意去尝试学习。

不必抱怨新技术发展的过快，自己来不及学，学不完。或者担心自己学的东西在未来将会淘汰，等同于白学。学习过程就是一个非常好的经验总结，当你回顾整个学习过程，其实都没有白学。反而多一次的学习过程，在未来学习新的东西时，学习的成效也会显著提升。保持不断学习，就永远来的及学习。

更多时候，不应该只学如何使用，而是该想想这东西是在什么样的契机下如何被创造出来的，解决了什么问题。而这个问题在未来有没有什么更好的解决方案可替代，如果有更好的解决方案，那么必将又将发展出新的技术来更好的解决这个问题。这在我曾经的学习中，我是从未考虑到的，只专注于学习，而没去了解为什么。

我是希望越来越多的新技术出现，无论它是为了解决什么，必然能解决某些人的一些需求，那么它的出现就很有意义。至于未来该技术和相关生态发展如何，不得而知。也没人敢笃定未来这个技术必定会火，就去学这门技术。绝大大多情况下都是比较看好这门技术，认为未来可期，同时又感兴趣，就开始学习并使用。

那我为何会接触算法呢？​

我在今年暑假期间有一个面试，当时面试官想考察下我的算法能力，而我直接明摆了说我不行（指算法上的不行），但面试官还是想继续考察，于是就出了道斐波那契数列作为考题。

但我毕竟也接触了 4 年的代码，虽说不刷算法，但起码也看过许多文章和代码，斐波那契数列使用递归实现的代码也有印象，于是很快我就写出了下面的代码作为我的答案。

function fib(n) {
  if (n <= 1) return n

  return fib(n - 1) + fib(n - 2)
}

面试官问我还有没有更好的答案，我便摇了摇头表示这 5 行不到的代码难道不是最优解？

事实上这份代码看起来很简洁，实际却是耗时最慢的解法

毫无疑问，在算法这关我肯定是挂了的，不过好在项目经验及后续的项目实践考核较为顺利，不然结局就是回去等通知了。最后面试接近尾声时，面试官友情提醒我加强基础知识（算法），强调各种应用框架不断更新迭代，但计算机的底层基础知识是不变的。于是在面试官的建议下，便有了本文。

好吧，我承认我是为了面试才去学算法的。

对上述代码进行优化​

在介绍我是从何处学习算法以及从中学到了什么，不妨先来看看上题的最优答案是什么。

对于有接触过算法的同学而言，不难看出时间复杂度为 O(n²)，而指数阶属于爆炸式增长，当 n 非常大时执行效果缓慢，且可能会出现函数调用堆栈溢出。

如果仔细观察一下，会发现这其中进行了非常多的重复计算，我们不妨将设置一个 res 变量来输出一下结果

function fib(n) {
  if (n <= 1) {
    return n
  }

  const res = fib(n - 1) + fib(n - 2)
  console.log(res)
  return res
}

当 n=7 时，所输出的结果如下

这还只是在 n=7 的情况下，便有这么多输出结果。而在算法中要避免的就是重复计算，这能够高效的节省执行时间，因此不妨定义一个缓存变量，在递归时将缓存变量也传递进去，如果缓存变量中存在则说明已计算过，直接返回计算结果即可。

function fib(n, mem = []) {
  if (n <= 1) {
    return n
  }

  if (mem[n]) {
    return mem[n]
  }

  const res = fib(n - 1, mem) + fib(n - 2, mem)
  console.log(res)
  mem[n] = res
  return res
}

此时所输出的结果可以很明显的发现没有过多的重复计算，执行时间也有显著降低。

这便是记忆化搜索，时间复杂度被优化至 O(n)。

可这还是免不了递归调用出现堆栈溢出的情况（如 n=10000 时）。

从上面的解法来看，都是从”从顶至底”，比方说 n=7，会先求得 n=6 的结果, 而 n=6 又要求得 n=5 的结果，依次类推直至得到底层 n=1 的结果。

事实上我们可以换一种思路，先求得 n=1，n=2 的结果，然后依次类推上去，最终得到 n=6，n=7 的结果，也就是“从底至顶”，而这就是动态规划的方法。

从代码上来分析，因此我们可以初始化一个 dp 数组，用于存放数据状态。

function fib(n) {
  const dp = [0, 1]

  for (let i = 2; i <= n; i++) {
    dp[i] = dp[i - 1] + dp[i - 2]
  }

  return dp[n]
}

最终 dp 数组的最后一个成员便是原问题的解。此时输出 dp 数组结果。

且由于不存在递归调用，因此你当 n=10000 时也不在会出现堆栈溢出的情况（只不过最终的结果必定超出了 JS 数值可表示范围，所以只会输出 Infinity）

对于上述代码而言，在空间复杂度上能够从 O(n) 优化到 O(1)，至于实现可以参考 空间优化，这里便不再赘述。

我想至少从这里你就能看出算法的魅力所在，这里我强烈推荐 hello-algo 这本数据结构与算法入门书，我的算法之旅的起点便是从这本书开始，同时激发起我对算法的兴趣。

两数之和​

于是在看完了这本算法书后，我便打开了大名鼎鼎的刷题网站 LeetCode，同时打开了究极经典题目的两数之和。

有人相爱，有人夜里开车看海，有人 leetcode 第一题都做不出来。

题干：

给定一个整数数组 nums  和一个整数目标值 target，请你在该数组中找出和为目标值 target 的那 两个 整数，并返回它们的数组下标。

你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。

你可以按任意顺序返回答案。

以下代码将会采用 JavaScript 代码作为演示。

暴力枚举​

我初次接触该题也只会暴力解法，遇事不决，暴力解决。也很验证了那句话：不论多久过去，我首先还是想到两个 for。

var twoSum = function (nums, target) {
  const n = nums.length

  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      if (nums[i] + nums[j] === target && i !== j) {
        return [i, j]
      }
    }
  }
}

当然针对上述 for 循环优化部分，比如说让 j = i + 1 ，这样就可以有效避免重复数字的循环以及 i ≠ j 的判断。由于用到了两次循环，很显然时间复杂度为 O(n²)，并不高效。

哈希表​

我们不妨将每个数字通过 hash 表缓存起来，将值 nums[i] 作为 key，将 i 作为 value。由于题目的条件则是 x + y = target，也就是 target - x = y，这样判断的条件就可以由 nums[i]+ nums[j] === target 变为 map.has(target - nums[i]) 。如果 map 表中有 y 索引，那么显然 target - nums[i] = y，取出 y 的索引以及当前 i 索引就能够得到答案。代码如下

var twoSum = function (nums, target) {
  const map = new Map()

  for (let i = 0; i < nums.length; i++) {
    if (map.has(target - nums[i])) {
      return [map.get(target - nums[i]), i]
    }
    map.set(nums[i], i)
  }
}

而这样由于只有一次循环，时间复杂度为 O(N)。

双指针算法(特殊情况)​

假如理想情况下，题目所给定的 nums 是有序的情况，那么就可以考虑使用双指针解法。先说原理，假设给定的 nums 为 [2,3,5,6,8]，而目标的解为 9。在上面的做法中都是从索引 0 开始枚举，也就是 2,3,5…依次类推，如果没找到与 2 相加的元素则从 3 开始 3,5,6…依次类推。

此时我们不妨从最小的数和最大的数开始，在这个例子中也就是 2 和 8，很显然 2 + 8 > 9，说明什么？说明 8 和中间所有数都大于 9 即 3+8 ，5+8 肯定都大于 9，所以 8 的下标必然不是最终结果，那么我们就可以把 8 排除，从 [2,3,5,6] 中找出结果，同样的从最小和最大的数开始，2 + 6 < 9 ，这又说明什么？说明 2 和中间这些数相加肯定都下雨 9 即 2+3，2+5 肯定都小于 9，因此 2 也应该排除，然后从 [3,5,6] 中找出结果。就这样依次类推，直到找到最终两个数 3 + 6 = 9，返回 3 与 6 的下标即可。

由于此解法相当于有两个坐标(指针)不断地向中间移动，因此这种解法也叫双指针算法。当然，要使用该方式的前提是输入的数组有序，否则无法使用。

用代码的方式来实现：

1. 定义两个坐标(指针)分别指向数组成员最左边与最右边，命名为 left 与 right。
2. 使用 while 循环，循环条件为 left < right。
3. 判断 nums[left] + nums[right] 与 target 的大小关系，如果相等则说明找到目标(答案)，如果大于则 右指针减 1 right—-，小于则左指针加 1 left++。

function twoSum(nums, target) {
  let left = 0
  let right = nums.length - 1

  while (left < right) {
    const sum = nums[left] + nums[right]
    if (sum === target) {
      return [left, right]
    }

    if (sum > target) {
      right--
    } else if (sum < target) {
      left++
    }
  }
}

针对上述两道算法题浅浅的做个分享，毕竟我还只是一名初入算法的小白。对我而言，我的算法刷题之旅还有很长的一段时间。且看样子这条路可能不会太平坦。

算法对我有用吗？​

在我刷算法之前，我在网上看到鼓吹算法无用论的人，也能看到学算法却不知如何应用的人。

这也不禁让我思考 🤔，算法对我所开发的应用是否真的有用呢？

在我的开发过程中，往往面临着各种功能需求，而通常情况下我会以尽可能快的速度去实现该功能，至于说这个功能耗时 1ms，还是 100 ms，并不在乎。因为对我来说，这种微小的速度变化并不会被感知到，或者说绝大多数情况下，处理的数据规模都处在 n = 1 的情况下，此时我们还会在意 n² 大还是 2ⁿ 大吗？

但如果说到了用户感知到卡顿的情况下，那么此时才会关注性能优化，否则，过度的优化可能会成为一种徒劳的努力。

或许正是因为我都没有用到算法解决实际问题的经历，所以很难说服自己算法对我的工作有多大帮助。但不可否认的是，算法对我当前而言是一种思维上的拓宽。让我意识到一道（实际）问题的解法通常不只有一种，如何规划设计出一个高效的解决方案才是值得我们思考的地方。

结语​

借 MIT 教授 Erik Demaine 的一句话

If you want to become a good programmer, you can spend 10 years programming, or spend 2 years programming and learning algorithms.

如果你想成为一名优秀的程序员，你可以花 10 年时间编程，或者花 2 年时间编程和学习算法。

这或许就是学习算法的真正意义。

参考文章​

初探动态规划

学习算法重要吗?

安装​

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts

运行

npm run dev

访问 http://localhost:3000

项目结构​

路由​

nextjs 有一个基于页面概念的文件系统路由器，存放在 pages 下.js, .jsx, .ts, .tsx 文件都将作为组件，即文件路径 → 页面路由，例如这里的 index.tsx 映射为 index，pages/about.js 将映射为 /about。

同时还支持动态路由，创建pages/user/[id].tsx文件，然后访问user/1，user/2

import { useRouter } from 'next/router'

const User = () => {
  const router = useRouter()
  const { id } = router.query

  return <div>User id:{id} </div>
}

export default User

此时访问 http://localhost:3000/user/1 便可得到 User ID: 1

在 router 对象下没有 param 属性，都是存放在 query 参数中，例如访问 user/1?username=night，此时的 query 值为 {username: 'night', id: '2'}

数据渲染​

如果你打开控制台，查看所返回的页面，你会发现响应中只有 User id:，这不就和 react 的 CSR(客户端)渲染没有区别吗，是的，确实是这样。因为上一部分的代码，并且从输出 query 也可以看的出来而不是 SSR(服务端)渲染。首先我要展示一下两者渲染的代码

CSR 客户端渲染​

import { useEffect, useState } from 'react'
import { useRouter } from 'next/router'

const User = () => {
  const router = useRouter()
  const { id } = router.query

  const [data, setData] = useState({
    username: '',
    email: '',
  })

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
      .then(res => res.json())
      .then(data => {
        setData(data)
      })
      .catch(err => {})
  }, [id])

  return (
    <div>
      <p>username:{data.username} </p>
      <p>email:{data.email} </p>
    </div>
  )
}

export default User

经常写 react 的肯定对上面的代码不陌生，前端向后端发送数据请求，接受到数据后赋值给 data，然后渲染出来。因为请求数据是需要耗时的，所以在页面显示完之后，会停顿一会在显示出数据（主要是我这边没写 loadding），并且由于 id 并不是第一时间获取到的（从上面的 id）。

从这里来看，客户端渲染不仅要获取页面组件，还要请求数据，最终再通过 js 渲染出来

SSR 服务端渲染​

next 中服务端渲染需要用到 getServerSideProps 函数，而后端的数据获取都是在该函数内来获取，并通过 prop 传入给前端组件中，来看实际代码

const User = ({ data }: { data: any }) => {
  return (
    <div>
      <p>username:{data.username} </p>
      <p>email:{data.email} </p>
    </div>
  )
}

export default User

export async function getServerSideProps(context: { query: { id: any } }) {
  const { id } = context.query // 这里context.param也能获取到id

  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)

  const data = await res.json()

  return {
    props: {
      data,
    },
  }
}

如果从页面显示来看，确实没什么区别，但如果打开控制台就能发现诸多不同。

首先就是请求的页面，是直接包含数据，相当于返回你一个页面，而在客户端渲染则是返回一个组件，需要自己去请求数据来展示。

同时查看控制台中的 Fetch/XHR 的是看不到请求的数据，因为这些数据并不是由前端发送的,而是由后端发送的（故不受跨域请求的限制）。

从这就能看出客户端渲染与服务端渲染的的区别了。

SSG 静态生成​

不过还没完，还有一个静态生成，先来看看代码。

const User = ({ data }: { data: any }) => {
  return (
    <div>
      <p>username:{data.username} </p>
      <p>email:{data.email} </p>
    </div>
  )
}

export default User

export async function getStaticProps(context: { params: { id: any } }) {
  const { id } = context.params

  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)

  const data = await res.json()

  return {
    props: {
      data,
    },
  }
}

export async function getStaticPaths() {
  return {
    paths: new Array(20).fill(0).map((a, i) => ({ params: { id: String(i + 1) } })),
    fallback: 'blocking',
  }
}

主要是 getServerSideProps 替换成 getStaticProps，同时增加了一个 getStaticPaths 用于生成静态页面的，而上面的 getStaticPaths 表示生成 id 1 到 20 的页面，那假设如果我访问 id 为 21 的 user 呢？由于这里设置fallback: 'blocking'，所以还是会走服务端渲染的那一部分。但如果设置fallback: fasle，访问 user/21 就会提示 404。

通俗点来说就就是生成一系列静态页面，不需要服务端处理，所以返回的速度更快，其缺点其实也比较明显，数据的任何更改都需要在服务端重新构建，而服务端渲染则是可以动态处理数据，不需要完全重建。

ISR 增量式静态生成​

不做过多介绍，详看文档 Data Fetching: Incremental Static Regeneration | Next.js (nextjs.org)

api 接口​

上面的数据都是调用 JSONPlaceholder 所提供的虚拟数据，在 next 中要提供数据接口的话，只需要在 pages/api 下编写即可，生成的路由规则和组件一样。例如 pages/api/hello.ts 映射为 api/hello，浏览器访问http://localhost:3000/api/hello 就可以得到{"name": "John Doe"}

import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {
  name: string
}

export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
  res.status(200).json({ name: 'John Doe' })
}

这里的 req、res 就是同大部分 node 后端框架一样，而这里的写法与 serverless 一致（这里应该就是 serverless）。

上述是 get 请求，那 post 请求呢？无论什么 http 请求方法都将在 handler 处理，通过 req.method 来获取请求方法，要区分的话可以通过如下代码。

export default function handler(req, res) {
  if (req.method === 'POST') {
    // Process a POST request
  } else {
    // Handle any other HTTP method
  }
}

写一个简单的 CRUD​

既然知道了上述的一些作用，不妨来个熟悉的 CRUD。这里以文章 post 为例

这里数据端使用的时 sqlite，配置不做展示，只展示主要核心功能

import type { NextApiRequest, NextApiResponse } from 'next'
import db from '../../../lib/db'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    switch (req.method) {
      case 'GET':
        db.all(`select * from post`, (err, rows) => {
          res.status(200).json(rows)
        })
        break
      case 'POST':
        const { title, content } = req.body

        db.get(`insert into post(title, content) values(?, ?)`, [title, content], (err, rows) => {
          res.status(200).json(rows)
        })
        break
    }
  } catch (error) {
    res.status(500).end()
  }
}

import type { NextApiRequest, NextApiResponse } from 'next'
import db from '../../../lib/db'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const { id } = req.query
  const { title, content } = req.body

  try {
    switch (req.method) {
      case 'GET':
        db.get(`select * from post where id=$id`, { $id: id }, (err, rows) => {
          res.status(200).json(rows)
        })
        break
      case 'Put':
        db.get(
          `update post set title=?,content=? where id=?`,
          [title, content, id],
          (err, rows) => {
            res.status(200).json(rows)
          },
        )
      case 'DELETE':
        db.get(`delete from post where id=$id`, { $id: id }, (err, rows) => {
          res.status(200).json(rows)
        })
    }
  } catch (error) {
    res.status(500).end()
  }
}

这里为了符合 RESTFUL 风格，所以 post 下编写了两个文件，这时候请求http://localhost:3000/api/post 就能获取到所有文章数据，基本的 CRUD 也就实现了。

这里写 sql 是真滴繁琐，没使用 str 或是 typeorm 主要是不想把这个 demo 搞得太复杂，实际项目还是用上比较好。

当然这里只是作为后端 api 接口的演示，至于前端的展示与编写就和普通前端开发没啥大的区别。基本后端框架能做的，next 能做后端很多事情，更多的使用还是作为接口转发，中间件等，毕竟 Next 主要的强项还是服务端渲染的能力。

打包部署​

既然说到部署，那肯定离不开 nextjs 的母公司Vercel了，关于 Vercel 之前也写过相关文章，关于 Vercel 就不过多介绍。

nextjs 部署到 vercel 实在简单，将项目推送到 github 仓库中，然后在 vercel 中 New Project，接着选择 nextjs 的仓库，点击 Deploy，静等部署即可。关于部署可以看这篇文章 Vercel 部署个人博客

现在你可以通过访问 kz-next-app-demo.vercel.app 来访问该项目，并尝试访问/api/post，user/1来看看。

只能说不愧是母公司。

至于其他部署？既然都用 nextjs 了，还考虑自建服务器来部署吗？

总结​

这次的整体过程比较简单，后续应该会使用 nextjs 编写一个完整的项目（也有可能是 nuxt.js)。

最近想搞个移动端或小程序的 Vue3 项目，所以选择跨端开发平台就显得十分重要。在业内主要有两个跨端开发平台，Taro 与 uniapp，但 uniapp 貌似对 vue3 的支持不是特别友好。所以让我在 Taro 和 uniapp 之间抉择了一段时间，最终还是尝试选择相对熟悉的 uniapp 来进行开发。

开发环境搭建​

建议安装 HBuilderX，主要是 uni cli 在 APP 平台仅支持生成离线打包的 wgt 资源包，不支持云端打包生成 apk/ipa，并且也不便配置一些打包后的参数。

这里建议安装 Alpha 版，后文会说明缘由。

# 创建以 javascript 开发的工程
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

# 创建以 typescript 开发的工程
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

当然，有可能会下载失败，可以直接访问 gitee下载模板。

项目结构​

|-- src
	|-- App.vue
	|-- env.d.ts
 	|-- main.ts
 	|-- manifest.json
  	|-- pages.json
 	|-- uni.scss
 	|-- pages
 	|   |-- index
 	|       |-- index.vue
  	|-- static
 		|-- logo.png
|-- index.html
|-- package-lock.json
|-- package.json
|-- postcss.config.js
|-- tsconfig.json
|-- vite.config.ts

下载完毕，开始安装依赖，接着就可以开始测试了。

运行编译​

在运行之前，首先将vuex包给移除，不然将会有如下提示，总之就是不推荐使用的意思，而且要使用状态管理也推荐使用 pinia。所以执行 yarn remove vuex 吧

(node:26968) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at F:\Uniapp\my-vue3-project1\node_modules\vuex\package.json.
Update this package.json to use a subpath pattern like "./*".

H5​

运行编译都正常

APP​

使用npm run dev:app后就会发现，终端一直卡在如下界面无法继续。（后面测试发现，除了 H5 能正常运行，其他都会卡住）

编译器版本：3.4.3（vue3）
请注意运行模式下，因日志输出、sourcemap 以及未压缩源码等原因，性能和包体积，均不及发行模式
。
正在编译中...
vite v2.8.6 building for development...
DONE  Build complete. Watching for changes...
ready in 1554ms.

然后呢？？？

算了，就用 HBuilderX 的 cli 先运行到手机或模拟器，然后后打开 app 的时候提示如下错误，点击忽略后发现应用无法正常运行。

查看了下我本地的 HBuilderX 版本是正式版 v3.3.13，而该 Vue3 的模板的 Alpha 版 v3.4.3

好家伙，官方提供的模板都直接使用 Alpha 版，无奈只好点击 查看详情 后问题解决办法。最终测试后，建议是使用最新版，即 Alpha 版本，于是替换了本地正式版的 HbuilderX，应用便能正常运行了。

既然开发环境下能正常运行，那就试下打包。由于 uniapp 打包安卓应用只能打包成 APP 资源，要打包成 apk，要么创建一个 Android Studio 工程，然后将 APP 资源放入并打包成 apk，要么使用云打包（而云打包又是只有 HBuilder 才有的功能）。如果本地没有 Android Studio 相关环境，建议还是使用云打包（简单方便），这里就不演示下打包过程了。

小程序​

这里只测试了微信小程序，在上面 app 的处理完之后，微信小程序也是正常运行，不过至于与上面 Vue3 模板和 HbuilderX 正式版有无关系我就不得而知了，也懒得重装测试了。不过猜测应该与上面无关，毕竟是与手机的 SDK 有关。

组件库​

uniapp 官方中提供了一个 uni-ui 的组件库，但有一个 uniapp 相对知名的组件库 uview，并且相对前者来说更易上手实用，但当我尝试用 HBuilderX 导入时，却出现下方提示。

很显然，uview 并不支持 vue3，但在社区中找到了份同时支持 Vue3.0 和 Vue2.0 的uView，但测试后最终已失败告终。

在社区中也搜到了 ThorUI 组件库 但貌似需要会员收费，果断放弃且没有测试。

然后想到 Taro 中还有 nutui，于是我便开始尝试了一下，不出所料，支持 Vue3 组件库，肯定是支持的。演示如下

但很遗憾，这里的支持也只是局限于 h5 开发。官方也有声明只能开发 h5

@nutui/nutui@next 基于 Vue3 视觉风格 JD APP 10.0 规范 ，只能开发 h5 @nutui/nutui-taro 基于 Vue3 视觉风格 JD APP 10.0 规范 ，必须基于 taro + vue3 框架 进行开发多端（多端指一套代码 部署多端环境 微信小程序 h5、等第三方小程序）

而且想要多端开发，也必须基于 taro + vue3 框架，所以在 uniapp 上的 app 与小程序上自然无法运行（已测试）

所以说一开始在 uniapp 和 taro 中的选择中，为啥不使用 Taro 呢？而且还支持 Vue3（相比 uniapp 而言）？

最终组件库的选择是 uniapp 官方的 uni-ui。

使用 VSCode 开发​

HBuilder 给我代码编写体验并不友好，所以将 uniapp 的项目转 vscode 进行开发，并且使用到 npm 包。

首先创建一个 vite+vue3 项目（或者使用一开始介绍的官方提供的 Vue3 模板，主要是有 cli，需要自行在安装），然后将原 src 目录给删除，替换成 uniapp 创建的项目根目录。但还需要做以下操作

安装 sass​

vite 要支持 sass 只需要安装 sass 的依赖即可

npm install sass

允许 js 文件​

由于使用了 ts，如果项目中存在 js 文件，将会警告，可以在 tsconfig.json 中添加"allowJs": true即可

组件语法提示​

npm i @dcloudio/uni-helper-json @types/uni-app @types/html5plus -D

但发现对于 uni-ui 组件库的代码提示并不友好，大概率是需要局部引用组件，我这里并未使用npm 包的方式导入，而是采用官方的 uni_modules，不过组件库的代码提示的问题不是很大，查阅文档即可解决。

导入代码块​

uni-app 代码块（vscode） (github.com)

找不到模块“./App.vue”或其相应的类型声明​

在 src 目录下创建env.d.ts文件，填入以下内容即可

/// <reference types="vite/client" />

declare module '*.vue' {
  import { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

然后就是把一些#ifndef VUE3不是 vue3 的代码块，以及部分 js 文件改写成 ts 文件即可。这里把我修改后的模板上传到 github 上，有需要的可自行下载：night/vite-vue3-uniapp (github.com)

如果不想使用官方的 vue3 模板，这里也有篇文章介绍如何迁移

迁移 HbuilderX 的 uniapp 项目到主流的前端 IDE 开发（支持 VS Code 等编辑器/IDE）

不过最终如果要在 app 或小程序端运行，还是得打开 HBuilder。

总结​

整个过程下来，其实还是 uniapp 对 Vue3 支持不够友好，加上生态没能及时更新。并且官方提供的 Vue3 模板也存在一定问题。

但最终还是使用 uniapp 来进行开发，一是对 Vue3 足够了解加上使用过 uniapp，二是 Taro 对 Vue3 是支持了，但是又该如何编译成 App 这是我主要需求的，最主要还是不想踩一遍 Taro 的坑了。

Vue Cli​

Vue CLI 有一个插件vue-cli-plugin-electron-builder，可以非常方便的搭建 electron 环境。

npm i @vue/cli -g

vue create my-app

根据自己项目的需求选择对应的依赖（例如 Babel，TS，Vuex 等等）

Vue CLI v5.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No


Vue CLI v5.0.3
✨  Creating project in F:\Electron\my-app.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

安装 vue-cli-plugin-electron-builder​

Vue CLI Plugin Electron Builder (nklayman.github.io)

cd my-app
vue add electron-builder

安装过程中会提示你选择 Electron 的版本，选择最新版本即可

启动项目​

npm run electron:serve

参考文章：Electron + Vue3 开发跨平台桌面应用【从项目搭建到打包完整过程】 - 掘金 (juejin.cn)

坑​

error  in ./src/background.ts

Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function

我测试的时候，@vue/cli-plugin-typescript版本为~5.0.0，就会导致编译类型出错，将 package.json 中改为"@vue/cli-plugin-typescript": "~4.5.15"，即可正常运行（但还是会有 DeprecationWarning）

Vite​

上面是使用 Vue Cli 脚手架进行开发，如果想上 Vite 的话，就需要用 Vite 来构建项目，然后安装 electron 的相关依赖。

这个不是作为重点，因为很多大佬都已经写了现成的模板，完全可以自行借鉴学习，就贴几个阅读过的几篇文章

Vite + Vue 3 + electron + TypeScript - DEV Community

2021 年最前卫的跨平台开发选择！vue3 + vite + electron - 知乎 (zhihu.com)

现成的模板​

均可在 github 上搜索到

• vite-react-electron (推荐)

• electron-vue-vite (推荐)

• vite-electron-builder

electron-vite 脚手架（推荐）​

当然也可以使用脚手架，可选择 React 与 Vue，实际上也就是创建上面的前两个模板

npm create electron-vite

现有项目使用 electron​

TODO...

总结​

因为 Electron 本质上还是一个浏览器，无论是 Vue 还是 React 开发也好，在传统网页开发的时候都有对应的调试地址，如 http://127.0.0.1:3000，而 electron 的做法无非就是开启一个浏览器，然后和正常的网页开发一样，并提供桌面端的 api 使用。

目前社区两大 Vue+Electron 的脚手架主要是electron-vue和vue-cli-plugin-electron-builder，更多 electron 的开源项目都遵循着前者的项目结构，像上面的模板也就是。

以上就是我所使用 Vue3 来开发 Electron 的环境搭建过程，总体来说从 Electron 除了应用体积过大，对于前端开发者来说是非常友好的，既然环境配置完，那么现在就可以开始好好的编写桌面端应用了。

用户花了几百块购买了一份 ThinkPHP 一个后台管理的网站源码，要求更换下部分失效接口，或是重写一个类似这样的网站。我想既然都有源码了，我改改不就完事了，这不比重写一个来的省事。虽说我不是主学 PHP 的，但至少我学过一丢丢的 PHP 语法，接触过 ThinkPHP 项目。不过层面都是局限在本地，部署到生产环境与本地还是有比较大的差别的，于是便有了这篇文章来记录一下自己部署 ThinkPHP 所遇到的一些坑。

Windows 部署​

也可理解为本地部署，本地部署就相对比较简单的了。不过需要一个工具，PHPStudy，来帮助我们配置本地的环境（Apache、Nginx、PHP、Mysql）

小皮面板(phpstudy) - 让天下没有难配的服务器环境！ (xp.cn)

下载安装打开界面，选择网站，创建网站

由于是本机，所以域名就填写 localhost 或 127.0.0.1，端口的话这边所填写的是 4200，别和其他端口冲突即可。

由于 ThinkPHP 的根目录要选择的是根目录下的 public 目录，不然找不到 index.php 这个文件，所以这里根目录自己指定一下源码的位置，点击确认即可。

初次启动 Not Found​

这时候访问 http://localhost:4200 提示如下

本着不会就百度的原则，很快就找到了解决办法

ThinkPHP 报错 The requested URL /index/index/xxx.html was not found on this server

在入口文件夹 public 下查看.htaccess 是否存在。不存在则新建，存在的话，那内容替换为下面这串代码 就可以解决 Not Fund 问题

#<IfModule mod_rewrite.c>
#  Options +FollowSymlinks -Multiviews
#  RewriteEngine On
#
#  RewriteCond %{REQUEST_FILENAME} !-d
#  RewriteCond %{REQUEST_FILENAME} !-f
#  RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L]
#</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php?/$1 [QSA,PT,L]
</IfModule>

页面报错 开启 Debug​

上面配置完毕后，再次打开出现如下提示。

遇到错误是很正常的，现在要做的就是输出报错信息，而不是简短的文字。到根目录下 config/app.php 中，将调试更改为 true（切记，生产环境中一定要更改为 false，不然用户就能查看报错详情以及对应代码）

配置数据库​

再次访问页面提示

报错信息倒是很全，不过要关注的是报错行和提示，大致意思就是没有定义数据库用户名 ml 以及密码，毕竟数据库啥的都好像没配置，要是能启动起来那估计就真是一个 bug 了，那就先找到配置文件，看看原本的账号密码是多少，数据库配置文件位置config/database.php

不过 PHPstudy 用户名和密码长度都要在 6 位以上（Linux 倒是不用），所以勉为其难，把用户名和密码都改成 ml1234，接着 Mysql 导入源码给定的数据库文件(sql 文件)，什么，你说源码没有给数据库文件，那我建议直接删源码，并且接下来的内容也可以不用看了。

数据库导入完毕后，再次访问便能看到正常的首页了，就此就算部署完毕了，这里就不放首页图了。

Linux 部署​

Linux 部署和 Windows 部署是有一丢丢差别的，这里我也列举一下，环境是 CentOS 7.6，安装了宝塔面板

在宝塔面板出网站，添加网站，如同 PHPstudy，配置大致相同。

关闭防跨站攻击​

情况 1，如图

解决办法：点击网站，设置，将防跨站攻击关闭并保持，如下

设置伪静态​

接着再次访问网站会出现 404 页面不存在报错，在设置中找到伪静态，添加一个 thinkphp 的配置，如下

再次访问后，出现的就是数据库配置的问题，配置一下数据库，导入数据，然后再次访问便可。

环境搭建​

Vue Web-Extension - A Web-Extension preset for VueJS (vue-web-extension.netlify.app)

npm install -g @vue/cli
npm install -g @vue/cli-init
vue create --preset kocal/vue-web-extension my-extension
cd my-extension
npm run server

会提供几个选项，如 Eslint，background.js，tab 页，axios，如下图

选择完后，将会自动下载依赖，通过 npm run server 将会在根目录生成 dist 文件夹，将该文件拖至 Chrome 插件管理便可安装，由于使用了 webpack，所以更改代码将会热更新，不用反复的编译导入。

项目结构​

├─src
|  ├─App.vue
|  ├─background.js
|  ├─main.js
|  ├─manifest.json
|  ├─views
|  |   ├─About.vue
|  |   └Home.vue
|  ├─store
|  |   └index.js
|  ├─standalone
|  |     ├─App.vue
|  |     └main.js
|  ├─router
|  |   └index.js
|  ├─popup
|  |   ├─App.vue
|  |   └main.js
|  ├─override
|  |    ├─App.vue
|  |    └main.js
|  ├─options
|  |    ├─App.vue
|  |    └main.js
|  ├─devtools
|  |    ├─App.vue
|  |    └main.js
|  ├─content-scripts
|  |        └content-script.js
|  ├─components
|  |     └HelloWorld.vue
|  ├─assets
|  |   └logo.png
├─public
├─.browserslistrc
├─.eslintrc.js
├─.gitignore
├─babel.config.js
├─package.json
├─vue.config.js
├─yarn.lock

根据所选的页面，并在 src 与 vue.config.js 中配置页面信息编译后 dist 目录结构如下

├─devtools.html
├─favicon.ico
├─index.html
├─manifest.json
├─options.html
├─override.html
├─popup.html
├─_locales
├─js
├─icons
├─css

安装组件库​

安装 elementUI​

整体的开发和 vue2 开发基本上没太大的区别，不过既然是用 vue 来开发的话，那肯定少不了组件库了。

要导入 Element-ui 也十分简单，Vue.use(ElementUI); Vue2 中怎么导入 element，便怎么导入。演示如下

不过我没有使用 babel-plugin-component 来按需引入，按需引入一个按钮打包后大约 1.6m，而全量引入则是 5.5 左右。至于为什么不用，因为我需要在 content-scripts.js 中引入 element 组件，如果使用 babel-plugin-component 将无法按需导入组件以及样式（应该是只支持 vue 文件按需引入，总之就是折腾了我一个晚上的时间）

安装 tailwindcss​

不过官方提供了如何使用 TailwindCSS，这里就演示一下

在 Vue 3 和 Vite 安装 Tailwind CSS - Tailwind CSS 中文文档

推荐安装低版本，最新版有兼容性问题

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

创建 postcss.config.js 文件

// postcss.config.js
module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'), // if you have installed `autoprefixer`
    // ...
  ],
}

创建 tailwind.config.js 文件

// tailwind.config.js
module.exports = {
  purge: {
    // Specify the paths to all of the template files in your project
    content: ['src/**/*.vue'],

    // Whitelist selectors by using regular expression
    whitelistPatterns: [
      /-(leave|enter|appear)(|-(to|from|active))$/, // transitions
      /data-v-.*/, // scoped css
    ],
  },
  // ...
}

在 src/popup/App.vue 中导入样式，或在新建 style.css 在 mian.js 中import "../style.css";

<style>
/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */

@tailwind utilities;
</style>

从官方例子导入一个登陆表单，效果如下

项目搭建​

页面搭建​

页面搭建就没什么好说的了，因为使用的是 element-ui，所以页面很快就搭建完毕了，效果如图

悬浮窗​

悬浮窗其实可有可无，不过之前写 Chrome 插件的时候就写了悬浮窗，所以 vue 版的也顺带写一份。

要注意的是悬浮窗是内嵌到网页的（且在 document 加载前载入，也就是"run_at": "document_start"），所以需要通过 content-scripts.js 才能操作页面 Dom 元素，首先在配置清单 manifest.json 与 vue.confing.js 中匹配要添加的网站，以及注入的 js 代码，如下

  "content_scripts": [
    {
      "matches": ["https://www.bilibili.com/video/*"],
      "js": ["js/jquery.js", "js/content-script.js"],
      "css": ["css/index.css"],
      "run_at": "document_start"
    },
    {
      "matches": ["https://www.bilibili.com/video/*"],
      "js": ["js/jquery.js", "js/bilibili.js"],
      "run_at": "document_end"
    }
  ]