2020年第1期121
网络与通信
信息技术与信息化
Vue.js 与Django 组合框架的网络社交系统
单页面架构方案设计
王  伊*  王韶红  刘晋泽 吕佳宪
WANG Yi  WANG Shao-hong  LIU Jin-ze  LV Jia-xian
摘　要              针对近年来网络社交的迅速发展和兴起，以及广大网民对各种功能的网络社交系统需求激增，本文研究
了基于 Vue.js 前端框架和 Django 后端框架结合的前后端分离架构的网络社交系统的设计方案。该方案采用SPA （Single Page Web Application ，单页面应用）设计，方案满足网络社交系统的基本应用需求，同时具有较好的数据安全性，具备方案通用化的应用价值。
关键词                  网络社交平台；架构方案；SPA ；Vue.js ；Django
doi：10.3969/j.issn.1672-9528.2020.01.039
* 国防科技大学 湖南长沙 410073
0  引言
随着计算机技术和网络社交的发展，以互联网为媒介的社交方式已经成为人们日常生活中不可或缺的成分。网络社交的多元化和高自由度的特点使得网民对网络社交的依赖与日俱增，同时网民对于网络社交系统的功能也提出了更多的需求。文字聊天、音频交流以及视频互动等方式作为网络社交的主要手段，对任何一个网络社交系统来说都是需要具备的基本功能。要实现这些功能的基础就是构建用户终端到服务器的连接，主流的模式有B/S 模式（Browser/Server，浏览器/服务器）和C/S 模式（Client/Server，客户端/
服务器）[1]，我们选择使用B/S 模式的前后端分离的架构进行方案的设计，同时采用SPA 的开发思想，来获得更快、更流畅的使用体验。1  网络社交平台需求分析1.1  系统功能需求
网络社交系统的设计需要分成两部分：前端页面展示和后端数据处理。前端页面展示主要包含用户注册/登录，用户信息展示，好友列表，组列表，聊天界面以及一些特功能比如动态圈，视频互动等等。后端数据处理主要执行与前端进行数据交互以及数据库管理的任务，数据交互主要包含用户身份信息验证，用户好友/组列表传递，消息传递等功能，功能需求的整体结构和功能之间的关系见图1。
从整体来看，网络社交系统必须保证前后端能稳定连接，后端数据处理可靠高效，前端页面功能使用流畅便利。
图1  网络社交平台功能需求结构图
1.2 系统功能分析
根据网络社交系统的基本需求以及功能之间的关系，用户通过前端页面的具体功能与后台进行数据交互，方式是通过对应的API（Application Programming Interface，应用程序接口）向后台发送请求，后台接收到请求后根据功能的实际需要返回相应的数据供前端使用。好用的前端框架
为了适应SPA 的开发思想，发送请求的方式选择Ajax （Asynchronous Javascript And XML，异步 JavaScript 和 XML）进行请求的发送和异步的数据传输，避免了数据更新导致整个页面的刷新[2]。如聊天功能需要持续、双向的数据传输时，采用WebSocket 全双工通信协议进行数据的双向传递。
同时MVVM（Model-View-ViewModel，即模型-视图-视图模型）[3]应用于前端页面的设计可以加快视图的更新速度，保证数据更新和页面更新的快速响应。2  系统架构方案设计
架构方案采用前后端分离的模式，前端使用Vue.js 框

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。