《留学信息分析与管理平台》的软件系统设计方案

前言

在上一次作业课程博客中,对工程实践项目进行了需求分析与建模，而基于上一章的需求和模型下，本次实验对《留学信息分析与管理平台》进行软件系统设计，为了对项目进行详细的分析，将采用不同的视图来描述本项目

 

1 项目概述

《留学信息分析与管理平台》主要是一个对留学信息进行收集，管理，以及分享的平台。为留学生提供详细的留学信息，并通过留学生提供的信息，为其量身定制留学方案。而对于机构用户，同样可以发布项目信息，吸引留学用户的参与。

 

在登录后，留学个人用户可以使用以下功能：

 

a)       更新自己的用户昵称，头像，密码等；

 

b)       输入自己的留学信息（本科院校，专业，GPA，以及意向地区，学费等）；

 

c)       根据自己的留学信息获取到系统的推荐院校，并且浏览院校的相关信息。；

 

d)       搜索自己感兴趣的院校或者按照条件查找相关目标院校并且浏览院校的相关信息；

 

e)       在感兴趣的院校资料里面提出问题，或者评论；

 

f)        浏览留学机构信息，并且联系感兴趣的留学机构。

 

2. 留学机构用户用例

 

在登录后，留学机构用户可以使用以下功能：

 

a）更新机构自己的机构名称、简介、账号密码、机构链接、联系方式、账号注销等。

 

b）浏览其他留学机构发布信息。

 

c）发布留学项目信息（使用系统提供的模板，包括院校名称、留学项目简介、申请背景、本科院校、GPA及语言要求、每年学费等信息）。

 

d）查看已经发布的项目，展示有咨询意向的个人用户列表。

 

e）标注项目状态，包括项目进行中、项目已结束，对于已经发布的项目进行全生命周期的管理，以及对申请用户进行管理。

2 系统设计

2.1系统架构

本项目采用BS模式，前端采用node.js,Vue.js对网页进行搭建，后端采用JAVA spring boot框架进行搭建，数据库采用mysql

在C/S和B/S这两种服务模式中，我们选择了B/S模式。B/S架构的全称为Browser/Server，即浏览器/服务器结构。Browser指的是Web浏览器，极少数事务逻辑在前端实现，但主要事务逻辑在服务器端实现。

B/S架构的系统无须特别安装，只有Web浏览器即可。其实就是我们前端现在做的一些事情，大部分的逻辑交给后台来实现，我们前端大部分是做一些数据渲染，请求等比较少的逻辑。

 

由于Vue.js特性，整个项目总体结构将采用MVC(Model-View-Controller)模式，将视图，模型，和控制器分开，将软件用户界面和业务逻辑分离以使代码可扩展性、可复用性、可维护性、灵活性加强。

 

mvc模式

 

2.2 设计模式

项目在整体架构上采用了MFC模式，那么在设计模式上也要采用与其配套的设计模式，组成MVC的三个模式分别是组合模式、策咯模式、观察者模式，MVC在软件开发中发挥的威力，最终离不开这三个模式的默契配合。

首先介绍一下组合模式。

组合模式只在视图层活动， 视图层的实现用的就是组合模式，当然，这里指的实现是底层的实现，是由编程框架厂商做的事情，用不着普通程序员插手

然而，观察者模式和策略模式就显得比较重要，是实实在在MVC中接触的到的部分

观察者模式有两部分组成，被观察的对象和观察者，观察者也被称为监听者。对应到MVC中，Model是被观察的对象，View是观察者，Model层一旦发生变化，View层即被通知更新。View层和Model层互相之间是持有引用的。 我们在开发Web MVC程序时，因为视图层的html和Model层的业务逻辑之间隔了一个http，所以不能显示的进行关联，但是他们观察者和收听者的关系却没有改变。当View通过http提交数据给服务器，服务器上的Model接受到数据执行某些操作，再通过http响应将结果回送给View，View（浏览器）接受到数据更新界面，这不正是一个接受到通知并执行更新的行为吗，是观察者模式的另一种表现形式。

 

3 接口API

本项目采用前后端分离模式，前端与后端采用ajax请求进行通讯，在api设计上，采用restful api （RESTful架构应该遵循统一接口原则，统一接口包含了一组受限的预定义的操作，不论什么样的资源，都是通过使用相同的接口进行资源的访问。接口应该使用标准的HTTP方法如GET，PUT和POST，并遵循这些方法的语义。）

下面列举几个本项目使用的接口

export function login(data) {
  return request.post({
    url: '/auth/login',
    data
  })
}

用户登录api

export function createComment(msgId, data) {
  return request.post({
    url: `/comments/${msgId}`,
    data
  })

　　用户评论api

由于request 封装了ajax请求方法，所以对于api的写法如上图。

 

4 软件架构的不同视图

4.1分解视图

分解是构建软件架构模型的关键步骤，分解视图也是描述软件架构模型的关键视图，一般分解视图呈现为较为明晰的分解结构（breakdown structure）特点。分解视图用软件模块勾划出系统结构，往往会通过不同抽象层级的软件模块形成层次化的结构。

本项目的分解视图如下：

 

 

4.2 执行视图

执行视图展示了系统运行时的时序结构特点，比如流程图、时序图等。执行视图中的每一个执行实体，一般称为组件（Component），都是不同于其他组件的执行实体。如果有相同或相似的执行实体那么就把它们合并成一个。

 而在这里采用时序图

 

4.3 依赖视图

依赖视图展现了软件模块之间的依赖关系。比如一个软件模块A调用了另一个软件模块B，那么我们说软件模块A直接依赖软件模块B。如果一个软件模块依赖另一个软件模块产生的数据，那么这两个软件模块也具有一定的依赖关系。

 

4.4 实现视图

实现视图是描述软件架构与源文件之间的映射关系。比如软件架构的静态结构以包图或设计类图的方式来描述，但是这些包和类都是在哪些目录的哪些源文件中具体实现的呢？一般我们通过目录和源文件的命名来对应软件架构中的包、类等静态结构单元，这样典型的实现视图就可以由软件项目的源文件目录树来呈现

本项目实现视图如下

 

项目整体结构

 

 

api目录定义实现所有请求的api接口

components目录定义并实现了所有vue组件。

view目录定义并实现了所有的界面

 

 

 

components目录结构

 

view目录结构

 

4.5 部署视图

部署视图是将执行实体和计算机资源建立映射关系。这里的执行实体的粒度要与所部署的计算机资源相匹配，比如以进程作为执行实体那么对应的计算机资源就是主机，这时应该描述进程对应主机所组成的网络拓扑结构，这样可以清晰地呈现进程间的网络通信和部署环境的网络结构特点。当然也可以用细粒度的执行实体对应处理器、存储器等。

本项目 部署视图如下

 

由于前期经费以及流量考虑，只为本项目购置了一台云服务器，后期可以增加，而项目是网站采用B/S模式，通过浏览器访问，因而可以在各个平台上面进行运行，当然会通过响应式布局对各个平台进行适配。

 

4.6 分配视图

工作分配视图将系统分解成可独立完成的工作任务，以便分配给各项目团队和成员，工作分配视图有利于跟踪不同项目团队和成员的工作任务的进度，也有利于各个项目团队和成员之间合理的分配和利用资源。

本项目分配视图如下

项目组成员名单	姓名	学号	项目中的分工	签  章
	谢明辉	SA20225505	主要负责后端开发与接口设计
	薛非凡	SA20225530	主要负责数据库的设计与管理
	熊航	SA20225511	主要负责前端逻辑开发与接口设计
	张雪林	SA202225602	主要负责前端网页展示的设计开发

 

5.数据库设计

　　··

属性	字段	类型
管理员ID	_id	string
管理员名称	name	string
管理员密码	password	string
管理员权限	level	string

 

 管理员表

 

 

属性	字段	类型
用户ID	_id	string
用户名	name	string
用户密码	password	string
毕业院校	school	string
学历	education	string
邮箱	email	string
电话	tel	string
GPA	gpa	string

 普通用户表

属性	字段	类型
留学机构ID	_id	string
机构名	name	string
机构密码	password	string
邮箱	email	string
电话	tel	string
网址	website	string
简介	intro	string
留学项目	program	/

机构用户表

 

属性	字段	类型
留学学校ID	_id	string
学校名称	schoolname	string
学校官网	website	string
申请通过率	passrate	string
语言成绩要求	grade	string
学费	tuition	int
评论	comments	string[]

留学学校信息表

 

属性	字段	类型
咨询ID	_id	string
用户ID	userid	string
意向国家	interested countries	string
教育阶段	education	string
意向专业	interested major	string
GPA	gpa	string
意向学费	interested tuition	int

用户咨询表(不知道为啥缩小不了) 

 

6运行环境和技术选型

运行环境能够是当前主流的浏览器上

技术选型：

开发语言：js,html,css,java

前端框架：Vue

后端框架：SpringBoot

开发工具：Intellij IDEA+Visual Studio Code

数据库：MySQL

数据库缓存：Redis

 

7 系统概念原型的核心机制

留学信息管理与分析系统是一个留学生或希望寻找留学的个人和留学机构的多边平台，留学生或者希望留学的个人可以通过本平台寻找自己感兴趣的留学信息或者搜索感兴趣的学校信息(申请条件，GPA要求，申请通过率等等)，通过输入学生相关信息获得系统的推荐院校，以及可以通过平台联系感兴趣的留学机构。同时，留学机构也可以通过该平台发布相关信息吸引留学生报名本机构

 

 

学信息管理与分析系统是一个留学生或希望寻找留学的个人和留学机构的多边平台，留学生或者希望留学的个人可以通过本平台寻找自己感兴趣的留学信息或者搜索感兴趣的学校信息(申请条件，GPA要求，申请通过率等等)，通过输入学生相关信息获得系统的推荐院校，以及可以通过平台联系感兴趣的留学机构。同时，留学机构也可以通过该平台发布相关信息吸引留学生报名本机构。