🏠

🎯 创建我们的第一个后端接口

🚀 从零开始理解后端服务器

讲师:乌鸦哥

📝 让普通人也能听懂的后端开发课程

🎯 今天我们要学什么?

✨ 创建一个最简单的后端接口

  • 🧠 理解后端的独立性
  • 🔧 什么是HTTP模块
  • ⚙️ 如何创建服务器
  • 💬 请求和响应的对话
  • 🔍 调试工具console.log
  • 🚪 端口号的概念
  • 📊 状态码的作用

😊 别紧张!

💭 "后端"听起来很高大上

✅ 实际上比你想象的简单得多

🏗️ 重要概念:后端的独立性

🌟 后端是一个独立的软件

🏢 独立运行的软件

  • 📱 前端:运行在用户的浏览器里
  • 🖥️ 后端:运行在服务器上,24小时不间断
  • 🌐 通过网络进行通信

🔄 分离的好处

  • 🛠️ 可以独立维护:前端坏了不影响后端
  • 🔧 可以独立升级:后端更新不影响前端
  • 👥 团队分工:不同的人负责不同部分
  • 性能更好:各自优化各自的部分

🎯 这就是为什么要分开做的原因!

🧰 第一步:准备工具包

🔧 引入HTTP模块

🛠️ 引入HTTP工具包


const http = require("http");
            

🔧 HTTP就是我们做网站后端必须要准备的"厨具"

🤔 HTTP模块到底是什么?

  • 📚 Node.js自带的功能包
  • 🌐 专门处理网络请求
  • 🏗️ 帮我们创建Web服务器
  • 🆓 免费的,不用额外安装

🏪 第二步:创建服务器

🏗️ 开一家小餐馆

⚙️ 创建服务器函数


const server = http.createServer((请求, 响应) => {
    // 这里写服务器的逻辑
});
            

💡 注意:平时用英文request和response

📚 今天用中文是为了让大家更容易理解

🔍 深入理解createServer

  • 🏭 createServer:创建服务器的工厂函数
  • 📋 回调函数:每次有人访问就会执行
  • 📥 请求参数:客户端发来的信息
  • 📤 响应参数:我们要回复的内容

🎯 这就是后端服务的核心逻辑!

💬 第三步:理解请求和响应

🍽️ 就像餐厅服务员和顾客的对话

🙋‍♂️ 什么是"请求"?

💭 想象你去餐厅吃饭,服务员会问:

  • "👋 先生您好,请问几位用餐?"
  • "🍽️ 想吃点什么?"
  • "🚫 有什么忌口的吗?"
  • "💳 您是我们的会员吗?"
  • "🪑 喜欢坐哪个位置?"

📝 这些都是服务员需要了解的"请求信息"

🌐 浏览器的"请求"

💻 当你在浏览器输入网址,浏览器会"敲门"问:

  • "🌍 我要访问哪个网址?"
  • "🧭 我用的什么浏览器?"
  • "🌏 我希望看到中文还是英文?"
  • "📱 我是用手机还是电脑访问的?"
  • "🍪 我之前有没有来过(Cookie)?"
  • "🔐 我有没有登录权限?"

💬 什么是"响应"?

🍽️ 餐厅服务员的回复:

  • "✅ 好的,今天有这些菜"
  • "🍜 您的菜来了,请慢用"
  • "💰 一共是88块钱"
  • "🎁 今天有优惠活动哦"

🌐 网站的"响应"

💻 后端服务器的回复:

  • "📄 我给你什么类型的内容"
  • "🌏 用什么语言显示"
  • "📊 具体的网页内容是什么"
  • "✅ 请求处理成功还是失败"
  • "🍪 给你一些记忆信息(Cookie)"

✨ 就是一个完整的问答过程!

📋 请求和响应详细对比表

🙋‍♂️ 客户请求 💬 服务器响应 🍽️ 餐厅类比
📍 请求的URL地址 📄 返回的内容 点什么菜 → 上菜
🔧 请求方法(GET/POST) 📊 状态码(200/404) 堂食/外卖 → 成功/失败
🏷️ 请求头信息 🏷️ 响应头信息 客户要求 → 服务说明
📦 请求体数据 📦 响应体数据 特殊要求 → 实际菜品

🔍 第四步:调试工具console.log

🗣️ 程序员的"自言自语"

📝 console.log是什么?


console.log(请求.url);     // 📍 请求的URL
console.log(请求.method);  // 🔧 请求的方法
console.log(请求.headers); // 🏷️ 请求的头信息
            

🔍 这是程序员的"透视眼"

🍳 就像厨房里的自言自语

  • "🔥 哎呀,这个火候差不多了"
  • "🧂 嗯,这个调料加得刚好"
  • "⏰ 还要炒2分钟就好了"
  • "👨‍🍳 这道菜看起来不错"

🔧 专门给程序员看的调试工具

👤 用户不需要听到我们的内心独白

🎯 console.log的实际作用

  • 🐛 调试程序:找出哪里出错了
  • 📊 监控数据:看看接收到什么信息
  • 📈 性能分析:程序运行快不快
  • 📚 学习理解:搞清楚程序在干什么

💡 就像医生的听诊器,帮我们"听"程序的心跳

🚪 第五步:端口号的概念

🏠 服务器的不同门牌

🏠 想象你家的地址

📍 "解放路123号" = 网站的域名

🚪 但你家有前门、后门、侧门

✨ 端口就像这些不同的门

🎯 不同的门有不同的用途

🏢 服务器就像一栋大楼

🚪 端口号 🎯 用途 🏠 类比
80 🌐 普通网站 🚪 前门(正门)
443 🔒 安全网站(HTTPS) 🛡️ 安全通道,有x光机
8000 🧪 我们的测试网站 🔧 后门(员工通道)
3306 🗃️ 数据库服务 📦 货物通道

😊 为什么选8000?就是觉得这个数字顺眼!

🤔 为什么需要端口号?

  • 🏗️ 一台服务器可以运行多个程序
  • 🎯 不同端口对应不同服务
  • 🚦 避免冲突:各走各的道
  • 🔧 便于管理:知道哪个门是干什么的

📊 第六步:状态码

📦 像快递的状态信息

📮 快递状态码

📊 状态码 📦 快递状态 🌐 网站含义
200 ✅ 包裹完好送达 🎉 请求成功,一切正常
404 ❌ 地址不存在 🔍 页面不存在
500 💥 快递公司内部出错 🐛 服务器内部错误
403 🚫 收件人拒收 🔐 没有访问权限

🌐 浏览器通过状态码知道

  • 📄 404 → 显示"页面不存在"
  • 200 → 正常显示内容
  • 🔐 403 → 显示"权限不足"
  • 💥 500 → 显示"服务器错误"

😊 简单吧?就像看快递单号一样!

🎯 常见状态码分类

  • 🎉 2xx:成功系列(200-299)
  • 🔄 3xx:重定向系列(300-399)
  • 4xx:客户端错误系列(400-499)
  • 💥 5xx:服务器错误系列(500-599)

💡 记住这个规律,看到状态码就知道大概是什么情况

🏷️ 第七步:Headers

📦 像包裹上的标签

📦 Headers告诉浏览器

  • 📄 里面装的是什么东西
  • 🌏 用什么语言写的说明书
  • 👤 是给谁的
  • 📅 什么时候打包的
  • 💾 有多大

🔧 设置Content-Type


'Content-Type': 'text/plain; charset=utf-8'
            

💬 告诉浏览器:"我给你的是纯文本,用的是中文编码"

📋 常见的Content-Type类型

🏷️ Content-Type 📄 内容类型 📦 包裹类比
text/plain 📝 纯文本 📄 普通信件
text/html 🌐 网页代码 📰 带格式的报纸
application/json 📊 JSON数据 📋 结构化表格
image/jpeg 🖼️ JPEG图片 📸 照片

🚀 第八步:启动服务器

🏪 正式开门营业

⚡ 开始监听端口


server.listen(8000);
            

🏪 就像开店一样

🚪 把店门打开,挂上"营业中"的牌子

⏳ 等着客人上门

📋 开店营业全流程对比

🏪 开实体店 💻 开后端服务 📝 代码实现
🧰 准备工具设备 🔧 引入HTTP模块 require('http')
📋 制定服务流程 ⚙️ 创建服务器函数 createServer()
🤝 学会接待客人 📥 处理请求 request参数
💬 学会回复客人 📤 发送响应 response.end()
🏪 开门营业 ⚡ 启动服务器 server.listen()
📞 留下电话号码 🚪 监听端口号 listen(8000)

🎯 启动成功的标志

  • 没有报错信息
  • 🔄 程序没有自动退出
  • 📝 可以看到console.log输出
  • 🌐 浏览器能正常访问

💡 就像店铺正常营业,客人可以正常进店消费

📝 总结:开店营业完整流程

创建后端服务就像开了一家小餐馆

🛠️ 后端服务六步法

  1. 🧰 准备好工具:引入HTTP包
  2. 📋 制定服务流程:创建服务器函数
  3. 🤝 学会接待客人:处理请求
  4. 💬 学会回复客人:发送响应
  5. 🏷️ 看人下菜:设置Headers和状态码
  6. 🏪 开门营业:启动服务器监听端口

✨ 是不是很简单?

🌐 所有后端服务的基本套路

🏗️ 再复杂的网站,本质都是这个流程的扩展

💭 想象后面有个"数字小餐馆老板"在服务你

🔍 完整代码示例

我们的第一个后端服务器

🧰 引入HTTP模块


// 引入Node.js自带的http模块
const http = require('http');
console.log('✅ HTTP模块加载成功!');
            

🏗️ 创建服务器


const server = http.createServer((请求, 响应) => {
    // 🔍 打印请求信息(调试用)
    console.log('📍 访问地址:', 请求.url);
    console.log('🔧 请求方法:', 请求.method);
    console.log('🌐 用户浏览器:', 请求.headers['user-agent']);
    
    // 🏷️ 设置响应头
    响应.setHeader('Content-Type', 'text/plain; charset=utf-8');
    响应.statusCode = 200;
    
    // 📤 发送响应
    响应.end('🎉 你好!欢迎来到我们的后端服务器!
这是你的第一个后端接口!');
});
            

🚀 启动服务器


const 端口 = 8000;
server.listen(端口, () => {
    console.log('🎉 服务器已经启动啦!');
    console.log('📍 访问地址:http://localhost:8000');
    console.log('🌐 或者:http://127.0.0.1:8000');
    console.log('💡 想要停止服务器?按 Ctrl+C');
    console.log('🏪 数字小店正式开张!');
});
            

🎯 运行结果预览

  • 🖥️ 终端显示:服务器启动信息
  • 🌐 浏览器显示:欢迎消息
  • 📝 控制台输出:每次访问的详细信息

🎪 恭喜!你的第一个后端服务器诞生了!

🎯 下节课预告

🚀 如何让这个后端接口更加强大