“C语言程序设计”课程学习平台微信小程行研究与开发

长　春　大　学　学　报

ＪＯＵＲＮＡＬＯＦＣＨＡＮＧＣＨＵＮＵＮＩＶＥＲＳＩＴＹ

Ｖｏｌ.２９　Ｎｏ.８Ａｕｇ.２０１９　

“Ｃ语言程序设计”课程学习平台微信小程行研究与开发

吴国栋ꎬ祝娱慧

(安徽农业大学信息与计算机学院ꎬ合肥２３００００)

摘　要:Ｃ语言是一种重要的编程语言ꎬ当前许多操作系统如ＵＮＩＸ(尤尼斯)、Ｗｉｎｄｏｗｓ、Ｌｉｎｕｘ和其他底层软件都是基于Ｃ语言开发的ꎮ高校计算机类专业学生学好Ｃ语言ꎬ可以对学习其他程序设计语言和从事ＩＴ行业相关工作奠定坚实的基础ꎮ微信小程序ꎬ因其使用的便捷性ꎬ应用的广泛性ꎬ愈来愈被大众所接受ꎮ基于微信小程序ꎬ设计并开发了一个Ｃ语言精品课程教学系统ꎬ通过系统可以实现课程资源管理、在线学习、在线测试、在线讨论等功能ꎬ旨在为教授和学习“Ｃ语言程序设计”的师生提供一个便利、高效的教学服务平台ꎮ关键词:微信小程序ꎻＣ语言ꎻ教学系统

中图分类号:ＴＰ３１１ꎻＧ６４２　　文献标志码:Ａ　　文章编号:１００９－３９０７(２０１９)０８－００３４－０６

随着互联网技术的迅猛发展ꎬ基于移动终端的学习系统也愈来愈受到人们的重视和喜爱ꎮ目前ꎬ微信作为一种为智能终端提供即时通信服务的免费应用程序ꎬ已经广泛地应用在智能手机上ꎮ基于微信小程序所开发的“Ｃ语言程序设计”精品课程教学系统ꎬ可满足教师与学生对该课程不同的需求ꎬ主要利用ＷＸＭＬ(ＷｅｉＸｉｎＭａｒｋｕｐＬａｎｇｕａｇｅ)、Ｊａｖａｓｃｒｉｐｔ、ＷＸＳＳ(ＷｅｉＸｉｎＳｔｙｌｅＳｈｅｅｔｓ)等技术进行开发ꎮ通过本系统ꎬ学生可以利用碎片化时间随时随地学习ꎮ课程学习内容覆盖每一个知识点ꎮ在内容排版上采用文字与程序代码图片相结合ꎬ以适应微信程序的界面风格ꎮ系统设计了在线测试及学习过程管理等功能ꎮ微信小程序是一种即开即用、无须安装、不占用内存的应用ꎬ可以在微信内便捷地获取和传播ꎬ同时具有出色的使用体验[１]ꎬ缓解了老师和学生之间因时间、地点、区域等条件而产生的教与学障碍ꎬ增强师生之间的互动ꎬ为学生提供良好的在线学习平台ꎮ

１　需求分析

１.１　系统结构分析

整个“Ｃ语言程序设计”课程教学系统结构分为前端与后端两个部分ꎬ如图１所示ꎮ前端主要面向学生ꎬ后端主要面向应用不同权限的管理员ꎬ例如教师等ꎮ学生通过系统可以进行查看个人信息和课程资源、在线学习、在线测试和查询学习进度等学习过程管理ꎮ教师端登录系统可以对课程资源、学生信息、学生学习情况和论坛等进行管理[２]ꎮ１.２　系统主要功能需求

“Ｃ语言程序设计”教学管理系统要实现学生信息管理、在线学习管理、在线测试和论坛讨论四大核心功能ꎮ

学生信息管理功能包括查看学生的基本信息、

图１　“Ｃ语言程序设计”课程教学系统结构

学习进度和测试成绩ꎮ在线学习管理功能除了要

实现学生可以观看课程视频及电子讲义ꎬ教师可以上传课程资源等传统教学模式ꎬ还应具有对学生学习进度进行监督的功能ꎮ在线测试功能要求系统能够随机生成一套试卷供学生测试ꎬ测试过程中测试时间ꎬ学

收稿日期:２０１９－０３－０５

基金项目:安徽省教育厅项目(２０１８ｋｆｋ１４３)

作者简介:吴国栋(１９７２－)ꎬ男ꎬ安徽安庆人ꎬ副教授ꎬ博士ꎬ主要从事计算机教育研究ꎮ

第８期吴国栋ꎬ等:“Ｃ语言程序设计”课程学习平台微信小程行研究与开发３５

生提交试卷后自动批改生成成绩ꎮ论坛讨能实现学生与学生之间、学生与老师之间的互动交流ꎬ且考虑到不同学生提出的问题会出现重复ꎬ教师也会有紧急事件通知每位学生ꎬ为减少教师的重复工作ꎬ系统在设计时应考虑以留言通知栏等形式解决此问题ꎮ

通过对整个学习平台的分析ꎬ设计出精品课程教学系统数据流程图ꎬ如图２所示ꎮ１.３　微信开发技术需求

开发微信小程序需要掌握ＨＴＭＬ、ＣＳＳ、ＪａｖａＳｃｒｉｐｔ等开发语言和微信提供的微信ｗｅｂ开发者工具ꎮ小程序后台用ＪａｖａＳｃｒｉｐｔ语言编写ꎬ前端框架用ＷＸＭＬ构建ꎬ结合基础组件、事件系统构建出页面的结构ꎮ前端Ｓｔｙｌｅ用ＷＸＳＳ编写ꎬ这是一种在ＣＳＳ的基础上扩充了尺寸单位、样式导入ꎬ用于控制ＷＸＭＬ组件显示的样式语言[３]ꎮ数据库技术基于微信小程序数据库ꎬ实现用户管理、统计分析等ꎮ存储管理使用由微信提供的云开发环境ꎮ

２　系统总体结构

２.１　系统功能结构

“Ｃ语言程序设计”精品课程管理系统主要分为用户管理、课

图２　精品课程教学系统数据流程图

程管理、论坛管理ꎮ其中ꎬ用户管

理包括用户登录、用户注册、信息的查询修改、修改密码和权限设置ꎮ课程管理则针对学生在平台学习功能ꎬ主要包括在线学习、在线测试、学习成绩查询和学习进度查询功能ꎮ论坛管理面向学生与学生之间ꎬ老师与学生之间的互动交流功能ꎮ“Ｃ语言程序设计”教学系统功能结构图ꎬ如图３所示ꎮ

图３　“Ｃ语言程序设计”教学系统功能结构图

２.２　数据库设计

“Ｃ语言程序设计”教学系统采用微信云开发数据库ꎬ云开发提供了一个ＪＳＯＮ数据库ꎬ一个数据库可以有多个集合(相当于关系型数据中的表)ꎬ集合可看作一个ＪＳＯＮ数组ꎬ数组中的每个对象就是一条记录ꎬ记

３６长　春　大　学　学　报　　　　　　　　　　　　　　　　　　第２９卷

录的格式是ＪＳＯＮ对象ꎮ数据库中的每条记录都是一个ＪＳＯＮ格式的对象ꎮ由于直接使用微信云开发数据库ꎬ将系统所使用的数据存放在云开发数据库中ꎬ微信小程序可以直接连接数据库进行数据操作ꎮ系统主要数据库表有学生信息表、教师信息表、试题信息表ꎬ论坛信息表等ꎮ如表１~表４所示:

表１　学生信息表

字段名＿ｏｐｅｎｉｄｓｔｕＮｏｔｉｍｅｎａｍｅ

数据类型Ｓｔｒｉｎｇｎｕｍｂｅｒｎｕｍｂｅｒａｒｒａｙａｒｒａｙ

表２　教师信息表

字段名ｐａｓｓｗｏｒｄｎａｍｅ

数据类型ＳｔｒｉｎｇＳｔｒｉｎｇ

表３　试题信息表

字段名ｃｈａｐｔｅｒａｎｓｗｅｒ

数据类型ＳｔｒｉｎｇＳｔｒｉｎｇＳｔｒｉｎｇＳｔｒｉｎｇＳｔｒｉｎｇＳｔｒｉｎｇＳｔｒｉｎｇ

表４　论坛信息表

字段名＿ｏｐｅｎｉｄｃｈａｐｔｅｒｓｅｃｔｉｏｎｌｙｔｅｘｔ

数据类型ＳｔｒｉｎｇＳｔｒｉｎｇＳｔｒｉｎｇＳｔｒｉｎｇＳｔｒｉｎｇＳｔｒｉｎｇＳｔｒｉｎｇ

字段说明用户唯一标识留言所在章数留言所在节数留言者头像留言内容留言时间字段说明题目正确选择题目所属章节问题主干选项Ａ选项Ｂ选项Ｃ字段说明教师登录名教师密码

ＳｔｒｉｎｇＳｔｒｉｎｇ

字段说明

普通用户的一个唯一的标识

学生姓名学生学号学生学习时长学生密码

ｐａｓｓｗｏｒｄａｎｓｗｅｒｒｅａｄ

学生答题记录数组学生阅读记录数组

ｑｕｅｓｔｉｏｎＡｑｕｅｓｔｉｏｎＢｑｕｅｓｔｉｏｎＣ

ｑｕｅｓｔｉｏｎ

ｑｕｅｓｔｉｏｎＤ选项Ｄ

ｈｅａｄｉｍｇｌｙｔｉｍｅ

ｎｉｃｋｎａｍｅ留言者昵称

３　系统的设计与实现

３.１　用户登录模块

用户登录界面包括用户名和密码ꎮ用户选择相应的身份后输入用户名和密码ꎬ登陆成功则进入系统ꎻ登录失败则会出现相应错误提示ꎮ新用户通过点击立即注册进入立即注册界面ꎬ完成注册后会自动跳转登录

第８期吴国栋ꎬ等:“Ｃ语言程序设计”课程学习平台微信小程行研究与开发３７

界面ꎮ用户登录界面如图４所示ꎮ

图４　用户登录界面图５　个人用户信息界面

３.２　系统管理模块

在此模块中ꎬ学生可以查看个人用户信息ꎬ如姓名、学号、学院专业、考试成绩记录等ꎬ并对基本信息拥有修改的权力(除成绩外)ꎮ老师除查看个人的信息外ꎬ还可以查看学生名单信息ꎬ具体包括每个学生的姓名、３.３　在线学习模块

专业、视频学习进度、考试成绩ꎮ个人用户信息界面如图５所示ꎮ

此模块为学生学习课程所设ꎮ学生登录系统后ꎬ点击首页即可看到章节目录ꎬ进入相应知识章节就可在线观看课程视频和课程讲义电子版ꎮ在线学习实现界面如图６所示ꎮ

图６　在线学习界面图７　学习进度界面

３.４　学习过程管理模块

学生在观看每一章的课程资源时ꎬ系统后台会同时进行时间计数ꎬ达到规定观看时间后才可以提交学习进度ꎬ并且在个人中心查看学习进度ꎬ可以看到自己的全部学习进程ꎬ星星点亮则表示已完成该章节学习任３.５　论坛管理模块

务ꎮ学习提供界面ꎬ如图７所示ꎮ

该模块主要实现学生与学生之间的在线交流及学生与老师之间的线上课程交流ꎮ老师可以发布通告通知学生重要事情ꎬ师生之间在论坛里通过发表留言和回复留言的形式来交流ꎬ这样形成一种交互式的教学模式ꎮ论坛讨论界面如图８所示ꎬ论坛留言信息关键代码如下:

３８长　春　大　学　学　报　　　　　　　　　　　　　　　　　　第２９卷

ｗｘ.ｃｌｏｕｄ.ｃａｌｌＦｕｎｃｔｉｏｎ({//调用云函数获取留言表　　　ｎａｍｅ:̓ｃｈａｔｂｏｘ̓ꎬ　　　ｄａｔａ:{}ꎬ　　　ｓｕｃｃｅｓｓ(ｒｅｓ){　　　　})　　　}ꎬ　})

ｔｈａｔ.ｓｅｔＤａｔａ({

　　　　　ｌｉｕｙａｎｌｉｓｔ:ｒｅｓ.ｒｅｓｕｌｔ.ｄａｔａ

　ｄｂ.ｃｏｌｌｅｃｔｉｏｎ(̓ｎｏｔｉｃｅ̓).ｇｅｔ({//获取通知　　　ｓｕｃｃｅｓｓ(ｒｅｓ){　　　　})　　　})　　　}

　　　　　ｎｏｔｉｃｅ:ｒｅｓ.ｄａｔａ

　ｗｘ.ｓｅｔＳｔｏｒａｇｅＳｙｎｃ(̓ｎｏｔｉｃｅＩＤ̓ꎬｒｅｓ.ｄａｔａ[０].＿ｉｄ)

ｔｈａｔ.ｓｅｔＤａｔａ({

图８　论坛讨论界面图９　在线测试界面

３.６　在线测试模块

学生完成课程视频学习内容后ꎬ可进入在线测试完成老师指定的试卷测试ꎬ从题库随机抽取试题生成一份试卷ꎬ在规定时限内提交试卷(若到时未提交则强制提交)ꎬ系统自动完成试卷批改ꎬ学生可查看客观题的考试分数ꎮ在线测试界面实现如图９所示ꎬ在线测试关键代码如下:

ｗｘ.ｃｌｏｕｄ.ｃａｌｌＦｕｎｃｔｉｏｎ({

ｎａｍｅ:̓ｑｕｅｓｔｉｏｎ̓ꎬｄａｔａ:{　}ꎬ

ｃｈａｐｔｅｒ:ｔｈａｔ.ｄａｔａ.ｃｈａｐｔｅｒ　　//从数据库里抽取对应章节题目

第８期吴国栋ꎬ等:“Ｃ语言程序设计”课程学习平台微信小程行研究与开发３９

　　　ｔｈａｔ.ｓｅｔＤａｔａ({　　　　　　　　　　　　　})　　}ꎬ

ｓｕｃｃｅｓｓ(ｒｅｓ){

　ｑｕｅｓｔｉｏｎＣｏｕｎｔ:ｒｅｓ.ｒｅｓｕｌｔ.ｄａｔａ.ｌｅｎｇｔｈꎬ　　ｑｕｅｓｔｉｏｎｓ:ｒｅｓ.ｒｅｓｕｌｔ.ｄａｔａ　　

　　　ｆａｉｌ:ｅｒｒ＝>{

　　　　　ｔｉｔｌｅ:̓提示̓ꎬ

　　　　　ｃｏｎｔｅｎｔ:̓网络异常̓ꎬ　　　　　ｓｈｏｗＣａｎｃｅｌ:ｆａｌｓｅ　　　　　})　　　　}　　　　})

微信小程序与基于Ｗｅｂ的教学网站相比更为便捷ꎬ仅仅需要一部手机就可以随时随地学习ꎬ较于Ａｐｐ开发来说ꎬ开发成本更便宜ꎮ本文基于微信小程序ꎬ开发了一个线上移动端的Ｃ语言教学系统ꎬ为学生提供具有一定的价值ꎮ参考文献:

[１]　刘建粉ꎬ张海博.基于微信小程序的数据结构学习平台设计[Ｊ].科技风ꎬ２０１８(３６):２４７－２４８.[２]　牛琳ꎬ吴琳.基于微信小程序的移动学习平台的设计与实现[Ｊ].软件工程ꎬ２０１８ꎬ２１(９):１５－１７ꎬ７.

用ꎬ２０１９(９):２１－２３.

ｗｘ.ｓｈｏｗＭｏｄａｌ({

４　结语

了一种实时、易用、交互的全新学习环境[４]ꎮ为提高学生学习效率ꎬ提升“Ｃ语言程序设计”课程教学质量ꎬ

[３]　廖伟国ꎬ谢杰新ꎬ胡婉玲ꎬ卢晓惠ꎬ鄢利章ꎬ李晓美.基于微信小程序的校园资讯平台的页面设计与实现[Ｊ].科技创新与应[４]　常娜ꎬ梁其烺.基于微信小程序的«网页设计与制作»课程资源的研究与设计[Ｊ].计算机产品与流通ꎬ２０１８(１０):２３.

责任编辑:于　昕

ＲｅｓｅａｒｃｈａｎｄＤｅｖｅｌｏｐｍｅｎｔｏｆＣｏｕｒｓｅＬｅａｒｎｉｎｇＰｌａｔｆｏｒｍｏｆＷｅＣｈａｔＬｉｔｔｌｅＰｒｏｇｒａｍ

ｆｏｒＣＬａｎｇｕａｇｅＰｒｏｇｒａｍｍｉｎｇＤｅｓｉｇｎ

(ＣｏｌｌｅｇｅｏｆＩｎｆｏｒｍａｔｉｏｎａｎｄＣｏｍｐｕｔｅｒＳｃｉｅｎｃｅꎬＡｎｈｕｉＡｇｒｉｃｕｌｔｕｒａｌＵｎｉｖｅｒｓｉｔｙꎬＨｅｆｅｉ２３００３６ꎬＣｈｉｎａ)

ＷＵＧｕｏｄｏｎｇꎬＺＨＵＹｕｈｕｉ

Ａｂｓｔｒａｃｔ:Ｃｌａｎｇｕａｇｅｉｓａｎｉｍｐｏｒｔａｎｔｐｒｏｇｒａｍｍｉｎｇｌａｎｇｕａｇｅ.ＡｔｐｒｅｓｅｎｔꎬｍａｎｙｏｐｅｒａｔｉｎｇｓｙｓｔｅｍｓｓｕｃｈａｓＵＮＩＸꎬＷｉｎｄｏｗｓꎬＬｉｎｕｘａｎｄｏｔｈｅｒｕｎｄｅｒｌｙｉｎｇｓｏｆｔｗａｒｅａｒｅｄｅｖｅｌｏｐｅｄｂａｓｅｄｏｎＣｌａｎｇｕａｇｅ.ＩｔｉｓｉｍｐｏｒｔａｎｔｆｏｒｕｎｉｖｅｒｓｉｔｙｓｔｕｄｅｎｔｓｍａｊｏｒｉｎｇｉｎｃｏｍｐｕｔｅｒｓｃｉｅｎｃｅｔｏｌｅａｒｎＣｌａｎｇｕａｇｅｗｅｌｌꎬｗｈｉｃｈｃａｎｌａｙａｓｏｌｉｄｆｏｕｎｄａｔｉｏｎｆｏｒｔｈｅｉｒｆｕｔｕｒｅｓｔｕｄｙｏｆｏｔｈｅｒｐｒｏｇｒａｍｍｉｎｇｌａｎｇｕａｇｅｓａｎｄｒｅｌａｔｅｄｗｏｒｋｉｎＩＴｉｎｄｕｓｔｒｙ.ＷｅＣｈａｔＬｉｔｔｌｅＰｒｏｇｒａｍｗｉｔｈｉｔｓｃｏｎｖｅｎｉｅｎｃｅａｎｄｗｉｄｅａｐｐｌｉｃａｔｉｏｎｉｓｍｏｒｅａｎｄｍｏｒｅａｃｃｅｐｔｅｄｂｙｔｈｅｐｕｂｌｉｃ.ＴｈｉｓｐａｐｅｒｄｅｓｉｇｎｓａｎｄｄｅｖｅｌｏｐｓａＣｌａｎｇｕａｇｅｅｘｃｅｌ￣ｌｅｎｔｃｏｕｒｓｅｔｅａｃｈｉｎｇｓｙｓｔｅｍｂａｓｅｄｏｎＷｅＣｈａｔＬｉｔｔｌｅＰｒｏｇｒａｍꎬｉｎｗｈｉｃｈｔｈｅｆｕｎｃｔｉｏｎｓｏｆｃｏｕｒｓｅｒｅｓｏｕｒｃｅｍａｎａｇｅ￣ｍｅｎｔꎬｏｎｌｉｎｅｌｅａｒｎｉｎｇꎬｏｎｌｉｎｅｔｅｓｔｉｎｇａｎｄｏｎｌｉｎｅｄｉｓｃｕｓｓｉｏｎｃａｎｂｅｒｅａｌｉｚｅｄꎬｈｏｐｉｎｇｔｏｐｒｏｖｉｄｅａｃｏｎｖｅｎｉｅｎｔａｎｄｅｆ￣ｆｉｃｉｅｎｔｔｅａｃｈｉｎｇｓｅｒｖｉｃｅｐｌａｔｆｏｒｍｆｏｒｔｅａｃｈｉｎｇａｎｄｌｅａｒｎｉｎｇＣＬａｎｇｕａｇｅＰｒｏｇｒａｍｍｉｎｇＤｅｓｉｇｎ.Ｋｅｙｗｏｒｄｓ:ＷｅＣｈａｔＬｉｔｔｌｅＰｒｏｇｒａｍꎻＣｌａｎｇｕａｇｅꎻｔｅａｃｈｉｎｇｓｙｓｔｅｍ