科研反哺教学的"双螺旋"模型构建——Web前端课程群三阶重构实践

顾问/副教授/硕士研究生

科研成果简介：

1、《南京青年学习社线路在线学习平台》

课题名称：《“南京青年学习社线路在线学习平台”的技术开发》,合同编号：SJXY[2021]53

主要研究内容：为深化青少年思想政治引领，南京团市委基于微信公众号开发了“南京青年学习社线路在线学习平台”，旨在整合沉浸式学习资源，创新青年思想教育模式。平台聚焦“青年学习社”线路的数字化延伸，集成语音讲解、学习视频、电子手册等多媒体功能，支持签到打卡、互动答题等体验式学习环节，并可通过学习成果生成线上证书，为青少年提供便捷化、趣味化的学习路径。

创新与实践成果：

技术整合与功能设计：平台融合线上线下载体，将南京市内多条青年学习社线路（如“初心之路”、“溧志之路”、“共和国工业摇篮之路”等）的实地场景转化为数字化内容，例如可通过虚拟导览体验南钢博物馆的工业历史。

互动性与参与度提升：结合“沉浸式+体验式”学习需求，平台增设答题闯关、线上证书激励等机制，与线下活动形成联动。

社会影响与覆盖范围：平台上线后，支撑了全市10余条青年学习社线路的运营，累计服务超万人次。以江北新区“共和国工业摇篮”线路为例，其线上平台辐射大学城、园区等青年群体，并通过“青春南京”公众号实现跨区域传播。

2、《基于WebGIS和AI的鸟类分布与检测系统》

课题名称：《基于WebGIS和AI的鸟类分布与检测系统》,合同编号：SJXY[2024]018

本项目以人工智能（AI）与地理信息系统（WebGIS）为核心，构建了一款智能化、可视化的鸟类识别与生态监测平台。系统集成先进的大模型和视觉识别技术，支持用户通过图片上传实现鸟类物种的毫秒级精准识别，覆盖全国200种常见鸟类，识别准确率达97.5%，并同步提供物种习性、保护等级及生态关联知识库。基于WebGIS技术，平台动态聚合多源地理数据（如栖息地范围、迁徙路径、环境因子），生成交互式鸟类分布热力图，可直观呈现种群密度变化及栖息地变迁规律，为生物多样性研究与生态决策提供数据支撑。

创新与实践成果：

AI与GIS深度融合：“图像识别-空间分析”双引擎架构，实现鸟类个体识别与宏观分布规律的双向验证；

多模态数据协同：整合无人机航拍、公众科学观测数据，构建鸟类动态数据库，支持濒危物种智能预警；

轻量化与普适性：优化模型参数量，适配移动端与野外监测设备，在无网络环境下仍可通过边缘计算完成基础识别。

科研反哺教学的双螺旋模型构建——Web前端课程群三阶重构实践

1、Web前端技术的学科价值与行业需求驱动教学改革

在数字经济高速发展的背景下，Web前端技术已从基础页面开发演变为全栈工程化体系，其承担着三大核心职能：

（1）多端交互中枢：通过React/Vue等框架实现跨平台应用开发（移动端、桌面端、XR设备）；

（2）数据可视化门户：整合WebGL、Three.js等技术构建大屏数据驾驶舱与3D业务看板；

（3）AI工程化载体：作为算法服务的前端容器，实现智能问答、图像识别等功能的用户界面融合。

据《2024年中国互联网发展报告》显示，全栈开发者需求年增长率达37.8%，其中同时掌握AI工程化与GIS开发能力的复合型人才薪资溢价达62%。当前行业呈现三大技术融合趋势，行业需求升级催生人才能力重构，倒逼课程体系改革：

融合维度	技术栈组合	岗位需求增长率（2024）
AI+前端	TensorFlow.js+Web Components	89%
GIS+前端	OpenLayers+WebGL三维渲染	156%
IoT+前端	Web蓝牙API+MQTT协议集成	112%

企业调研显示：70%的数字化转型项目存在“懂AI业务逻辑的前端架构师”缺口，60%的GIS开发岗位要求具备Vue/React框架集成能力。

2、改革路径与实施成效

（1）技术研发驱动课程重构：从“知识模块”到“实战链条”

反哺过程：

基于《南京青年学习社线路在线学习平台》开发中涉及的HTML5、CSS3、Javascript、多媒体交互、数据可视化等技术，教学团队将平台功能拆解为“需求分析-原型设计-开发测试”三阶实训模块，重构《Web设计基础》、《Web前端技术》等Web基础课程体系。主要体现在：

1）教学内容转化：将平台“线上语音讲解”功能的技术难点（如无序列表、音频播放）转化为《Web设计基础》课程案例，设计“在线音频播放器”实战项目，覆盖响应式布局、多媒体交互、异步数据处理等核心知识点。

图1 结合项目的教学设计

2）教学手段升级：依托平台沉浸式学习场景（如“南钢博物馆虚拟导览”），在《Web设计基础》课程中完成“工业遗址虚拟导览”超链接任务，引用互联网公开发布的虚拟场景链接进行技术整合，同步输出技术文档与用户体验报告。

反哺成果：

1）建成校级课程思政课程《Web设计基础》，开发配套案例视频库1套，累计覆盖学生3000余人；

2）学生团队参与平台30%功能迭代，孵化出1项国家级竞赛获奖作品，1项省级竞赛获奖作品；

图2 研发团队为南京市共青团各级领导现场培训

3）企业反馈学生“实战能力显著优于传统教学模式培养者”。

（2）真实项目锤炼创新能力：从技术攻关到生态守护

反哺过程：

基于“科研创新-教学迭代”双螺旋模型，将《Web前端框架技术》课程和《Web前端技术实训》课程设计进行三阶重构，技术突破驱动教学升级，主要体现在：

1）基础重构：将Vue3+OpenLayers地图框架融入Web前端框架课程，指导学生开发Web前端框架组件；

2）进阶重构：训练学生使用Python Flask框架搭建基础Web服务，并集成文心大模型的智能问答系统；

3）实战重构：以大屏数据展示为应用背景，利用科研成果部分数据集，指导学生研发鸟类数据可视化系统；跨领域协同创新，组建计算机、地理信息专业教师联合团队，为教学提供跨领域技术支持。计算机开发组搭建Python原生服务架构，实现算法服务、GIS引擎、NLP模块的调度、设计统一接口规范，通过RESTful API+WebSocket双通道协议，打通AI识别结果与地图可视化模块的数据闭环；GIS开发组构建迁徙热力图，实现长江流域多种候鸟迁徙轨迹动态模拟。

反哺成果：

1）孵化基于深度学习算法的鸟类检测关键技术研究1项国家级大学生创新训练项目，“环太湖流域鸟类生态智能识别系统的研究”1项省级大学生创新训练项目；

2）学生团队研发的基于微信小程序的鸟类目标检测系统获全国大学生计算机应用能力与信息素养大赛国赛三等奖；“基于AI技术的生态教育与鸟类信息智能识别系统”获 2024年“领航杯”江苏省大学生数字素养与技能大赛本科组二等奖；

3）“基于EfficientDet算法的轻量化鸟类目标检测系统”获软件著作权1项。

3.总结与反思

基于“科研创新-教学迭代”双螺旋模型，南京青年学习社在线平台等科研项目与Web前端课程群深度融合，通过“基础-进阶-实战”三阶重构，实现科研与教学螺旋互哺。

双螺旋互哺机制：以科研技术难点（如Vue3+OpenLayers框架集成、AI智能问答开发）驱动课程内容升级，教学反馈反哺科研方向优化，形成“需求到应用”的闭环。例如，平台开发的组件化思想融入《Web前端框架技术》课程，指导学生封装可复用模块；鸟类生态数据可视化项目推动《Web前端技术实训》课程融入WebGIS引擎技术，实现技术向教学的精准转化。

三阶重构路径：基础重构（HTML5+CSS3）夯实工程规范；进阶重构（Vue3+Flask全栈）强化系统思维；实战重构（AI+GIS跨域集成）锤炼创新能力。三阶目标与科研需求紧密咬合，如“工业遗址虚拟导览”项目驱动课程任务升级，孵化国家级竞赛作品；“鸟类迁徙热力图”开发推动学生掌握双通道协议，形成“技术攻关→竞赛孵化”的创新链。

成果与反思：孵化国家级大创项目、竞赛奖项及软件著作权，验证了双螺旋模型的有效性。但仍需突破相关瓶颈：一是建立动态课程资源池，实时吸纳新技术（如大模型插件）；二是深化跨学科协作，构建校企“双导师”团队；三是完善“创新能力量化图谱”，从代码规范、系统设计等维度建立评价体系。

附：科研反哺学生作品集

1.依托科研成果：《南京青年学习社线路在线学习平台》科研成果

（1）学生团队参与研发的“南京青年学习社线路线上学习平台”获得第14届中国大学生计算机设计大赛国赛二等奖。