随着互联网信息技术的飞速发展,编程教育逐渐成为我国教育发展的重点。近年来,各大高校的在线编程教学平台不断涌现,其中采用的在线编译运行技术能够大大减轻教师的工作量,给学生及时、准确的反馈。然而这些在线编程平台与课程教学和学生管理方面联系并不紧密,侧重于评估编程题目完成的正确性,缺乏学生编程输入中的过程性行为信息。因此,结合网页开发与在线编译技术,设计一个与课程和学生管理紧密结合且能收集过程性输入信息的在线编程平台具有重要意义。基于上述需求,本文设计并实现了一个基于Web的在线编程平台,与高校程序设计实验课程紧密结合,并能主动收集学生编码过程中的重要行为信息,其主要内容包括:（1）基于Code Mirror的在线代码编辑器,为用户提供编辑输入、代码提示、自动补全等相关功能,通过监听浏览器键盘事件和编辑器内容更新事件,在学生编程输入过程中收集过程性行为信息。（2）基于React的在线编程管理平台,采用组件化开发的模式,使用Sass预处理器调整页面样式,使用Webpack模块打包器完成自动化构建,为教师提供课程管理、邀请学生加入、实验开启管理、实验批改等功能,学生可以查看自己的实验成绩排名和教师的批改留言。（3）基于Node.js的平台服务端,通过Nginx服务器和Node.js处理请求路由和执行业务逻辑,使用Docker技术创建代码在线编译运行环境,将服务器临时文件夹下的代码文件地址映射到Docker容器的执行路径中,编译运行用户提交的代码,每个用户代码运行时相互独立,使得服务器运行代码文件时更加安全可靠。本文设计实现的在线编程平台,与编程教育教学联系紧密,功能完善,性能良好。目前平台系统已经完成预测试,做好了正式上线运行准备,计划在秋季学期的C语言程序设计、Java语言程序设计课程中正式使用,为编程实验课程开展提供平台支持。