电器购物网站的设计与开发

摘  要：网上购物使的人们的生活更加丰富多彩，不仅便捷了人们的生活，还为人们生活水平的提高做出了贡献，也加快了各个地区的GDP增长，电器购物网站正是网上购物不可缺少的一部分。

网站开发采用了DIV+CSS开发技术，有网站首页、登录页、商品页、商品详情页等页面，界面设计以白灰色为主，极强的表现了网络化生活。网站模块多以商品图片链接以及价格作为基础设计，紧贴网站主题。布局清晰明了，符合交互要求。

关键词：DIV+CSS Adobe Photoshop 电器购物

目 录

1 引言 1

1.1 电器购物网站的开发背景 1

1.2 电器购物网站的意义与设计目的 1

1.3 电器购物网站的开发环境 1

1.4 本项目应用的主要开发工具 2

1.4.1 Microsoft SQL Server 2008 2

1.4.2 Adobe Photoshop 3

1.4.3 Sublime Text 3

1.4.4 Microsoft Visual word 2013 3

1.4.5 IE Tester 5

1.5 本项目应用的主要开发技术 5

1.5.1 java script 5

1.5.2 DIV+CSS 5

1.5.3 Vue.js 6

2 项目概述 7

2.1 项目概述 7

2.2 项目风险 7

2.3 项目进度计划 8

3 项目需求分析 9

3.1 业务分析 9

3.1.1 业务工作角色分析 9

3.2 概要设计 10

3.2.1 网站结构图 10

3.3 现行研究存在的问题及解决办法 10

4 数据库设计 12

4.1 数据库结构 12

4.2 数据库表 12

4.3 数据库表关系图 12

4.4 数据库设计命名规范 13

5 网站实现 14

5.1 网站界面设计与布局 14

5.1.1 登入界面 14

5.1.2 开场画面 14

5.1.3 首页 17

5.1.4 商品页 22

5.1.5 商品详情页 22

5.2 说明 26

5.2.1 项目文件命名规范 26

5.2.2 项目文件结构说明 26

6 测试 27

6.1 测试 27

6.2 测试例子及其结果 28

6.2.1 页面效果测试 28

6.2.2 后台添加测试 28

7 总结与展望 30

致谢 31

参考文献 32