基于 Vue的购物商城设计与实现

摘要随着网络信息化的发展，网上的交易平台日趋增多，也给大学生们提供了更多的便利。其中大部分大学生都会使用网上购物，因为这更能够给他们提供一个购买安全、便捷的一个渠道。而二手的交易平台也是如此，能够为大学生们提供物美价廉的交易平台，也能够将物品循环利用，而其核心也是商品的买卖。本购物商城平台，针对的是大学校内的群体，商城的商品属于二手交易，前台交易的实现了用户能够进行商品的浏览，也能对商品进行选购，更主要还是能够上传自己想要出售的商品，让其他用户能够购买。本购物商城采用了主流框架之一的使用Vue框架，简单易用，单页面应用让用户体验非常好，且减轻了对服务器的压力。它通过MVVM思想就使得开发中的数据模型跟视图之间能够自主的转换，不需要开发人员一步一步的对底层代码进行对比，能够在开发的时候将注意力大部分集中在代码逻辑端，因此使得前端开发使用这个框架的企业越来越多。本交易平台就是利用了Vue在开发时的组件化思想，使得我们的页面可以被划分为一个个小组件，然后很多的组件构成这个页面。在开发中如果我们能将每一个小的功能划分为一个小组件，然后将这个可以被重复使用的组件在系统中被细分，那么整个系统就可以向着代码的美观、开发的效率高、运行的速度快、耦合性低的方向进行，由此开发出一个基于Vue的网上购物商城平台关键词：前后端分离;Vue;组件化;JavaScrip广东东软学院本科毕业设计（论文）AbstractWiththedevelopmentofnetworkinformatization,onlinetradingplatformsareincreasing,whichalsoprovidesmoreconvenienceforcollegestudents.Mostofthecollegestudentswilluseonlineshoppingbecauseitcanprovidethemwithasafeandconvenientwaytopurchase.Thesameistrueforsecond-handtradingplatforms,whichcanprovidecollegestudentswithagoodandcheaptradingplatform,andcanalsorecycleitems,andthecoreisalsothesaleofcommodities.Thisshoppingmallplatformisaimedatgroupsincollegesanduniversities.Theproductsofthemallaresecond-handtransactions.Thefront-endtransactionsenableuserstobrowseandpurchasegoods,andmoreimportantly,theycanuploadwhattheywanttosellCommodities,sothatotheruserscanbuy.Thisshoppingmallusesoneofthemainstreamframeworks,theVueframework,whichissimpleandeasytouse.Thesingleapplicationmakestheuserexperienceverygoodandreducesthepressureontheserver.Throughtheideaof​​MVVM,itenablestheindependentconversionbetweenthedatamodelandtheviewindevelopment.Itdoesnotrequiredeveloperstocomparetheunderlyingcodestepbystep,andcanfocusmostoftheattentiononthelogicalendofthecodeduringdevelopment.Moreandmorecompaniesareusingthisframeworkforfront-enddevelopment.ThistradingplatformutilizesVue'scomponentthinkingduringdevelopment,sothatourpagecanbedividedintosmallcomponents,andthenmanycomponentsconstitutethispage.Indevelopment,ifwecandivideeachsmallfunctionintoasmallcomponent,andthensubdividethisreusablecomponentinthesystem,thentheentiresystemcanbeorientedtowardsthebeautifulcode,highdevelopmentefficiency,andoperation.Thespeedisfastandthecouplingislow,thusdevelopinganonlineshoppingmallplatformbasedonVueKeywords:front-endseparation;Vue;componentization;JavaScript目录TOC\o"1-3"\h\u1.绪论 31.1研究背景 31.2选题的意义与目的 41.3研究现状 51.4课题研究的内容 51.5课题的开发目标 52.系统相关技术和开发环境 52.1前端相关技术 62.1.1HTML简介 62.1.2CSS简介 62.1.3JavaScript简介 62.1.4Vue简介 72.2前端开发环境 72.2.1VScode简介 82.2.2Webpack简介 82.2.3Vue-CLI简介 82.2.4API简介 83.系统分析 93.1系统可行性分析 93.2系统功能需求分析 93.3系统性能需求分析 104.系统设计 114.1系统总体设计 114.2系统模块设计 124.2.1用户注册模块设计 124.2.2用户登录模块设计 124.2.3用户收藏模块设计 134.2.4用户评论模块设计 134.2.5用户上传商品模块设计 144.2.6用户注销模块设计 154.3数据库设计 154.3.1数据库概念结构设计 154.3.2数据库逻辑结构设计 165.系统实现 215.1用户注册登录界面功能 215.2首页界面 225.3商品详细信息功能 235.4个人信息界面 245.5购物车功能 255.6评论功能 255.7上传商品功能 256.系统测试 266.1测试概述 266.2测试环境 266.3测试用例 276.4测试分析 307.总结 31参考文献 32致谢 331.绪论1.1研究背景自21世纪以来，我们所熟知的电商，并不是简简单单的由旧事物被新事物所替代，而是在在互联网中不断的摸索、演变而来，就好比在03年的5月份，马云所在的阿里集团成立了，在其同年的12月份慧聪网也正式上市，次年1月份，京东也加入了电子商务这个领域。从04年开始，国家就陆续发布了针对网络商务的一系列准则，不同用户之间通过网络并遵守着网络规范准则进行信息交流和电商活动。近几年来,随着信息化的不断发展，大学生在网上购物现在看起来也是十分的普遍，可以说网上购物是大学生校园生活的必要，因为在校园周围并不具备能够出售丰富商品的地方，也给大学生网上购物一个良好的契机。而网上购物商城就使得当前的购买方式多样化，不仅让人能足不出户便可以买到想要的商品，也能够更快地让人们得到需求，假如某种商品一个地方买不到，而另一个地方能买到，网上购物商城便能解决这种尴尬的问题，网上购物也推动了物流等行业的蓬勃发展，因此，网上购物商城是现在，也是未来购物的重要渠道。而现在市面上的二手交易平台更是为大学生提供很多的便利，相对于淘宝、京东等单方面购物平台，大学生们更喜欢能够在这种二手交易平台上进行商品的购买，能让自己出售闲置的商品，也能买到想要的商品，其价格也是这种平台的一大优势。1.2选题的意义与目的现在是一个信息技术发达的时代，大部分的企业都有用自己的网页应用。而此次开发是设计并实现一个校内进行的能给大学生们提供的便利、安全、节源的二手交易平台，而本二手交易平台内可以给大学生们很多的商品，比如电器、运动产品、书籍等不同种类的商品交易，鼓励大学生们对资源的循环利用，能很好地进行二手商品交易。而现在市面上的咸鱼、58同城等之所以如此的火爆，也是因为它给用户提供了一个自由的二手交易平台，但它们都缺少第三方的校验，使得商品的质量得不到保障，还有一些交易平台没有明确的追责制度、细化质量的监控，而对于大学生来说这些平台并不是很适合。因而能够开发出一个自由、信任度高、质量有所保障的二手交易平台对于大学生来说，就显得尤为重要。而本平台的开发，对于社会来说它也有着积极作用。它能够很好地推动着二手交易平台的发展，使得我们的身边的二手物品能够充分的被利用，也是环保的体现。而且二手商品物廉价美，通过二手交易平台也能让大学生们懂得节俭，而对于刚毕业的学生也是一笔收入。另一方面通过针对大学生平台交易，在一定程度上保证了质量和安全性，能更快速、更准确地将物品送到买家手上，而这种情况更加能推动二手交易的进行。而本平台意旨在能够给大学生们提供这样的一个平台，让大学生低价买到想要的商品，让卖家出售自己不要的，提供一个更加快捷的方式。1.3研究现状我国的电子商务始于90年代，有了多年的发展。就目前而言，有90%以上的大学生会选择网上购买生活中需要的商品，极少数人会去实体店进行购买，因此推动了很多交易平台的发展，不仅仅是类似淘宝、京东这种大的交易平台，还有现在市面上最火的应是咸鱼交易平台，二这个平台之所以这么火，是因为它是从属于淘宝，所以它的优点就是用户数量一开始就比较大，但是缺点也因为物品的参差不齐，没有第三方的校验，并不能保证其百分百的质量。对于大学生来说，不能很好的把从学生中所不需要的一些物品交易给其他有需要的人，从而实现循环利用。所以能提供一个方便交易、面向大学生的交易平台是非常有前瞻性的。1.4课题研究的内容本商品共享与交易网站，用户可以自由地在平台中进行浏览商品，也能够在注册登录的界面点击注册，并且成为本交易平台的用户，在登录后成功便可以自由查看、交易商品，也能够将商品添加到购物车进行购买。用户也可以对自己的个人信息进行管理，比如修改个人信息等。最主要的还是二手交易这个主题，用户自己能够对商品进行购买，也能够上传并出售自己想卖的商品。1.5课题的开发目标每个项目都需要在开发前制定计划，于此本交易平台的开发期望有以下的几点：(1)能在网站上浏览商品。(2)用户能够查看个人信息。(3)用户能够修改个人信息。(4)用户能将需要购买的商品添加到用户的购物车。(5)用户能够将需要出售的商品上传并出售。2.系统相关技术和开发环境2.1前端相关技术2.1.1HTML简介HTML在我们的前端代码中最为基础的技术[1]，就像地基那般，只有将其稳稳定死，才能经历风吹雨打也能毫不动摇。在开发本交易平台中，HTML语言也是本交易平台开发的基础语言，用于搭建网页的基石。HTML的用法为英文尖括号包含的元素(标签)，而某种标签有着自己的意义，有的是划分大小段落、换行、插入图片、用于超链接等等。HTML可以嵌入一些属性，例如HTML本身固有的属性，以及CSS层叠样式表的属性，或者JavaScript的属性，它们都会影响HTML网页的行为，影响到元素的外观跟布局。但是大部分情况下则将HTML、CSS、JavaScript分开编写，看起来更加简洁，也方便读取跟修改。2.1.2CSS简介CSS是在最早的时候由于网站只有HTML这种来传递信息的形式，而网上在阅读新闻等信息时只能看到一大串的文字，而后来便为了美化这种枯燥的新闻格式，便衍生出了这种语言，它的存在就是给大楼刷漆、美化的功能。CSS不能单独使用[6]，必须与\o"HTML"HTML一起协同作业，为HTML基本的框架起着修饰作用。如果说HTML负责网页的内容部分，那么CSS则这个网页的内容是以什么样的方式来呈现的，也不再是单调的文字内容。CSS也可以用来设置网页中内容的位置布局，比如：左右的浮动、内容的定位、文字的居中等等。CSS其中的用法有三类，第一是将属性代码直接写到HTML的标签中，利用style属性对内容进行修饰；第二是在添加一个style类型的样式标签之后，在这个style标签中进行CSS的代码编写，此时需要用到一些构造器等方法来绑定到HTML的元素，从而修饰HTML的内容；第三也是在开发中所使用的一种，将一个集成的CSS文件引入到HTML中，在这个CSS文件中来进行代码编写，其同样也能对HTML内容进行修饰。有了CSS的引入，对于网页来说便是整个世界有了色彩，网页中也不仅仅是一堆毫无感情的内容，而这些修饰能给网页的内容添加了丰富的描述、这些样式布局也能给用户带来不一样的感受，使得网页的浏览更加有趣味性。2.1.3JavaScript简介JavaScript是在极短的时间内被开发出来的编程语言，但是它被运用推广的时间却不短，而JavaScript让一个网页不再是毫无生命的内容展示，它将网页与用户的互动提升了一个等级，就像大楼的各个框架，使其更加健硕稳固。JavaScript通过外部引入到HTML的标签Script中，在外部文件中，通过绑定DOM的元素来进行逻辑的运算与编写。因为独立在一个文件中，也使得编写过程能更专注于逻辑的运算。而JavaScript的存在，就代表着网页中所存在的内容不仅仅是固定在那里的，HTML+CSS是静态的网页，那么加上JavaScript就是动态的了。它能够让网页跟用户之间的互动更加丰富有趣。2.1.4Vue简介Vue是Vue.js的简称，它是一个渐进式的框架，渐进式就代表着可以把Vue，作为应用的一部分，给予用户更加丰富的交互感受。而Vue的很多特点和在网页应用的功能[3]，比如：解耦视图和数据，而Vue在使用的MVVM模式中，其双向数据绑定的特点也使得在开发时有更好的开发性；可复用的组件，指的是Vue在开发中，每一个小功能都可以被划分为一个模块，而一个模块中，又将每一个小功能划分为组件，而这些组件都能够独立，也能够被重复地使用，减少了代码量工作量；前端路由技术，指的是通过改变URL，但是网页不进行整体的刷新，即不再去静态资源服务器请求，而是在之前已经请求过的资源当中，抽取一些属于这个URL的代码，从而渲染到页面当中，这样就减少了请求资源的次数，减轻了服务器的压力；状态管理指的是有一个状态需要在多个页面中渲染，而多个组件共同来享用这个状态，便是状态的管理模式；虚拟DOM则是将网页的运行性能提升了一个档次，比如在运算中，有十次甚至上百次的计算，而这些计算会在虚拟的DOM上面操作，不会在真实的DOM中直接计算，而是计算完之后将对象再attch到真实DOM树上面，这就大大减少了对于计算内存的要求，速度也更快。而这些功能是Vue在前端框架中流行的一部分原因。如果说HTML、CSS、JavaScript是搭建一个房子，那么Vue的加入就是将这个房子交给了一个装修公司，而将这个房子修饰得更加漂亮、便捷、完整、便是Vue这个框架的主要内容。2.2前端开发环境2.2.1VScode简介VScode是一款由微软开发并支持多个操作系统的开源的编辑器。因为本身内置所支持的git，所以便于代码的版本管理，除去本身的文本编辑器，它还支持安装一些插件，因为它可以帮助程序员快速地编写代码，也有其他很多丰富的功能，因此选择了VScode编辑器。2.2.2Webpack简介相比于grunt跟gulp等非静态的打包工具[4]，它是属于开发时才用到的，在项目打包后就不需要用到了。而在打包过程中，会将各种代码和图片等进行压缩，然后放在一个js文件中，其内部会对这些代码进行空间的压缩、编程语言和其他格式的转换等处理方式。2.2.3Vue-CLI简介Vue-CLI又称为命令行界面，又简称为脚手架。脚手架的具体功能是将本交易平台使用Vue开发时所需要的的目录文件等直接创建，使得我们的开发更加高效、稳定。2.2.4API简介API是一种用于本交易平台在开发时的应用程序接口，这种接口在本交易平台开发过程中，让开发人员能够获取到后台的具体数据，后台通过接口将数据封装到一个对象中，使得前端的开发人员能够对服务器的数据进行操作和开发。图2-1系统相关技术图

3.系统分析3.1系统可行性分析开发上的支出支出：由于该系统使用的大部分框架都是开源的，因而在搭建环境跟软件都不需要额外的费用。而其他的方面就是需要一台电脑、网络、时间等，而这对于开发者来说，绝对不是一个难题。资金上的收益而在本系统获得一定的浏览的数量之后，能使用接受用户的打赏、投放一些广告、还有收取一些支付的小费用。由于项目是针对于校园的大学生，而在本校运行成功的运作起来，推广到其他学校时，因为本系统的大量代码是可以复用的，则受到的收益将成线性增长，而使用本系统的学校越是多，则交易的流量就越大，受益就越多。社会上的可行性而对于一些二手的物品，大学生们如果能在校内进行交易的话，相比于咸鱼等其他二手交易软件，会更加的感兴趣。相对于咸鱼、58同城等二手交易平台来说，本系统的手续就比较的简便，可以避免过于繁冗的步骤，轻松地进行二手商品的交易。对于大学生来说，更喜欢选择一款相对可靠，相对简便的交易平台。另一个优点便是它使得我们的物品能够二次使用，不是用完不要了便扔，比如一些书籍、数码产品等，如果能够二次使用则是环保工作中很重要的一环，我们每一次的交易，都会使得身边能源的不必要消耗，也是为我们的环保做了一点小贡献。3.2系统功能需求分析本交易平台在开发前期就要确定我们的具体功能是如何的，而经过分析并结合现在交易平台的参考，最终将功能归纳为以下几点：(1)用户功能：在本交易平台中未登陆只能浏览商品，经过登陆的用户在交易平台中可以进行更多的权限操作。(2)商品功能：在本交易平台中，能对商品的信息进行查看，也能在不同的分类区查找不同的商品。(3)收藏功能：可以在本交易平台中有想要的商品却不想立刻购买，则可以将商品加入收藏、以便下次能够快速找到这个商品(4)购物车功能：可以在本交易平台对商品进行添加到购物车、删除购物车、交易等操作。(5)交易查询功能：可以在本交易平台查看已经进行购买过的商品(6)出售商品功能：可以在本交易平台上传封面、填写商品信息等操作后，出售商品3.3系统性能需求分析(1)注册界面：如果想要拥有购买商品的权利，第一步则是要注册成为商城的用户，根据注册的规范，账号为11位学号或者是邮箱，密码则不为空。(2)登录界面：根据注册过的账号密码进行登录，如果账号密码、验证码其中有一项出错，都会提示错误登陆失败。(3)用户个人信息界面：该功能仅登录过的用户才有权限使用。可以修改用户的昵称，用户在学校的学号，用户自己的联系方式，住址等等。(4)收藏界面：该功能仅登录过的用户才有权限使用。在浏览商品时，可以将需要但暂时不需要购买的商品进行收藏。(5)购物车界面：在本平台中，与其他交易平台的功能类似，将商品放到购物车可以一并购买。(6)我的交易界面：该功能仅登录过的用户才有权限使用。购买过商品之后，能够查看交易的信息。(7)我的评论界面：该功能仅登录过的用户才有权限使用。可以对商品进行评价，然后在我的评论界面看到你对商品的评价。(8)上传商品界面：该功能仅登录过的用户才有权限使用。可以进行输入商品名称、上传商品的封面(图片)、输入商品出售价格、选择出售的商品种类、输入商品介绍和售后保障等信息，点击立即创建就可以出售商品。

4.系统设计4.1系统总体设计本交易平台的的模式为B/S，即浏览器端跟服务器端两方面，从前端获取到后端的接口，最后将数据传到前端中，由前端人员对网页数据的插入分布。本交易平台的应用模式也极为简单，基本上依靠用户本身就能够进行管理，在交易方面实现一对一的交接。用户在交易平台中必须经过注册才能进行商品的交易，而未注册的用户仅仅只能浏览商品，其总体的功能设计如下图所示：图4-1系统流程图4.2系统模块设计4.2.1用户注册模块设计在开发时对于安全性的考究，注册的账号为11位学号或者是邮箱，密码则不为空。如果经过后台对用户输入的账号密码等验证成功之后，则将信息记录，即注册成功。若是违反了注册规则，则系统会提示错误，让用户重新进行注册。图4-2注册流程图4.2.2用户登录模块设计如果用户输入的账号密码还有验证码也均为正确，经过后台验证成功，则登录成功进入到首页。如果输入的账号信息不正确，则系统会提示用户信息的错误4-3登录流程图4.2.3用户收藏模块设计用户在浏览商品时，可以将需要但暂时不需要购买的商品进行收藏。在用户点击了收藏的按钮之后，如果收藏成功则会提示用户成功的信息，会提示错误的信息。图4-4收藏流程图4.2.4用户评论模块设计用户在查看了商品的信息之后，可以对商品进行评价或者留言，然后在我的评论界面看到你对这款商品的评价，评价成功则提示成功信息。图4-5评论流程图4.2.5用户上传商品模块设计在用户想要出售商品时可以在个人信息界面下拉，在上传商品界面，然后可以进行输入商品名称、上传商品的封面(图片)、输入商品出售价格、选择出售的商品种类、输入商品介绍和售后保障等信息，点击立即创建就可以出售商品。如果上传商品成功的话则提示创建成功，如果上传的封面图片大于2M或者图片格式不为JPG，则会提示上传失败。图4-6创建商品流程图4.2.6用户注销模块设计在用户想要因登录超时、切换账号等因素需要退出登录时，可以点击退出按钮。然后在登录界面重新登录。图4-7注销流程图4.3数据库设计4.3.1数据库概念结构设计表单表图4-8表单E-R图(2)用户表图4-9用户E-R图(3)商品表图4-10商品E-R图4.3.2数据库逻辑结构设计每一个功能都要有数据表将其数据一一对应，使得数据完整性，而本系统开发所用到的几个重要的表单如下：(1)表单表表单表s_base_form，在后台中如果创建了一个表，则会将这个表的表单名等信息记录到这个表单表中，其的主要信息如下面表中内容所示。表4-1表单表字段id类型字节长度是否为主键说明idbigint20y表单idtitlevarchar128n表单标题collectionvarchar128n表单名(2)用户表用户表s_base_user，如果用户创建了一个账号，那么这个账号信息将会在这用户表中记录下来。其主要的信息如下面表中内容所示。表4-2用户表字段id类型字节长度是否为主键说明idbigint20y用户idavatartext-n头像accountvarchar128n账号passwordvarchar128n密码user_namevarchar128n名字sexbigint20n性别emailvarchar128n邮箱phonevarchar128n手机typebigint20n类型school_addressbigint20n住址(3)图书表图书表c_business_book_library，该表主要的是记录商品的标题、商品价格、商品封面等等。其主要的信息如下面表中内容所示。表4-3图书表字段id类型字节大小是否为主键说明idbigint20Yes商品idtitlevarchar128no商品标题covertext-n商品封面pricefloat-n商品价格starfloat-n商品星级评价comment_numint11n商品评论人数user_idbigint20n所属的用户authorvarchar128n商品的作者publishing_housevarchar128n商品出版社published_timedatetime-n商品出版的时间formatvarchar128n商品开本papervarchar128n商品纸张enfoldvarchar128n商品包装suitedbit1n商品是否套装detailslongtext-n商品详情back_check_timedatetime-n后台审核时间not_pass_reasontext-n不能通过的理由back_check_statusbigint20n后台的审核状态deletedbit1n是否已经被删除created_attimestamp-n创建书籍的时间(4)电器表电器表c_business_electric_appliance，这个表是用户上传的电器所包含的信息。其主要的信息如下面表中内容所示。表4-4电器表字段id类型字节大小是否为主键说明idbigint20y商品的idtitlevarchar128n商品标题covertext-n商品封面pricefloat-n商品价格starfloat-n商品星级comment_numint11n商品评论数user_idbigint20n商品所属用户brandvarchar128n商品品牌modelvarchar128n商品型号powervarchar128n商品功率typevarchar128n商品类型detailslongtext-n详情back_check_timedatetime-n后台的审核时间not_pass_reasontext-n不能通过的理由back_check_statusbigint20n后台的审核状态(5)运动商品表运动商品表c_business_sports_special，这个表是运动商品的标题、商品价格、商品的封面等等。其主要的信息如表4-5所示。表4-5运动商品表字段id类型字节大小是否为主键说明idbigint20y商品idtitlevarchar128n商品标题covertext-n商品封面pricefloat-n商品价格starfloat-n商品星级comment_numint11n商品评论数user_idbigint20n商品所属用户brandvarchar128n商品品牌patternvarchar128n商品型号detailslongtext-n商品详情back_check_timedatetime-n后台的审核时间not_pass_reasontext-n不能通过的理由back_check_statusbigint20n后台的审核状态(6)数码产品表数码产品表c_business_digital_square，该表主要的是记录商品的标题、商品价格、商品封面等等。其主要的信息如表4-6所示。表4-6数码产品表字段id类型字节大小是否为主键说明idbigint20y商品idtitlevarchar128n商品标题covertext-n商品封面pricefloat-n商品价格starfloat-n商品星级comment_numint11n商品评论数user_idbigint20n所属用户brandvarchar128n商品品牌patternvarchar128n商品型号detailslongtext-n商品详情back_check_timedatetime-n后台审核时间not_pass_reasontext-n不能通过的理由back_check_statusbigint20n后台的审核状态5.系统实现5.1用户注册登录界面功能该页面在本交易平台中进入首页后，通过点击网页的右上角进入注册页面，注册时则应遵守注册规则，用户名为学号或邮箱、密码则不为空，确认密码时两次的密码必须相同。注册的具体界面如图5.1.1所示：图5-1注册界面进入到本交易平台之后，首先可以看到右上角的登录字样，点击就能进入到登录的界面，然后输入账号密码，经过后台验证后成功登录。登录的具体界面如图5.1.2所示：图5-2登录界面5.2首页界面本交易平台即使没有通过注册账号进行登录也能进入，并且可以看到上面有许多分类，点击不同的分类能看到不同种类的商品。具体的界面如图5.2.1、图5.2.2所示：图5-3首页界面图5-4分类界面5.3商品详细信息功能在进入到本交易平台的首页后，可以点击商品查看其相关的信息，而更多的操作，比如以及使用加入购物车等功能，则需要通过登录才能使用。界面如图5.3.1所示：图5-5商品详细信息界面5.4个人信息界面这个功能本交易平台只对登陆过的用户进行开发，而没有进行登录的用于必须进行登录之后才能进入到这个页面。其界面如下图所示：图5-6个人信息界面5.5购物车功能在本交易平台中，使用购物车这个功能，能方便用户对多个商品一起购买。其具体的界面如图5.5.1所示：图5-7购物车界面5.6评论功能对于任何类型的用户，都可以使用评价这个功能，在商品信息的下方评论区进行评价留言，而评论的历史记录会被记录。具体的界面如图5.6.1所示：图5-8评论功能界面5.7上传商品功能本系统的用户们可以将自己想要出手的商品进行上传出售。可以输入名称、上传封面、输入商品出售价、选择商品种类、输入商品介绍、售后保障等信息，然后会对上传的商品会通过验证上架到该平台。界面如图5.7.1所示：图5-9上传商品功能界面6.系统测试6.1测试概述在这个21世纪中，社会是一个信息化时代，而随着网络不断的优化迭代，对于网站的安全也是开发中的重要一环，而为了让开发的网站，能够持续地按照预期的运行，就需要定期和持续的维护[8]。具有良好功能的计算机软件，能让使用人员在使用软件的同时，能拥有更好的用户体验，进而能保证软件的使用人员的操作正确，完成所预期的功能[7]。所以，我们做好了软件测试就是代码的维护中的一个重要环节，可以检测到代码是不是有错误、是不是能在原代码上有所更新，对于我们开发的效率影响极大。而测试是开发的收尾工作，但也是最重要的工作之一，如果在上线后仍检测出了问题，那么成本相比开发时的费用要多得多，这样就能或多或少的降低我们开发的成本，避免一些不必要的风险。6.2测试环境下面为开发本交易平台所使用的的电脑测试的环境：CPU：Intel(R)Core(TM)i7-3630QMCPU@2.40GHzRAM：12GOS：Windows10x64DB：MySqlBrowser：GoogleChrome6.3测试用例表6-1测试用例表用例编号功能概述操作条件预计结果01注册账号输入账号为邮箱或者为学号、密码不为空注册成功02登录账号是否注册过、账号密码的正确性登录成功03收藏车将商品收藏到收藏车添加成功04购物车将商品添加到购物车添加成功05上传出售商品上传添加封面等信息上传成功图6-1注册成功图6-2登录成功图6-3添加收藏车图6-4添加收藏车成功图6-5添加购物车图6-6添加购物车成功图6-7上传商品图6-8上传商品成功图6-9查看上传商品6.4测试分析在经过一系列的测试后，可以知道的是本系统在API接口上没有出问题，而这也是我们预期的。而在测试的目的还是让开发人员发现目前的不足跟能够改进的功能，所以也依旧不能放松，而应该在后面功能的更新或者替换时，我们的网站是否能够良好的运行。因此，我们如果保留了一个良好的开发后的测试习惯，对于我们系统，能够定期的进行维护更新，那将是开发的重中之重。7.总结开发本系统的目的，是为了在毕业之后的工作中能有所帮助，而在整一个开发过程中，我能够在遇到困难时坚持到底，虚心请教老师，耐心地考虑并解决问题[9]；而对于我们的需求分析，最终能成为我们开发的目标，并且将这个目标实现[5]，而同时将平时在学校还是网络平台所学的都能够运用其中，并且开发本系统也是一种回顾总结。无论是选题还是后面的每一项过程，每一步都需要细心缜密。而此次的系统开发，在前端框架上面的选择，Vue这个框架首先是开源的，其次在开发方面是前后端分离的，在开发思想上面是模块化、组件化的，并结合了webpack等优秀的开发工具插件。此次毕设系统，在选择了要针对大学生的二次交易平台后，能够针对这个方面开发出一个个想要的功能，也能够在通过不断的学习、查阅学习资料、查看网络上的的开发思路视频后，最终完成了这次项目。在之后实际的开发应用的过程中，我会更加注重细节，并且在开发项目上面的目录上进行改进，使得目录更加整洁清晰。我会更加仔细地编写代码，并且写好相应的注释，代码的耦合性上也会尽量降低，使得代码更加规范整洁，提升开发效率。而通过此次的开发，解决了不少的难题，使我以后在编写代码时能够更加熟练。参考文献胡文利.CSS技术在网页设计中的应用研究[J].计算机产品与流通,2019(01):105.刘进军.浅析JavaScript在动态网页设计中的应用[J].赤峰学院学报(自然科学版),2016,32(17):17-19.李广宏.vue.js前端应用技术分析[J].中国新通信,2019,21(20):115.江庆,叶浩荣.Vue+Webpack框架在银行App前端开发的应用[J].金融科技时代,2016(11):15-19.阮晓龙,冯顺磊.Web前端开发课程实训教学的思考与探索[J].中国现代教育装备,2020(01):42-44.陈红梅.基于Web前端开发技术的儿童教育网站设计与实现[J].智能计算机与应用,2017,7(06):142-144+147.许瑞芳,姜枫.软件测试技术应用与综合管理之探析[J].电子质量,2020(03):50-53.詹凯琦.计算机软件开发中的数据库测试技术讨论[J].信息通信,2020(02):162-163.易志双.基于信息化的软件开发项目管理[J].计算机产品与流通,2020(03):14.致谢大学四年的时空一眨眼就要过去了。从踏入这所学校开始，从懵懂的少年，到现在能够独挡一面，我确实成长了很多很多。帮助我的人有很多，有的人像风一般推动我，有的人像星光那般照亮我，有的人一直在不断地鼓励我，有的在我胆怯为我呐喊加油，我都表示由衷的感谢。我要感谢我的父母，是他们教会了这个不懂事的我，如何不畏艰阻困难，教我怎么样正确对待事情，并让我要一直保持着一种积极。是他们在我孤独无助的时候用拥抱关怀我，让我拥有了一个美满的家。我的父母教会了我如何看待价值，让我在迷茫中坚定自我，使我人生道路上更加精彩。感谢我的指导老师麦日升，它是一个随和、学识渊博的老师，在课上虽然不会很严厉，但是在同学们有需要时会尽全力地帮助。在我遇到开发上的问题时，他无论什么时候都能够回答我的问题，细心讲解问题，时时刻刻地关注着我们的进度。因此，我对麦日升老师表示深深的感激和尊敬，感谢你的指导。感谢我的舍友胡迪、林奕森、黄子豪，你们在这三年多，给予了我无数次的帮助与支持。感谢胡迪，在社团跟社交上给予我很多的帮助；感谢林奕森，在这几年中跟我在一起学习一起成长；感谢黄子豪，跟我在学校生活中互帮互助；感谢你们对我的关心。感谢我的兄弟吴伟银，在我大学最迷茫的时候，引导我走向前端这条路，从开始学习，到后面跟我分享前端的知识跟工作上的经验，在生活中也带给了我很多的快乐。感谢我的学校广东东软学院，在教育上给予了我很大的帮助，从开始进学校到后面也渐渐受到了校训“精勤博学,学以致用”的影响，使我受益匪浅。感谢我的16软工6班，虽然是一个小集体，但是我却能够感受到了一个大家庭有的温暖和团结，感谢每一个给予我快乐，给予我帮助的同学。让我在生活中添了这一段美好的回忆，让我的生活更加健康美好。

电脑故障检测卡代码表

1、特殊代码"00"和"ff"及其它起始码有三种情况出现：

①已由一系列其它代码之后再出现："00"或"ff"，则主板ok。

②如果将cmos中设置无错误，则不严重的故障不会影响bios自检的继续，而最终出现"00"或"ff"。

③一开机就出现"00"或"ff"或其它起始代码并且不变化则为主板没有运行起来。

2、本表是按代码值从小到大排序，卡中出码顺序不定。

3、未定义的代码表中未列出。

4、对于不同bios（常用ami、award、phoenix）用同一代码代表的意义不同，因此应弄清您所检测的电脑是属于哪一种类型的bios，您可查阅您的电脑使用手册，或从主板上的bios芯片上直接查看，也可以在启动屏幕时直接看到。

5、有少数主板的pci槽只有一部分代码出现，但isa槽有完整自检代码输出。且目前已发现有极个别原装机主板的isa槽无代码输出，而pci槽则有完整代码输出，故建议您在查看代码不成功时，将本双槽卡换到另一种插槽试一下。另外，同一块主板的不同pci槽，有的槽有完整代码送出，如dell810主板只有靠近cpu的一个pci槽有完整代码显示，一直变化到"00"或"ff"，而其它pci槽走到"38"后则不继续变化。

6、复位信号所需时间isa与pci不一定同步，故有可能isa开始出代码，但pci的复位灯还不熄，故pci代码停要起始代码上。

代码对照表

00.已显示系统的配置；即将控制INI19引导装入。

01处理器测试1，处理器状态核实,如果测试失败，循环是无限的。处理器寄存器的测试即将开始，不可屏蔽中断即将停用。CPU寄存器测试正在进行或者失败。

02确定诊断的类型（正常或者制造）。如果键盘缓冲器含有数据就会失效。停用不可屏蔽中断；通过延迟开始。CMOS写入／读出正在进行或者失灵。

03清除8042键盘控制器，发出TESTKBRD命令（AAH）通电延迟已完成。ROMBIOS检查部件正在进行或失灵。

04使8042键盘控制器复位，核实TESTKBRD。键盘控制器软复位／通电测试。可编程间隔计时器的测试正在进行或失灵。

05如果不断重复制造测试1至5，可获得8042控制状态。已确定软复位／通电；即将启动ROM。DMA初如准备正在进行或者失灵。

06使电路片作初始准备，停用视频、奇偶性、DMA电路片，以及清除DMA电路片，所有页面寄存器和CMOS停机字节。已启动ROM计算ROMBIOS检查总和，以及检查键盘缓冲器是否清除。DMA初始页面寄存器读／写测试正在进行或失灵。

07处理器测试2，核实CPU寄存器的工作。ROMBIOS检查总和正常，键盘缓冲器已清除，向键盘发出BAT（基本保证测试）命令。.

08使CMOS计时器作初始准备，正常的更新计时器的循环。已向键盘发出BAT命令，即将写入BAT命令。RAM更新检验正在进行或失灵。

09EPROM检查总和且必须等于零才通过。核实键盘的基本保证测试，接着核实键盘命令字节。第一个64KRAM测试正在进行。

0A使视频接口作初始准备。发出键盘命令字节代码，即将写入命令字节数据。第一个64KRAM芯片或数据线失灵，移位。

0B测试8254通道0。写入键盘控制器命令字节，即将发出引脚23和24的封锁／解锁命令。第一个64KRAM奇／偶逻辑失灵。

0C测试8254通道1。键盘控制器引脚23、24已封锁／解锁；已发出NOP命令。第一个64KRAN的地址线故障。

0D1、检查CPU速度是否与系统时钟相匹配。2、检查控制芯片已编程值是否符合初设置。3、视频通道测试，如果失败，则鸣喇叭。已处理NOP命令；接着测试CMOS停开寄存器。第一个64KRAM的奇偶性失灵

0E测试CMOS停机字节。CMOS停开寄存器读／写测试；将计算CMOS检查总和。初始化输入／输出端口地址。

0F测试扩展的CMOS。已计算CMOS检查总和写入诊断字节；CMOS开始初始准备。.

10测试DMA通道0。CMOS已作初始准备，CMOS状态寄存器即将为日期和时间作初始准备。第一个64KRAM第0位故障。

11测试DMA通道1。CMOS状态寄存器已作初始准备，即将停用DMA和中断控制器。第一个64DKRAM第1位故障。

12测试DMA页面寄存器。停用DMA控制器1以及中断控制器1和2；即将视频显示器并使端口B作初始准备。第一个64DKRAM第2位故障。

13测试8741键盘控制器接口。视频显示器已停用，端口B已作初始准备；即将开始电路片初始化／存储器自动检测。第一个64DKRAM第3位故障。

14测试存储器更新触发电路。电路片初始化／存储器处自动检测结束；8254计时器测试即将开始。第一个64DKRAM第4位故障。

15测试开头64K的系统存储器。第2通道计时器测试了一半；8254第2通道计时器即将完成测试。第一个64DKRAM第5位故障。

16建立8259所用的中断矢量表。第2通道计时器测试结束；8254第1通道计时器即将完成测试。第一个64DKRAM第6位故障。

17调准视频输入／输出工作，若装有视频BIOS则启用。第1通道计时器测试结束；8254第0通道计时器即将完成测试。第一个64DKRAM第7位故障。

18测试视频存储器，如果安装选用的视频BIOS通过，由可绕过。第0通道计时器测试结束；即将开始更新存储器。第一个64DKRAM第8位故障。

19测试第1通道的中断控制器（8259）屏蔽位。已开始更新存储器，接着将完成存储器的更新。第一个64DKRAM第9位故障。

1A测试第2通道的中断控制器（8259）屏蔽位。正在触发存储器更新线路，即将检查15微秒通／断时间。第一个64DKRAM第10位故障。

1B测试CMOS电池电平。完成存储器更新时间30微秒测试；即将开始基本的64K存储器测试。第一个64DKRAM第11位故障。

1C测试CMOS检查总和。.第一个64DKRAM第12位故障。

1D调定CMOS配置。.第一个64DKRAM第13位故障。

1E测定系统存储器的大小，并且把它和CMOS值比较。.第一个64DKRAM第14位故障。

1F测试64K存储器至最高640K。.第一个64DKRAM第15位故障。

20测量固定的8259中断位。开始基本的64K存储器测试；即将测试地址线。从属DMA寄存器测试正在进行或失灵。

21维持不可屏蔽中断（NMI）位（奇偶性或输入／输出通道的检查）。通过地址线测试；即将触发奇偶性。主DMA寄存器测试正在进行或失灵。

22测试8259的中断功能。结束触发奇偶性；将开始串行数据读／写测试。主中断屏蔽寄存器测试正在进行或失灵。

23测试保护方式8086虚拟方式和8086页面方式。基本的64K串行数据读／写测试正常；即将开始中断矢量初始化之前的任何调节。从属中断屏蔽存器测试正在进行或失灵。

24测定1MB以上的扩展存储器。矢量初始化之前的任何调节完成，即将开始中断矢量的初始准备。设置ES段地址寄存器注册表到内存高端。

25测试除头一个64K之后的所有存储器。完成中断矢量初始准备；将为旋转式断续开始读出8042的输入／输出端口。装入中断矢量正在进行或失灵。

26测试保护方式的例外情况。读出8042的输入／输出端口；即将为旋转式断续开始使全局数据作初始准备。开启A20地址线；使之参入寻址。

27确定超高速缓冲存储器的控制或屏蔽RAM。全1数据初始准备结束；接着将进行中断矢量之后的任何初始准备。键盘控制器测试正在进行或失灵。

28确定超高速缓冲存储器的控制或者特别的8042键盘控制器。完成中断矢量之后的初始准备；即将调定单色方式。CMOS电源故障／检查总和计算正在进行。

29.已调定单色方式，即将调定彩色方式。CMOS配置有效性的检查正在进行。

2A使键盘控制器作初始准备。已调定彩色方式，即将进行ROM测试前的触发奇偶性。置空64K基本内存。

2B使磁碟驱动器和控制器作初始准备。触发奇偶性结束；即将控制任选的视频ROM检查前所需的任何调节。屏幕存储器测试正在进行或失灵。

2C检查串行端口，并使之作初始准备。完成视频ROM控制之前的处理；即将查看任选的视频ROM并加以控制。屏幕初始准备正在进行或失灵。

2D检测并行端口，并使之作初始准备。已完成任选的视频ROM控制，即将进行视频ROM回复控制之后任何其他处理的控制。屏幕回扫测试正在进行或失灵。

2E使硬磁盘驱动器和控制器作初始准备。从视频ROM控制之后的处理复原；如果没有发现EGA／VGA就要进行显示器存储器读／写测试。检测视频ROM正在进行。

2F检测数学协处理器，并使之作初始准备。没发现EGA／VGA；即将开始显示器存储器读／写测试。.

30建立基本内存和扩展内存。通过显示器存储器读／写测试；即将进行扫描检查。认为屏幕是可以工作的。

31检测从C800：0至EFFF：0的选用ROM，并使之作初始准备。显示器存储器读／写测试或扫描检查失败，即将进行另一种显示器存储器读／写测试。单色监视器是可以工作的。

32对主板上COM／LTP／FDD／声音设备等I／O芯片编程使之适合设置值。通过另一种显示器存储器读／写测试；却将进行另一种显示器扫描检查。彩色监视器（40列）是可以工作的。

33.视频显示器检查结束；将开始利用调节开关和实际插卡检验显示器的关型。彩色监视器（80列）是可以工作的。

34.已检验显示器适配器；接着将调定显示方式。计时器滴答声中断测试正在进行或失灵。35.完成调定显示方式；即将检查BIOSROM的数据区。停机测试正在进行或失灵。

36.已检查BIOSROM数据区；即将调定通电信息的游标。门电路中A－20失灵。

37.识别通电信息的游标调定已完成；即将显示通电信息。保护方式中的意外中断。

38.完成显示通电信息；即将读出新的游标位置。RAM测试正在进行或者地址故障＞FFFFH。

39.已读出保存游标位置，即将显示引用信息串。.

3A.引用信息串显示结束；即将显示发现信息。间隔计时器通道2测试或失灵。

3B用OPTI电路片（只是486）使辅助超高速缓冲存储器作初始准备。已显示发现＜ESC＞信息；虚拟方式，存储器测试即将开始。按日计算的日历时钟测试正在进行或失灵。

3C建立允许进入CMOS设置的标志。.串行端口测试正在进行或失灵。

3D初始化键盘／PS2鼠标／PNP设备及总内存节点。.并行端口测试正在进行或失灵。

3E尝试打开L2高速缓存。.数学协处理器测试正在进行或失灵。

40.已开始准备虚拟方式的测试；即将从视频存储器来检验。调整CPU速度，使之与外围时钟精确匹配。

41中断已打开，将初始化数据以便于0：0检测内存变换（中断控制器或内存不良）从视频存储器检验之后复原；即将准备描述符表。系统插件板选择失灵。

42显示窗口进入SETUP。描述符表已准备好；即将进行虚拟方式作存储器测试。扩展CMOSRAM故障。

43若是即插即用BIOS，则串口、并口初始化。进入虚拟方式；即将为诊断方式实现中断。.44.已实现中断（如已接通诊断开关；即将使数据作初始准备以检查存储器在0：0返转。）BIOS中断进行初始化。

45初始化数学协处理器。数据已作初始准备；即将检查存储器在0：0返转以及找出系统存储器的规模。.

46.测试存储器已返回；存储器大小计算完毕，即将写入页面来测试存储器。检查只读存储器ROM版本。

47.即将在扩展的存储器试写页面；即将基本640K存储器写入页面。

48.已将基本存储器写入页面；即将确定1MB以上的存储器。视频检查，CMOS重新配置。

49.找出1BM以下的存储器并检验；即将确定1MB以上的存储器。.

4A.找出1MB以上的存储器并检验；即将检查BIOSROM数据区。进行视频的初始化。

4B.BIOSROM数据区的检验结束，即将检查＜ESC＞和为软复位清除1MB以上的存储器。.4C.清除1MB以上的存储器(软复位)即将清除1MB以上的存储器.屏蔽视频BIOSROM。.4D。已清除1MB以上的存储器（软复位）；将保存存储器的大小。.

4E若检测到有错误；在显示器上显示错误信息，并等待客户按＜F1＞键继续。开始存储器的测试：（无软复位）；即将显示第一个64K存储器的测试。显示版权信息。

4F读写软、硬盘数据，进行DOS引导。开始显示存储器的大小，正在测试存储器将使之更新；将进行串行和随机的存储器测试。.

50将当前BIOS监时区内的CMOS值存到CMOS中。完成1MB以下的存储器测试；即将高速存储器的大小以便再定位和掩蔽。将CPU类型和速度送到屏幕。

51.测试1MB以上的存储器。.

52所有ISA只读存储器ROM进行初始化，最终给PCI分配IRQ号等初始化工作。已完成1MB以上的存储器测试；即将准备回到实址方式。进入键盘检测。

53如果不是即插即用BIOS，则初始化串口、并口和设置时种值。保存CPU寄存器和存储器的大小，将进入实址方式。.

54.成功地开启实址方式；即将复原准备停机时保存的寄存器。扫描“打击键”

55.寄存器已复原，将停用门电路A－20的地址线。.

56.成功地停用A－20的地址线；即将检查BIOSROM数据区。键盘测试结束。

57.BIOSROM数据区检查了一半；继续进行。.

58.BIOSROM的数据区检查结束；将清除发现＜ESC＞信息。非设置中断测试。

59.已清除＜ESC＞信息；信息已显示；即将开始DMA和中断控制器的测试。.

5A..显示按“F2”键进行设置。

5B..测试基本内存地址。

5C..测试640K基本内存。

60设置硬盘引导扇区病毒保护功能。通过DMA页面寄存器的测试；即将检验视频存储器。测试扩展内存。

61显示系统配置表。视频存储器检验结束；即将进行DMA＃1基本寄存器的测试。.

62开始用中断19H进行系统引导。通过DMA＃1基本寄存器的测试；即将进行DMA＃2寄存器的测试。测试扩展内存地址线。

63.通过DMA＃2基本寄存器的测试；即将检查BIOSROM数据区。.

64.BIOSROM数据区检查了一半，继续进行。.

65.BIOSROM数据区检查结束；将把DMA装置1和2编程。.

66.DMA装置1和2编程结束；即将使用59号中断控制器作初始准备。Cache注册表进行优化配置。

67.8259初始准备已结束；即将开始键盘测试。.

68..使外部Cache和CPU内部Cache都工作。

6A..测试并显示外部Cache值。

6C..显示被屏蔽内容。

6E..显示附属配置信息。