全栈开发实战：从Vue 3到Node.js构建猫咪船员管理应用 1. 项目概述与核心价值最近在GitHub上看到一个挺有意思的项目叫“KittyCrew”作者是yejiming。光看名字你可能会觉得这是个跟猫咪相关的趣味应用但实际上它是一个非常典型的、用于学习和实践现代Web全栈开发技术的“样板间”项目。简单来说KittyCrew是一个模拟的“猫咪船员管理”Web应用它麻雀虽小五脏俱全从前端界面、后端API到数据库完整地演示了一个小型业务系统的构建流程。对于很多刚学完Vue、React或者Node.js基础语法但不知道如何将它们串联起来做一个真实项目的开发者来说这类项目就像一份清晰的“地图”。它能告诉你一个功能完整的应用其代码结构应该如何组织前后端如何通信数据如何流动以及开发、构建、部署的完整链路是怎样的。KittyCrew的价值就在于它没有复杂的业务逻辑来干扰你的学习而是用“猫咪船员”这个轻松的主题清晰地展示了全栈开发的骨架。无论你是想巩固前端技能还是想理解后端服务如何为前端提供数据或者想学习如何将两者部署上线这个项目都能提供一个绝佳的、可运行的参考范例。2. 技术栈深度解析与选型逻辑KittyCrew项目明确采用了前后端分离的架构这是现代Web开发的主流范式。理解其技术栈的选型能帮助我们看清当前社区的技术趋势和最佳实践。2.1 前端技术栈Vue 3 TypeScript Vite前端部分选择了Vue 3的组合式APIComposition API配合TypeScript并使用Vite作为构建工具。这是一个非常“现代”且高效的选择。为什么是Vue 3和组合式API相较于Vue 2的选项式API组合式API提供了更好的逻辑复用和组织能力。在管理“猫咪船员”这类涉及列表、表单、状态管理的功能时组合式API允许你将相关的响应式数据、计算属性和方法聚合在一个setup函数或script setup语法糖中代码的內聚性更强也更易于在多个组件间抽取和复用逻辑。对于学习者而言这是接触Vue最新、最推荐开发模式的好机会。TypeScript的加入意味着什么TypeScript为JavaScript提供了静态类型检查。在KittyCrew项目中这意味着你可以为每只“猫咪船员”定义明确的接口Interface例如CatCrewMember包含id,name,role,avatar等属性及其类型。这样在编写组件、传递props或处理API返回数据时IDE能提供智能提示和错误检查极大减少了因类型错误导致的运行时Bug。对于从JavaScript过渡的开发者这是一个实践类型安全开发思想的绝佳场景。Vite为何取代了WebpackVite利用了现代浏览器原生支持ES模块的特性在开发环境下实现了极快的冷启动和热更新。对于KittyCrew这样的学习项目快速的反馈循环至关重要。你修改一个组件浏览器几乎瞬间就能更新这种体验能显著提升学习和开发效率。此外Vite的配置远比Webpack简单更符合“开箱即用”的理念让开发者能更专注于业务代码本身。2.2 后端技术栈Node.js Express 数据库后端通常基于Node.js环境使用Express框架来快速搭建RESTful API。数据库的选择可能有多种常见的有SQLite用于轻量演示、PostgreSQL或MongoDB。Express框架的简洁性Express是Node.js生态中最流行的Web框架其中间件Middleware机制和路由系统非常直观。在KittyCrew中你可以清晰地看到如何定义一个GET/api/crew路由来获取所有船员列表以及一个POST/api/crew路由来添加新船员。这种清晰性对于理解HTTP API的工作原理至关重要。数据库交互ORM vs 原生查询为了操作数据库项目可能会引入ORM对象关系映射库例如针对SQL数据库的Prisma或Sequelize或者针对MongoDB的Mongoose。使用ORM的好处是可以用JavaScript/TypeScript对象和类的方式来操作数据库无需手写复杂的SQL语句提高了开发效率和代码可读性。例如通过CrewMember.create({ name: ‘Whiskers’, role: ‘Captain’ })这样一行代码就能完成数据插入。这对于初学者快速建立数据持久化的概念非常有帮助。2.3 前后端通信与状态管理前端通过axios或fetchAPI调用后端提供的RESTful接口。状态管理是这类应用的一个重点。对于KittyCrew的规模可能不需要引入Pinia或Vuex这样专门的状态管理库使用Vue 3的reactive或ref配合组合式函数完全能够胜任。例如可以创建一个useCrewStore的组合式函数内部使用ref来管理船员列表的状态并封装fetchCrew、addCrewMember等方法。这样在任何组件中调用这个函数都能共享和操作同一份船员数据。这种模式清晰地展示了“关注点分离”和“逻辑复用”的思想。注意在学习这类项目时不要仅仅满足于让代码跑起来。要多问几个“为什么”为什么作者在这里用ref而不用reactive为什么API接口设计成这样的URL格式为什么数据模型要这样定义理解背后的设计决策比复制代码更重要。3. 项目结构与核心模块拆解一个清晰的项目结构是良好可维护性的基础。KittyCrew的项目目录通常如下所示理解每个文件夹的职责是读懂项目的第一步。kittycrew/ ├── frontend/ # 前端Vue应用 │ ├── src/ │ │ ├── assets/ # 静态资源图片、样式 │ │ ├── components/# 可复用Vue组件如CrewCard.vue, AddCrewForm.vue │ │ ├── composables/# 组合式函数如useCrewApi.js/ts │ │ ├── router/ # 路由配置如果有多页面 │ │ ├── views/ # 页面级组件如CrewListView.vue │ │ └── main.ts # 应用入口 │ ├── index.html │ └── vite.config.ts # Vite配置 ├── backend/ # 后端Node.js应用 │ ├── src/ │ │ ├── controllers/# 控制器处理请求逻辑 │ │ ├── models/ # 数据模型定义ORM │ │ ├── routes/ # API路由定义 │ │ ├── middleware/ # 自定义中间件如错误处理、日志 │ │ └── app.ts # Express应用实例 │ ├── package.json │ └── tsconfig.json └── README.md # 项目说明、启动指南3.1 前端核心组件剖析CrewListView.vue (船员列表视图)这是应用的主页面负责展示所有猫咪船员。它的核心逻辑包括挂载时获取数据在onMounted生命周期钩子中调用useCrewStore().fetchCrew()向/api/crew发起GET请求。列表渲染使用v-for指令遍历船员数组将每个船员对象传递给子组件CrewCard.vue进行渲染。状态响应列表数据通常用一个ref([])来存储。当数据获取成功后更新该响应式引用Vue会自动触发视图更新。CrewCard.vue (船员卡片组件)这是一个展示型组件接收一个crewMember的prop。它负责以美观的样式展示猫咪的头像、名字和职位。这里会涉及一些基础的CSS技巧比如使用Flexbox或Grid进行布局设置边框阴影、圆角等来提升视觉效果。AddCrewForm.vue (添加船员表单组件)这是一个交互型组件包含表单输入框和提交按钮。其核心逻辑是表单绑定使用v-model将输入框与一个本地的响应式对象如newCrew进行双向绑定。表单验证在提交前进行简单的验证如名字不能为空。可以尝试使用Vuelidate或自己写验证逻辑。提交数据验证通过后调用useCrewStore().addCrewMember(newCrew)将数据POST到后端。成功后通常需要清空表单并刷新列表或通过状态管理自动更新。3.2 后端API路由与控制器以/api/crew路由为例我们来看后端如何工作。routes/crewRoutes.tsimport express from ‘express’; import { getCrew, addCrewMember } from ‘../controllers/crewController’; const router express.Router(); router.get(‘/’, getCrew); // 处理 GET /api/crew router.post(‘/’, addCrewMember); // 处理 POST /api/crew export default router;路由文件非常干净它只做一件事将特定的HTTP请求路径映射到对应的控制器函数。controllers/crewController.tsimport { Request, Response } from ‘express’; import { CrewMember } from ‘../models/CrewMember’; // 假设的ORM模型 export const getCrew async (req: Request, res: Response) { try { const crew await CrewMember.findAll(); // 使用ORM查询所有记录 res.status(200).json(crew); // 以JSON格式返回数据 } catch (error) { console.error(‘Failed to fetch crew:’, error); res.status(500).json({ message: ‘Internal server error’ }); } }; export const addCrewMember async (req: Request, res: Response) { try { const { name, role, avatarUrl } req.body; // 从请求体中解构数据 // 数据验证此处应更严谨 if (!name || !role) { return res.status(400).json({ message: ‘Name and role are required’ }); } const newMember await CrewMember.create({ name, role, avatarUrl }); res.status(201).json(newMember); // 201 Created 状态码 } catch (error) { console.error(‘Failed to add crew member:’, error); res.status(500).json({ message: ‘Internal server error’ }); } };控制器是业务逻辑的核心。它处理请求、与数据库交互、并返回响应。注意其中的错误处理try-catch和适当的HTTP状态码200成功201创建成功400客户端错误500服务器错误这些都是构建健壮API的必备知识。4. 从零开始实现核心功能实战假设我们要为KittyCrew增加一个“编辑船员信息”的功能。让我们从头到尾走一遍这个流程这比单纯看代码更能加深理解。4.1 第一步设计API接口首先我们需要在后端增加一个更新船员的接口。遵循RESTful风格更新操作通常对应PUT或PATCH方法路径包含要更新的资源ID。HTTP方法PUT /api/crew/:id请求体{ “name”: “Updated Whiskers”, “role”: “First Mate” }成功响应200 OK返回更新后的船员对象。错误响应404 Not Found船员ID不存在400 Bad Request数据无效500 Internal Server Error。4.2 第二步实现后端更新逻辑在crewController.ts中添加新的控制器函数export const updateCrewMember async (req: Request, res: Response) { const { id } req.params; // 从URL参数中获取ID const updates req.body; // 获取要更新的字段 try { // 1. 查找要更新的船员 const member await CrewMember.findByPk(id); if (!member) { return res.status(404).json({ message: ‘Crew member not found’ }); } // 2. 执行更新ORM通常会处理部分更新的情况 await member.update(updates); // 3. 返回更新后的数据 res.status(200).json(member); } catch (error) { console.error(Failed to update crew member ${id}:, error); // 区分是验证错误还是服务器错误简化处理 res.status(500).json({ message: ‘Failed to update crew member’ }); } };然后在crewRoutes.ts中注册这个路由router.put(‘/:id’, updateCrewMember); // 新增这一行4.3 第三步前端发起更新请求在前端的组合式函数useCrewApi或useCrewStore中添加一个更新方法// composables/useCrewStore.ts const updateCrewMember async (id: number, updates: PartialCrewMember) { try { const response await axios.put(/api/crew/${id}, updates); // 更新成功后有两种方式更新本地状态 // 方式1重新获取整个列表简单但可能低效 // await fetchCrew(); // 方式2直接找到并更新本地列表中的对应项更高效 const index crewList.value.findIndex(member member.id id); if (index ! -1) { crewList.value[index] { ...crewList.value[index], ...updates }; } return response.data; } catch (error) { console.error(‘Update failed:’, error); // 这里可以处理错误例如显示一个错误提示给用户 throw error; // 将错误抛给调用者处理 } };4.4 第四步构建前端编辑界面在CrewCard.vue组件中可以添加一个“编辑”按钮。点击后弹出一个模态框Modal或进入一个编辑页面里面包含一个预填了当前船员信息的表单。编辑表单EditCrewForm.vue与添加表单类似但有两个关键区别它接收一个initialDataprop来初始化表单字段。它的提交函数调用的是updateCrewMember(id, formData)而不是添加函数。一个关键的UX细节在更新请求发出后到收到响应前最好有一个加载状态如禁用按钮、显示加载动画以防止用户重复提交并提升体验。通过以上四步我们就完成了一个完整功能的闭环。这个过程清晰地展示了全栈开发中“需求 - 接口设计 - 后端实现 - 前端联调”的标准工作流。5. 开发环境搭建与工程化配置要让KittyCrew跑起来并体验高效的开发流程需要正确配置开发环境。5.1 依赖安装与启动脚本前后端通常是两个独立的Node.js项目需要分别安装依赖。# 在后端目录 cd backend npm install # 在前端目录 cd frontend npm install为了方便通常在项目根目录的package.json中配置一些脚本{ “scripts”: { “dev:frontend”: “cd frontend npm run dev”, “dev:backend”: “cd backend npm run dev”, “dev”: “concurrently \“npm run dev:frontend\” \“npm run dev:backend\”” } }这里使用了concurrently包来并行启动前后端服务。运行npm run dev前端Vite开发服务器默认localhost:5173和后端Express服务器默认localhost:3000就会同时启动。5.2 解决跨域问题CORS在开发模式下前端运行在5173端口后端在3000端口浏览器出于安全考虑会阻止这种跨域请求。必须在后端配置CORS中间件。# 在后端项目中安装cors包 npm install cors在app.ts中启用import express from ‘express’; import cors from ‘cors’; const app express(); // 允许来自前端开发服务器的请求 app.use(cors({ origin: ‘http://localhost:5173‘, // 你的前端地址 credentials: true // 如果需要传递cookie等凭证 })); // ... 其他中间件和路由这样前端就能正常调用后端API了。5.3 环境变量与配置管理绝对不要将数据库密码、API密钥等敏感信息硬编码在代码中。使用环境变量是行业标准做法。创建.env文件在backend目录下创建.env文件并添加到.gitignore中。DATABASE_URL“postgresql://user:passwordlocalhost:5432/kittycrew” PORT3000 NODE_ENV“development”使用dotenv读取安装dotenv包并在应用入口文件顶部加载。npm install dotenv// app.ts import dotenv from ‘dotenv’; dotenv.config(); // 加载.env文件中的变量到process.env const PORT process.env.PORT || 3000; app.listen(PORT, () { console.log(Server is running on port ${PORT}); });数据库连接配置在连接数据库的模块中使用process.env.DATABASE_URL。实操心得在团队协作中通常会有一个.env.example文件里面列出所有需要的环境变量名但不包含真实值。新成员克隆项目后复制.env.example为.env并填入自己的本地值即可。这既安全又规范。6. 数据库设计与数据持久化KittyCcrew的核心是数据我们来深入看看数据层是如何设计的。6.1 数据模型定义以使用Prisma ORM和PostgreSQL为例数据模型定义在schema.prisma文件中model CrewMember { id Int id default(autoincrement()) name String role String avatarUrl String? // 头像URL可选 createdAt DateTime default(now()) updatedAt DateTime updatedAt }这个模型定义了五个字段。id和default(autoincrement())表示id是自增主键。String?表示avatarUrl是可选的字符串。default(now())和updatedAt是Prisma提供的便捷功能自动管理记录的创建和更新时间戳。运行npx prisma db push或npx prisma migrate devPrisma会根据这个模型在数据库中创建对应的crew_member表。6.2 种子数据Seeding为了让应用启动时就有一些可爱的猫咪船员数据我们可以创建种子脚本。// prisma/seed.ts import { PrismaClient } from ‘prisma/client’; const prisma new PrismaClient(); async function main() { await prisma.crewMember.createMany({ data: [ { name: ‘Whiskers’, role: ‘Captain’, avatarUrl: ‘https://.../cat1.jpg’ }, { name: ‘Mittens’, role: ‘Engineer’, avatarUrl: ‘https://.../cat2.jpg’ }, { name: ‘Shadow’, role: ‘Navigator’, avatarUrl: null }, ], skipDuplicates: true, // 跳过重复项 }); console.log(‘Seed data created successfully’); } main() .catch((e) { console.error(e); process.exit(1); }) .finally(async () { await prisma.$disconnect(); });在package.json中配置脚本“seed”: “ts-node prisma/seed.ts”运行npm run seed即可初始化数据。6.3 数据库查询优化初探即使对于小项目养成好的查询习惯也很重要。例如在获取船员列表时如果未来字段很多但前端列表页只需要id,name,role可以只查询这些字段而不是SELECT *。// 使用Prisma的select const crewList await prisma.crewMember.findMany({ select: { id: true, name: true, role: true, }, orderBy: { createdAt: ‘desc’, // 按创建时间倒序排列 }, });这减少了从数据库到应用服务器的数据传输量是一个简单有效的优化。7. 前端状态管理、组件通信与性能考量随着应用交互变复杂如何优雅地管理状态是需要思考的问题。7.1 组件间通信模式在KittyCrew中组件通信主要有以下几种情况父传子PropsCrewListView向CrewCard传递船员数据。子传父自定义事件AddCrewForm提交后通过$emit触发父组件CrewListView中定义的处理函数来更新列表。兄弟组件或远房组件通信例如一个位于侧边栏的“船员统计”组件需要实时反映列表的变化。这时通过共同的父组件层层传递props会非常繁琐“prop drilling”。7.2 引入状态管理Pinia当遇到上述第3种情况时就是引入轻量级状态管理库Pinia的好时机。Pinia是Vue官方推荐的状态管理库比Vuex更简单直观。定义Store// stores/crew.ts import { defineStore } from ‘pinia’; import { ref } from ‘vue’; import type { CrewMember } from ‘/types’; import { fetchCrewApi, addCrewApi } from ‘/api/crew’; // 假设的API模块 export const useCrewStore defineStore(‘crew’, () { // 状态 const list refCrewMember[]([]); const isLoading ref(false); // 动作Actions const loadCrew async () { isLoading.value true; try { list.value await fetchCrewApi(); } finally { isLoading.value false; } }; const addMember async (newMember: OmitCrewMember, ‘id’) { const addedMember await addCrewApi(newMember); list.value.push(addedMember); // 乐观更新 }; // 计算属性Getters const captainCount computed(() { return list.value.filter(m m.role ‘Captain’).length; }); return { list, isLoading, loadCrew, addMember, captainCount }; });在组件中使用在任何组件中你都可以通过const crewStore useCrewStore()来访问和操作全局状态。侧边栏的统计组件可以直接使用crewStore.captainCount它会随着list的变化自动更新。7.3 性能优化小技巧列表渲染使用:key在v-for渲染CrewCard时务必使用唯一的:key通常是item.id。这能帮助Vue高效地跟踪每个节点的身份在列表变化时进行最小化的DOM操作。CrewCard v-for“member in crewList” :key“member.id” :member“member” /图片懒加载如果猫咪头像很多可以使用原生loading“lazy”属性或vue-lazyload库让图片在进入视口时才加载。img :src“member.avatarUrl” :alt“member.name” loading“lazy” /API请求防抖如果搜索功能在输入框绑定的input事件处理函数中可以使用防抖例如lodash的_.debounce避免用户每输入一个字符就发起一次请求。8. 测试策略确保代码可靠测试是项目健壮性的保障。对于KittyCrew可以从简单的单元测试开始实践。8.1 后端API单元测试使用Jest和Supertest测试控制器逻辑确保API在各种输入下行为符合预期。// __tests__/crewController.test.ts import request from ‘supertest’; import app from ‘../src/app’; // 你的Express app实例 import { prismaMock } from ‘../singleton’; // 假设使用了Prisma Mock describe(‘GET /api/crew’, () { it(‘should return all crew members’, async () { const mockCrew [{ id: 1, name: ‘Whiskers’, role: ‘Captain’ }]; prismaMock.crewMember.findMany.mockResolvedValue(mockCrew); const response await request(app).get(‘/api/crew’); expect(response.status).toBe(200); expect(response.body).toEqual(mockCrew); }); }); describe(‘POST /api/crew’, () { it(‘should create a new crew member with valid data’, async () { const newMember { name: ‘Boots’, role: ‘Cook’ }; const createdMember { id: 2, …newMember }; prismaMock.crewMember.create.mockResolvedValue(createdMember); const response await request(app).post(‘/api/crew’).send(newMember); expect(response.status).toBe(201); expect(response.body).toHaveProperty(‘id’, 2); }); it(‘should return 400 if name is missing’, async () { const response await request(app).post(‘/api/crew’).send({ role: ‘Cook’ }); expect(response.status).toBe(400); }); });这类测试不依赖真实数据库速度快能快速验证业务逻辑。8.2 前端组件测试使用Vitest和Vue Test Utils测试Vue组件的渲染和交互。// CrewCard.spec.ts import { mount } from ‘vue/test-utils’; import CrewCard from ‘./CrewCard.vue’; describe(‘CrewCard.vue’, () { it(‘renders crew member name and role correctly’, () { const mockMember { id: 1, name: ‘Whiskers’, role: ‘Captain’ }; const wrapper mount(CrewCard, { props: { member: mockMember } }); expect(wrapper.text()).toContain(‘Whiskers’); expect(wrapper.text()).toContain(‘Captain’); }); });8.3 端到端E2E测试概念E2E测试模拟真实用户操作整个应用。可以使用Cypress或Playwright。例如测试添加船员的完整流程打开应用首页。点击“添加船员”按钮。在表单中输入名字和职位。点击提交。断言新船员出现在列表中。E2E测试更强大但运行较慢通常用于核心业务流程的验证。注意事项不要追求100%的测试覆盖率而过度测试。优先为核心业务逻辑、工具函数和容易出错的边界条件编写测试。测试的初衷是提升信心和促进代码可维护性而不是成为负担。9. 部署上线从本地到生产让项目在互联网上可访问是学习全栈开发的最后一步也是至关重要的一步。9.1 部署后端服务主流选择有平台即服务PaaS如Railway、Render、Fly.io。它们对新手最友好通常关联Git仓库后就能自动构建部署并轻松配置数据库。虚拟私有服务器VPS如DigitalOcean Droplets、Linode。你需要更多的运维知识通过SSH连接、安装Node.js、配置Nginx反向代理、设置进程管理如PM2。以Railway为例大致流程将代码推送到GitHub。在Railway官网连接你的GitHub仓库。Railway会自动检测到是Node.js项目运行npm install和npm start。在Railway的项目设置中添加环境变量如DATABASE_URL。Railway会为你生成一个永久的、公开可访问的URL如https://your-project.up.railway.app。9.2 部署前端应用前端是静态文件部署更简单。静态站点托管如Vercel、Netlify、GitHub Pages。它们同样支持关联Git仓库自动部署。与后端同域部署也可以将Vite构建后的产物dist文件夹放到后端Express应用的静态文件目录下通过同一个域名访问。关键步骤配置生产环境API地址开发时前端请求的是http://localhost:3000。生产环境需要指向真实的部署地址。通常通过环境变量区分// 在Vite项目中环境变量以VITE_开头 const API_BASE_URL import.meta.env.VITE_API_BASE_URL || ‘http://localhost:3000‘; axios.defaults.baseURL API_BASE_URL;在部署到Vercel时在其项目设置中配置VITE_API_BASE_URL为你的后端生产地址。9.3 连接生产数据库本地开发用SQLite很方便但生产环境推荐使用更可靠的云数据库如PostgreSQL on Railway、Supabase、Neon或各大云厂商的数据库服务。部署时只需将生产环境的DATABASE_URL环境变量设置为云数据库的连接字符串即可。Railway这类平台在创建PostgreSQL插件后会自动生成这个变量并注入到你的应用中。9.4 域名与HTTPS可选但推荐如果你有自己的域名可以在部署平台将其指向你的服务。Vercel、Railway等都提供免费的自动HTTPS证书Let‘s Encrypt确保通信安全。完成以上步骤后你的KittyCrew就从一个本地项目变成了一个任何人都可以通过链接访问的在线应用了。这个过程会让你对网络、服务器、环境配置有更深刻的理解。10. 项目扩展思路与学习建议KittyCrew作为一个起点有无数种方式可以扩展以练习更高级的技能用户认证与授权增加登录/注册功能只有登录用户才能管理船员。学习JWTJSON Web Tokens、会话管理、路由守卫。实时功能使用WebSocket或Socket.io实现一个“船员在线状态”显示或者一个简单的聊天室。学习双向实时通信。文件上传允许用户上传自定义的猫咪头像图片。学习如何处理multipart/form-data请求使用云存储如AWS S3、Cloudinary或服务器本地存储。分页与无限滚动当船员数量很多时实现分页或无限滚动列表。学习后端分页查询LIMIT/OFFSET或游标和前端对应UI的实现。搜索与过滤在前端添加搜索框根据名字或职位过滤船员列表。学习防抖、异步搜索和高效过滤算法。容器化使用Docker将前后端和数据库打包成容器。编写Dockerfile和docker-compose.yml实现一键本地启动。这是现代DevOps的基础。CI/CD流水线在GitHub Actions或GitLab CI中配置自动化流程实现代码推送后自动运行测试、构建镜像并部署到服务器。学习这个项目最好的方法不是只看而是动手做。“Fork”这个仓库到你的GitHub账号下然后按照README的指引在本地运行起来。接着尝试去修改它改个样式加个字段实现一个上面提到的扩展功能。遇到报错就去查文档、搜Stack Overflow这是成长最快的方式。当你不仅能运行别人的代码还能理解并修改它甚至从头开始搭建一个类似结构的新项目时你就真正掌握了全栈开发的入门精髓。KittyCrew这样的项目就像一副坚实的骨架而你的每一次实践和扩展都是在为它增添血肉。