写在前面：这是给前端实验室实习生培训前写的教案及入门指南（因为实验室一个比赛由于各部门人数不均问题导致部分前端实习生没有后端配合，遂得让他们自己写…），写完后觉得应该值得记录一下，本人也只是全栈半吊子甚至还没入门水平，教案部分源自ai并稍加修改了些许，如有错误敬请指正🤝哦对，最后说一句本来这个文档是docx格式，塞进来不是很方便观看，如有需要可找我发原docx^^
极简操作指南
可复制代码在文档最后面 熟悉后整套配置流程需大约4分钟
第一阶段：项目初始化
1.1 创建项目并安装核心依赖
Win+R 输入cmd=>…
1.2初始化 Prisma
npx prisma init --datasource-provider sqlite
第二阶段 Schema
2.1编写数据库模型 代码见下
2.2创建数据库表
npx prisma migrate dev
第三阶段：后端实现
3.1 创建服务器文件
根目录下创建server文件夹并在文件夹下新建index.ts文件
代码见下
3.2 启动后端服务
npx tsx server/index.ts
第四阶段：前端配置与调用
4.1 配置 Vite 代理（解决跨域） 根目录下vite.config.ts文件
4.2创建 tRPC 客户端
src文件夹下新建utils文件夹并新建trpc.ts
4.3 Vue 组件中使用Prisma+tRPC
编写一个简单的数据存取组件并实现前后端互联
新建终端（Ctrl+Shift+~ 非常好用的快捷键）
输入npm run dev 启动前端
教案
（主要是一些比较概念性的东西 理解使用tRPC和Prisma的优点即可）
一、 培训目标与大纲
培训目标
• 理解全栈类型安全：掌握从前端到后端的完整类型推断，避免前后端接口字段不一致。
• 掌握 Prisma 基本操作：学会初始化客户端、进行简单的增删改查（CRUD）以及理解 ORM 的作用。
• 掌握 tRPC 基础：理解定义路由（Router）和在 Vue 中调用接口的流程。
培训大纲
1. 背景引入与架构对比（10分钟）
2. Prisma 基础与快速上手（15分钟）
3. tRPC 基础路由与上下文（20分钟）
4. Vue 前端集成与类型推断（10分钟）
5. Q&A 与总结（5分钟）
________________________________________
二、 详细教学内容与执行步骤
1. 背景引入与架构对比（10分钟）
核心知识点
• 什么是 tRPC：它是一个允许你在前后端之间共享类型，而无需生成 OpenAPI 规范或 GraphQL 模式的 RPC（远程过程调用）框架。
• 痛点解决：传统开发中，后端修改字段，前端如果不手动同步，很容易导致运行时报错。tRPC 可以实现“全栈类型安全”。
教学讲解要点
1. 学员回顾现有的 Vue 开发经验，平时如何定义 Axios 请求和接口返回类型。
2. 问题：“如果后端改了一个字段名字，前端要改几处？”引出 tRPC 的核心优势。
3. 强调本节课的目标是完成一个从 Vue 到 tRPC 路由，再到 Prisma 查询数据库的闭环。
________________________________________
2. Prisma 基础与快速上手（15分钟）
核心知识点
• Schema 文件定义：如何在 Prisma 中定义模型。
• 数据库迁移：使用 prisma migrate dev 同步数据库。
• Prisma Client：生成强类型的查询客户端。
示例代码：定义一个简单的用户模型
教学执行细节
1. 使用命令行执行初始化：npx prisma init
2. 生成客户端： npx prisma migrate dev --name init
3. Prisma 具有强类型优势，写查询时 IDE 就会有补全提示，减少拼写错误。
________________________________________
3. tRPC 基础路由与上下文（20分钟）
核心知识点
• 初始化 tRPC：创建 tRPC 实例。
• 定义 Router：实现查询（Query）和修改（Mutation）。
示例代码：定义 tRPC 路由
教学执行细节
1. Zod 校验说明：Zod 在这里不仅用于校验输入参数的合法性，更重要的作用是为前端提供对应的 TypeScript 类型推断。
2. query 与 mutation 的区别，这与 Vue 应用里的 GET 和 POST 概念类似。
________________________________________
4. Vue 前端集成与类型推断（10分钟）
核心知识点
• 如何在 Vue 项目中实例化 tRPC 客户端。
示例代码：Vue 组件中使用
Ts部分
Template部分
注：
1. 在 Vue 中可以直接像调用普通函数一样调用 tRPC 方法，且 IDE 会检查类型和参数。
2. 如果后端修改了 Schema 字段名称，前端代码在保存时就会立刻标红报错，极大降低了维护成本。
长代码部分
1.1
# 创建项目
npm create vite@latest Lesson6-fullStack
# 勾选各选项...
# 安装核心依赖
npm install -D prisma@6.5.0
npm install @prisma/client@6.5.0
# tRPC
npm install @trpc/server @trpc/client
# Zod 数据验证
npm install zod
# tsx 运行时
npm install -D tsx
2.1
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "sqlite"
url = env("DATABASE_URL")
}
model Student {
id Int @id @default(autoincrement()) // 主键，自增
studentNumber String @unique // 学号，唯一约束
name String // 姓名
}
3.1
// server/index.ts
import z from "zod";
import { createHTTPServer } from "@trpc/server/adapters/standalone";
import { initTRPC } from "@trpc/server";
import { PrismaClient } from "@prisma/client";
// 初始化
const prisma = new PrismaClient();
// 初始化 tRPC
const t = initTRPC.create();
const router = t.router;
const publicProcedure = t.procedure;
const appRouter = router({
getStudents: publicProcedure.query(async () => {
return await prisma.student.findMany();
}),
createStudent: publicProcedure
.input(z.object({
studentNumber: z.string(),
name: z.string(),
}))
.mutation(async ({ input }) => {
return await prisma.student.create({ data: input });
}),
});
export type AppRouter = typeof appRouter;
// 启动服务器
const server = createHTTPServer({ router: appRouter });
server.listen(3000, () => {
console.log("🚀 后端服务运行在 http://localhost:3000");
});
4.1
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
"/api": {
target: "http://localhost:3000",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
})
4.2
// src/utils/trpc.ts
import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
import type { AppRouter } from "../../server";
export const trpc = createTRPCProxyClient<AppRouter>({
links: [httpBatchLink({ url: "/api" })],
});
4.3
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { trpc } from "./utils/trpc";
const students = ref<any[]>([]);
const loading = ref(false);
const form = ref({
studentNumber: "",
name: ""
});
const loadStudents = async () => {
loading.value = true;
try {
students.value = await trpc.getStudents.query();
} catch (err) {
console.error("加载失败:", err);
} finally {
loading.value = false;
}
};
const addStudent = async () => {
if (!form.value.studentNumber || !form.value.name) {
alert('请输入完整')
return;
}
try {
await trpc.createStudent.mutate({
studentNumber: form.value.studentNumber,
name: form.value.name,
});
form.value = { studentNumber: "", name: "" };
await loadStudents();
alert("添加成功！");
} catch (err) {
console.error("添加失败:", err);
}
}
onMounted(() => loadStudents());
</script>
<template>
<div>
学号:<input type="text" v-model="form.studentNumber">
姓名:<input type="text" v-model="form.name">
<button @click="addStudent">添加学生</button>
</div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>id</th>
<th>学号</th>
</tr>
</thead>
<tbody>
<tr v-for="stu in students">
<td>{{ stu.name }}</td>
<td>{{ stu.id }}</td>
<td>{{ stu.studentNumber }}</td>
</tr>
</tbody>
</table>
</template>
