基于Vue 的Share 网站设计与实现

冯梦雨 黄媛媛 刘雨嘉 四川大学锦城学院 计算机与软件学院

引言

由于现代互联网科技的发展，如今人们的生活娱乐信息大都来自于网络信息传递，因此，本网站在一定程度上使得当代热爱生活的年轻人可以及时的了解当下娱乐信息走向，全面的旅游攻略，各类美食，多元化的电影评论等。同时，也可分享和记录自己的喜闻乐见。本文即通过关键技术选型介绍，可行性分析，需求分析，功能模块的设计，大概介绍本网站的开发流程。

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 作为后台数据库实现网站的功能。用户可以在电脑端对文章进行浏览，收藏，评论等功能，同时系统前台对所有表单，后台向前台提交的数据会自行进行的校验，字数限制以及输入格式的校验等，后台向前台提交数据，确保系统运行的稳定性，以及用户的舒适体验度。