基于HTML和CSS的网上书城系统设计与实现

基于HTML和CSS的网上书城系统设计与实现摘要：当今时代，网上书城的相关技术多种多样，传统线下书店和电商平台也慢慢开发或使用了网上平台来销售图书。于是一个快捷、可靠令用户满意的平台，可以从中脱颖而出，获得更多的资源和客户。网上书城可以通过快捷的购物体验同不断完善的支付方式以及完善的购物体系下减轻了运营成本[3]并且随着互联网不断发展我国多数消费者已形成线上购物的习惯，网络消费群体仍不断扩大，相比线下传统书城可能存在的品种单一和其他问题，在线上购买风险较小，不但受到当今消费者的喜爱，所以网上书城是未来图书销售行业发展的必然。本文研究的是网上书城系统的设计与实现。使消费者能够便捷、满意、舒适地通过可靠的平台购买到自身所需的书籍。本系统需达到以下几点：（1）商品种类丰富并可被搜索；（2）网站主页面及各功能运行正常；（3）用户可通过第三方平台支付；（4）后台管理简单高效；关键词：网上书城；平台；设计

目录TOC\o"1-2"\h\u272761引言 4289962关键技术分析 5252232.1概述 5165572.2HTML技术 525242.3CSS技术 6223012.4Django框架 6148202.5MySQL数据库 689913需求分析与实施方案 779803.1可行性分析 7323753.2功能需求分析 7138693.3开发环境 7241863.4实施方案 7181074系统设计 9154044.1总体设计 972084.2模块功能具体设计 1167794.3数据库设计 12264015系统的实现 167705.1登录功能 16245295.2网上书城主界面 17220795.3个人中心 2012757主要代码如下 23292185.4搜索功能 23186855.5购物车界面 2426495.6订单界面 2533145.7退出登录 27101886系统测试 27192616.1测试目的 27125786.2测试环境与测试条件 27190036.3测试方法 28113366.4测试内容 2853817结论 33105767.1设计评价 33203167.2程序的改进及目标 332336参考文献 356669致谢 36

1引言自进入二十一世纪以来，互联网和其相关技术的发展使各式各样的线上店铺不断出现。随着近年来网上书城对传统书城的冲击，一个简单、可靠、迅速的网上书城系统则显得尤为重要。网上书城随此不断增多，一种新型便捷的消费模式开发便显得尤为重要，借此可以在众多的网上书城中脱颖而出，获得更多客户和资源。据相关数据显示，截止在2020年我国图书网上零售的市场规模为767.2亿元，同比增长7.27%，在整个图书零售市场的结构中占比高达79%[1]。此外，根据国际权威调查机构AC尼尔森的报告显示，超过一半我国消费者选择在网上书城购买图书[2]。可以得出相比传统线下零售模式，网上书城将成为未来图书的是主流销售模式，是行业发展的必然。于是设计一个基于HTML和CSS的网上书城系统则显得尤为重要。当今时代，网上书城的相关技术多种多样，传统线下书店和电商平台也慢慢开发或使用了网上平台来销售图书。于是一个快捷、可靠令用户满意的平台，可以从中脱颖而出，获得更多的资源和客户。网上书城可以通过快捷的购物体验同不断完善的支付方式以及完善的购物体系下减轻了运营成本[3]并且随着互联网不断发展我国多数消费者已形成线上购物的习惯，网络消费群体仍不断扩大，相比线下传统书城可能存在的品种单一和其他问题，在线上购买风险较小，不但受到当今消费者的喜爱，所以网上书城是未来图书销售行业发展的必然。2关键技术分析2.1概述利用计算机技术和相关技术设计并实现了一个基于HTML与CSS的网上书城系统，其后端使用Django框架。随着网络技术的不断发展，HTML和CSS相关技术被广泛应用于各个领域。并随着HTML5的发布，基于HTML5的移动Web开发框架，响应式的网站设计也被各种行业所使用的[4]。同时运用开源的Django使整个程序的兼容性、扩展性以及可维护性得到了提高。2.2HTML技术HTML(英语全名为HyperTextMarkupLanguage)超文本标记语言，它的出现将一个个分散的网络资源链接成一个完整的逻辑整体。自1990年以来，就被用作万维网的信息表示语言，它通过和其他的web技术相结合创造出功能强大的网页，因此是web编程的基础。2008年HTML5正式发布，其结合之前版本的相关标准并革新，符合现代网络技术的发展并取得广泛的应用，它允许程序通过web浏览器运行，并且整合其他插件和多媒体相关内容并融入其中，使得浏览器成为了一种网络通用的平台，使得其具有跨平台优势、硬件平台要求较低、动画视频效果绚丽等优点[5]。HTML5的发布是网页的一次重大创新，它降低了对插件的需求，提供能更多互动的可能[6]。其相对于HTML4.01增加了以下新元素：(1)图形的绘制，增加了canvas标签次标签基于JavaScript的绘图API(2)多媒体内容，增加了audio、video、source等标签增加对多媒体内容的支持(3)表单，增加了datalist、keygen、output等标签提高了对表单的使用与支持(4)更好的页面结构，其修改或删除了一些标签和语义优化了整体的页面结构已有不少的网页使用HTML或对原有的进行更新至HTML体现了其的运用广泛。2.3CSS技术CSS，它被设计用来展示HTML等文件的样式，全称为层叠样式表(CascadingStyleSheets)，通过相关技术可以对网页的一系列相关组成元素进行像素单位的控制，如更改大小间距或颜色等等，支持几乎所有的字体样式，拥有强大的能力。CSS诞生于HTML，在HTML不断成长的过程中随着页面设计者对其功能的不断添加HTML逐渐臃肿，为了克服这一问题它被设计出来。CSS可以通过继承来使用其他样式表中的样式，这样使得开发者的开发和设计变得高效快捷。2001年W3C完成CSS3的工作草案,它的一个新特点就是分为若干个独立的模块更利于相关技术的革新与推送，其更新的模块有：盒子模型、超链接方式、语言模块、背景和边框、文字特效、多栏布局等[7]。2.4Django框架Django是从真实的现实世界的不断应用中成长起来的，它的编写是由位于Kansas洲Lawrence城市中的一个网络开发小组完成的，它是基于Python这一语言开源的Web应用框架，它使得互联网网站快速建设，使得信息的传播变得更加便捷[8]。Django中包含了许多功能强大的第三方插件，同时由于其开源性赋予其拥有强大的可扩展性。近年来Django迅速发展，引用越来越广泛，深受开发者们的喜爱得到了世界各地开发人员的大力支持有着强大的生命力和扩展性[9]。2.5MySQL数据库MySQL是由瑞典公司MYSQLAB公司开发。是目前最流行的关系型数据库管理系统之一，它通过将数据存进一个个表里而不是一整个库内这样的设计提高了它的反应和灵活性使得数据存储变得更加快速。它具有五大优势：(1)成本低(2)简单性(3)灵活性(4)普及型(5)良好的支持[10]。虽然MySQL与目前许多大型数据库相比较存有些许不足之处，除非是需要更可靠更强大性能的大型企业相对于中小型商业企业来说其功能已经完全足够强大满足日常的工作所需，并且因为MySQL是开源的，成本也被有效的降低。使用MySQL可以方便、快捷的建立一个可靠的适合中小型企业使用的数据库。3需求分析与实施方案3.1可行性分析3.1.1技术可行性本系统是基于HTML与CSS开发的网上书城系统。HTML与CSS技术成熟，开发者可以轻松的使用相关技术开发网页。后端使用开源的Django框架，扩展性，稳定性高。同时，MySQL数据库操作方便，便于后台的管理以及维护。3.1.2操作可行性本系统虽然功能繁多但使用HTML与CSS技术使得页面简洁美观，大大提高了用户操作舒适度。后端使用Python语言，Django框架使得操作及运行简单快捷，维护和管理方便简单解决方案众多相比其他系统其体量轻巧，使得维护和开发员工对系统可以不断进行升级扩展增添更多的功能及插件，同时方便维护。3.2功能需求分析3.2.1系统两大角色说明管理员：在后台管理系统下进行登录和登出账号、并可以对书籍的相关信息、用户的相关信息以及订单进行管理和查看。用户：可以进行登录和退出账号、浏览不同种类的图书并将其添加至购物车确认订单后购买。3.2.2功能需求管理员登录管理页面后，可以新增或修改图书和出版社进行删除，对订单进行查看和修改。用户可以在主界面进入登录或注册页面进行相关操作，在主界面浏览搜索图书，并选择所需的图书加入至购物车最终确认订单进行购买。3.3开发环境框架：Django2.23语言：Python3.10.1数据库：MySQLIDE：VisualStudioCode前端：npm，JS，HTML3.4实施方案3.4.1开发语言本系统前端采用了HTML，JS，CSS等语言进行开发，运用了swiper前端插件。后端采用Python和Django框架进行整体系统构建，通过MVT模型进行网上书城的设计，其中MTV与MVC的功能类似[11]。数据库则采用MySQL关系型数据库。系统设计简洁可靠且方便扩展以及维护。3.4.2开发工具本系统在的开发工具是VisualStudioCode，用的是3.10.1的Python语言,采用SQLyog软件来管理MySQL数据库对数据库信息做处理。3.4.3Web框架本系统后台采用Bootstrap框架，前台采用原生Html。3.4.4实施步骤(1)确定系统环境及框架；(2)编写Model层，用来实现数据库内容并使数据进行存储；(3)编写View层，用来实现视图层的相关操作，进行相关方法的实现；(4)编写Template层，用来产生Html界面显示网站的内容和数据；(5)进行系统的测试以及修改；4系统设计4.1总体设计4.1.1设计目标本次设计需要让用户在网上书城系统中有一个良好的浏览及购物体验的同时加深用户的好感度，让用户感受到此系统的优点。以及便于员工操作和维护的特点。因此本次需要通过以下几点进行思考和设计： (1)精美度：用户登录一个设计精美的人性化的系统将会给用户良好的购物体验，提高回头率。(2)实用性：网页操作界面要简单易懂，满足所有人的需求，操作方便。(3)易维护：管理员后台要便于维护新增修改或删除信息[12]。由于应用的是MySQL数据库，用来存储网上书城的相关数据，其作为一种关系型数据库，设计数据表应该遵守其规定的范式[13]。4.1.2系统框架结构本次系统有两大主要模块其总体框架设计如图4-1所示。图4-1系统框架结构图4.1.3用户在书城主界面的购物流程用户在网上书城主页下的图书购买流程如图4-2所示。图4-2用户购买流程图4.1.4管理员管理流程网上书城其管理员在后台管理页面进行管理的流程如图4-3所示。图4-3管理流程图4.2模块功能具体设计4.2.1登录、注册本功能下用户可选择在网上书城主页点击右上角的登录按钮将会转入登录界面，当中也可选择注册。而管理员则需点击网站下方显示的链接或输入书城管理系统链接进入后台页面从而进行登录和注册。消费者在网上书城只有进行注册并登录才能进行购买图书的相关操作，注册当中需要填写用户名、手机和密码才可以成功注册网上书城账号[14]。4.2.2用户个人中心(1)用户在个人中心更改自身信息用户通过登录后可点击网站右上角用户名进入个人中心，用户在此页面可进行修改昵称内容、密码以及电话信息的操作。(2)查看地址新增地址及修改地址用户登录在个人中心，可进行查看地址信息、新增地址信息和删除地址的操作。(3)查看订单用户登录在个人中心，可进行查看订单状态和订单详情的操作。4.2.3添加购物车本功能下用户可将图书添加至购物车以便购买，并且可以删除购物车内不需要的图书。4.2.4确认订单及支付本功能下用户可确认订单并选定需要快递的地址，随后跳转至第三方平台进行支付，支付完成后将返回订单页面以便查看订单状态。4.2.5管理员管理管理员在登录至后台页面后可进行以下操作(1)出版社管理管理员可查看、新增、修改出版社。(2)图书管理管理员可查看、新增、修改图书。(3)用户管理管理员可查看、新增、修改用户。(4)订单管理管理员可查看、修改订单状态。4.3数据库设计4.3.1数据表设计依照系统所需该数据库共建立了九张表，分别是Librarian(图书管理员表)，Order(订单表)，Order_detail(订单详情表)，Books(图书信息表)，User(用户信息)表，Address(用户地址表)，Publisher (出版社表)，Image(图书图片表)，Cart(购物车表)分别负责不同信息的储存以便程序使用。 (1)图书管理员表管理员信息通过此表进行数据的存储和使用，其登录和注册都依赖管理员表进行实现。根据本次网上书城设计的需要如表4-1所示。表4-1管理员表此表主键为id。(2)用户信息表用户在进行登录网上书城以及注册和修改信息等操作都需要本表进行相关数据的存储和使用。根据网上书城对于用户数据的需求如表4-2所示。表4-2用户信息表此表主键为id。(3)用户地址表用户地址表，可实现用户收货地址的存储以及修改，方便用户购买书籍后可以快速选择收货地址以及对于随时随地修改地址的需要。根据书城用户地址信息的要求如表4-3所示。表4-3用户地址表此表主键为id。(4)出版社表出版社表，它与图书出版社以一对多的关系相对应方便查询出版社相关书籍，以便管理员管理和用户进行搜索以及购买。根据图书和出版社的对应关系必要出版社表如表4-4所示。表4-4出版社表此表主键为id。(5)图书信息表图书表，后台实现图书信息的存储，前台实现展现相关数据以便用户浏览和管理员在后台对图书的各项数据进行管理即修改和删除。(6)图书图片表图书图片表，实现图书图片的单独存储并统一存储路径方便维护和管理。根据图书图片信息的展示和存储的需要如表4-6所示。表4-6图书图片表字段名称字段类型长度空默认值备注booksid44否否否否此表主键为id。(7)购物车表购物车表，实现用户购物车信息的存储以便确认订单并购买，此表和用户id与图书id关联成一对多的关系。依照购买图书时将其暂存于购物车的需求此表如表4-7所示。表4-7购物车表此表主键为id。(8)订单表订单表，存储用户订单数据可以供用户和管理员随时查看方便查询订单状态即物流情况和完成情况也可以让管理员快捷的处理售后问题。根据消费者同管理员对于消费后信息储存为订单的需求本表如表4-8所示。表4-8订单表此表主键为id。(9)订单详情表订单详情表，负责订单详情的存储与查看，用户和管理员可以观看订单中存在的各种图书名称数量和单项图书的总价。根据订单存储详情的需要本表设计如表4-9所示。表4-9订单详情表此表主键为id。5系统的实现5.1登录功能网上书城主界面可通过点击相关链接进行登录，输入相关信息进行用户的登录。如登录未成功将会在下方提示错误信息。管理员和用户登录界面分开以便系统维护和运营。用户登录成功将进入书城主页面，管理员则将会通过验证进入到网上书城后台管理页面以进入其他操作。登录功能界面如图5-1所示。图5-1登录功能界面代码如下List<IndexImg>indexImgs=indexImgMapper.listIndexImgs();//listsizereturnnewResultVo(ResultStatus.IsNo,"fail",null);5.2网上书城主界面当用户账号密码都输入正确用户将进入网上书城主界面进行图书的浏览以及查看等操作。主界面如图5-2所示。图5-2网上书城主界面主要代码：criteria.andEqualTo("itemId",item_id);List<RecipeInfo>recipeInfoList=recipeInfoMapper.selectByExample(example);returnnewResultVo(ResultStatus.IsOk,"查到图书",recipeInfoList.get(0));5.2.1图书种类界面在网上书城主界面可点击相关种类标签进入不同的种类页面，其将会显示所有符合当前种类的书籍，可以选择是否加入购物车或立即购买。文学种类书籍如图5-3所示。图5-3文学种类书籍界面主要功能代码实现<el-cardclass="elcard"v-for="vointhis.categoryInfoVo":key="vo.categoryId"><img:src="'http://localhost:8088/recipe/show/'+vo.imgurl"></el-card>5.2.2图书详情界面图书的名称、出版社、销量、评分、简介和价格可以通过此页面显示，通过窗口化的加入购物车和立即购买可以方便用户实现快速选择。图书详情界面如图5-4所示。图5-4图书详情界面主要功能代码实现<el-dialog:title="recipeInfoF.recipeName+'详情'":key="recipeInfoF.recipeId":visible.sync="dialogTableVisible"center></el-dialog5.3个人中心5.3.1我的信息界面此界面用户可以实现自身信息的修改更改昵称、电话和密码信息。我的信息界面如图5-5所示。图5-5我的信息界面核心代码如下CREATETABLE`teacher`(`TNo`int(11)NOTNULLAUTO_INCREMENT,`Tname`varchar(30)DEFAULTNULL,`Tpassword`varchar(30)DEFAULTNULL,PRIMARYKEY(`TNo`))5.3.2我的地址界面此界面用户可以查询收货地址并进行管理即修改或删除操作。我的地址界面依照要求设计如图5-6所示。图5-6我的地址界面代码如下}#foot{ width:970px; padding:20px0; color:#FFFFFF; text-align:center;5.3.3新增地址界面此界面下用户可通过输入新地址收货人电话和地址进行地址的新增操作。新增地址界面如图5-7所示。图5-7新增地址界面核心代码如下#container{ width:970px; padding:10px; margin:0auto; position:relative; z-index:0; font-family:Geneva,Arial,Helvetica,sans-serif;5.3.4我的订单界面用户可以在此界面下可进行自身订单的查看和查询详情操作以便核对订单查看实时状态。我的订单界面如图5-8所示。图5-8我的订单界面主要代码如下}body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{ margin:0; padding:0; border:0;5.4搜索功能此功能允许用户在界面的搜索栏中进行查询，通过输入需要搜索的书籍名或作者名，搜索界面将会显示所有包含搜索词的内容。搜索结果如图5-9所示。图5-9搜索结果核心代码如下#navpa{ color:#fff; font-size:14px; font-weight:bold; line-height:30px; padding:030px;}#navpa:hover{ color:red;text-decoration:none; }5.5购物车界面此界面将显示用户添加至购物车的书籍、数量、价格和总价，对已下单的商品进行查看和管理即删除操作，以便用户购买[15]。购物车界面如图5-10所示。图5-10购物车界面核心代码如下#lightbox{ position:absolute; left:0;width:100%;z-index:100;text-align:center;line-height:0;}#lightboximg{width:auto;height:auto;}#lightboxaimg{border:none;}5.6订单界面当用户在购物车界面点击结算时将跳转至订单界面，此界面将显示用户当前订单内容以及将要配送的地址，当用户确认订单无误无需修改并通过第三方平台完成支付后将会返回至我的订单界面[16]。订单界面如图5-11所示。图5-11订单界面主要代码如下.com{ color:#FFFFFF; padding:20px;}.compa{color:#F00;}.comtabletrtd{ color:#FFFFFF;}.comulli{float:left;height:228px;}.sup{ padding:20px;}5.7退出登录当用户点击置顶栏中的登出暗按钮后，网站将会删除用户储存在session中数据并且将返回登录界面，完成用户账号登出的操作。主要代码如下.thumbnail{ width:200px; float:left; margin-left:30px; display:inline; margin-bottom:20px;}.thumbnaila{ color:#FFFFFF;}6系统测试6.1测试目的为保证网上书城系统设计与开发相关功能是否实现以及其可靠性,系统测试则显得十分重要，它用来测试找出系统在开发以及设计中存在的不足或不满足设计要求的区域用来检验相关功能是否完成，并提前补充或修改程序。6.2测试环境与测试条件处理器：AMDRyzen55600X6-CoreProcessor4.70GHz硬盘：2.5TB+1TB移动硬盘内存：16GB操作系统：Windows10数据库：MySQL6.3测试方法本次测试采用黑盒测试和白盒测试，黑盒测试在完全不考虑其内部的组成结构的情况下，检查系统各项功能是否满足设定的设计需求以及各个模块是否可以正常实现。白盒测试则是在测试中观察程序内部结构细致的进行检查，在全面了解程序内部结构的情况下对所有方法进行测试[17]。通过黑盒测试和白盒测试可以有效的评估系统的完成情况以及各个模块和功能是否正常工作，从而对未通过的地方进行修改。6.4测试内容6.4.1登录、注册账号功能测试用户在网上书城进行登录和注册新账号的功能操作测试用例表如表6-1所示，其功能结果如图6-1所示。表6-1登录功能测试用例表图6-1用户登入系统成功测试结果图6.4.2用户改变个人信息功能测试用户在系统中通过个人信息页面更改信息的测试用例表将如表6-2所示。表6-2登录功能测试用例表6.4.3新增收货地址功能测试用户在新增地址页面中新增私人收货地址功能测试用例表将如表6-3所示。过填写所有数据并提交提交成功，页面跳转至我的地址页面交按钮填写此字段”相同并提交段”相同表6-3新增收货地址功能测试用例表6.4.4修改收货地址以及删除收货地址功能测试用户通过个人收货地址页面点击相关按钮进行修改、删除功能，其测试用例表如表6-4所示。表6-4个人地址与其功能测试用例表过，页面跳转至我的地址页面址信显示“请与预期结果填写此字段数据“请填写此字段”点击删除地址按钮地址删除成功点击删除地址按钮地址删除成功6.4.5购物车功能测试其添加图书以及删除图书的测试用例表如表6-5所示。其数据添加成功的测试结果图如图6-2所示。表6-5购物车其功能测试用例表过车书点击加入购物车并确认添加成功同加入至购物车购物车中此图书数量增加并且金额符合数与预期结果相量同钮同图6-2购物车测试结果图6.4.6订单功能测试用户在确认订单的收货地址和付款功能测试用例表即表6-6所示。订单功能测试结果图如图6-3所示。付款页面结果图如图6-4所示。跳转结果如图6-5所示表6-6订单其功能测试用例表实际结果是否通过进行收货地址的切换正常切换地址与预期结果相同通过与预期结果相同通过登录支付宝账号对订单进行付款支付结束后跳转至我的订单页面与预期结果相同通过图6-3订单各项测试结果图图6-4订单付款测试结果图图6-5订单成功返回页码测试结果图6.4.7网上书城的搜索功能测试用户在网上书城搜索栏中进行搜索功能的测试用例表如表6-7所示。其输入数据后的测试结果如图6-6、6-7所示表6-7订单功能测试用例表实际结果是否通过搜索书名显示被搜索的图书