基于前后端分离的通信原理课程网站开发_李永军.pdf

基于前后端分离的通信原理课程网站开发1211 1李永军 王明辉 李 耀 李孟军 李 博摘 要：高校课程通常使用ASP、PHP等技术建站，这些技术主要通过从数据库读取的数据填充HTML模版，前后端代码耦合性强、职责交叉模糊，前端在开发过程中严重依赖后端，难以分离，同时整个版面内容复杂。因此，提出了前后端分离的通信原理课程动态网站设计开发模式，网站前端以React技术为基础，分别采用Next.js框架和Ant Design Pro框架设计前后台，而网站后端则基于Node.js平台的Koa框架进行布局，并且将Nginx作为HTTP服务器和反向代理服务器，采用PM2工具在真实的云服务器上实现整个项目的快速自动化部署。该网站开发模式有效地提高了课程网站的安全性、稳定性和可维护性，同时具有良好的师生体验。（1.河南大学物理与电子学院，河南 开封 475004；2.河南大学民生学院,河南 开封 475004）关键词：网站设计；React；Node.js；前后端分离中图分类号：TP393.092 文献标识码：A 文章编号：1008-6009（2022）11-0010-061 引言课程网站作为课程建设评价窗口和示范载体，可以将教学资源整合到线上，为学生的自主学习与师生交流2 提供优质服务。通过网站可以将教学大纲、教学目标、教学方法等以文字、图片、下载资料等方式呈现给学生，且不受时间和空间的限制，方便学生获取学习资源，提高学习成效。网站提供的发布通知、留言功能可以方便老师和学生交流，拉近师生距离，通过留言也可以得知网站存在的一些问题，了解学生的需求并改进，让学生有更好的体验，还可以结合课程本身的特点调整设计结构，不断更新和完善网站内容。因此，通信原理课程网站建设对高校提高通信原理教学质量、深化教学改革、推进教育教学创新具有重要的作用。高校课程网站建设通常使用ASP、JSP、PHP等技术，这些技术数据库操作逻辑、后端代码以及前端代码难以分离，前端在开发过程中严重依赖后端，代码耦合性比较强，职责交叉模糊。因此，本文采用前后端分离和模块化设计的模式开发通信原理课程动态网站，网站前端使用React技术框架构建，前台网站和后台网站分别采用Next.js框架和Ant Design Pro框架搭建，而网站的后端则采用基于Node.js平台的Koa框架开发，设置负责文件存储的Web服务器以及与数据库交互的API服务器，并且使用Nginx作为HTTP和反向代理服务器，采用PM2工具在真实的云服务器上实现整个项目的快速自动化部署。API服务器负责提供数据接口，前端通过Ajax技术请求接口获取数据，让前端操作数据具有主动性和灵活性，可以让页面在不刷新的情况下也能更新内通信原理是现代通信系统的理论基础课程，是通信工程、电子信息类专业的重要专业基础课。它内容丰富、概念抽象、原理复杂、理论性和系统性强，仅依赖课堂教学，学生很难全面掌握必需的知识体系。为了提高通信原理课程的教学质量，改进教学效果，为通信电子类专业的后续课程学习打好坚实的理论基础，同时培养和提高学生分析和解决实际通信问题的能力，适应现代通信科学技术发展的要求，需要给学生提供丰富的教学资源，促进学生自主学习。而通信原理课程网站以其丰富的学习资料共享性、良好的师生互动性和教学时空维度的拓展性，得到越来越多师生们的认可。同时，课程网站建设也是通信原理课程建设特别是“金课”课程1建设的重要组成部分。作者简介：李永军（1977），男，河南开封人，博士，副教授，研究方向为人工智能。基金项目：国家自然科学基金联合基金项目，项目编号：U1704130；河南省科技攻关项目，项目编号：212102210151；开封市科技攻关项目，项目编号：2101006；2021年河南大学校级高等教育教学改革研究与实践项目，项目编号：HDXJJG2021-083。电脑与电信电脑与电信Next.js是React官方开发和维护的一个React 5SSR框架，它的底层使用webpack启动和打包项目。本地使用npx create-next-app project_name 命令即可创建出一个名为“project_name”的Next.js项目，执行npm run dev命令就启动本地开发环境。2 网站整体设计方案项目前端开发采用依托React基础UI库的Next.js框架，该框架可以将React代码在Node.js平台运行，最终输出HTML代码发送到前端。而后台网站采用集状态管理、UI组件、icon图标等于一身的Ant Design Pro框架，可以快速搭建后台管理页面。由于React组件不易于控制复杂的业务逻辑，这里后台管理网站选择了Redux状态管理工具，使用它把组件的业务逻辑和数据模型进行分离，降低4组件间业务的耦合度，有效控制数据通信和逻辑调用。为了探索与课程教学相辅相成的课程网站建设，在线提供具有通信原理特色的教学资源，构架安全、易于交流的教学互动体系，促进现代信息技术与通信原理课程内容的融合，培养学生自学能力、提高通信原理教学水平，同时考虑到网站的开发效率和整体结构逻辑性，以及网站功能需求的可更替性和网站后期的可维护性，这里采用前后端分离的动态网站模式。后端只需要为前端每一个页面的功能提供接口，前端页面使用Ajax技术访问接口与数据库进行交互，前后端分工明确。在前端页面渲染时，后端只提供需要渲染页面数据；后端页面渲染时，页面由后端从数据库中获取数据直接填充HTML模版，而前端只是简单地接收渲染好的HTML文档，这里渲染指的是将数据转换成浏览器可识别的3HTML文本。容，这极大地增强了用户体验。该网站开发模式有效提高了开发效率和代码编写质量，缩短了开发周期，模块化设计便于网站后期维护。具体的通信原理课程网站设计框架如图1所示，主要包括前台网站、后台管理网站、API服务器和文件服务器四个部分。API服务器是整个网站的核心，它与前端（包括前台网站前端和后台网站前端）文件服务器以及数据库交互。当前端发起网络请求时，API服务器操作数据库，将结果发送给前端。后台上传文件时，文件信息通过API服务器保存到数据库中。前台网站和后台网站主要通过Ajax请求API服务器获取数据，然后渲染页面。后台网站把文件上传到文件服务器时，文件服务器的接口获取一个Token，只有该Token有效才接收文件，这主要是确保只有后台网站才有权限上传文件。Token是一个字符串，保存在API服务器和文件服务器当中，当用户登录后，API服务器给后台网站前端发送Token数据，文件服务器接收到请求时做校验。3 基于Next.js的前台网站设计3.1 Next.js框架Next.js框架采用“文件路径即路由路径”的方式构建程序，在项目中pages文件夹对应页面级组件，index.js对应网站根页面，在pages里面新建文件夹或文件，映射成网站的路径。public目录对应着网站的静态文件路径，存放图片、字体、图标等文件。在Next.js框架中，入口文件默认被隐藏，如果要修改入口文件，可以在pages目录下新建一个_app.js文件，为自定义的入口文件，如表1所示。MyApp组件是自定义的入口组件，它的props中包含Component和pageProps属性，分别代表页面级组件和页面组件的props，在MyApp组件内部还使用了NavCommon和Footer两个组件，当浏览器渲染某个页面时，除了渲染路由对应的页面级组件，还额外渲染出NavCommon和Footer这两个组件。3.2 前台网站页面设计前台网站的页面布局主要分成三部分：顶部LOGO、菜单和日期；中间部分内容区域；底部网站信息区域。点击顶部的某个菜单后，菜单对应的内容区域被展示出来。除了“首页”和“留言”菜单外，其他的菜单对应的内容展示形式基本相同。“首页”内容区域由几个卡片组成，当点击卡片中的内容时会跳转到对应的页面，卡片的标题对应顶部的某个菜单项。卡片中的数据都是从数据库中获取，后端实现了一个接口，可以从数据库图1 通信原理课程网站整体设计框架请求数据发起请求API服务器响应数据响应数据前台网站后台网站返回数据返回文件信息文件服务器获取文件上传文件表1 React自定义入口文件import React from react;import Footer from./components/common/Footer;import NavCommon from./components/common/NavCommon;function MyApp(Component,pageProps)return();export default MyApp;1011DOI:10.15966/ki.dnydx.2022.11.019基于前后端分离的通信原理课程网站开发1211 1李永军 王明辉 李 耀 李孟军 李 博摘 要：高校课程通常使用ASP、PHP等技术建站，这些技术主要通过从数据库读取的数据填充HTML模版，前后端代码耦合性强、职责交叉模糊，前端在开发过程中严重依赖后端，难以分离，同时整个版面内容复杂。因此，提出了前后端分离的通信原理课程动态网站设计开发模式，网站前端以React技术为基础，分别采用Next.js框架和Ant Design Pro框架设计前后台，而网站后端则基于Node.js平台的Koa框架进行布局，并且将Nginx作为HTTP服务器和反向代理服务器，采用PM2工具在真实的云服务器上实现整个项目的快速自动化部署。该网站开发模式有效地提高了课程网站的安全性、稳定性和可维护性，同时具有良好的师生体验。（1.河南大学物理与电子学院，河南 开封 475004；2.河南大学民生学院,河南 开封 475004）关键词：网站设计；React；Node.js；前后端分离中图分类号：TP393.092 文献标识码：A 文章编号：1008-6009（2022）11-0010-061 引言课程网站作为课程建设评价窗口和示范载体，可以将教学资源整合到线上，为学生的自主学习与师生交流2 提供优质服务。通过网站可以将教学大纲、教学目标、教学方法等以文字、图片、下载资料等方式呈现给学生，且不受时间和空间的限制，方便学生获取学习资源，提高学习成效。网站提供的发布通知、留言功能可以方便老师和学生交流，拉近师生距离，通过留言也可以得知网站存在的一些问题，了解学生的需求并改进，让学生有更好的体验，还可以结合课程本身的特点调整设计结构，不断更新和完善网站内容。因此，通信原理课程网站建设对高校提高通信原理教学质量、深化教学改革、推进教育教学创新具有重要的作用。高校课程网站建设通常使用ASP、JSP、PHP等技术，这些技术数据库操作逻辑、后端代码以及前端代码难以分离，前端在开发过程中严重依赖后端，代码耦合性比较强，职责交叉模糊。因此，本文采用前后端分离和模块化设计的模式开发通信原理课程动态网站，网站前端使用React技术框架构建，前台网站和后台网站分别采用Next.js框架和Ant Design Pro框架搭建，而网站的后端则采用基于Node.js平台的Koa框架开发，设置负责文件存储的Web服务器以及与数据库交互的API服务器，并且使用Nginx作为HTTP和反向代理服务器，采用PM2工具在真实的云服务器上实现整个项目的快速自动化部署。API服务器负责提供数据接口，前端通过Ajax技术请求接口获取数据，让前端操作数据具有主动性和灵活性，可以让页面在不刷新的情况下也能更新内通信原理是现代通信系统的理论基础课程，是通信工程、电子信息类专业的重要专业基础课。它内容丰富、概念抽象、原理复杂、理论性和系统性强，仅依赖课堂教学，学生很难全面掌握必需的知识体系。为了提高通信原理课程的教学质量，改进教学效果，为通信电子类专业的后续课程学习打好坚实的理论基础，同时培养和提高学生分析和解决实际通信问题的能力，适应现代通信科学技术发展的要求，需要给学生提供丰富的教学资源，促进学生自主学习。而通信原理课程网站以其丰富的学习资料共享性、良好的师生互动性和教学时空维度