摘  要

如今，这个属于互联网的时代，互联网已经逐渐容进我们的生活当中。而对于商城来说，用户可以直观的看清商品的各类信息，对于后台系统来说却扮演者着重要的角色。本次课程设计的开发工具主要用到了Vscode软件、npm包管理器安装的包管理工具，基于Vue框架实现，以及Vue-cli脚手架、Vuex状态管理集、Vue-router路由等平台开发的一套商城后台管理系统，该系统主要用于对商品后台数据的管理，通过页面以及更改的信息，清晰地展现商品和改动的基本信息，以及对商城会员账户的发卡会员相应服务，实现对于管理层级的查询、增加、修改以及删除，通过MVVM框架，将视图 UI 设计和业务逻辑分开，以单页面的形式实现动态页面跳转不刷新网页，既节省了网络带宽资源的消耗，也加快了网站渲染速度。

 

关键词：Vscode；Vuex；Vue-cli；Vue-router；MVVM

 

目  录

摘  要 I

Abstract II

1 前言 1

1.1 研究背景 1

1.2 研究目的及意义 1

1.3 国内外研究现状 1

2 关键技术简介 3

2.1 主要开发环境 3

2.1.1 Vue框架 3

2.1.2 Vue组件集 3

2.1.3 Node.js 包管理工具 4

2.1.4 分布式版本控制系统 4

2.1.5 Wepack项目打包工具 4

2.2 主要应用技术 4

2.2.1 JavaScript、HTML、CSS等基本语言 4

2.2.2 ES6、7、8的更新语法 5

2.2.3 axios接口的调用 5

2.2.4 Vue的过渡与动画 5

3 需求分析 6

3.1 用户需求 6

3.2 功能需求 6

3.3 性能需求 8

4 系统设计 8

4.1 业务逻辑设计 8

4.2 虚拟dom数据流向设计 9

4.2.1 虚拟dom数据流向 9

4.2.2 Vuex数据流向 10

4.3 界面视图结构设计 11

4.3.1登录注册 12

4.3.1菜单管理结构 12

4.3.1上下架结构 13

4.3.1冻结解冻结构 13

4.3.1二维码结构 13

4.3.1会员卡结构 14

4.3.1订单管理结构 14

5 系统实现 15

5.1 登录注册模块 15

5.2 菜单管理模块 16

5.3 上架下架模块 17

5.4 冻结解冻模块 18

5.5 二维码模块 18

5.6 会员卡模块 19

5.7 订单管理模块 21

6 系统测试 22

结  论 23

参考文献 24

谢  辞 25