毕业论文——基于bootstrap开发的响应式网上书店前端开发制作.doc

1、全日制本科生毕业论文题 目： 基于 bootstrap 开发的响应式网上书店前端开发制作 学 院： 计算机与信息科学学院 专业年级： 计算机科学与技术（师范） 学生姓名： 学号： XXXXXXXXXXX 指导教师： 职称： 年 月 日 第 1 页 （共 13 页）基于 bootstrap 开发的响应式网上书店前端开发制作摘 要：本论文详细描述的是一个基于 bootstrap 的响应式网上书店前端网页的设计与实现过程。网站的设计与制作主要使用 bootstrap、html、css+div、JavaScript、jQuery 等围绕网站的响应式制作进行。前台网页一共包含五个版块，首页、CSS 类书

2、籍、JavaScript类书籍、jQuery 类书籍、PHP 类书籍等。经测试，制作出的响应式网页可以兼容各大主流浏览器，还能够识别不同设备的尺寸从而展现优质的浏览效果。关键词：bootstrap；html；css+div；JavaScript；响应式Abstract：A detailed description of this paper is based on the bootstrap responsive front-end web page design and implementation process of online bookstore. Website design an

3、d production of mainly use the bootstrap, HTML, CSS + div, JavaScript, jQuery and other surrounding the site response type production. At the front desk page that includes five sections, the home page, CSS class books, books on JavaScript, jQuery, PHP, books books, etc. After the test, make a respon

4、sive page can be compatible with each big mainstream browsers, also able to identify the size of the different equipment and high-quality viewing effect.Key words：bootstrap；html ；css+div；JavaScript；responsive随着无线网络的飞速发展以及人们生活水平的普遍提高,人们对移动终端设备的需求已经逐渐超越桌面端,即越来越多用户上网的方式已经从传统桌面端逐渐转移到了移动设备，响应式布局是移动互联网蓬勃发

5、展的技术产物,在移动互联网快速发展的今天，它占据了网页前端开发领域的核心地位 1。如何设计开发一款能够自适应不同尺寸的移动设备的网站,为用户提供优质的浏览服务具有重大的意义。以 Web 前端书籍书店的网站为例，根据用户使用设备尺寸的大小调整页面的布局，这就使得不同设备浏览页面的效果会更加流畅 2。响应式布局可以提供优质的用户体验，成为互联网今后发展的主流趋势之一 3。第 2 页 （共 13 页）1 bootstrap1.1 简介Bootstrap，源于 Twitter，是目前最受市场欢迎的前端框架之一 4。它由Twitter 的设计师 Jacob Thornton 和 Mark Otto 合作

6、开发，它是基于CSS、HTML、JAVASCRIPT 的，使得 web 开发更快捷。Bootstrap 提供了优雅的 CSS和 HTML 规范，它即是由动态 CSS 语言 less 写成 5。1.2 Bootstrap 的特点Bootstrap 是基于 CSS3、HTML5 开发的，它在 jQuery 的基础上进行了完善，使其更为个性化和人性化，形成一套特有的网站风格，并且能兼容大部分 jQuery插件。1.3 为什么选择 Bootstrap 作为前端开发框架Bootstrap 是基于 CSS3、HTML5 开发的，内置了很多具有独特风格的样式。Bootstrap 包含了很多 Web 组件，根

7、据这些组件，开发人员可以快速地制作一个漂亮、功能齐全的网站。Twitter 网站上许多图标在 Bootstrap 中用简单的一句代码就可以使用到你的网站项目中了，更为关键的是 Bootstrap 支持响应式布局，即开发的网站项目可以有效适配手机、平板、PC 设备。1.4 Bootstrap 的优点（1）便利性。Bootstrap 封装了多种配色方案、页面布局等样式，开发人员可以通过调用内置强大的组件，非常简便的使用成熟的页面样式。（2）兼容性。使用 Bootstrap 前端框架开发出的页面，不仅能在移动设备上进行用户交互，同样在 PC 端也可以，同样的代码既可用 PC 端访问也可用移动端访问，

8、真正的做到了多兼容性。（3）简洁性。不用写过多的 CSS 和 HTML 代码，简单的几行代码就能实现理想的界面以及交互效果； 第 3 页 （共 13 页）（4）响应式设计。Bootstrap 框架的响应式 CSS 能根据设备尺寸的不同，自适应于 PC 端和移动端。 （5）开源。Bootstrap 是完全开源的，使得技术无界限，用户使用更方便随心 6。所以，使用 Bootstrap 前端框架来设计项目，将让前端开发更简单、快速，使不同设备浏览页面的效果会更加流畅。2 设计目的学习 Bootstrap 前端开发框架及 javascript 实现动态网页交互过程，让用户在不同的浏览设备上得到优质的网

9、页浏览体验；熟练运用制作网页的各种工具和语言，如 Adobe Dreamweaver、Adobe Photoshop、HTML5、CSS+div 等。在加强设计者对理论知识的理解的同时，又让设计者了解到了一个网站设计开发的过程，在实际应用中提高了自己的动手能力。3 需求分析现 今 社 会 ， 大 部 分 人 都 有 过 网 上 购 物 的 经 历 ， 人 们 在 购 物 网 站 可 以 很 方 便的 浏 览 商 品 、 查 询 商 品 等 ， 购 买 时 既 方 便 又 快 速 。 并 且 ， 随着移动技术的发展，越来越多的用户会使用不同的设备来浏览网页。这就使得我 们 开 发 的 网 上 书

10、店 既 要 实 现 浏 览 商 品 、 查 询 商 品 等 基 本 功 能 ， 又 要 让 人 们 在不同的浏览设备上得到优质的网页浏览体验，即使网页可以根据浏览设备尺寸的不同而自行响应，将相同的网页内容以不同的方式展现在使用不同设备的用户面前。 开发网站需要的是一般计算机硬件资源就能开发，而且用户可以通过不同的设备进行浏览。利用 Dreamweaver 作为开发平台，使用 Bootstrap 作为前端开发框架。开发这个系统所需的软件也都是开源的。这个系统可以使用 PC 端、ipad 端、iPhone6 第 4 页 （共 13 页）plus 端、iPhone6 端等进行浏览网页上的信息，用户随

11、时随地都能上网去浏览信息，对自己满意的商品可以进行购买。网站的页面简单明了、舒适大方、方便操作。4 系统用户用例图系统的参与者有：用户和管理员。顶层用例图是网站全部用户的用例图，如图 4-1。图 4-1 顶层用例图4.1 用户用例图图 4-2 用户用例图修改自己信息订单的查询购物车浏览网页信息用户W E B 前端书籍书店用户 管理员第 5 页 （共 13 页）4.2 管理员用例图图 4-3 管理员用例图5 系统业务流图（1）用户登录注册：当用户要进行购买商品时要进行登录，没有登录帐号则进行注册，登录后便可进行购物。（2）购物车：用户对自己满意的商品加入购物车，也可以对自己购物车的信息进行修改。

12、（3）订单查询：用户可以对自己买下的商品进行查询，查询是否发货等。（4）管理员登录后台：给管理员进行后台管理的一个登录界面，也阻止了其他人进入这个界面等。（5）书籍管理：管理员进行书籍的添加、修改、删除的操作。（6）订单管理：管理员对订单的确认、发货等进行操作。系统业务流图如图 5-1 所示。浏览网页信息用户管理书籍信息管理订单管理管理员管理管理员第 6 页 （共 13 页）图 5-1 系统业务流图6 系统规划在对电子商务网站进行开发之前,首先合理的应用软件工程的方法,对网站进行整体规划及布局,否则就会导致设计开发工作量大,网站系统不符合要求等,更为糟糕的是,可能还会导致整个系统根本就无法运转

13、。在确定向用户展示什么商品后，使用 Bootstrap 前端开发框架及 HTML5、javascript 等开发语言，利用Adobe Dreamweaver、Adobe Photoshop 等工具对网站进行设计开发，使网页根据浏览设备尺寸的不同而自行响应，让 用 户 在使用不同的浏览设备时都能得到优质的浏览体验。系统实现的主要功能如下。购物车用户注册生成订单登录查看订单用户表订单及订单明细表购物车暂存信息成功登录书籍书店数据库用户管理用户信息管理员信息管理管理员信息订单信息订单管理书籍信息管理书籍信息用户成功登录登录失败用户表管理员管理员表登录登录失败浏览网页信息第 7 页 （共 13 页）（

14、1）商品浏览模块：用户可查看各类产品；（2）产品信息模块：用户可以浏览产品的基本信息、价格等；（3）搜索模块：用户可以根据自己的需求，搜索自己想要购买的物品；（4）购物指南模块：包括用户可以免费注册账户、开通支付宝等；（5）购物保障模块：可为用户提供所购买的商品的发票及售后服务等；（6）支付方式模块：用户可以根据自身的条件来选择支付方式。7 系统分析 整个系统功能设计如图 7-1 所示:图 7-1 系统功能图7.1 网页功能分析网页需要实现的功能：用户使用不同的设备都能体验到优质的浏览效果 7。网页的设计与制作应该依据设备环境及用户行为的不同而进行相应的调整和响应。无论用户正在使用 PC 还是

15、移动设备，我们的页面都应该能够根据用户使用设备的不同自动切换图片尺寸及分辨率等，开发人员可以使用包括弹性网格和图片、布局、CSS media query 等方法进行实践。也就是说，页面可以根据用户Web 前端书籍书店菜单店长推荐书籍 CSS类书籍javascript类书籍jQuery类书籍PHP类书籍第 8 页 （共 13 页）设备环境的不同而自行响应 8。7.2 响应式分析响应式设计的实现主要有三步：（1）使用 meta 标签让当前视图（viewport）的宽度等于设备的宽度：media (min/max-width:*px)；（2）HTML 结构；（3）媒介查询 Media 根据条件告诉浏

16、览器如何为指定视图宽度渲染页面 9。在移动端中，以苹果公司旗下研发的智能手机系列为例，其各系列设备分辨率如下表。表 7.1 苹果各系列智能手机分辨率表设备 iPhone 分辨率iPhone5 系列 320 x 568iPhone6 系列 375 x 667iPhone6 plus 系列 414 x 736ipad 系列 768 x 1024响应式布局原理如图 7-2 所示。7.3 网站总体设计与制作7.3.1 网站的 PC 端版制作在做网页之前，我确定了做网页的五个步骤。（1）明确网站主题：网站主题就是要明确制作的网站所要包含的主要内容。（2）搜集素材：在明确了制作网站的主题以后，围绕主题开始

17、搜集需要的素材。（3）规划网站：网站规划包含网站的结构、网站的格调、栏目的设置、版面规划、色彩搭配、文字图片的应用等。第 9 页 （共 13 页）（4）选择合适的制作工具：选择一款应用起来简单但性能强大的软件往往能够起到事半功倍的成效。（5）制作网页：在制作网页时，先把网页大致的框架布局好，再逐渐小的结构设计进行完善。网站的设计可以从网站标志、色彩、字体等方面着手。网站给人的第一印象是来自视觉冲击，所以，网站给人的第一印象很重要。不同的色彩搭配能够会产生不同的视觉效果，从而有可能会影响用户的情绪，从而影响网站的宣传及用户的使用量等。即在网站的整体设计中，色彩搭配要协调，给用户一种舒适的体验。在该设计中，网站的色彩以白色、藏青色、绿色和淡红色为主，给用户一种轻松、简约的感觉。在网站的开发过程中，需要用到 HTML5、javascript 等开发语言，利用 Adobe Dreamweaver、Adobe Photoshop 等工具。