毕业设计（论文）-抢淘淘网站设计与开发.docx

A基础理论 B应用研究 C调查报告 D其他岭南师范学院本科生毕业论文（设计）抢淘淘网站设计与开发二级学院：信息工程学院专 业：计算机科学与技术 （软件服务外包）年 级：2014级学 号：作者姓名：企业导师：学院导师：完成日期：2017年5 月20 日目录1 前言21.1 电子商城系统的基本知识21.1.1 电子商务系统的概念、结构和特征21.2 本系统的开发工具介绍31.2.1 Ajax概述31.2.2 MVVM框架vue的概述31.2.3后台语言node.js概述41.2.4 Web应用框架express概述41.2.5后台数据库开发工具MySQL概述41.3 本章总结42系统的需求分析52.1 电子商务系统的现状和存在的问题52.2 电子商务系统的研究意义52.3详细需求描述62.3.1 商城系统62.3.2系统后台72.4本章总结93系统的总体设计103.1 系统的功能简介103.1.1 商城系统103.1.2 后台系统113.2 系统的结构分析123.2.1 系统主界面123.3 系统的数据库设计133.4本章总结164系统的具体实现174.1配置系统数据库174.2 登录模块的实现174.3系统前后端交互方式184.4商城子系统的具体实现184.4.1 商品列表184.4.2购物车模块184.4.3 个人中心194.4.4 订单模块204.5后台系统的实现214.5.1商品分类管理214.5.2商品标签管理234.5.3商品信息管理234.5.4商品订单管理254.5.5管理员信息管理264.5.6广告管理274.6本章总结275系统的测试与分析285.1 测试的目的285.2软件测试的原则285.3测试的用例以及结果285.4本章总结296结论30参考文献31致谢3241抢淘淘网站设计与开发全套设计加扣3012250582 摘要：由于时代的发展，越来越多的人热衷于互联网购物。互联网购物可以较大程度的降低和缩减电子商务公司的运营的成本和资金的周转周期。本系统正是基于这样的需求之下，实现了买家网上购物，卖家线下发货的功能。全系统包括移动端网站的商城系统和PC端的后台管理系统。在系统中，后台使用的是node.js语言和mysql实现数据管理。前台使用的是当前流行的MVVM框架vue2.0渲染数据。在UI方面，商城子系统使用了iview框架，后台系统使用了elemeUI框架。系统还使用vue的相关插件，来实现图片懒加载和路由懒加载。以此来提高网站的页面性能，提高用户体验。关键词：网上购物；vue；node.js ；mysqlAbstractAbstract:Becauseofthedevelopment,moreandmorepeoplearewildaboutinternetshoppingwhichcancutshortandreducethee-commercecompanys operatingcostsandcapitalturnovercyclein a great degree.This system is based on those demandto achieve a wish of buyers online shopping sellers offline delivery.Total systeminclude background management system for mallsystemandPCofmobilewebsite.Thesystem,backgrounduseNode.jslanguageand mysqldatabaseto achieve data management,which front deskuse the popular MVVM frame-vue2.0 render data.On the side of UI,mall subsystemuseiviewframe and the background system use elemeUI frame.TOimplement lazy loading of pictures and lazy loading of routes,the system also use vuerelated to the plug-in,which can increase the page performanceof the web and enhanceuser experience.Key words:Shopping online；vue；node.js ；mysql1 前言近年来IT行业发展迅速，渗透在各个行业之中，为人们带来了便利。其中最为典型的就是电子商务系统的应用。电子商务应用包括了最流行的B2B，B2C，C2C等应用。其中，B2B（Business to Business）表示企业或商务集团的应用；B2C（Business to Customer）表示企业和客户之间的商务应用；C2C（Customer to Customer）表示客户和客户之间的商务应用，网络的概念早已深入人心。互联网销售、宣传在各行各业的商业战术中占据了至关重要的位置，成为了各大企业不可或缺的一部分。企业的宣传、商品销售早已不再只局限于电视与报纸，网络已成为企业展示商品的另一个大舞台。商家建立网站，将商家的企业文化、产品宣传展现于网站中。通过网络的传播，实现了如网上购物、以及基本的信息查寻等功能。这些在改变了企业原有经营方式和经营理念，也为商家带来了更高的利润。因此，对于企业来说，拥有一个属于自己的网站是极为重要的。“网上商城”实际上是运行在Web服务器中的一个Web运用程序。它可能是微信公众号、微信小程序、移动互联网网站或者是app等。这些程序软件在模拟这一般的商店的经营模式。利用页面、脚本程序、大数据处理来实现“网上商城”的销售管理等工作。互联网技术极大地降低了供需双方间的交易成本，还有较低的选择费用和更多可供选择的商品。这些优势促使商家更多地想通过电子商务商城来宣传企业产品。1.1 电子商城系统的基本知识1.1.1 电子商务系统的概念、结构和特征电子商务系统，广义上讲是商务活动中各参与方和支持企业进行交易活动的电子技术手段的集合。狭义上讲，电子商务系统则是指企业、消费者、银行、政府等在Internet和其他网络技术的基础上，为实现企业电子商务活动的目标，满足企业生产、销售、服务等需求，支持企业的对外业务协作。从运作、管理和决策等层次全面提高企业信息化水平，为企业提供具备商业智能的电子商城系统1。电子商务是一种特殊的商业行业,网站是电子商务的一个关键组成部分,电子商务企业的成功在很大程度上取决于企业的网站质量。在网站同质化严重的今天,准确把握高质量的网站,满足消费者对更优质量和服务的需求,从而提升自身的商业价值及同行竞争力,已经成为电子商务企业在面对网民暴增及同行竞争日益激烈的机遇和挑战中突围的先决条件。ECS（Electronic Commerce System）通常是指在互联网开放的网络环境之下，在全球各地进行广泛的商业贸易活动，在基于Browser/Server（浏览器/服务器模式），买卖双方在苏素未谋面的情况下，实现了消费者网上购物和在线电子支付以及各种商务活动、交易活动、金融活动和相关的综合服务活动的一种新型的商业运营模式。电子商务系统具有以下的特点：(1) 全球性。电子商务公司利用全球互联网这个平台优势，实现了供应商、代理商、合作伙伴以及顾客都可以是全球性的。它们在这个平台的交易，不存在地域障碍、国界差异，取得永久性的循环收入。这样的全球性的经济活动，使得经济全球化进程大大加快。世界个个国家的经济相互依存，信息越来越对等。(2) 敏捷性。在互联网技术和通讯技术的快速发展之下，电商企业可以快速获知发生的事件，并且快速做出反应。通过网络获取的数据，以及数据的分析，可以快速得知，市场的新需求。通过网络平台，可以快速推出新产品，满足客户的足球，控制生产，以及库存、分销等。(3) 虚拟的资金流动。在国内客用户可以通过微信、支付宝、银联、易票联等，在网上完成支付。再也不是通过纸币来进行交易。抢淘淘电商系统，是基于构建数据驱动的 web 界面的渐进式框架vue的电商网站。利用数据做开关，快速搭建电商网站系统。1.2 本系统的开发工具介绍1.2.1 Ajax概述对Ajax工作原理和数据传输性能进行分析,从响应数据的返回格式角度入手,通过实验,对比2种数据格式XML和JSON的差异与优劣,基于实际应用场景,给出权衡取舍的建议,总结出效率和安全性更高的Ajax模型,改善了目前Ajax带来的数据响应冗余的缺陷。1。1.2.2 MVVM框架vue的概述传统DOM处理需要编写繁杂的选择器,逐级操作还原服务器需要的JSON数据格式,不但操作繁琐且易出现致命错误。而通过Vue.js的响应式双向绑定数据,实时反映数据的真实变化并映射到数据源上,避免前端页面开发中DOM选择器繁杂的操作,简化Web前端开发流程和降低开放难度,提升前端开发效率,降低开发成本和周期,提升微信公众号使用的流畅性。Vue.js与Vue-router路由结合开发,配合Webpack前端打包工具,基于团队模块化开发基于微信的SPA(Single Page Application,单页应用)。2。1.2.3后台语言node.js概述现如今,有很多种Web应用程序开发语言。在Web应用程序开发过程中,大部分语言都要解决多线程问题。而且这些Web应用程序都要部署在第三方Web服务器上,如:Apache,Tomcat,Nginx等。近期一种基于I/O事件驱动模型服务器端的Java Script运行环境Node.js得到了广泛的关注和应用。通过对同步阻塞语言PHP和异步非阻塞的Node.js构建的Web应用程序做一些性能上的比较,发现在高并发请求的情况下,Node.js构建的服务器比PHP构建的应用程序的响应时间短、吞吐率高。最终得出结论 Node.js在构建快速、可扩展的Web应用程序方面的优势大于PHP。3。1.2.4Web应用框架express概述Express作为Node.js的一个Web开发框架已经被工程师们所熟知。使用该框架的各种特性可以更加方便、快速地开发出一个比较完整的Web应用程序。和其他Web开发框架一样,Express隐藏了代码背后的繁琐,开发者可以将工作的重心放在编写代码上,但Express更为优秀的是为开发者们提供了一种路由机制,分析了Express路由机制的特性,并研究该路由机制在程序开发中的应用方式4。1.2.5后台数据库开发工具MySQL概述MySQL Cluster是一个广泛使用的集群数据库，用于存储和操作MySql数据库管理系统具有无共享集群的数据，从而以低延迟提供高可用性和高吞吐量。MySQL Cluster的问题在于随着数据量的增大，处理数据所需的时间也会增加，并且可能需要额外的资源。使用Hadoop和Impala，数据处理时间可能比MySql群集更快，可能比Hive和Pig快。本文提供了初步结果。评估结果表明，即使与Hive和Pig以及MySql群集相比，Impala在某些数据分析和处理任务中也能达到可接受的性能。5。1.3本章总结本章介绍了当前电子商务系统的概念、结构等，以及本次项目使用的工具、技术等。本次开发使用了适用于快速开发的技术框架，其中包括vue、nodejs、elementUI、iview等。2系统的需求分析2.1 电子商务系统的现状和存在的问题当代市场经济就是信用经济,在此背景下的新生事物电子商务给我国中小企业的发展带来了许多的机遇和挑战：为中小企业提供了能与大型企业进行公平竞争的更为广阔的商机；B2B电子商务作为一种能有效地推动中小企业的转型的重要方式,使中小企业能开拓国内外市场、提高经济效益、增加市场机会。而另一方面,电子商务的虚拟性和不见面的交易特点凸显了网络中交易主体的复杂性以及信息不对称性,为企业带来了更大的信用风险。正如任何事物都具有两面性,电子商务为我国中小企业带来潜在的巨大的商业前景的同时,网络的虚拟性与开放性以及市场主体信用的不确定性引起的信用危机也成为其发展的瓶颈之一.信用问题却严重影响到中小企业B2B电子商务健康快速的发展,时至今日,B2B中小企业的信用问题已经成为制约电子商务进一步发展的瓶颈。许多中小企业仍持观望态度,不敢贸然进军B2B电子商务领域,尤其是交易额较大的时候。这实际上反应出他们对电子商务信用环境的怀疑。随着社会主义市场经济的发展,我国己初步确立了信用体系。但信用意识淡漠、信用法律法规不完善、中介组织发展滞后、缺少信用教育与研究等问题也层出不穷6。小很多中小型企业领导对电子商务系统的了解比较肤浅,认为开展电子商务只是一种赶潮流的行为,实际收益并不大。有些老牌企业甚至对开展电子商务持消极态度,依然把竞争的焦点放在了实体市场。它们并没有充分认识到知识经济时代抢占网络信息虚拟市场的重要性。有部分了解一些电子商务的企业领导人对电子商务的认识也存在一些比较片面性的问题。他们认为电子商务就是在网上建立一个企业网站,借以宣传企业的形象,但并未认识到电子商务给企业发展带来的可遇而不可求的机遇。由于此种现象普遍存在,导致中小型企业中，建立属于企业自己的网上商城的数量少。中小企业没有自己的网上商城少,如今用户早已习惯了网上购物。这导致实体市场的客户量越来越少，产品宣传的难度就越来越大。所以，对于企业来说，特别是销售型企业，拥有自己的官方网站是一件刻不容缓的事情。2.2 电子商务系统的研究意义随着信息科技的发展，信息已经突破了时间和地域的局限。现代生活的网络化与全球化成为了一种无法避免的时代走向。由于硬件的发展和软件科技技术的突破，互联网用户的迅速膨胀。越来越多的商家和厂商纷纷将投资资金投向因特网。因此,从最初的完善发布信息、传递信息到如今的创立网上的信息中心；从借助传统贸易手段不成熟的电子商务交易到能够直接在网上完成供、产、销全部业务流程的电子商务虚拟市场；从封闭的银行电子金融系统到方便快捷的网络电子银行，电子商务也风起云涌的发展起来了。就目前的发展形式来说，近几年电子商务还会是一个发展潜力巨大的市场。电子商务系统的双向信息沟通、加上灵活的交易手段和便利的交货方式，给社会带来了宏大的经济效益。它促进了整个社会的生产力的提高，大大加速了整个社会的商品流通。新技术的出现与应用，总汇带来一系列的变革，我们现在处于工业化相信细化转轨的过程中。网络的出现与迅速发展，电子商务的逐渐成熟，不仅改变了我们记录和传播知识的符号、改变了我们的交易方式，而且将对我们的思维方式、对我们的工作方式和生活方式都将产生根本性的影响。2.3详细需求描述2.3.1 商城系统2.3.1.1商品交易用例(1) 功能意义：用户可以选择商品分类，进行查询浏览。用户可以在此过程，添加商品到购物车。(2) 用例图：图4 商品交易用例图2.3.1.2用户信息的自维护用例(1) 功能意义：查询、浏览、删除、修改用户订单以及添加、删除、修改购物车信息。(2) 用例图：图5用户信息自维护用例图2.3.1.3商城系统事件流新用户进入枪淘淘商城的注册页面，使用手机号注册一个属于自己的账号。这时候用户就可以用自己的账号在商城登录。并且除了具有游客有的浏览商品的权限，还可以将心仪的商品加入到自己的购物车之中。之后用户就可以在购物车找到那件商品，并且提交订单。这时候购物车子系统就生成了订单，并且状态为未付款状态。当用户进入到支付页面，并且成功支付之后.订单的状态就会被更新为已付款状态。之后数据库就会返回付款成功提示给付款子系统。付款子系统在收到提示成功之后，会让购物车去清空购物车的相关商品信息。最后，卖家会看到购物成功的提示。具体的事件流如下时序图所示。图6商城系统时序图2.3.2系统后台2.3.2.1管理员信息维护用例(1) 功能意义：为商城系统后台添加管理员，来维护商城的信息和运转。(2) 用例图：图7 管理员信息维护用例图2.3.2.1商品信息维护用例(1) 功能意义：根据电子商城的本质，展示商品并时刻更新维护商品信息。(2) 用例图：图8 商品信息维护用例图2.3.2.4订单信息维护用例(1) 功能意义：管理员使用账号和口令，登录后台系统。进入订单子系统，查询相关订单。该模块准确无误的向配送人员分配配送订单，确认好产品名称，产品数量，单价，送货地址，送货时间，收货人姓名，电话等信息。然后对订单进行处理，例如进行发货等操作，确保商城的正常运转，这就是订单信息维护的基本操作。在商城中，买家浏览商品后的下单，到卖家查看订单信息，进行发货是商城的最为重要的内容，因此此模块会是商城的核心模块。(2) 用例图：图9 订单信息维护用例图2.3.2.4系统后台事件流后台管理员登录系统后台，进入商品管理子系统。在商城子系统中，管理员点击查看商品列表的操作。图10 系统后台时序图2.4本章总结本章使用面向对象的需求分析方法，对该项目的需求进行了详细的分析。本章分别从商城系统以及系统后台两个部分进行详细的需求分析。从本次的分析，我们得出了商城系统以及系统后台的事件流。3系统的总体设计3.1 系统的功能简介抢淘淘电子商城系统中，模块分解如下图所示。图11抢淘淘电子商城系统模块分解图3.1.1 商城系统(1) 用户登录：在项目前端路由中，通过requireAuth字段来记录是否需要等路才能进入。其中需要登录才能进行的操作，或者才能进入的页面有，加入购物车操作、进入个人中心模块、查询购物车。当这些操作或者页面无法进入的时候，系统会提示一个全局提示请登录，然后自动跳转到登录页面，如图12所示。图12登录模块作品截图(2) 商品模块：此模块是商城的主要模块，也就是我们常说的导购页面，主页面包括很多商品的分类列表，每个商品的分类列表都可以连向一个子导购页面。主页面主要向人们显示一些最新的商品信息或一些特价或有特色商品信息展示了商品的产品编号、产品名、销售数量、图片路径、成本价格、是否上架、产品介绍、产品分类编号、标签等基本信息。在后台管理系统中，实现了商品资料的添加和更新管理，有助于商城商品信息较为最新和丰富商城的货物，提升用户的购买热度；商品的类别管理，有助于用户能快捷的查找和浏览自己所需要的商品，也有助于对货物的管理。(3) 购物车模块：用户只有登录了才能进行交易，这是所有在线商店都要求的。你可以在浏览商品时先不要登录，但是你选择购买时，必须进行账户的验证，此时你必须登录后才能发送订单。账户管理包括账户注册，找回密码，账户登录，账户信息修改等功能。购物车中展示了商品的产品编号、产品名、销售数量、图片路径、成本价格、是否上架、产品介绍、产品分类编号、标签等基本信息展示于商品列表、商品详情页面。用户在自己的购物车查看购物记录、加入购物车的商品等。(4) 订单模块：这个模块中，用户具有查询订单和确认收货的权利。(5) 下单支付模块：用户在购物车或者商品列表中，选择商品并且生成订单，支付商品。(6) 个人中心模块：在这模块实现了用户注册、登录的功能。3.1.2 后台系统(1) 管理员登录：管理员通过账号和口令，登入到后台系统。通过ajax请求，发送了管理员的账号和密码。后台接收到系统发来的信息，nodejs连接数据库，进行账号密码的验证。(2) 管理员信息维护模块：管理员具有添加管理员的权利。系统收集管理员的姓名、密码以及权限级别，就可以新建一个管理员账号。(3) 商品管理模块：商品模块的子系统下，还有商品分类管理、商品标签管理。管理员进入商品管理子系统之后，首先要添加所需要的商品分类，以及商品标签。然后在添加商品的时候，就可以选择，该商品的分类和它所具有的标签。(4) 订单管理模块：本模块可以进行订单的查询，方便抢淘淘商城的发货人员进行发货。3.2 系统的结构分析3.2.1 系统主界面本系统主要包括商城模块、后台管理模块。本系统前端界面使用构建数据驱动的 web 界面的渐进式框架，也是当前比较流行的一个框架vue。本系统使用优雅大方的神秘紫色调以及热情的红色，来吸引更多的女性购买者该界面分为以下五个模块，如图13所示。图13主界面作品截图(1) 商城的头部通栏。商城的头部模块是一个通用的模块。它还运用商城的登录页面、注册页面、购物车页面等页面之中。在项目中，分散于不同页面的相似的头部都是应用了在vue项目中的同一个模块。该组件传入了两个参数，share和iconTheme都是Boolean类型的参数来分别表示该组件配置是否上分享功能以及返回按钮。组件通过slot标签改变标题。在组件内部使用slot标签标记区域。在使用的时候在，该组件标签内传入具有相同名字的slot标签，就会实现使用该标签内容替换子组件slot标签的内容。这种方法保证了网站风格上的统一，而且便于维护前端代码，以最快的速度响应运营部的需求。(2) 导航栏模块。导航栏是一个独立的组件。在组件内部发送ajax请求获取分类表中的分类名字和分类编号，并且储存在vue的状态管理vuex中。买家在点击导航栏的时候，通过ajax的get发送分类编号获取商品的列表信息，也储存也vuex中。这样子使得导航栏是独立的，可以放在任何一个页面之中。(3) 商品列表模块。该模块是商城的重要模块，用于展示商品的基本信息。该模块展示了商品的主图、商品名称、商品介绍、商品的售价、商品的参考价格、商品的标签以及发货仓库等信息。该模块不发送ajax请求数据，而是获取原先导航栏获取到的并储存在vuex商品列表信息。该模块中的加入购物车的红色按钮，在点击触发的时候，把当前被点击的商品信息记录在了vuex之中。该模块还使用了图片懒加载技术，来优化网站的性能。(4) 尾部工具栏模块。尾部的工具栏也是商品的通用模块。此模块传入了一个number类型的数值，用于配置那个工具栏是激活状态。工具栏中除了跳转地址、提示词、图标不同之外，标准的css盒子模型都是相同的。所以，通过一个数组来提取出了，不同的参数。使用v-for来遍历数组渲染数据，实现数据分离，减少代码的耦合性。(5) 商品规格面板。在该模块中，具有一个监听当前productSpec变量的值变化的函数，也就是当前被点击的商品信息。在商品列表的按钮点击的时候，组件内部发送ajax请求获取到当前的商品的规格信息，并且将以json返回的商品的规格信息渲染与页面之上。商城的通用遮罩层渐显于页面，同时规格面板会从下面慢慢滑上来。在规格面板可以点击加入购物车按钮，在选择了商品规格的前提之下，组件会以post的方式，发送商品编号、用户选择的商品规格、用户编号以及用户选择的数量。在后端中，首先判断用户购物车是否已存在该商品。若存在，则在原来的数量加上现在的数量，否则新插入一条数量用于记录购物车信息。本系统使用商城部分使用前端UI框架iview，使用vue实现双向数据绑定，vuex存储全局变量，并且通过sessionstorage存用户登录过后的后端返回的token，实现了用户登录。管理系统部分使用前端框架elementUI。其中商城部分写了不少组件。例如购物车组件，通过简单的使用方法就可以在网站内的任何页面中快速引入。vue中模块化的思想，既方便前端代码的维护，也确保了网站的风格的统一性。3.3 系统的数据库设计本系统重要模块/重要功能、具有一定代表性的表细述。(1) 用户清单表，用于记录本网站用户的会员编号、会员名、密码、电话、电子邮件、用户角色、真实姓名、地址等信息，如表1所示。系统会员登录、注册、修改密码、下订单时，将访问本表。此表由系统管理负责维护，以及用户自己在商城系统的个人中心、修改密码页面维护。表1用户清单表字段名数据类型长度允许空否说明uidint5否会员编号unamechar20允许会员名passwordchar20允许密码phone_numint11否电话emailchar20允许电子邮件rateint1否用户角色real_namevarchar20否真实姓名addressvarchar200允许地址(2) 系统管理员表，用于记录本网站系统管理员的管理员编号、管理员姓名、密码、权限等信息，如表2所示。后台管理员登录时，将访问本表。此表由高级管理负责维护。高级管理员可以通过系统后台向此表，添加管理员、删除管理员等操作。表2系统管理员表字段名数据类型长度允许空否说明admin_idint4否管理员编号admin_namevarchar40允许管理员姓名passwordvarchar30否密码permissionsint1否权限(3) 商品表，用于记录本网站产品的产品编号、产品名、销售数量、图片路径、成本价格、是否上架、产品介绍、产品分类编号、标签等信息，如表3所示。表3商品表字段名数据类型长度允许空否说明pro_idint10否产品编号pro_namevarchar60否产品名sale_countInt4允许销售数量imagevarchar800否图片路径pricevarchar40否成本价格stacktinyint1否是否上架decriptmediumtext允许产品介绍sor_idint8否产品分类编号tagstext90允许标签(4) 商品标签表，用于记录本网站产品的标签编号、标签名、添加时间等信息，如表4所示。本网站查询商品信息时，将访问本表。此表由系统管理员负责维护。商品标签是商品的一个属性，在查询商品的时候，通过商品表的tags商品标签编号字符串来，取得商品标签对应的名字tags_name。因为展示于用户的有效数据还是标签名称，而不是标签编号。表4商品标签表字段名数据类型长度允许空否说明tags_idint10否标签编号tags_namevarchar40允许标签名add_datadatetime否添加时间(5) 购物车表，用于记录本网站用户的购物车的购物车编号、用户编号、产品编号、加入购物车时间、数量等信息，如表5所示。本网站查询用户购物车信息时，将访问本表。此表属于用户自维护信息，用户可以在购物车中，对信息进行编辑。表5购物车表字段名数据类型长度允许空否说明cart_idbigint20否购物车编号user_idvarchar10否用户编号pro_idint10否产品编号cart_datadatetime6允许加入购物车时间cart_countint11否数量(6) 订单简略信息表，用于记录本网站用户订单的描述编号、描述编号、产品编号、价格、订购数量等简略信息，如表6所示。本网站查询用户订单的简略信息时，将访问本表。该表通过entry_id字段来获取在订单详细表中，获取订单的详细信息。表6订单简略信息表字段名数据类型长度允许空否说明entry_idint10否描述编号order_idint10否订单编号pro_idint10否产品编号priceint20允许价格countint4允许订购数量(7) 订单详细信息表，用于记录抢淘淘电子商务系统的用户订单的订单编号、生成订单的编号、订单处理标记、收货姓名、收货地址、收货人电话、付款方式、会员编号、备注说明、订单生成时间等详细信息，如表7所示。本网站查询用户订单的详细信息时，将访问本表。考虑到用户可能会随时更改用户名、地址、联系方式等。所以在生成订单的时候，将用户的当时的地址等插入该表，用户记录。表7订单详细信息表字段名数据类型长度允许空否说明order_idint10否订单编号order_novarchar50否生成订单的编号user_idint10否会员编号send_namevarchar40允许收货姓名send_adressvarchar200允许收货地址send_phonevarchar40允许收货人电话paymentvarchar20允许付款方式menovarchar200允许备注说明timedatetime允许订单生成时间tagint4允许订单处理标记(8) 商品分类表，用于记录本网站商品的产品分类编号、分类名、添加时间等信息，如表8所示。本网站查询产品的商品分类时，将访问本表。表8商品分类表字段名数据类型长度允许空否说明sor_idint4否产品分类编号sor_namevarchar40允许分类名add_datadatetime允许添加时间3.4本章总结章节主要介绍系统的总体设计，内容包括介绍了系统定位，详细说明了系统的功能需求，也对需求分析到功能需求设计以及数据库设计进行了详细的说明。系统设计是根据系统分析的结果，运用系统科学的思想和方法，设计出能最大限度满足所要求的目标 (或目的) 的新系统的过程，也是整个系统开发必不可少的一部分。4系统的具体实现4.1配置系统数据库为了方便系统用户的使用和系统的可移植性，本文简化了数据库的配置过程和方式：(1) 在主机上安装mysql和本系统。(2) 通过mysql中的企业管理器，在其数据库项下用附加功能附加一个数据库：附加时填写要附加的数据库的sql文件时选择由本系统开发人员提供的qtt.sql文件。(3) 本系统是使用node.js连接数据库，引用npm库中的mysql插件，结合express框架搭建了商城的后台系统。代码1抢淘淘网站系统mysql数据库连接代码/mysql数据库配置varmysql = require(mysql);var connection = mysql.createConnection( host: localhost, user: root, password: mingming2014, database: qtaotao);/获取所有商品分类信息- 接口-sort/allapp.get(/sort/all, function(req, res) let sorName = req.body.sor_name; let dataJson = initJson;connection.query(select * from sort, function(error, results, fields) if (error) throw error;res.status(200); dataJson.msg = 成功;dataJson.data = results;res.json(dataJson); ););在代码1的程序段中主要用到了nodejs操作mysql数据库。4.2 登录模块的实现商城子系统和后台系统是分开的两种的不同类型的用户。在数据库中，分别用user表和admin表来储存。这样设计方便数据库对用户的信息管理。考虑到如果存储同一张表，后端代码的耦合性会很高。本模块的主要意义是保证系统的安全性。该模块的具体流程，如图15所示。图15登录流程图4.3系统前后端交互方式本系统前后端采用json进行数据交互。使用express框架中的body-parser模块，返回json格式的数据给前端。异步加载数据，在极大地程度上增加用户的体验。Json总体格式如下，其中code参数的意义是数据库操作是否成功，返回值200表示成功，400表示失败。msg是后端的返回的用户提示信息。如若返回的数据有参数的，则放在data数组之中。在系统前台，如果code为400，则会全局提示失败信息。否则，根据具体的业务流程，前端判断是否显示提示信息。4.4商城子系统的具体实现本模块主要包括了商品列表、购物车模块、个人中心模块、订单模块四大子模块。4.4.1 商品列表在上述的商品主页面已经详细介绍过商品列表。下面补充说明一下，当商品分类很多的时候，本系统怎么进行交互的。用户点击在商品分类的导航栏中的下拉按钮，这时候所有的分类会在分类面板中展示出来。点击某一个项，会发送请求给后端，后端返回该项的内容展示在商品列表。并且面板和遮罩层会滑动上去。在商品列表跳转到商品的详情页面的时候，是通过将商品的编号放在导航栏里面。然后在商品详情页面初始化的时候，获取到导航栏里面商品的编号。这时候，商品详情组件发送ajax想后台获取商品的详情信息。并渲染在页面。4.4.2购物车模块购物车处于用户自维护信息的模块，只有在用户登录之后才能进入。在购物车中具有两种状态，一种是购物车为空时，使用的是一个svg图片展示效果，并且提示用户去商品列表逛逛，引导用户购物。一种为用户购物车有商品，此时想客户展示他的购物车的商品的一些简略信息。具体效果，如图16所示。在购物车中，可以改变用户购物车商品的数量。此时前台想后端接口发送购物车编号、商品编号、以及商品的数量。此处只写了一个接口，不是采用多个接口，分开购物车商品数量的增加或减小。用户勾选商品，前台计算价格，展示给用户。用户在下单生成订单的时候，后端收到前端发来的用户的编号、商品编号、商品数量。后端计算价格并返回给前台页面。在购物车中，不同规格的同一种商品的是分开不同的展示面板。16购物车作品截图4.4.3 个人中心如图17所示，用户在登录之后可以进入个人中心，在个人中心中可以修改密码，以及查看个人的订单。在修改密码操作的时候，用户输入原有的密码，以及新的密码和再次确认密码。后台在校验用户名和张妈密码正确的情况之下，会将新密码更新到数据库表中，并且返回信息，提示用户修改成功。对于一些只有在登录之后才能访问的页面，用户在点击进入该页面的操作的时候。路由拦截器会判断该用户是否已登录。如若没有登录自动跳转到登录页面。并且在登录成功之后，直接跳转到用户当初想进入的页面。该功能是通过，将组件名称记录在导航栏里面。验证登录成功之后，直接跳转。如果没有记录，则直接跳转到商品列表页面。图17个人中心作品截图4.4.4 订单模块(1) 买家在个人的购物车提交订单生产订单。此时前台给后端送用户的编号、商品的编号、以及对应的数量。考虑到安全性的问题，商品的价格是后端计算。后端接收到商品的编号以及商品的数量之后，在商品表中，查找每个商品当前的价格，并插入到数据库中。因为如果不插入当前价格，当商品价格变动的时候，无法获取到当时用户购买的价格。在提交订单之前，用户看到的价格还是前端的计算价格。如图所示的实付金额，就是前端计算的价格，需支付的金额则是后端计算的价格。当用户确认支付订单成功后，后端原来的1状态（待付款）改变为订单的状态为2（未发货）。具体效果如下图所示。图18提交支付订单作品截图(2) 在订单提交成功之后，后端会在用户购物车中删除相应的商品。当用户再次进入购物车查看，就找不到已经下单的商品。如下图所示。图19提交支付订单作品截图(3) 用户可以在个人中心中查看自己的订单的状态。订单状态分为待付款的订单、待发货的订单、待收货的订单、已完成的订单以及售后订单。如图20所示。图20个人中心订单列表作品截图4.5后台系统的实现本模块主要包括了商品分类管理、商品标签管理、商品管理、用户信息管理、订单管理、管理员信息、广告管理管理六个模块。4.5.1商品分类管理(1) 添加商品分类在商品分类表中，商品分类名称sor_name是惟一的。在添加商品分类的时候，后台判断该商品分了名称是否存在。如若存在，则返回code为400的失败标记。前端页面会在后台系统中提示用户已存在该分类。后端具体实现如下，首先在数据库查询是否存在该分类名称，如果返回的结果长度为0，那么就向数据库插入该分类名称。商品分类的功能是为了方便管理员管理商品，以及买家在商城子系统中，可以快速查询商品信息。添加商品分类的具体实现，如代码3所示。代码3 添加分类实现代码/ 添加商品分类app.post(/sort/add, function(req, res) let sorName = req.body.sor_name; let dataJson = code: 200, msg: 提示信息, data: ;connection.query(select * from sort where sor_name = + sorName+ , function(error, results, fields) if (results.length) res.status(200); dataJson.msg = 已在该分类;dataJson.code = 400;res.json(dataJson); else connection.query(insert into sort(sor_name,add_data) values(?,?), sorName, new Date().toLocaleString(), function(error, results, fields) if (error) throw error;res.status(200);dataJson.code = 200; dataJson.msg = 分类添加成功;connection.query(select * from sort where sor_name = + sorName + , function(error, results, fields) dataJson.data = results;res.json(dataJson); ); ); ););(2) 删除商品分类除了实现单个删除的功能之外，还是实现了批量删除的功能，分为意见删除全部和勾选选择型的输出。用户操作删除的时候，前台向后端发送一个分类编号的数组。(3) 编辑商品分类用户可以在前台修改商品分类的名称。(4) 商品分类数据的导出图21商品分类管理作品截图4.5.2商品标签管理商品标签管理实现了添加商品标签、修改商品标签名称删除商品标签以及导出为表格。图22商品标签管理作品截图4.5.3商品信息管理(1) 添加商品在此模块中，实现了图片上传预览的功能。图片是在选择的时候，就上传到了服务器。前端input标签接收到用户的数据图片之后，使用ajax表单提交到后端。后端使用express中的mutipart和mutipartMiddeware是实现了图片的接收。后台在接收到数据之后，首先把它存放在./public/img目录之下，并且生成了随机名字，例如0eQ9kGELxoS5ESegFixIcfP5.jpg。后端存储图片成功之后，并没有写入数据库。而是将图片的地址，通过json返回到后台系统。前端直接改变vue的model层数据，然后vue的双向数据绑定的特性，直接将图片渲染与页面之上。在提交商品的数据的时候，会将图片路径放在image字段中，发送到后端。如果要实现，图片预览还要后端搭建文件服务器。本系统使用到的是express中的static方法，搭建了文件服务器。在这个模块中，前端获取到了所有储存在数据库的商品分类信息，以下拉框的形式显示供系统管理员点击选择商品。管理员在页面浏览到的是商品分类的标签，但是储存在数据库的商品表中的是商品标签的编号。具体效果如下图所示。图23后台添加商品作品截图(2) 商品模块出了添加商品，还实现了单个以及批量删除商品的功能、以表格形式导出的功能。该功能的展示在商品列表之中。关于商品列表的查询，由于商品表存放的分类和标签都是编号，而不是各自的名称。因此在实现商品列展示的时候，在获取到了商品信息，还要到标签表和分类表中，查找它们各自的名称。接口的实现具体代码如下，代码4 商品查询后端接口的实现/获取商品列表接口vartagsArr=;app.get(/product/list, function(req, res) let sort_id=