《JavaScript前端开发程序设计项目式教程》教学设计27 项目9 项目实战-搭建Node.js服务器与Ajax数据交互

课程教学设计课程名称本课名称所授章节项目9异步获取学生信息——Ajax+Node.js技术授课对象选用教材《JavaScript前端开发程序设计项目式教程》课时数2【学情分析】知识基础学生已系统学习了Ajax的前端部分，能够熟练地向服务器（或本地文件）请求并处理JSON数据。但对于服务器端技术、Node.js环境、Express框架以及如何通过代码提供数据接口完全陌生。能力基础能够作为客户端消费数据，但无法扮演服务器角色来生产和提供数据。缺乏完整的前后端协同开发经验。素养基础对“全栈”开发有模糊的认知，渴望亲手搭建一个完整的、能跑起来的Web应用，从前端到后端打通，获得巨大的成就感。【教学目标】知识目标1.了解Node.js的基本概念及其在服务器端开发中的作用。

2.掌握使用Express框架快速搭建Web服务器的方法。

3.掌握定义RESTfulAPI路由（如app.get('/api/students')）来提供JSON数据。

4.综合运用前端Ajax和后端Node.js，完成一个完整的数据交互项目。能力目标1.能够独立初始化一个Node.js项目，并安装Express依赖。

2.能够编写一个简单的Express服务器，提供静态文件服务和API接口。

3.能够修改前端Ajax代码，向自己搭建的Node.js服务器请求数据，并渲染成表格。素养目标1.培养全栈开发的初步意识和能力。

2.提升构建完整Web应用项目的综合实践能力。【教学分析】内容分析本课是项目9的收官之作，也是学生首次接触后端开发。重点在于引导学生完成从“前端消费者”到“后端生产者”的角色转换。通过搭建一个真实的服务器，让学生理解前后端是如何通过HTTP协议和JSON数据进行对话的。重点Express服务器的搭建；API路由的定义；前后端联调。难点理解服务器、路由、请求、响应之间的关系；处理前后端跨域问题（若端口不同）。【教学策略和方法】教学策略采用“角色转换-环境搭建-接口定义-联调测试”的项目式教学策略。首先让学生明确今天的目标是“成为服务器”，然后一步步带领他们搭建环境、编写服务端代码、最后修改前端代码进行联调，体验完整的开发闭环。教学方法项目教学法、演示法、引导探究法。【课程思政】本课课程思政元素系统思维、自主创新、工匠精神。切入方法与举措1.系统思维：通过亲手搭建前后端，让学生理解一个Web应用是由多个部分（前端、后端、网络）协同工作的有机整体，培养系统性思维。

2.自主创新：鼓励学生不仅仅满足于教材示例，可以尝试修改stu_info.json中的数据，甚至添加新的API接口，激发他们的创造欲。

3.工匠精神：在调试过程中，可能会遇到各种问题（如路径错误、端口占用），引导学生耐心排查、细致调试，培养严谨、负责的工匠精神。【教学实施过程】步骤环节（用时）具体内容活动设计意图教师学生1项目导入与目标设定

(10分钟)1.回顾与展望：

-我们已经学会了如何用Ajax“拿”数据。

-今天，我们要学会如何用Node.js“给”数据！

2.展示最终效果：访问http://localhost:3000/stu_info.html，页面自动从/api/students接口加载并展示学生信息表格。

3.任务拆解：

-搭建Node.js+Express服务器。

-编写API接口提供JSON数据。

-修改前端Ajax请求地址。清晰地阐述本课目标是完成一次“角色转换”，并展示激动人心的最终成果。明确学习目标，对即将亲手搭建服务器感到兴奋和期待。激发内在驱动力，建立清晰的项目蓝图。2后端开发：搭建服务器与API

(30分钟)1.环境准备：

-

npminit-y

-

npminstallexpress

2.编写app.js：

-

constexpress=require('express');

-

constapp=express();

-

app.use(express.static('public'));//托管静态文件

-

app.get('/api/students',(req,res)=>{...});//定义API

-

app.listen(3000);

3.准备数据：将stu_info.json放入public目录。逐行讲解app.js代码，特别是express.static和app.get的作用。现场演示启动服务器(nodeapp.js)。跟随老师操作，完成环境搭建和服务器代码编写，并成功启动服务器。掌握Node.js和Express的基础用法，完成服务器端开发。3前端联调：对接API

(20分钟)1.修改前端代码

(stu_info.html):

-将Ajax请求的URL从'stu_info.json'改为'http://localhost:3000/api/students'。

2.测试与调试：

-访问http://localhost:3000/stu_info.html。

-打开浏览器开发者工具，观察Network面板中的XHR请求，确认请求成功并返回了正确的JSON数据。指导学生修改前端代码，并教授如何使用开发者工具进行调试，这是解决前后端问题的关键技能。修改前端Ajax代码，访问页面，观察结果。如遇问题，使用开发者工具排查。完成前后端联调，体验完整的数据交互流程。4成果展示与拓展

(10分钟)1.成果展示：邀请学生展示自己成功运行的项目。

2.拓展思考：

-如何添加一个“按学号查询”的API？

-如果前端页面不在3000端口，会遇到什么问题？（引出CORS）

-除了Express，还有哪些Node.js框架？（如Koa,NestJS）组织分享，肯定学生的成果，并抛出更高阶的问题，引导他们持续探索。展示成果，思考老师提出的拓展问题，规划下一步的学习方向。获得成就感，激发持续学习的热情。5课堂小结

(5分钟)总结项目9的核心——Ajax+Node.js构成了现代Web应用数据交互的基石。回顾从前端Ajax到后端Node.js的完整学习旅程。强调这种前后端分离、通过API通信的模式是行业标准。升华主题，将本次项目置于更大的技术图景中，帮助学生建立职业认知。回顾整个项目的学习历程，建立完整的前后端交互知识框架。巩固知识，获得成就感，明确未来方向。【教学反思】特色创