SDU信息门户（13）——学生端移动端前端

2021SC@SDUSC

目录

引言

代码分析

总结

引言

在SDU信息门户系统中学生端的操作都涉及移动端上进行操作，本篇来分析本系统中学生移动端的前端设计。在学生移动端前端主要涉及的功能包括获取答辩信息，获取某门课程所有notice，获取课程详细信息 包括插件、选课人等等。本部分使用的前端框架是Vue.js，使用的组件库则是NutUI。

代码分析

本系统移动端前端主要涉及学生的选择项目和公告信息获取等部分。接下来介绍学生端的各个部分前端界面设计。

创建课程组件设计

界面设计

创建课程组件的前端设计主要包括两个部分，分别是创建课程界面头部部分以及创建课程内容部分。其中头部部分主要涉及各个功能选项的菜单栏，可能内容部分则是各个功能选项的具体页面内容的显示。

首先使用标签来创建一个菜单栏，在标签中设置各个菜单项——每个功能选项，在最底层的div中包含的是各个具体的功能选项，包括立项申请，创建团队，实验报告，以及仓库绑定等。

而在内容部分则使用标签创建一个标签栏，使用标签来设置标签栏中的标签项这里分别设置了四个标签项，分别是题目，公告，答辩以及成绩，分别对应相应的功能界面。在内容部分还有一个显示老师已经创建的课程的列表，这里使用了vue的指令v-for来遍历course课程变量，将couse中所有的课程都展示到div上。在每个课程的末尾都有一个列表项，这个列表项的作用是让学生能够进入课程的界面以便其完成对课程的选择等具体的操作。

脚本方法

在脚本中首先绑定了子组件NavBar，这是预先设计的一个组件，用于展示移动端的各个功能，在setup方法中先初始化了route和state变量，state中有course属性，用于存放所有的课程，course是一个对象数组，里面存放的是一个个的课程对象，课程对象中存储三个属性，分别是课程的名称，课程编号以及选课的人数。此外还创建了变量notices，projects和currentIndex，用于课程的显示。最后将课程的状态返回。

项目信息组件

界面设计

展示项目信息的界面设计包括两个部分，分别是项目的介绍概述部分，申请提示信息部分。

项目介绍概括部分包括项目的题目，指导老师，项目的概述这些信息的显示，使用的是标题标签

等来显示，以便学生能够清楚地看到该项目相关的信息。

提交申请部分主要涉及提交申请的按钮的设计和已提交的提示信息的展示。具体的，使用来创建一个申请的按钮，这里有一个v-if判断的语句来判断该学生是否已经进行组队，如果没有进行组队则可以申请选择这个项目，否则就不被允许，这是就需要显示“已绑定团队”，并显示绑定的团队的名称的提示语句告知学生不能重复进行选择项目。最后还有一个添加项目成员的功能按钮。

脚本方法

在脚本中首先绑定了子组件NavBar，在setup方法中初始化了state对象变量，其中包含了topicInfo项目信息的对象变量，该变量中存储了该项目相关的信息，包括项目的名称title，项目的简单介绍desc，项目指导教师姓名teachername，以及选择该项目的团队信息，包括团队名称，队长和团餐成员，最后将state变量返回。

>

公告信息组件

界面设计

公告信息发布涉及公告的标题noticeInfo.title,公告的发送时间noticeInfo.sendTime,公告发送的教师信息noticeInfo.sendTeacher以及公告的内容noticeInfo.content.html的发布。

脚本方法

脚本中绑定了子组件NavBar，用以显示系统功能。在setup方法中同样创建了state变量，用于存储公告的信息，在noticeInfo对象中存储了公告编号id，公告题目title，公告发送时间sendTime，公告发送的老师sendTeacher和公告的内容content，这些信息都会在界面上的显示。最后将state对象返回。

>

总结

以上的这些组件组成了SDU信息门户系统学生移动端的整体框架，主要涉及学生查看项目信息，选择申请加入项目功能，学生查看公告信息，选择老师所创建课程等功能。这些前端界面的设计所使用的技术框架都是Vue.js,其所使用的组件库是NutUI，一个移动端的UI库。至此，本项目我所分析的部分都已经分析完成了，主要包括SDU信息门户教务系统的各部分代码的分析，以及鉴权系统的前端和学生移动端的前端代码分析。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！