【毕业设计】基于Vue.js画作交流平台的设计与实现
⽂章⽬录
摘要
随着计算机和⽹络⾰命性地发展，越来越多的画师使⽤最新科技⼯具管理⾃⼰的画作。本毕业设计旨在借助先进的计算机、快捷的⽹络和便利的智能⼿机来帮助画师随时随地分享⾃⼰的画作。
本画作交流平台以HTML5、JavaScript、PHP、Less、Python、R、JAVA、Go作为开发语⾔。本平台前后端分离，客户端使⽤Vue.js 框架的单页⾯富应⽤，采⽤node.js作为开发平台，webpack为静态模块打包器，VUX为移动端UI组件库，Less为CSS预处理语
⾔,Cordova为移动框架。客户端包括⽤户模块、⽤户管理模块、作品列表模块、消息模块、直播模块。服务端使⽤ThinkPHP框架，搭建在京东云服务上，利⽤腾讯云提供短信服务，百度云提供图⽚审核服务和⾃然语⾔处理服务，阿⾥云提供视频直播服务和CDN加速服务，采⽤迅搜⽤于全⽂检索，使⽤Python的Flask轻量级Web应⽤框架⽤于推送订阅消息，采⽤R语⾔编写推荐画作的数据挖掘算法，使⽤SurgeMQ库来提供MQTT服务器，⽤于直播弹幕的收发。服务端包括⽤户模块、作品模块、评论模块、消息模块、直播模块。
关键词：画作交流平台; HTML5; JavaScript; Vue.js; ThinkPHP
Abstract
With the development and revolution of computer and network, the number of artists who use the last technique machine tool to manage their artwork are grow
dramatically. The aim of this graduation project is to help artists share the painting with others anytime and anywhere with advanced computer science, convince Internet and smartphone.
This artwork communication platform uses HTML5, JavaScript, PHP, Less, Python, R, JAVA, Go as the development languages. The front and back ends of the
platform are separated. The client uses the single-page rich application of the Vue.js framework, using node.js as the development platform, webpack as the
module bundler, VUX as the mobile UI component library, and Less as the CSS preprocessing language, Cordova is mobile development framework. The client
includes user module, user management module, work list module, message module and live broadc
ast module. The server uses the ThinkPHP framework to build on the Jingdong cloud server and uses Tencent Cloud to provide SMS services. Baidu Cloud provides image review services and natural language processing services. Alibaba Cloud provides live video services and CDN acceleration services, using Xun search for full-text search. The Python-based Flask lightweight web application framework is used to push subscription messages, the R-language is used to write data mining algorithms for recommended paintings, and the SurgeMQ library is used to provide an MQTT server for sending and receiving live bullet screen. The server side includes user module, work module, comment module, message module and live broadcast module.
Key words：artwork communication platform; HTML5; JavaScript; Vue.js; ThinkPHP
引⾔
⽬前，随着互联⽹的⽇益进步与⾰命性的发展，互联⽹已经成为⼈类⽣活、⼯作和学习中不可或缺的存在。它颠覆了传统的信息传播⽅式，⽆论是形式还是内容、⽆论是⽣产⽅式还是消费⽅式，都给⼈类带来了性的机遇与挑战。⼈类已经不能离开⽹络，世界已经进⼊信息化的时代。
智能⼿机的问世，⽅便了许多⼈的⽇常⽣活。智能⼿机就像⼀个个⼈电脑⼀样，具有独⽴的操作系统，可以让⽤户⾃⾏安装软件、游戏等第三⽅服务商提供的程序，通过此类程序来不断地对⼿机功能
进⾏扩充，并可以通过移动⽹络实现⽆线⽹络接⼊。智能⼿机在现代的⽣活中越来越重要。
随着2014年10⽉由W3C发布为HTML5正式推荐标准，这门语⾔逐渐⾛向规划化道路。HTML5最⼤的优势就是可以将它应⽤到多个移动端平台，实现跨平台开发，即开发⼀次，多次使⽤。因此，其良好的跨平台兼容性备受关注，并且成为了移动端平台开发技术中最重要的⼀员。
随着社交范围的扩展，画师们对作品交流的需求也⽔涨船⾼。asadw11他们已经不再满⾜于先前过时的线下实体画展。Adaqwdaw415在新的互联⽹时代，画师需要⼀个可以随时分享展⽰⾃⼰完成的绘画作品，以及收藏和下载⾃⼰喜欢绘画作品，或者分享给好友的线上平台。
mg是常量元素吗
针对这些急迫的需求，本系统是⼀款基于HTML5的跨平台线上画师作品交流系统，采⽤先进、快捷的技术，来满⾜画师等需求。画师可以随时随地地发表作品，可以查看别的画师的画作，收藏⾃⼰喜欢的作品。此外，还能参与作品评论，获取最新评论，以及回复别⼈的评论。⾯向多端平台，具有及时更新和便利性。sql中用join连接3个表
本画作交流平台以HTML5、JavaScript、PHP、Less、Python、R、JAVA、Go作为开发语⾔。本平台前后端分离，客户端为使⽤Vue.js框架的单页⾯富应⽤（SPA）。本地的开发使⽤Node.js平台，使⽤cnpm淘宝包管理代替稳定性差的npm包管理，webpack为打包器，label转换ES6语句为ES5，UglifyJs对JS压缩混淆，使⽤eslint保证JS代码质量，VUX为移动端UI组件库，Less为CSS预处理语
⾔,Cordova为移动开发框架，并把前端打包为原⽣应⽤，使⽤基于IJKplayer开发的GSYVideoPlayer作为安卓APP端的直播弹幕播放控件。客户端包括⽤户模块、⽤户管理模块、作品列表模块、消息模块、直播模块。后端使⽤ThinkPHP框架提供⾼效便捷的数据逻辑处
理，PHP-FPM作为PHP
FastCGI管理器，MySQL负责数据存储，Redis作为数据缓存数据库，Nginx (engine
x)提供HTTP和反向代理服务，Flask作为python的Web框架，提供订阅的消息投递服务。R语⾔作为数据挖掘语⾔，采⽤KNN最近邻协同推荐算法。Plumber作为R语⾔的API服务器框架。SurgeMQ为Go语⾔的库，⽤来提供⾼效的MQTT服务。直播中的弹幕采⽤MQTT消息协议收发。前后端采⽤AJAX传递JSON格式的数据。服务端搭建在京东云服务器上，利⽤腾讯云提供短信服务，百度云提供图⽚审核服务和⾃然语⾔处理服务，阿⾥云提供视频直播服务和CDN加速服务，采⽤迅搜⽤于全⽂检索，基于Python的Flask轻量级Web应⽤框架⽤于推送订阅消息，基于Plumber的R语⾔服务器框架⽤于编写推荐画作的数据挖掘算法。服务端包括⽤户模块、作品模块、评论模块、消息模块、直播模块。
本⽂接下来将详细介绍本画作交流平台的开发理论基础、系统设计与实现等。
系统开发理论基础
开发语⾔简介
HTML5
HTML全称为Hyper Text Markup
Language。它的中⽂名字是“超⽂本标记语⾔”，通俗地说就是为了“⽹页和其他可在⽹页浏览器看的信息”设计的⼀种标记语⾔。这个语⾔通过提供浏览器可以识别的标签来实现⽹页的渲染。因为⽹页的展⽰形式不仅仅有⽂本，还包括图⽚、动画等，所以称为超⽂本。
HTML5数HTML的最新修订版本，于2014年10⽉完成其标准的定制。HTML5是唯⼀的⼀个适配PC、Mac、iPhone、iPad、Android、Windows
Phone等主流平台的跨平台的计算机语⾔。⼀次开发，即可部署到不同的移动端应⽤设备。
JavaScript
JavaScript，是⼀种⾼级和解释执⾏的⾼级编程语⾔。JS是⼀门基于原型、函数先⾏的语⾔，是⼀门多范式的语⾔。JS⽀持⾯向对象编程，命令式编程，以及函数式编程。JS已经由ECMA（欧洲计算机制造商协会）通过ECMAScript实现其标准化。这个语⾔被世界上的绝⼤多数⽹站所使⽤，也同时被许多世界主流浏览器⽀持。
Less
Less是由Alexis Sellier设计⽽成的⼀种的动态层叠样式表语⾔。
Less是开源的。从语法⽅⾯来看，Less和CSS较为接近。其中⼀个合法的CSS代码段的本⾝也是⼀段合法的Less代码段。该语⾔与CSS 不同，其拥有变量、嵌套、混合、操作符、函数等编程所需抽象机制。
PHP
PHP是⼀种被⼴泛应⽤的开源脚本语⾔。适⽤于 Web
开发，并⽀持嵌⼊到HTML中去。PHP的语法利⽤了 C、Java 和
Perl，极其容易学习。该语⾔的⽬标是允许web开发⼈员快速编写并且动态⽣成的 web
页⾯。但事实上 PHP 的⽤途远不只于此。
R
R拥有则两个不同的含义，既表⽰⼀种专门⽤于数据分析建模及绘图的语⾔，⼜表⽰的是⼀个拥有者
统计分析强⼤作图功能的软件系统。R 语⾔是由新西兰奥克兰⼤学的Ross
Ihaka和Robert
Gentleman共同创造的。R软件是⼀个免费的⾃由软件，包括UNIX、Linux、MacOS和Windows等⼏个版本，可以免费下载R语⾔的安装程序、外置程序和⽂档。
Python
Python是⼀种⼴泛使⽤的⾼级编程语⾔。这门语⾔是由吉多·范罗苏姆创造。可以视之为⼀种改良版本的LISP。作为⼀种解释型语⾔，该语⾔与其他语⾔相⽐，设计哲学强调代码的可读性和简洁的语法。相⽐于其他传统的编程语⾔，Python让开发者能够⽤简洁明了的代码来表达开发者⾃⼰的想法。不管是⼩型还是⼤型程序，该语⾔都试图让程序的结构清晰明了。
Go
Go（⼜称 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson
开发的⼀种静态强类型、编译型语⾔。Go 语⾔语法与 C
相近，但功能上有：内存安全，GC（垃圾回收），结构形态及 CSP-style
并发计算。
框架简介
Vue.js
Vue.js是⼀款⽤于创建⽤户界⾯的源码开发的JS框架，也是⼀个创建简单页⾯应⽤的Web应⽤框架。其开发⽬的是为了更好地组织和简化Web开发的流程。Vue所所关注的是MVC模式的视图层，预测同时它也能⽅便地更新数据，并且通过组件内部特定的⽅法来实现视图和模型之间的交互。
ThinkPHP
ThinkPHP是⼀个免费开源、快速、简单的⾯向对象的轻量级PHP开发框架。该框架从诞⽣以来就⼀直秉承简洁实⽤的设计原则。该框架在保持卓越的性能和简约的代码的同时，也⼗分注重易⽤性。
Flask
Flask是⼀款⽤Python编写⽽成的轻量级Web框架。Flask使⽤简单的核⼼，⽤扩展的⽅式增加其他功能。
Flask尽管没有默认使⽤的数据库、窗体验证⼯具，但是该框架保留了扩增的弹性。开发者可以⽤Flask-extension加⼊这些功能。
Plumber
R编程语⾔近年来已逐渐地成为最主要的数据分析和可视化编程语⾔之⼀。与此同时Web服务已成为允许各种系统彼此交互的通⽤语⾔。plumber的R包能使⽤户将现有R语⾔代码服务提供给其他⽹络上的应⽤。
Cordova
Apache
Cordova是⼀个开源的移动开发框架。允许你⽤标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。
应⽤在每个平台的具体执⾏被封装了起来，并依靠符合标准的API绑定去访问每个设备的功能，⽐如说：传感器、数据、⽹络状态等。
系统分析
需求分析
奶块登录界面图片通过对画师的⾛访、分析以及问卷调查，要求本系统具有以下功能：
客户端的⽬标⽤户是画师，要符合画师体的使⽤风格。c语言编译器ios下载
⽤户可以使⽤账号密码登录、⼿机验证登录、注册、回密码，注销账号。
⽤户可以查看别的⽤户的⾸页和热门作品。
python基础教程电子书百度云
⽤户可以和别的⽤户私信聊天。
⽤户可以关注别的⽤户的。及时接收对⽅新作品通知。
⽤户可以修改⾃⼰的⼿机号、密码。
⽤户可以修改⾃⼰的昵称、上传头像。
⽤户可以上传画作、删除画作来管理他们⾃⼰的画作。
⽤户上传画作的时候，系统⽀持⾃动补全待输⼊的标签，转换为候选标签提供给⽤户选择。
⽤户可以收藏或者取消他们喜欢的画作。
⽤户可以及时地获取最新画作。
⽤户可以搜索画作并对搜索结果排序。
⽤户可以获取可能喜欢画作推荐。
⽤户可以查看评论、发表⾃⼰的评论。只能删除⾃⼰评论，或者⾃⼰画作下⾯的评论。
⽤户可以获取评论被删除或者被别⼈回复。
⽤户可以观看或者发布直播。
⽤户可以观看直播的时候可以查看其它⽤户发的弹幕，⾃⼰也可以参与弹幕的发送，并且能与主播的互动。
系统必须要易维护，以及操作简单，UI界⾯清晰。
jsp怎么打开文件系统务必⼀定要防⽌SQL注⼊、XSS跨域攻击、API攻击。
系统可以全天候24H运⾏、安全可靠。
客户端应该混淆源码，防⽌逆向⼯程。
保证所有最新主流浏览器都可以正常渲染显⽰。
App端需保证所有主流的安卓⼿机都能安装运⾏。
服务端系统架构设计
根据对整个服务端系统需求的详细分析，得出如下图 3‑1所⽰的服务端系统架构设计图。
图 3-1 ‑ 服务端系统架构设计图
服务端功能结构
根据对服务端需求的详细分析，得出如下图 3‑2所⽰的服务端功能结构图。

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