摘要：当前社会，随着计算机的高速发展和普及应用，互联网世界每分每秒都在产生数以万计的数据信息。在此背景下，基于JavaScript的数据驱动IU编程方式的框架，如Vue极大地提升了性能，稳定的单向数据流又提升了可维护性，出色的性能和天然的跨平台性使其在Web应用上有更多的想象空间。

而且，数码产品缺少交流平台，消费者选购产品具有很大的局限性，数码产品爱好者无法进行更好地沟通，而数码产品兴趣社区网站的设计与实现就是为了解决这一系列的问题。本次毕业设计以类似单页应用的形式，实现了系统的商品资讯展示功能、闲置交易信息模块、闲置信息发布模块、最新图片鉴赏模块、浏览测评视频等功能。采用了基于Vue.js的Vue2 + Vuex + Vue-Router + Webpack + ES6/7 + Fetch + Sass + Flex 技术栈，后端采用了Express,数据库使用Mongodb，以为达到建站模式的更高性能。

在研究了一些技术文献后，还采用了UI模式实现开发，由MVVM的数据进行驱动。具有存储信得过、操纵方便、效率高等优点。本网站需要严谨的逻辑，复杂的页面交互，本人想通过毕业设计这一宝贵机会实现对此项目的尝试。建议使用 Node 6 稳定版。

关键词：Web单页应用,；Vue；JavaScript；数码产品

目录

摘要

Abstract

1概述-1

1.1选择背景-1

1.2选题来源-1

1.3选题意义-2

1.4互联网发展动态-2

1.5设计思路-3

2方案论证-4

2.1技术可行性-4

2.2经济可行性分析-4

2.3操作可行性分析-5

2.4法律可行性分析-5

2.5方案选择-5

2.5.1所使用的语言-5

2.5.2所涉及的开发模式前端工程化-6

2.5.3模块/组件化开发的必要性-6

2.5.4静态资源构建策略-8

2.5.5所使用的工具-9

2.6高速发展的web中安全性的考虑-9

3需求分析-10

3.1问题分析-10

3.2需求描述-10

3.3准确性和及时性-10

3.4易维护性-10

3.5系统数据流图-11

3.6系统E-R图-12

4系统概要设计-13

4.1系统功能设计-13

4.2概要模块设计-13

4.3系统业务流程设计-13

4.4系统体系结构设计-14

5系统详细设计与实现-16

5.1商品资讯展示功能-16

5.2  购物车组件-18

5.3  闲置交易模块-20

5.4  闲置发布模块-22

6软件测试与结果分析-24

6.1测试概述-24

6.2系统测试内容-24

6.3系统测试案例-26

参考文献-29

总结-30

致谢-31