非计算机专业教师线上课程云平台架构探索

张吉，李晓洁，周谊霞，马俊，杨想红，刘金芳

（1.贵州民族大学，贵州 贵阳；2.贵州中医药大学，贵州 贵阳；3.贵州财经大学，贵州 贵阳；4.泰州职业技术学院，江苏 泰州）

新冠疫情造成学生不能返校需要居家学习给线上学习带来了井喷式需求，同时线上教学也接受空前的实战检验。为响应中央与教育部的停课不停学的号召，各类院校基本上都采用过线上教学模式。评价线上、线下教学的好坏，最重要的指标是师生的反映。邬大光、李文等对全国334所高校、13997名教师、256504名学生进行了调研发现：教学平台功能不完善是当前最为紧迫的问题[1]。课程平台功能不完善体现在多个方面。首先体现在对基础的PPT、PDF、MP3/MP4格式的数字、影像等资源中的部分功能支持不完善。例如：动画是教学课件中的常规内容，也是教师为了讲述重点、难点知识采用的方法之一，目前学习通等平台的现有功能并不能支持PPT课件中的动画播放，在线下教学过程中，教师可采用动画形式进行教学，但将课件传至平台，有动画的页面很多信息被覆盖，只呈现一个图层，无法实现教学目标。其次体现在训练模块。例如：作业、考试等模块中，医学类护士资格证考试中固定题型——公用题干的选择题学习通目前也不支持，因此无法在平台上设置此类选择题，与职业资格证书考试形式无法匹配。最后，在建筑工程、医学、体育等领域，对新兴的教学手段和方法支持力度还不够。

教师根据学科特点构建符合课程特色的平台可提升教学效果。在Forge、BIMFace等三维Web端渲染引擎基础上进行二次开发，在3dMax、Revit、Lumion软件中完成建模后将模型转换成三维渲染引擎所接受的格式，可以爆炸图方式对教学模型进行分解展示。采用智能手机对教学模型进行拍照，结合Three.js将360度/720度全景技术引入到课教学当中，可对复杂建筑节点、构件内部的钢筋构造进行交互式查看，对人体解剖学中的器官构造、体操/武术动作做全方位展示。

教材+二维码的线下与线上结合目前是主流，根据多门课程的关联性建立完善的知识图谱是大势所趋，而现有线上教育平台资源如大学慕课是不能完全支持上述教学手法，须依托于教师自主开发符合自身特色的线上平台。

此外，大数据时代应充分利用数据分析提高教学效率。建设基于Web技术的线上平台，通过匿名发言打通学生和老师之间的“通讯障碍”。学生在线上平台发起提问后，平台自动将问题收集成库，并对问题库进行数据分析与挖掘，基于Python的jieba库进行分词统计，得出学生的高频问题。按搜索频次由高到低对问题进行排序，教研组首先针对高频问题做出回答，从而做到有的放矢，提高教学效率。学生再作出评价或追问，直至弄清楚全部概念及原理、深层次的知识间内在联系。疫情就全世界范围而言，仍处在一个不稳定期，新冠肺炎也被医学专家评价为“一个被严重低估的病毒”。因此，在后疫情时代，无论从疫情的不稳定状态需要为教学做好充足准备而言，还是从线上教学改革而言，搭建符合课程特色的平台都是非常重要的事情。

开发一套线上课程教学平台，涉及一系列关键技术，包含系统架构、开发环境搭建、前端页面、后端页面与服务器、数据库、域名、公网IP及内网穿透等，具体涉及内容如下。

一 系统架构

系统架构统筹平台的各个环节以及环节之间的通讯机制。在全球Python语言盛行的形式下[2]，对于非计算机专业的教师而言，采用基于Django[3]或Flask[4]平台框架部署平台架构，具备可行性。相比Django，Flask属于轻量级的开发框架，许多应用在需要在开发过程中进行扩展。而Django属于重量级的框架，原生功能比较齐全，易于开发出全面、稳定的企业级的网站。目前采用Django更适合开发一成套完整的教学平台。

（1）Django具有开源、免费、易用的特点。Django是一个开源框架，基于目前最为流行的计算机编程语言Python研发而成。该平台框架具有编程环境易于搭建、代码量少、开发效率高的特点。例如调试工具不同于传统C/C++语言采用的visual studio，Java采用的Eclipse等，Python的IDLE下载及安装配置过程相当简单，安装包也属于轻量级。若需第三方库时，在网络畅通的情况下，可通过pip等命令实时安装加载即可（开源免费编辑器VScode，Jupyter Notebook，及商用pycharm均可作为调试工具）。入门门槛低且容易掌握，不至于出现非计算机专业人士做线上课程过程中，止步于开发环境的搭建阶段。

（2）Django的编程理念先进。采用当今较流行的网络平台架构模型MVC，M代表Model，V代表View，C代表Control，主张将前后端进行分离解耦。此外，因其对基础网页编程功能函数做了大量的二次封装，面向对象编程手法如封装、继承、多态实现起来相对比较容易，采用{% extends xxx %}、{% block xxx %}与{% endblock xxx%}组合即可实现网页之间的继承，页面头部、左侧树形菜单、底部等区域不需要重复编写。

（3）Django的工作流程清晰。从浏览器输入网络课程的网址发送网页请求request之后，根据协议类型（目前主要用http，加密要求高的采用https），选用DNS域名解析，将域名转换成IP地址，然后经过网络连接访问对应的Web服务器[5]。通过路由文件urls.py决定由哪个视图函数接收浏览器的请求，在views.py中采用Python语言编写视图类，通过关键字import导入模型文件models.py中的数据类后，在视图类函数可实现从数据库中获取数据，作为render函数的参数传递给模板文件（html文件），再通过render或httpResponse函数，将渲染完成的html模板回送到浏览器。以上过程采用基于Django的网络框架，通过几个简单命令即可布置成功，其工作流程框图如下图1所示。

图1 Django框架的工作流程流程图

二 开发环境搭建

采用Django网络框架，需先安装Python与Django两个软件。关于Python的安装说明文档非常丰富全面，在其主页上https://www.python.org找到Downloads菜单，选择与电脑操作系统匹配的安装程序包进行下载安装（非开源程序压缩包），除苹果品牌的电脑，可能会默认安装macOS系统，或者是出于独特的需求安装其它的系统，如Linux系统，目前绝大部分用户使用的电脑操作系统为Windows 64-bit。适用于Windows系统的Python安装包大小仅为几十兆。在Python安装完成之后，从系统cmd命令窗口采用pip命令安装Django，完整的pip安装命令为pip install Django==3.2.8。上述命令中，双等于号右侧的3.2.8表示需要安装到本机的Django版本号，选择版本号时需注意与Python版本号适配，不同版本的Python所能支持的Django版本号在Django主页的文档说明中均已列出，目前主流版本的对应关系如表1所示。

表1 Django与Python相匹配各版本的对应关系

为了避免版本冲突，或者由于反复安装、卸载操作导致的软件不能正常启动，上述两个软件的安装过程，可在开源集成平台Anaconda中完成。在Anaconda的官方网站或国内镜像中选择Anconda安装包进行下载安装（如图2所示）。Anaconda安装包内置了Python安装程序，安装Anaconda并建立环境（environment），默认会生成一个base环境，然后采用conda install Django命令安装Django，Anaconda可在网络上自动搜寻与Python匹配的版本进行安装。按上述方法安装一般可避免版本冲突、反复安装导致注册表等信息杂乱的问题。

图2 Anaconda下载页面局部

安装完成Django之后，在cmd中通过cd命令切换至将放置网站开发文件夹的目录，使用django-admin startproject xxx命令创建名为xxx的项目，该命令会自动生成名称为xxx的文件夹，xxx文件夹中包含MVC模式Django网站框架所需Python文件，如图3所示。包含总控、配置、路由等py脚本文件。例如，在settings.py文件中已完成数据库、应用管理、模板路径、时区、界面采用语言种类等宏观配置内容。

图3 Django网站框架所含Python文件

在项目manage.py文件所在目录下执行cmd命令python manage.py runserver启动Django服务器。在浏览器地址栏中输入http://127.0.0.1:8000/，若弹出如图4所示页面，说明Django开发环境已经配置成功。

图4 Django服务器启动成功页面

三 前端页面

前端页面即通过浏览器查看到的网页内容——标题、段落文字、轮播图片、音视频、电子书等。每一个网页对应着一个以html为后缀名的文件，大多数的网站首页以index.html命名。点击网页上的一个超链接或按钮，将通过href或onclick响应事件跳转至另一个html页面。前端网页开发通常涉及html，css，JavaScript三个方面的技术。

Html

主要负责网页内容的安排和整体布局，比如网页的头部写课程名称，中部区域放置电子教学资源，底部布置版权信息、联系地址等，网页中是否采用树形菜单，以及超链接设置、表单布置均在html文件中进行编写。

CSS

主要负责网页内容的具体排版与美化，如字体的大小，图片框的大小、图片排列与边距及颜色调配等问题，简而言之，起调控网页美观的作用。

可采用现有开源样式控制框架Bootstrap等进行样式设置，该框架支持的浏览器比较全，且不易出现网页缩放时页面溢出等异常现象。

JavaScript

主要负责对响应事件进行处理，实时监听网页上的用户事件，比如用户鼠标单击、滚动缩放事件。一般采用JavaScript编程语言，对页面上的表单数据（输入框输入内容，复选框的选择状态）进行提取，或直接从数据库中读取数据，完成必要的运算后，将结果返回并重新渲染模板html页面。

以上三部分内容可全部写在一个html中，但容易导致html文件过长，不利于查阅及维护代码，宜分别放置在三个文件夹中进行分类管理。国内外开源代码托管与协作平台Github、Gitee等上面星标多的代码，绝大部分采用分类管理模式。

前端网页布局及样式调控工作比较繁琐，在掌握其基本工作原理的前提下，尽量采用低代码开发工具，通过可视化拖拽方式完成网页设计，大大提高开发效率，可同时兼顾平台开发质量与速度。

四 后端

后端一般是指网络课程的服务器端，其主要使用对象是管理员，主要有两个方面的应用场景。其一，用户如学生从前端网页发起提问或上传了作业文件，不能一直缓存，须编将其传入后端并存储到服务器的硬盘中。其二，教师在服务器端可打开管理员（Admin）界面，完成数据分析和管控、添加与编辑信息工作。如将教学PPT、教材PDF、教学动画/录像、全景、2D图纸、3D模型、X线影像、比赛镜头回放等教学资源存入服务器，供视图层读取此类数据后对前端网页进行渲染和更新。

可采用传统的PHP作为后台操作页面编写语言[5]。但采用Django网络应用框架更符合时代潮流，其后台维护界面的开发过程十分简便，Django封装了全面的后台界面开发函数，只需Python编程基础即可开发，适合非计算机专业人士使用[6]。

（1）数据库。将数据比如学生信息，常见问题及答案等存于数据库中，数据格式更加规范，用户搜索数据时的效率会更高[7]。目前流行的数据库有Oracle、MySQL、PostgreSQL、MongoDB、Redis、SQLite、NoSQL等，按其特点分为关系型数据库（Relation）、键-值型数据库（Key-Value）、文档数据库（document）、时序数据库（Time series）、图数据库（Graphic）。

Django网络框架中默认配置的数据库类型为sqlite3，在setting.py中已自动完成配置，如下图5所示。

图5 Django网络框架settings.py文件中自动配置数据库脚本

采用sqlite3作为网络课程数据库时，具有不需额外再执行启动数据库服务器、配置成本低等优点。但在数据量大的情况下，存在写入速度慢的缺点，此时可选用关系型开源数据库MySQL[8]，Django也能友好的支持MySQL。Django提供一系列对数据库内容进行增、删、查、改函数。完成数据库配置后，在项目manage.py文件所在目录下，连续执行python manage.py makemigrations和Python manage.py migrate命令完成数据库的迁移。

（2）站点管理员页面。配置完数据库后，输入python manage.py createsuperuser命令创建站点管理员账号，创建过程需输入登陆后端所需用户名、邮箱、密码信息。在浏览器地址栏中输入http://127.0.0.1:8000/admin/，键入用户名与密码后登录后端管理页面（如图6所示，在settings.py文件中修改LANGUAGE_CODE=‘enus’为LANGUAGE_CODE=‘zh-Hans’可对界面进行汉化），通过可视化UI界面操作如点击添加按钮可直观增加学生信息数据，并存入数据库。在admin.py中根据课程特色编写代码对后端页面进行扩充，还可在models.py中编写代码实现批量导入Excel或word中的内容到数据库。就后端操控页面开发简洁程度来说，Django是最为方便的网络框架之一。

图6 Django后台管理界面

（3）服务器或虚拟主机。服务器根据用途可分为运算型与数据型两大类。运算型服务器，又可称之为工作站，主要用于高性能的科学计算如大型的线性方程组求解，以及基于GPU的机器学习训练等对数据处理速度要求高的场景，对CPU与显卡配置参数要求高。

数据型服务器主要用途是存储数据，特点是硬盘空间大，网络通道多，且能快速通过互联网访问。

网络课程建设需存储大量网络课程所需展示的资源，如PPT，视频/动画/录像，word文档等，通常具有存储数据量大，访问数多的特点，宜选择数据型服务器。服务器即可通过租用方式获取，如租用阿里云、腾讯云、百度云、华为服务器等。租用的服务器通过“远程桌面”的方式访问，可形象的称之为虚拟主机。也可采用教师所在单位的个人台式电脑或笔记本电脑作为服务器，此时服务器在本地。云服务器与本地服务器的优缺点分析如表2所列。

表2 云服务器与本地服务器优劣对比

若选择租用云服务器方式，一般由运营商一并提供公网IP和域名；租用云服务器时，费用与所需硬盘容量的相关，故选用服务器时应先预估分析网络课程所用数据资源的大小，即硬盘空间。尚需综合考虑流量与网速因素，如带宽等影响网页响应速度的参数。此外，对于保密性要求较高的数据，尚需明确云服务器是在国内还是国外。

在网络课程建设初期，用于调研用途或项目启动经费有限时，可采用本地电脑自行搭建服务器。若采用自己电脑作为服务器，可采用Nginx等工具完成服务器部署。

将编写完成的网站代码发布到外网，在具备域名的前提下，仍需将域名与本地服务器上网站代码建立对应关系。采用云服务器商提供域名与服务器，可在供应商的指导下完成。而对本地服务器的情况，win7以上系统可通过自带的IIS实现将本地电脑变成网络服务器。但设置过程涉及启用或关闭Windows功能、入站规则、协议和端口等操作。相对Nginx、Tomcat、Apache、NodeJS等配置工具而言，要复杂并且容易出错。对于非计算机专业的教师而言，选择Nginx完成服务器端配置更为合适。

Nginx是一款开源的轻量级服务器代理工具，性能稳定，并发能力强、响应速度快[9]。搭建Nginx环境，在其官方主页下载安装压缩包。解压后双击”nginx.exe”即可启动nginx服务器。启动服务器后在浏览器地址栏中输入“localhost:80”进行访问，若弹出如图7中所示界面，说明Nginx环境安装成功。

图7 Nginx启动成功页面显示内容

在配置nginx.conf文件中，将server配置参数端口（listen）指定值为8080、8081等非常规值，可避免因常规端口已被占用，导致启动失败。

将网络课程的主页文件index.html与依赖的css与js文件夹一并拷贝到Nginx安装包里的html目录中。此时，在服务器浏览器的地址栏输入“localhost:8080”，将打开编写的网络课程的主页，此时网页只能在本地访问，还需域名与公网IP才能实现外网访问。

五 外网发布

（1）网络域名。域名是一组用点分隔的字符串组成的名字。要实现网络课程能外网访问，域名是必须要存在的，如同人需要有自己的名字，且域名在全网范围内都不允许重复，如百度的域名为“http://www.baidu.com”。域名除了以.com结尾以外，还有.net、.org、.cn等形式。可根据课程的名称自行取定域名，在域名购买网上购买与查重。不同结尾形式的域名，其价格也不同，且有长期和按年购买等多种购买方式。在网络课程开发初始阶段，可采用花生壳提供的小带宽免费域名，但需额外支付少量运维费用。

（2）IP地址。大部分非计算机专业教师所理解的IP地址是电脑在局域网内的地址。通过cmd命令ipconfig查询到的iv4地址，为电脑在局域网内的IP地址。若需将自建网络课程部署成外网可见，仅有局域网内的IP地址是不够的，需要有公网IP地址。

公网IP地址是电脑上网络课程服务器在万维网上的通讯地址，在全球范围内是唯一的。在某种意义上讲，与网络域名是等同的，IP地址由一组用点分割的数字组成，不容易记忆，故通常在浏览器中输入域名进行访问。

电脑的内网IP地址通常以192.168.x.x形式，可以重复。如同某个街道上房间的门牌号，不同的街道可有相同的门牌号。但电脑的外网IP，如同xx省xx市xx街道是不能重复的。互联网上的电脑通过公网IP进行通讯，全球个人电脑数量巨大，并不是每台电脑都有公网IP，公网IP较少，甚至一所学校只有一个到几个公网IP。

如能申请到公网IP，将域名解析到公网IP即可实现外网访问。

（3）内网穿透。如果不能申请到公网IP，可通过NAT内网穿透等技术，将本地的电脑映射成外网可以访问。可采用花生壳软件实现内网穿透，在花生壳官网上下载与电脑操作系统匹配的客户端安装源程序包并完成安装。在内网穿透设置页面中添加映射，应用名称可指定为网络课程名称，外网域名输入购买或者赠送的域名，外网端口选择动态端口，内网主机指定为127.0.0.1（部分文献资料建议指定为本机ipv4地址，经实验失败），内网端口指定为8080，此端口必须与前文中Nginx配置的端口保持一致，如图8所示。

图8 花生壳添加映射页面

上述配置完成之后，花生壳自动完成域名解析，并生成访问地址，在外网环境下，从浏览器中输入访问地址，即可打开网络课程首页。

六 结语

本文较系统的阐述一成套搭建可从外网访问的线上课程教学平台的技术方案。整个平台的搭建方案，对计算机专业知识相对依赖较少，极大程度上的利用现有成果（含开源程序等），成本相对低廉，开发进度较快。本文作者均为非计算机专业从教人员，深刻的理解框架系统设计的难处，对开发过程中可能遇到的痛点与知识盲区比较清楚，在关键点上的讲解更容易让人理解，但在计算机线上课程开发技术的认识广度与深度上有待继续的提升与加强。当前互联网技术发展迅猛，涌现出一批低代码网络框架，如阿里宜搭、腾讯微搭和百度智能建站等技术，应随时跟进此类前沿技术，将其应用于网络课程的建设。