校园交流网站的架构设计主要分为可以3层，主要有Web层，业务层，Model层。其中web层还包括View层和Controller层，Model层包括元数据扩展层和数据访问层。
系统架构如下图所示。
MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。它强制性的把应用程序的输入、输出和处理全部分开，将其分为三个核心部分，这三个部分分别有不同的功能。
图4-1系统架构图
视图层视图是指被用户所看到的并且能够与之进行交互的界面。视图可以向用户展示相关的数据，并接收用户输入的数据，但对用户数据不进行任何实际业务操作处理。
模型层通过控制层来处理视图层传递的数据，同一个模型可以给不同的视图提供数据，也可以被不同的视图重复使用。由于 Model 的主要内容是数据、方法和行为，其也是 MVVM 中逻辑最为复杂，代码量最多的部分，其中包含了许多应用中需要用到的业务逻辑，因此模型层的开发也变得尤为重要，后期一般不会对模型层进行大规模改动，也是 MVVM最稳定的部分。控制层主要负责视图层和模型层之间的数据传输和处理请求操作。当用户通过视图发送数据和请求时，控制层可以接收请求和数据并决定调用哪些模型、通过模型的哪些操作来处理数据和请求，处理完成后，控制层再将数据返回给相应的视图。
校园交流网站总体分为前台用户模块和后台管理员模块。
两个模块表现上是分别独立存在，但是访问的数据库是一样的。每一个模块的功能都是根据先前完成的需求分析，并查阅相关资料后整理制作的。
综上所述，系统功能结构图如下图所示。
图4-2 系统功能结构图
登录模块：登录模块是进入系统的入口，所有用户必须登录后才能访问系统。登录需要输入用户名和密码，如果多次尝试登录需要输入验证码。登录时需要选择用户的角色，是一般用户还是管理员登录等。登录成功后，会通过数据库获取用户的权限，并跳转至用户的主页面。
热点资讯数据模块：可分为热点资讯数据浏览、热点资讯数据检索、热点资讯数据维护三个模块，管理员对热点资讯数据有维护的权限，发布新的热点资讯数据、更新已有的热点资讯数据等。
从前面可以分析到数据库中最重要的是用户信息、探索交流、生活创意、学习资料、热点资讯等。分析可以得到如下数据描述：
平台用户：用于记录用户的各种信息，包括姓名、性别、手机、邮箱、照片等数据项。
管理员：记录管理员的登录信息。包括用户名，密码，权限等数据项。
热点资讯内容：存放给热点资讯的内容。
学习资料：学习资料文件、资料链接、资料内容等数据项。
探索交流信息：用户进行交流信息发表等数据项。
根据前面的数据流程图，结合系统的功能模块设计，设计出符合系统的各信息实体。
系统ER图如下图所示。
图4-3 系统ER图
校园交流网站所拥有的数据表有以下：用户信息表，学习资料表，探索交流表，生活创意表，热点资讯表，私信聊天表等。
由于数据表较多，只展示系统主要数据表，如下表所示。
| 名称 | 类型 | 长度 | 不是null | 主键 | 注释 |
| resident_user_id | int | 11 | 是 | 是 | 常驻用户ID |
| full_name | varchar | 64 | 否 | 否 | 姓名 |
| gender | varchar | 64 | 否 | 否 | 性别 |
| examine_state | varchar | 16 | 是 | 否 | 审核状态 |
| recommend | int | 11 | 是 | 否 | 智能推荐 |
| user_id | int | 11 | 是 | 否 | 用户ID |
| create_time | datetime | 0 | 是 | 否 | 创建时间 |
| update_time | timestamp | 0 | 是 | 否 | 更新时间 |
| 名称 | 类型 | 长度 | 不是null | 主键 | 注释 |
| private_message_chat_id | int | 11 | 是 | 是 | 私信聊天ID |
| private_chat_title | varchar | 64 | 否 | 否 | 私聊标题 |
| general_user_information | int | 11 | 否 | 否 | 普通用户信息 |
| resident_user_information | int | 11 | 否 | 否 | 常驻用户信息 |
| private_chat_information | text | 0 | 否 | 否 | 私聊信息 |
| reply_message | text | 0 | 否 | 否 | 回复信息 |
| recommend | int | 11 | 是 | 否 | 智能推荐 |
| create_time | datetime | 0 | 是 | 否 | 创建时间 |
| update_time | timestamp | 0 | 是 | 否 | 更新时间 |
| 名称 | 类型 | 长度 | 不是null | 主键 | 注释 |
| learning_materials_id | int | 11 | 是 | 是 | 学习资料ID |
| data_name | varchar | 64 | 否 | 否 | 资料名称 |
| release_date | date | 0 | 否 | 否 | 发布日期 |
| publisher | int | 11 | 否 | 否 | 发布人 |
| cover_photo_ | varchar | 255 | 否 | 否 | 封面图片 |
| information_document | varchar | 255 | 否 | 否 | 资料文件 |
| data_link | varchar | 64 | 否 | 否 | 资料链接 |
| information_introduction | text | 0 | 否 | 否 | 资料简介 |
| hits | int | 11 | 是 | 否 | 点击数 |
| recommend | int | 11 | 是 | 否 | 智能推荐 |
| create_time | datetime | 0 | 是 | 否 | 创建时间 |
| update_time | timestamp | 0 | 是 | 否 | 更新时间 |
| 名称 | 类型 | 长度 | 不是null | 主键 | 注释 |
| creative_life_id | int | 11 | 是 | 是 | 创意生活ID |
| title_name | varchar | 64 | 否 | 否 | 标题名称 |
| release_date | date | 0 | 否 | 否 | 发布日期 |
| publisher | int | 11 | 否 | 否 | 发布人 |
| cover_photo_ | varchar | 255 | 否 | 否 | 封面图片 |
| details | longtext | 0 | 否 | 否 | 详细内容 |
| hits | int | 11 | 是 | 否 | 点击数 |
| recommend | int | 11 | 是 | 否 | 智能推荐 |
| create_time | datetime | 0 | 是 | 否 | 创建时间 |
| update_time | timestamp | 0 | 是 | 否 | 更新时间 |
| 名称 | 类型 | 长度 | 不是null | 主键 | 注释 |
| forum_id | mediumint | 8 | 是 | 是 | 论坛id |
| display | smallint | 5 | 是 | 否 | 排序 |
| user_id | mediumint | 8 | 是 | 否 | 用户ID |
| nickname | varchar | 16 | 否 | 否 | 昵称：[0,16] |
| praise_len | int | 10 | 否 | 否 | 点赞数 |
| hits | int | 10 | 是 | 否 | 访问数 |
| title | varchar | 125 | 是 | 否 | 标题 |
| keywords | varchar | 125 | 否 | 否 | 关键词 |
| description | varchar | 255 | 否 | 否 | 描述 |
| url | varchar | 255 | 否 | 否 | 来源地址 |
| tag | varchar | 255 | 否 | 否 | 标签 |
| img | text | 0 | 否 | 否 | 封面图 |
| content | longtext | 0 | 否 | 否 | 正文 |
| create_time | timestamp | 0 | 是 | 否 | 创建时间： |
| update_time | timestamp | 0 | 是 | 否 | 更新时间： |
| avatar | varchar | 255 | 否 | 否 | 发帖人头像： |
| type | varchar | 64 | 是 | 否 | 论坛分类： |