本课作为全栈开发入门课聚焦Node.js后端基础打通前端到后端的技术通道。Node.js让JavaScript具备后端开发能力无需学习新语言即可上手服务端开发。课程围绕http、fs、path核心模块讲解服务器搭建、文件操作、接口开发、跨域处理、路由判断等必备技能贴合实战需求。通过单词接口案例完整演示后端开发与前后端交互流程降低全栈学习门槛。掌握本课内容不仅能独立搭建简易后端服务、编写接口更能理解数据流转逻辑为后续学习Express框架、数据库操作、企业级全栈项目打下坚实基础是前端开发者进阶全栈的关键一步。一、课程学习目的理解Node.js的核心定位与运行原理打破前端与后端的技术壁垒实现全栈入门。掌握Node.js核心模块用法能够搭建基础HTTP服务处理接口请求与响应。学会使用npm管理后端依赖读取本地文件搭建简易后端服务。理解前后端交互流程掌握接口开发、请求处理、数据返回的完整逻辑。能够独立编写后端接口对接前端页面实现数据互通完成全栈小项目。建立后端开发思维为后续Express、数据库学习打下扎实基础。二、核心知识点讲解1. Node.js 基础认知Node.js是基于Chrome V8引擎的JavaScript运行环境让JavaScript脱离浏览器在服务器端运行实现后端开发、文件操作、服务搭建等功能。核心优势使用JavaScript语法开发后端上手门槛低非阻塞异步I/O性能优异生态完善npm依赖库丰富适合快速开发接口与服务。Node.js适合开发后端接口、中间层服务、工具脚本、实时通信项目是前端进阶全栈的必备技术。2. Node.js 核心模块Node.js自带多种内置模块无需额外安装直接导入使用支撑基础后端功能。http模块搭建HTTP服务器处理前端请求返回数据实现接口服务。fs模块文件系统模块用于读取、写入、修改本地文件常用于存储数据。path模块处理文件路径解决不同系统的路径兼容问题。url模块解析请求地址、获取请求参数处理路由与传参。3. 前后端交互基础前端通过Ajax、fetch发送请求Node.js后端监听端口、接收请求、处理逻辑、返回JSON数据完成数据互通。常见请求方式GET获取数据、POST提交数据后端根据不同请求方式和地址返回对应结果。4. Node.js 运行与开发流程安装Node.js环境验证node -v、npm -v是否安装成功。创建js文件编写后端代码导入核心模块。终端执行node 文件名.js启动服务。前端发送请求测试接口接收返回数据。5. 接口与路由基础路由用于区分不同请求地址根据不同URL返回不同数据实现多接口管理。比如/word返回单词列表/detail返回单词详情。后端通过判断request.url执行不同逻辑返回对应数据。三、示例程序带详细注释示例1搭建基础HTTP服务器单词接口// 导入http核心模块consthttprequire(http);// 定义单词数据constwordList[{en:apple,cn:苹果},{en:banana,cn:香蕉},{en:orange,cn:橙子}];// 创建服务器constserverhttp.createServer((req,res){// 设置响应头解决跨域返回JSON格式res.setHeader(Access-Control-Allow-Origin,*);res.setHeader(Content-Type,application/json;charsetutf-8);// 判断请求地址与方式if(req.url/wordreq.methodGET){// 返回单词数据res.end(JSON.stringify(wordList));}else{// 地址不存在返回提示res.end(JSON.stringify({msg:接口不存在,code:404}));}});// 监听端口启动服务server.listen(3000,(){console.log(服务器启动成功http://localhost:3000);});示例2fs模块读取文件数据// 导入fs、path模块constfsrequire(fs);constpathrequire(path);// 拼接文件路径constfilePathpath.join(__dirname,word.json);// 异步读取文件fs.readFile(filePath,utf8,(err,data){if(err){console.log(读取失败,err);return;}// 转为JSON对象constwordDataJSON.parse(data);console.log(读取单词数据,wordData);});// 同步读取简单场景使用// const data fs.readFileSync(filePath, utf8);示例3word.json数据文件[{en:book,cn:书},{en:pen,cn:笔},{en:desk,cn:桌子}]四、掌握技巧与方法编写Node.js代码后用node 文件名.js启动服务修改代码需重启服务生效。处理跨域问题在响应头添加Access-Control-Allow-Origin: *允许前端访问。返回数据必须用JSON.stringify转为字符串前端才能正常解析。文件路径使用path.join拼接避免绝对路径报错提升兼容性。异步操作优先使用异步API避免同步代码阻塞服务运行。服务端口不要被占用推荐使用3000、8080、9000等常用端口。接口地址要语义化便于区分和维护比如/getWord、/addWord。调试时查看终端报错排查路径、语法、端口占用问题。五、课后作业基础作业安装Node.js验证node、npm版本确认环境搭建成功。编写基础HTTP服务启动后访问地址返回Hello World。创建json文件用fs模块读取文件内容打印到终端。进阶作业搭建单词接口服务访问/word地址返回单词列表JSON数据。添加路由判断实现多个接口返回不同数据。配置跨域响应头允许前端页面请求接口。实战作业使用Node.js搭建完整单词服务包含获取单词列表、查询单个单词功能读取本地json文件存储数据接入前端页面实现前后端交互纳入Git版本管理。上一课React Hooks 与实战 实战作业代码代码功能说明本实战代码基于React框架深度运用Hooks完成单词搜索管理系统贴合课程核心知识点。项目使用useState管理单词列表、输入框、加载状态通过useEffect实现页面初始化时异步请求模拟数据搭配useRef获取输入框DOM实现自动聚焦封装自定义HookuseWordList统一管理数据逻辑。实现单词列表展示、搜索过滤、添加删除、加载提示等完整功能用useMemo缓存搜索结果避免重复计算优化组件性能。代码结构清晰逻辑模块化覆盖主流Hooks用法完美贴合实战需求巩固React函数式开发与Hooks核心用法。注意事项Hooks必须在函数组件顶层调用禁止在循环、条件判断、普通函数中使用。useEffect需正确配置依赖项防止出现死循环或逻辑不执行的问题。React状态不可直接修改必须用set方法返回新数据数组/对象用展开语法更新。自定义Hook命名必须以use开头符合React规范才能正常调用其他Hooks。useRef操作DOM时需等待组件挂载完成防止current为null报错。项目启动前需执行npm install安装依赖修改代码后热更新生效无需重启服务。列表渲染的key值需唯一不建议只用index避免渲染错乱。运行命令npm install → npm run dev关闭服务用CtrlC。完整实战代码项目结构react-hooks-word/ ├── index.html ├── package.json └── src/ ├── main.jsx ├── App.jsx ├── hooks/useWordList.js └── index.csssrc/hooks/useWordList.js自定义Hookimport { useState, useEffect } from react // 自定义Hook封装单词列表逻辑 export function useWordList() { const [wordList, setWordList] useState([]) const [loading, setLoading] useState(false) // 异步获取单词数据 useEffect(() { const fetchWords async () { setLoading(true) // 模拟接口请求 await new Promise(resolve setTimeout(resolve, 1000)) const data [ { en: apple, cn: 苹果, id: 1 }, { en: banana, cn: 香蕉, id: 2 }, { en: react, cn: 框架, id: 3 }, { en: hook, cn: 钩子, id: 4 } ] setWordList(data) setLoading(false) } fetchWords() }, []) // 添加单词 const addWord (newWord) { setWordList([...wordList, { ...newWord, id: Date.now() }]) } // 删除单词 const delWord (id) { setWordList(wordList.filter(item item.id ! id)) } return { wordList, loading, addWord, delWord } }src/App.jsximport { useState, useRef, useMemo } from react import { useWordList } from ./hooks/useWordList import ./index.css function App() { const { wordList, loading, addWord, delWord } useWordList() const [searchKey, setSearchKey] useState() const [inputEn, setInputEn] useState() const [inputCn, setInputCn] useState() const inputRef useRef(null) // 缓存搜索结果只有wordList或searchKey变化时重新计算 const filterList useMemo(() { return wordList.filter(item item.en.includes(searchKey.toLowerCase()) || item.cn.includes(searchKey) ) }, [wordList, searchKey]) // 提交添加单词 const handleAdd () { if (!inputEn.trim() || !inputCn.trim()) return addWord({ en: inputEn, cn: inputCn }) setInputEn() setInputCn() inputRef.current.focus() } return ( div classNameapp h2React Hooks 单词管理器/h2 {/* 搜索框 */} div classNamesearch-box input typetext placeholder搜索单词 value{searchKey} onChange{(e) setSearchKey(e.target.value)} / /div {/* 添加单词 */} div classNameadd-box input ref{inputRef} typetext placeholder英文 value{inputEn} onChange{(e) setInputEn(e.target.value)} / input typetext placeholder中文 value{inputCn} onChange{(e) setInputCn(e.target.value)} / button onClick{handleAdd}添加/button /div {/* 列表展示 */} div classNamelist-box {loading p classNametip加载中.../p} {!loading filterList.length 0 ( p classNametip暂无数据/p )} {filterList.map(item ( div classNameword-item key{item.id} span{item.en} — {item.cn}/span button onClick{() delWord(item.id)}删除/button /div ))} /div /div ) } export default Appsrc/main.jsximport React from react import ReactDOM from react-dom/client import App from ./App ReactDOM.createRoot(document.getElementById(root)).render( React.StrictMode App / /React.StrictMode )src/index.css.app{max-width:650px;margin:30px auto;padding:20px;font-family:Arial,sans-serif;}.search-box, .add-box{margin:15px 0;display:flex;gap:8px;}input{padding:8px 12px;flex:1;border:1px solid #ddd;border-radius:4px;}button{padding:8px 16px;background:#61dafb;border:none;border-radius:4px;cursor:pointer;}.tip{color:#666;text-align:center;padding:20px 0;}.word-item{display:flex;justify-content:space-between;align-items:center;padding:10px;margin:8px 0;background:#f7f7f7;border-radius:4px;}运行命令npminstallnpmrun dev作业验收标准项目正常启动无控制台报错页面加载流畅。useState、useEffect、useRef、useMemo、自定义Hook使用规范无误。支持单词搜索过滤、添加、删除功能数据响应及时。加载状态、空数据提示展示正常交互体验完整。代码逻辑清晰模块化拆分合理符合React Hooks开发规范。