设计制作
数码世界 P.94基于Vue的Share网站设计与实现冯梦雨 黄媛媛 刘雨嘉  四川大学锦城学院 计算机与软件学院
摘要：本文基于前端框架Vue开发了一个分享类网站，该网站主要分为旅游，美食，音乐，电影四大模块进行设计。在本网站中，用户可汲取大量的娱乐活动以及艺术鉴赏信息，作为参考，从而充实丰富自己的生活。用户可以通过登录注册后发表各类原创文章，同时也可以查看他人发表的不同类别文章并对其内容点赞，评论等进行功能交互。因此，Share以“记录生活，分享生活”的理念而生，基于VUE 框架技术，意图为大家展示一个轻型生活分享信息类类网站。
关键词：前端  网站开发  VUE  Ajax  MongoDB
引言
由于现代互联网科技的发展，如今人们的生活娱乐信息大都来自于网络信息传递，因此，本网站在一定程度上使得当代热爱生活的年轻人可以及时的了解当下娱乐信息走向，全面的旅游攻略，各类美食，多元化的电影评论等。同时，也可分享和记录自己的喜闻乐见。本文即通过关键技术选型介绍，可行性分析，需求分析，功能模块的设计，大概介绍本网站的开发流程。
1 关键技术选型介绍
本次开发采用前后端分离的方法建设网站，关键技术选型如下：Vue.js是一套渐进式的JavaScript框架，它只关注图层，采用自底向上的增量开发设计，目标是通过尽可能简单的API实现响应数据绑定和组合的视图组件，采用MVVM模式，开发也比较简易，熟练掌握的要求不高。因此，将它作为本次网站开发的框架。
Element是基于vue框架下的组件库，是由饿了么团队开发，组件库中组件种类多，实用性强，并且参照了Bootstrap的响应式设计，增强了网页的自适应性。在此次开发设计中，网页格局分布，主页的导航，登录注册表单，不同意义的按钮等大都是参考element组件库，省去了自己编写的时间，节约了开发成本，也规范了代码书写。
Ajax,（异步Javasctipt和XML）创建交互式网页应用，通过在后台与服务器进行少量数据交换，实现异步更新，完成页面的局部刷新，来提高响应效率，还可以改变页面的表现和交互方式，为用户提供更人性，更优秀的服务。对提高信息传输和交换疏导等方面的速度有十分重要的作用。
2 可行性分析
2.1技术可行性
Vue.js综合了React.JS和Angular.JS优点，摒弃了他们的缺点。开源，维护性高，轻量，可以说是目前Web应用程序开发的最佳框架之一，有多种脚手架可供选择使用，适用于小型网站开发，更是小型网站开发的首选。
Element,Vue框架下的脚手架，开源使用，布局多样，类别涵盖范围广，满足本网站开发对各类组件的需求。
Ajax，适用于本网站交互式网页的使用。
MongoDB对海量数据处理方面有着极其优越的性能[3]，实际操作简单，适用于本网站的后台开发。
综上，技术可行。
2.2经济可行性
针对于本次开发，普通的个人笔记本作为工具即可，使用终端测试语言，基本浏览器开发者工具就可以查看错误以及基本测试结果。因此，经济上可行。
2.3开发可行性
Vue.js基于Javascript语言，并且ElementUI, Ajax,MongoDB 实际操作简单，易上手。因此，只要精通Javascript开发语言，了解Ajax使用规则，熟悉MongoDB各语句功能，加以实践，熟练操作，就可以顺利完成开发工作。因此，开发上也可行。
3 需求分析
基于市场用户调查，网站的目标众主要为当代年轻人，他们除工作外，乐于分享生活，旅游美食，音乐电影内容等艺术鉴赏信息，对于页面设即倾向于页面简洁，可读性高的设计，我们严格依据具体调查分析结果进行设计与开发。在本次的网站的开发中，主要是PC端的开发，参考了市面上同类网站，需求主要分为用户注册，用户登录，浏览全文，发布文章，转发，点赞，评论，删除，搜索，个人信息修改等。
4 模块设计
4.1功能模块
本网站的主要分有用户注册，用户登录，发表文章，浏览全文，文章点赞，评论，收藏，个人信息的维护，文章搜索以及用户管理几大模块进行设计，意为用户提供一个操作性强，实用性高的分享信息类网站。当以游客身份浏览网站时，可以浏览全文，但并不可以对文章进行评论等交互操作，功能模块选择
性开放，部分操作受到限制。注册后，通过用户登录身份进入网站，基本功能全部开放使用，以确保用户的使用体验。
4.2功能描述
1.用户注册/登录
(1）本功能面向新注册的用户（已注册用户忽略）。
(2）用户自行在系统中点击注册进行注册（填写内容包括：用户名、密码、等）。
(3）用户进行界面的注册或登录操作，会发送消息到后台服务器，后台服务器接收到消息，操作数据库，对数据库进行添加、查询操作。
2．文章管理
(1）该功能面向已登录用户。
(2）用户可以浏览全文，发表文章，删除文章。电影网页设计代码
(3）用户可对其他文章进行点赞，评论等交互。
(4）用户对文章的操作，比如发表、删除文章等，会发送消息的后台服务器，服务器接受到消息后，再操作数据库，返回对应的信息给用户浏览器。
3.用户管理
(1）该功能面向已登录用户。
(2）内容完全由用户自我管理、设置。
(3）用户可在个人页面上传图像，修改个人信息，进行文章管理等。
(4）用户信息保存在数据库中，用户管理页面的所有操作，会发送消息到后台服务器，后台服务对数据库执行对应操作，并返回消息给用户浏览器。
5 结束语
由于目前市面此类网站繁多，因此，本网站以内容简洁，信息明确，用户操作性强的诉求进行设计与开发，致力于信息虽对等却有别于同类网站，增强竞争力。当然，本网站还有其他需要完善的地方。例如，用户与用户之间进行私信互动，会员用户的特权功能。在进一步的更新优化中，这都是需要考虑后期添加的问题，争取做出用户满意使用的分享类信息网站。
本文给出了网站基于VUE的设计与开发过程， MongDB作为后台数据库实现网站的功能。用户可以在电脑端对文章进行浏览，收藏，评论等功能，同时系统前台对所有表单，后台向前台提交的数据会自行进行的校验，字数限制以及输入格式的校验等，后台向前台提交数据，确保系统运行的稳定性，以及用户的舒适体验度。
参考文献
[1]易剑波.基于MVVM模式的WEB前端框架的研究[J].信息与电脑(理论版),2016(19):76-77+84
[2]郑幸源，洪亲，蔡坚勇，陈顺凡，柯俊敏.基于AJAX异步传输技术与Echarts3技术的动态数据绘图实现[J].软件导刊,2017,16(03):143-145 [3]张文盛，郑汉华.基于MongoDB构建高性能网站技术研究[J].吉林师范大学报(自然科学版)，2013,34(1):123-127
作者简介
第一作者：冯梦雨（1997-），女，汉，陕西省西安市，本科，四川大学锦城学院2016级本科生，研究方向：前端技术开发。
第二作者：黄媛媛（1978-），女，汉，四川省达州市，高级工程师，研究方向：互联网应用。
第三作者：刘雨嘉（1998-），女，汉，四川省什邡市，本科，四川大学锦城学院2016级本科生，研究方向：虚拟现实与游戏开发。

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