基于微信平台的“衣服秀”与色彩搭配的商城系统的设计与实现

摘要从互联网的发明到快递业务的崛起，这两者之间最重要的连接桥梁就是电子商务。如今，电子商务的兴起让越来越多的人选择在网上进行购物，而微信小程序的简约方便，更是受到了全国各地客户的青睐。一方面，微信小程序不仅可以帮助客户免除下载APP这个麻烦的步骤，而且还可以做到转发、分享、记录历史以及好友数据共享等功能，非常方便客户的日常购物；另一方面，微信小程序的平台可以为商家省下不少的开发费用以及平台管理费用；同时其强大的功能还能给商户提供一定的引流量。对于开发者来说，我们可以快速的开发一个小程序，并不需要太复杂的工程去构建一个框架；而维修方面，我们也可以做到低成本、高效率的修复BUG，这样子可以大大的提高开发者的开发兴致同事提高设计效率。衣服是人们日常生活的必需品，而中国社会的繁荣发展，让更多的市民在购买衣服的时候不仅仅局限于穿着的表面。如今，衣服的品质，牌子，穿着的搭配与颜色的构成受到了客户的重视。本次实验设计的小程序开发项目，不仅仅可以满足客户对购买衣服的最基本的要求，还可以为客户提供更多真实、有想法、新颖的服装搭配资讯，充分的考虑到每个顾客的想法与需求，通过微信开发者工具，利用JS、WXML、WXSS以及云开发等相关技术，打造一款全新的小程序购物平台，让消费者都能对自己的购买到的商品充满自信、感到满意。关键词：小程序购物商城JS云开发AbstractFromtheinventionofInternettotheriseofexpressservice,themostimportantlinkbetweenthetwoise-commerce.Nowadays,theriseofE-commercemakesmoreandmorepeoplechoosetoshoponline,andthesimplicityandconvenienceofwechatsmallprogramsarefavoredbycustomersalloverthecountry.Ontheonehand,wechatappletscannotonlyhelpcustomersavoidthetroublesomestepsofdownloadingapps,butalsodothefunctionsofforwarding,sharing,recordinghistoryandsharingfriends'data,whichisveryconvenientforcustomers'dailyshopping;ontheotherhand,wechatapplets'platformcansavemanydevelopmentcostsandplatformmanagementcostsformerchants;atthesametime,itspowerfulfunctionsalsoItcanprovidemerchantswithacertainamountofdrainage.Fordevelopers,wecanquicklydevelopasmallprogramwithouttoocomplexengineeringtobuildaframework;intermsofmaintenance,wecanalsorepairbugswithlowcostandhighefficiency,whichcangreatlyimprovethedevelopmentinterestofdevelopersandimprovethedesignefficiency.Clothesarethenecessitiesofpeople'sdailylife,andtheprosperityanddevelopmentofChinesesocietymakemorecitizensnotonlylimitedtothewearingsurfacewhentheybuyclothes.Nowadays,thequality,brand,matchingandcolorcompositionofclothesarevaluedbycustomers.Thesmallprogramdevelopmentprojectdesignedinthisexperimentcannotonlymeetthemostbasicrequirementsofcustomersforpurchasingclothes,butalsoprovidecustomerswithmorereal,thoughtfulandnovelclothingmatchinginformation,fullyconsidertheideasandneedsofeachcustomer,andcreateabrandnewonebyusingJS,wxml,wxss,clouddevelopmentandotherrelatedtechnologiesthroughwechatdevelopertoolsSmallprogramshoppingplatformenablesconsumerstobeconfidentandsatisfiedwiththeproductstheybuy.Keywords:appletshoppingmallJSclouddevelopment目录1 绪论 .绪论1.1.开发背景及意义自从腾讯公司在2011年11月推出“微信”这款即时通讯的应用程序以来，使用该程序的用户每年呈几何形式的速度在增长，截止2016年的第二季度，全世界每个月已有累计超过8.06亿的用户在使用微信。微信的“简洁”、“方便”已经成为了人们在智能通讯时代沟通的主要工具，而腾讯公司也借着这股“东风”，在2017年1月正式上线“小程序”，为广大人民在生活上带来了更多的可能性。尽管APP的发明比小程序要早上好多年，开发技术也相对小程序而言比较完善，但是其操作流程的繁琐复杂以及系统服务器的不稳定性给许多用户留下了不好的印象；而此时，小程序的简单方便以及其强大的捆绑性（与微信）让越来越多的用户选择使用小程序进行购物、娱乐、资讯等。自从“淘宝”、“天猫”等一系列线上购物商城的出现，人们选择网上购物已然成为了一种潮流风向。据统计，服装类的消费总比占据了所有商品种类的41％以上，很显然，线上购买衣物已经成为了人们生活中必不可少的一部分。通过设计本次小程序，我们既可以为有需要的公司提供合理化、多样化、智能化的管理系统，还可以为客户提供更加全面、便捷、时尚的购物平台，更有利于推广相关的产业产品。因此，根据目前的线上消费形式，选择了服装小程序，设计这个题目。1.2本文研究的目的与贡献虽然目前大部分人都选择网上购物，而且服装类的比重也占据了消费市场很大的一部分，但是随着国家的繁荣以及社会的稳定发展，人们对于服装的要求也会有所提升。人们不仅仅是要求服装能够合穿，能够保暖，还会想要在服装的设计上增添许多元素，诸如“质量”、“款式”、“时尚”等；对于服装公司而言，拥有一款相对稳定的小程序作为服装的发布平台，同时，通过管理该平台，商家可以打造出属于自己特有的“服装影响力”，营造更好的销售氛围是必不可少的。然而目前市面上的线上商城大部分都只是围绕“数量”上的突破，而忽略了“质量”上飞跃；而目前市面上的商城APP又太过于笼统，操作系统又繁琐且不稳定，这往往很难让顾客以及商家实现双赢。因此我希望通过这次小程序的设计，可以对小程序服装商城有一定的冲击，通过研究以及学习其中的设计原理和代码逻辑，实现人们对于服装类“精益求精”的态度，满足公司以及顾客的消费需求。1.3课题在国内外研究现状从上世纪90年代开始，国人对服装的要求从原先的“笼统单一”，逐渐变成现在的“五花八门”。随着国内经济的提升，服装市场的更多可能性也逐渐向市民打开。近年来，国家社会的迅速稳定发展也为许多服装生产商带来了很多商机，特别是电子商务的蓬勃发张，也让人们从线下购物逐渐转到线上购物中去。根据社科学院《2019年中国电子商务市场调研报告》显示，中国国民在网上购物的的经历在所有网民中占81.3％，其中服装以及配饰分类在网购销售额排名第三位。然而，目前中国虽然已经成为世界上最大的服装加工厂，但是我国拥有世界知名品牌几乎少之又少，品牌对于国际市场的号召力不足，也无法满足市民对于服侍品位的提高的要求。相对于国内而言，国外的服装品牌在国际上具备一定的影响力，其设计以及潮流因素都能够左右市场的穿衣风格。然而，由于地理位置以及人口密集程度的不同，国外线上购物的经验却远远不足国内，这导致许多外国品牌的服装有很大一部分涌入国内线上市场，使国内服装品牌的地位再一次受到动摇。小程序不仅仅可以解决传统网站的以及APP的大部分问题，还可以拥有便捷、不占内存等优势。利用小程序本身的优势，制作本次课题设计，宣传国内、国外一些知名的服装品牌，让国内服装能够重新给国民带来信心。1.4.本文研究内容和设计结构本次课题主要分为背景分析、开发系统分析、样式设计、实践开发、功能测试、发布总结这几个环节进行，在开发过程中，采取资料搜索、文献查看、调查调研等方法进行系统地、可实施地的小程序开发。本次小程序开发主要用到JS、小程序内部代码以及云开发技术完成后台的搭建。详细如下：背景分析：根据目前小程序的使用率以及针对电子商务消费结构组成的分析，结合国内外研究的现状，同时再整合自己已有的对小程序开发的知识以及对小程序的理解，研究本次课题，并开始着手设计小程序。开发系统分析：研究本次课题开发项目需要用到开发技术、软件以及硬件等。结合校内学习到的相关知识，以及借助网络和书籍有关小程序的开发技术讲解，对开发技术的相关核心知识进行一定的知识储备。同时对小程序样式以及功能框架有一定的方向，部署系统功能，详细设计系统样式。文献查看：这个环节借助校内外的资源，查阅相关的小程序设计以及APP设计，同时参考网上资源以及调研数据，分析客户需求以及目前小程序文案设计的风向。在寻求文献过程中，不忘借助目前国内比较知名的购物平台做参考，整理其优缺点，方便优化自己的课题设计。发布总结：从理论知识的学习储备，到界面的设计规划，最后到实践开发，一步接一步地进行。不仅仅是单向性的方向，在实践开发遇到了苦难，以会双向性的进行学习、规划、开发，根据功能需求进行详细的设计，后台的整理，并最终实现完整的小程序。同时尝试将小程序上线并发布，测试其功能的稳定性和小程序本身的可行性。总结其中的相关开发技术、检讨自己的不足。本次设计的小程序服装购物平台主要包括前端样式的设计以及云开发后台数据的管理两大部分。前端设计包括：登录注册页面、首页、详情页面、购物车、订单页面、支付页面等；而后台数据管理主要是利用了小程序自带的云开发存储数据，包括了：对产品数据的储存、修该；用户信息的存储和回调等。2.小程序系统分析2.1小程序需求分析尽管目前市面上已有许多APP以及购物网站可以支持人们网上购物，但是其存在的不确定因素比较多，诸如网络卡顿、操作繁琐、占据内存等不利影响还存在；而小程序的简单、快捷以及与微信的捆绑性强这几个优点恰恰可以弥补以上的不足之处，还提供给用户更多的选择以及为他们带来更好服务。与商家而言，小程序的管理要比网站以及APP容易上手得多，同时后台数据更加直观，热点追踪更加直接，能够更好的对产品以及消费者有一个更加全面、直观的了解。而对于开发者来说，微信小程序的开发因为其存在云开发的功能，相对于网站设计以及APP创建来讲，开发难度相对会少一点，同时也可以集后台数据、前端设计与一身，更加方便操作与调试。2.2小程序性能分析根据上述小程序的需求分析，结合目前市面上比较热门的购物APP和网站，本次课题的小程序购物商城分为四大板块进行：首页、分类页、购物车和个人中心。为保证每个用户的安全性，我们还将设计注册、登录流程，为了应对每个用户的不同需求，还将增设地址添加页面和密码修改页面。2.3小程序应用概述微信小程序是一款人人都能够使用的手机应用，只要我们绑定了自己的微信号，通过“扫一扫”或者直接搜索就可以打开的应用。使用微信小程序，用户可以进行订阅、购物、游戏等一些列操作，并体验到小程序为我们生活带来的诸多便利；对于管理者来说，我们可以按照自己的需求设置小程序的规模。在这次的服装商城小程序的开发中，我以“个人”的身份注册小程序账号，获取到属于自己的APPID，利用小程序相关的技术知识开展课题的设计与实现。2.4开发者工具本次课题项目的开发，我主要是通过微信开发者工具来实现小程序的设计。开发者工具可用于对小程序进行代码的编译、后台数据的管理以及小程序的发布等。在使用小程序调试的过程中，开发者可以完成小程序的API和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。2.5小程序配置小程序由基本的三个配置框架组成，分别是：全局配置、页面配置、和sitemap配置。全局配置简单来说就是小程序进行每个页面（也就是全局变量）所申明的变量；页面配置则是每个小程序单独的页面可以使用的.json文件对要使用的页面的窗口进行配置；至于sitemap配置则是小程序根目录下sitemap.json文件用于配置小程序以及其页面是否允许被索引。2.6小程序开发语言在小程序开发中，主要由JS语法、JSON配置、WXML模板、WXSS样式这四大板块组成小程序的开发语言。我们在做小程序开发中，除了后台数据的处理外，也主要是围绕这四个板块进行样式的设计以及逻辑交互的实现。现在对这四个板块进行描述：JS逻辑交互：小程序的主要开发语言是JavaScript，一般我们简称“JS”，它是一种具有函数优先的轻量级，解释型或即时编译的编程语言。我们使用JS大部分情况都是用于网页设计的开发，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。JSON配置：JSON是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。本次课题设计的JSON配置，主要是用作外部配件的引入。WXML模板：WXML模板与网页设计中的HTML类似，其中HTML是用来描述当前这个页面的构造。在小程序中，WXML的作用与HTML类似，它们都是由标签、属性等构成。但是由于开发环境不同，它们的也会有不一样的地方，类似标签名字以及“wx:if”、“wx:for”等属性的表达都会有所不同。WXSS样式：与“WXML”相似，WXSS具有CSS大部分的特性，但是其在CSS的基础上也有一些新的拓展与修改。在WXSS中，小程序新增了尺寸单位，开发者可以免去尺寸换算的烦恼，利用新尺寸“rpx” 即可交由小程序底层进行自动换算。2.7云开发本次课题设计，我采用了微信小程序自带的“云开发”后台环境搭建后台，存储数据。这个功能非常强大，开发者无需搭建服务器，即可使用云端能力。在云开发中，开发者可以使用云函数编写自身业务代码逻辑、也可以利用数据库在小程序前端操作，或者在云函数中读写JSON数据库；同时云函数还拥有存储、调用等功能，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。3.小程序总体设计3.1小程序总体设计框架经过一段时间的调研我们发现，目前市面上比较受欢迎的网站以及APP都拥有前端与后端两种技术相结合的操控。为了本次项目的顺利开发以及用户体验感，本项目小程序的开发也围绕前端与后端两部分进行。前端主要包括：注册、登录、商品浏览、支付、搜索等功能；而后端主要包括：用户信息存贮、商品数据的“增、删、改、查”、订单数据的管理等功能。根据小程序的特点再结合用户以及管理员的需求，本次服装商城小程序主要分了两个层面进行设计，分别是前端，即为客户端；还有后端，即云开发数据库后台所组成。用户通过前端进行小程序的页面操作，操作的指令数据会通过相对应的ID传入到后台数据库，从而获取存储在后台的相对应数据，再传回给前端用户。图3-1小程序前后端功能表前端后台注册地址数据登录轮播图数据商品浏览分类数据添加至购物车购物车数据支付购物首页菜单数据订单查询订单数据余额充值产品数据密码修改用户数据3.2小程序前端功能详细描述接下来对本次小程序前端设计的功能进行详细的描述：注册：用户填写相对应的注册信息，根据流程进行操作，即可把数据传入到后台，待数据录入后即可用于登录小程序。登录：用户进行小程序的登录操作，成功后系统会自动跳转到首页，此时用户可以进行商品的浏览等操作。商品浏览：用户成功登录后，小程序会自动跳转到首页。此时首页的样式、数据等都会显示出来并供用户浏览。除了首页之外、用户还可以在详情页、购物车、分类、个人中心等页面进行自由的切换和浏览，实行一定的基础操作。添加至购物车：用户可以对喜欢但是还不确定要不要立即购买的产品进行暂时添加至购物车的操作。在购物车页面可以知道之前已被加入购物车的商品，同时用户可在购物车页面进行商品的购买、删除、添加等功能。支付购物：用户可以购买商品，输入支付密码成功后页面会自动跳转到订单页面，方便用户查看。订单查询：订单页面显示用户下单的情况，判断自己是否付款，订单是否完成等操作。余额充值：用户可以通过虚拟的充值，对账户余额进行数字上的变动，同时后台也会记录相应的数据变化。密码修改：用户可以根据自己的需求，修改登录密码或支付密码，成功后会返回初始页面，用户重新进行登录操作。图3-2小程序前端功能图3.3小程序后台详细功能描述接下来对本次小程序前端设计的功能进行详细的描述：地址数据：用户在地址页面填写收货地址，系统会获取地址数据，并把数据传给后台，后台将会记录用户登记的收获地址并且储存。轮播图数据：对首页轮播图的图片数据进行管理，可增加数据或删除数据，存储图片数据和上传图片路径。分类数据：对产品进行分类，获取产品的ID，可在后台对分类名称进行修改、更换。购物车数据：用户把商品添加都购物车后，系统会获取购物车的数据，数据包括商品的ID、分类、名称、价格、图片等，当用户增加数量或删除商品时，后台数据也会实时更新。首页菜单数据：对首页的菜单栏数据进行存储管理，可存放ID、名称和图片路径。订单数据：用户支付订单后，系统会获取订单的数据，数据包括商品的ID、订单号、订单时间、收货地址、联系人等数据。支付状态也会随用户的操作而实时更新。产品数据：对产品数据进行编辑和储存，数据包括商品ID、细节图、名称、价格、图片路径等。用户数据：用户注册时的数据会自动存储到后台中，同时小程序会自动获取用户的OPENID，对用户进行的密码操作、余额充值等后台也会进行实时更新。图3-3小程序后端功能图3.4小程序界面结构设计本次服装商城小程序根据前文提到的设计需求分析进行布局的，根据小程序的特点再结合用户以及管理员的需求，小程序主要分了两个层面进行设计，分别是前端，即为客户端；还有后端，云开发数据库后台所组成。用户通过前端进行小程序的页面操作，操作的指令数据会通过相对应的ID传入到后台数据库，从而获取存储在后台的相对应数据，再传回给前端用户。现在对小程序总结结构总结为下图3-4所示：图3-4小程序界面结构图3.5界面设计逻辑小程序的主要界面设计有四大板块，分别为首页、分类、购物车、个人中心，现在以首页和购物车页面为例子，对界面样式的设计以及实现逻辑的功能算法做出解释。3.5.1首页用户注册登录成功后，系统会自动跳转到首页，首页包含搜索栏、轮播图、菜单栏、产品栏、底部导航栏。首页样式设计如图3-5所示：图3-5首页样式设计图在首页中，轮播图、菜单栏以及产品栏的数据主要依靠后台数据库对图片路径的上传以及图片本身的数据存储实现。用户通过点击产品栏上的商品，系统会自动获取此商品的ID，当后台获取到ID后，页面会跳转到相对应的商品详情页，具体业务流程如下图3-6所示：图3-6首页产品栏具体业务流程图3.5.2购物车用户在商品详情页把商品加入购物车后，首页底部购物车导航栏会出现提示图标，同时在购物车页面会显示用户以往的添加记录。购物车样式设计如图3-7所示：图3-7购物车样式设计图在购物车页面中，用户不仅可以看到原本已经添加的商品信息，还可以进行增加数量、产出商品、付款等操作，页面也会累计商品的价格供用户参考。购物车具体业务流程如下图3-8所示：图3-8购物车具体业务流程图3.6小程序后端数据存储表格设计表3-9用户表单数据：Table：users用户表序号字段名称字段类型字段描述备注1_id主键小程序调用2_openid微信统一ID小程序调用3balanceNumber用户余额如果用到余额就显示4isOnlineNumber是否在线个人版无法获取用户手机号模拟微信授权登录使用5moneyNumber用户资金一般使用这个字段6operationString后台操作员现在程序只判断是否为空不能判断是什么角色的操作员7payPwdString支付密码暂时没有使用密码加密功能8pwdString登录密码暂时没有使用密码加密表3-10产品表单数据：Table：products产品表序号字段名称字段类型字段描述备注1_id主键小程序调用2_openid微信统一ID小程序调用3Class_typeString分类商品分类，同class_type表的数据相同4countNumber销售数量5detailImageArray存储产品轮播图多张图片6detailInfoImageArray存储产品详情图最多可以储存9张图片7srcString产品图片8priceNumber产品价格表3-11分类表单数据：Table:class_type分类表序号字段名称字段类型字段描述备注1_id主键小程序调用2_openid微信统一ID小程序调用3nameString产品分类名称表3-12订单表单数据：Table：orders产品表序号字段名称字段类型字段描述备注1_id主键小程序调用2_openid微信统一ID小程序调用3detailsarray用户购买产品详情多个商品，如果是一个商品也需要用array.push封装4orderCodestring订单编号用日期自动生成的订单编号5orderTimestring创建订单时间用日期格式化后的时间6shoppingAddressstring收货地址7shoppingMobileString收货人联系方式8shoppingPersonstring收货人9statusnumber订单状态表3-13地址表单数据：Table：address产品表序号字段名称字段类型字段描述备注1_id主键小程序调用2_openid微信统一ID小程序调用3addressarray用户收货地址4addressNamestring用户详细地址5contactstring收货人6mobilestring收货人电话7userIdString用户ID表3-14首页轮播图表单数据：Table:banners轮播图表序号字段名称字段类型字段描述备注1_id主键小程序调用2_openid微信统一ID小程序调用3srcString广告图片路径4urlstring点击广告需要跳转的地址表3-15购物车表单数据：Table：cart购物车表序号字段名称字段类型字段描述备注1_id主键小程序调用2_openid微信统一ID小程序调用3productObjiect用于储存购物车的对象4.小程序详细设计与实现4.1小程序客户端的详细设计与实现4.1.1客户端整体设计与实现用户打开小程序时，客户端会要求用户进行登录操作。已经注册过的用户可直接用之前的账号进行登录，还没注册过的用户可以进行注册操作。在注册的过程中，数据会传输到云开发的后台进行存储，成功进行注册后系统会返回登录页面要求用户进行登录。登录过程中，用户输入注册好的账号与密码，此时系统会进行判断，确认用户的信息与后台的数据匹配。成功登录后系统会跳转到首页，后台的数据也会传输到客户端给到用户浏览，至此用户可以在小程序上进行商品浏览和支付购物等操作。本次项目用户的所有操作都可以通过屏幕上的操作进行事件的触发，操作类型包括了手指点击、滑动操作以及键盘输入等。小程序的触发事件主要依靠JS生命周期函数负责数据的监听。本次项目的数据库使用到了微信开发者工具上自带的云开发进行后台数据库的搭建。云开发为开发者提供了一整套云服务以及相对简单容易操作的API接口和管理界面。云开发具备云函数、数据库、存储、云调用的功能，开发者可以利用云开发强大的功能对自己的项目进行后台坏境的搭建。同时云开发的操作相对简单，对于数据的存储、修改、查询也有一定的时效性，更加方便开发者对项目的设计与实现。4.1.2注册登录页面的详细设计与实现服装商城小程序既然涉及到用户的基本信息和一些支付功能，因此设计一套严谨并简洁的用户身份鉴定系统也是有必要的。系统对用户的注册登录处理逻辑流程如图4-1所示：图4-1注册登录流程用户若是已经注册过小程序的账号，则直接在登录页面输入账号与密码即可；若没有，则可以点击进入注册页面进行账号、登录密码、支付密码等操作，操作成功后系统会自动返回登录页面，用户需要重新进行一次登录。登录过程中，系统也会对用户的ID进行判断，并且后台会自动获取用户的OPENID，对输入的账号与密码会进行对比。若对比结果符合数据事实，则登录成功，否则会提示用户错误信息，具体代码如下：图4-2登录流程代码图4-3注册逻辑代码4.1.3支付页面的详细设计与实现用户在选择选择好商品后，就可以对商品进行支付操作。支付页面是购物商城的标配页面之一，系统对用户支付页面的处理逻辑如图4-2所示：图4-4支付页面逻辑处理图进入支付页面后，用户可以滚动选择自己的收货地址，也可以手动添加地址。同时在支付页面用户可以看到选购的商品基本信息，包括下单时间、订单编号以及购买数量等。支付页面的商品价格会根据具体数量、具体数目进行累计计算，后台也会自动获取到商品的ID，并自动判断此商品的订单状态，把数据存储到订单页表的数据库。具体代码如下：图4-5支付页面逻辑代码图4-6支付页面逻辑代码图4-7支付页面逻辑代码4.1.4订单页面的详细设计与实现用户在完成支付后，系统会跳转到订单页面；用户也可以在个人中心查看订单状况。订单页是购物商城必须的标配页表，用来查询自己以往的购物历史和跟踪订单状况。系统对用户的订单处理逻辑如图4-3所示：图4-8订单页面逻辑处理图用户进入订单页面，会显示用户的订单数据：包括用户订单的完成度、是否已经付款等。同时用户还可以进行订单付款操作和订单完成操作。用户在下单时候，系统会获取用户ID和商品ID，并把数据存储到订单数据库中，再通过函数的调用返回到订单页面。用户对订单做出的处理操作，后台也会实时更新。具体代码如下：图4-9订单页面逻辑代码图4-7-2订单页面逻辑代码图4-10订单页面逻辑代码图4-11订单页面逻辑代码4.1.5余额充值的详细设计与实现 余额充值是考虑到用户对商城的支持以及购买商品时需要预先存储足够金额的模拟支付操作，用户可进行充值操作。系统对用户的余额充值操作逻辑处理如下图4-4所示：图4-12余额充值逻辑处理图 用户在个人中心可以查看自己的余额，如果觉得余额不足，可以点击充值，进行余额充值操作。在充值操作页面，用户只需输入充值的金额，点击确认后，系统就会自动帮用户完成充值操作，并返回个人中心，此时余额会实时更新。 用户在进行余额充值操作时，系统会自动获取用户ID，并自动存储和跟新用户余额，数据会记录到users列表中，并重新把数据上传回个人中心，具体代码如下：图4-13充值页面逻辑代码图4-14充值页面逻辑代码4.1.6新增地址的详细设计与实现 地址添加的页面开设是考虑到用户可能会更改收货地址，以及为了能让用户在购买商品时有可以选择的地址等因素，因此特意设计了新增地址页面，系统具体处理逻辑如下图所示：图4-15新增页面逻辑处理图 用户在支付页面可以滚动选择之前已经添加的地址，若是没有地址或者想要新增地址，可以点击新增地址按钮，跳转到添加地址页面进行操作，输入一定的信息后按确认键可返回支付页面继续进行支付操作。 用户输入地址信息后，系统会自动获取用户OPENID，并对用户的操作进行更新，存储到地址表单中，并把数据上传回前端的支付页和个人中心的地址页显示，具体代码如下：图4-16地址页面逻辑代码图4-17地址页面逻辑代码4.2小程序后端数据库详细设计与实现在云开发的数据库中，我们设置了许多不同的列表集合，来储存有需要的数据，同时存放与前端相对应的ID，并且通过获取ID的方法传输数据。在产品数据管理中，我们会通过设置字段、ID、路径等一些列的操作存储需要用到的数据。现在开始罗列：图4-18地址页面后台数据图4-19轮播图后台数据图4-20购物车后台数据图4-21分类页面后台数据图4-22菜单栏后台数据图4-23订单页面后台数据图4-24详细页面后台数据图4-25用户信息后台数据5.小程序测试本次小程序根据需求分析以及总体设计为测试依据，在本章开始进行精确有效的测试。测试设备：开发者工具（版本：1.02）、IPhone7Plus（版本：12.0.1）小程序测试分析表序号测试内容具体项目测试结果1用户登录测试根据之前用户在后台登记过的账号与密码，进行小程序的登录操作正常可以使用，通过测试2用户首页数据的展示以及操作用户经过登录页面后可以顺利跳转到首页，并且能够看到首页显示出来的数据，包括：搜索栏、轮播图、菜单栏、产品列表以及底部导航栏正常可以使用，通过测试3详情页面的数据以及相关操作用户点击产品栏，可以顺利跳转到详情页面，并且看到详情页面有关产品的数据，包括：产品轮播图、详细介绍、价格等，同时可以对产品进行：添加到购物车以及立即购买操作正常可以使用，通过测试4购物车页面的数据以及相关操作用户点在商品详情页点解添加到购物车可以成功显示提示词语，同时在购物车页面可以看到之前收藏过的的商品，在此页面可以进行物品删除、添加购买数量等操作，并且会显示合计金额，可进行购买操作正常可以使用，通过测试5付款页面的数据显示以及相关操作用户可通过点击商品详情页、购物车页面的付款按钮，跳转到付款页面。在付款页面会显示收货地址、订单编号、订单时间以及付款商品、数量、价格等，点解支付按钮会出现弹出并且输入支付密码可以完成支付正常可以使用，通过测试6添加地址页面的数据显示以及相关操作用户可以自行添加收获地址，包括：详细地址、联系人、联系电话等，同时后台会记录存储的地址，可在付款页面进行选择正常可以使用，通过测试7充值页面的数据显示以及相关操作用户可以通过充值功能进行余额的添加，同时在“我的”页面会显示用户的余额仅用于测试，并不能上线发布8密码修改页面的数据显示以及相关操作用户可通过绑定其他手机以修改登录密码进行二次登录，修改成功后会跳转到登录页面进行重新登录正常可以使用，通过测试6.小程序发布微信小程序不仅仅提供开发者书写代码的平台以及实现交互逻辑的云开发，还为开发者提供了发布、上线小程序的机会。不仅仅是企业认证和媒体、政府认证的机构才有资格发布，小程序对个人开发者额提供了无认证发布上传的功能，接下来对小程序的发布做详细的流程描述：首先登陆微信公众号后台进行小程序基本信息设置操作，登陆后设置小程序的基本信息，界面会有相对应的操作指引，同时还要注意设置服务器域名位置。图6-1小程序基本信息填写填写好信息后，在开发者工具点击“上传”功能，并填写版本号和说明图6-2版本号声明上传完毕后，在微信公众号后台的开发管理处，找到开发版本并提交给管理员审核，此时我们需要耐心等待微信官方的审核，审核通过后会有消息提示。至此，小程序的发布流程已经结束了。7.总结在本次服装商城小程序的开发过程中，本人亲自完成了整个项目，并无任何抄袭或者找代写等不诚信行为。从选题之后，我先是做了调查研究、对比设计、知识储备，后来开始着手布置总体框架、系统设计、开发与调试，最后正式完成小程序的开发项目，总耗时4个多月。在这次小程序的开发中，我查阅了许多有关小程序设计的理论知识，内容包括了前端的样式设计、后台的数据库搭建处理。结合目前自己所学到的知识，以及做了关于后台技术优缺点的类比，最后决定使用小程序后台自带的云开发技术搭建自己的后台数据库。云开发提供了除数据库、云调用等一系列服务，而且其登录逻辑简单，提供免费的2G数据存储，非常适合我们这种开发者进行项目开发；同时云开发的调用相对其他后台数据库简单，因此这是我选择使用云开发的理由。本次服装商城小程序在功能上具备注册、登录、搜索、浏览、收藏、支付等功能，在某种程度上可以尽最大化的满足用户的需求，同时也能让商家看到一丝生机。本次小程序突破了以往电子商务的繁杂以及笼统，在很大程度上做到了界面的简约以及对服装品牌选取的专业，让用户有更好的购物体验，同时也符合目前市场上对潮流的定义，也算是本次小程序的一大突破。有突破的地方，也会有瓶颈的地方。本次小程序项目开发中，绝大部分的情况都是在解决测试以及调试时候出现的问题，但由于本人知识储备量有限，以及时间上的准备不够充分等，仍有小部分细节问题并未处理好。先总结一下几点问题，有待进一步反省并解决：1.登录页面过于简化，并且未能捕捉到先前已登录的用户信息，实现免登录直接跳转。这种繁琐的操作方式会给用户带来一定厌烦感，从而降低用户的体验效果。因此在未来的小程序更新版本中将会着重优化这个点。2.衣服种类过于缺少。对于一个商城而言，库存量以及种类多样化是非常重要的，虽然我走的是比较简约以及国产牌子的路线，衣服也是经过精挑细选才选出来的，但是就目前要基于上线这个标准而已，还不算特别合格。因此在未来的版本修复中，应该花心思在选材上以及样式的重新整合上。3.搜索栏的功能以及提示引导词语的功能实现还有待完善。由于本次采取云开发作为小程序的后台搭建，因此在搜索栏的代码逻辑中JS页面的逻辑代码与后台数据库并没有很好的进行数据的传输，导致搜索栏的功能出现时好时坏的局面，代码编写得不规范就会出现细节问题优化处理不当的现象。因此下个版本中应该着重规范代码的编辑，提高成功率以及复用率。本次学习的过程中，一方面我对小程序的开发有了一定的了解，同时能够深入的探索到云开发的妙趣，学习到了云函数的作用以及小程序前端样式的知识；另一方面我深刻的意识到了自己的不足，同时也明白目前的知识储备还不足够支撑我在小程序上走更远的道路。可以说，如果我以现在的成绩而感到骄傲的话，最多也只能算是“井底之蛙”了，因此，在学习小程序开发的道路上，我还要更加努力，积极进取才行。致谢不知不觉，人生已经来到了最重要的分叉路口。还记得当时大一时候的好奇、大二时候的憧憬、大三时期的忙碌以及现在的些许迷茫。写到这里，在大学时光的种种回忆如走马灯似的，一幕幕闪过在脑海中。人们常说，你之所以觉得时间过得很快，是因为你在这段时间里有着美好的生活。东软真的给了我很多，我时常怀着感恩的心，想念起在母校发生的点点滴滴。 在这里，我首先要感谢我的指导老师，潘永明老师。从潘老师答应做我的指导老师开始，一直到现在项目的开发完成，他都在旁边给予了我打量的支持。不仅仅是在技术上给我一定的专业意见，在我的开题报告以及论文稿上也帮我指出了自己的不足和改进的意见。潘老师的悉心指导，让我在本次项目开发中受益匪浅，在此我想给潘老师敬礼！ 大学四年里，我还要感谢很多帮助过我的老师，以及我的宿友、同学。在我人生中遇到挫折困难，在我学习上遇到困惑难题时，他们都能够给我支持和鼓励，让我能够不断地超越自我，逐步成长。他们都是可爱的人，而我是幸运的。我很庆幸能够认识到他们，不仅仅是好朋友，更是良师益友！ 最后，感谢愿意抽空花时间评阅本论文的专家和教授们，你们辛苦了。同时在此我也要提醒自己，社会不再会想大学一样拥有许多老师和同学的帮助，因此我还应该更加努力，不能停下前进的步伐。在未来面对困难中，我都应该保持着像开发项目时候的求学精神以及必胜的决心，勇敢面对。参考文献【1】程子珍;基于微信小程序的网上购物系统的设计与实现[D];首都经济贸易大学;2018年【2】胡敏;Web系统下提高MySQL数据库安全性的研究与实现[D];北京邮电大学;2015年【3】金莹;基于微信小程序的个人电台系统的设计与实现[D];吉林大学;2017年【4】王勇锋;基于微信公众平台的医药零售模式的研究和实现[D];华南理工大学;2017年【5】朱勇贞;基于微信的电商平台的设计与实现[D];东华大学;2017年【6】王权;基于微信开放平台购物中心的设计与实现[D];吉林大学;2016年【7】李炜康;基于微信的网上购物系统的设计与实现[D];南京大学;2015年【8】谭楷祥;基于微信公众平台的点餐系统的设计与实现[D];南京大学;2014年【9】李华明;基于PHP和MySQL的网上购物系统设计与实现[D];电子科技大学;2014年【10】李元鹏;SQL注入攻击扫描分析工具的实现与攻击防范技术研究[D];北京交通大学;2010年【11】王昭英;基于MVC设计模式的thinkphp框架的研究与应用[D];西安建筑科技大学;2010年【12】徐其帅;面向对象软件开发方法的实例分析[D];浙江大学;2008年

HYPERLINK如何给电脑重做系统给电脑重做系统，自己学学，可少花钱，哈哈[图]

一、准备工作:

如何重装电脑系统

首先，在启动电脑的时候按住DELETE键进入BIOS，选择AdvancedBIOSFeatures选项，按Enter键进入设置程序。选择FirstBootDevice选项，然后按键盘上的PageUp或PageDown键将该项设置为CD-ROM，这样就可以把系统改为光盘启动。

其次，退回到主菜单，保存BIOS设置。（保存方法是按下F10，然后再按Y键即可）

1.准备好WindowsXPProfessional简体中文版安装光盘,并检查光驱是否支持自启动。

2.可能的情况下，在运行安装程序前用磁盘扫描程序扫描所有硬盘检查硬盘错误并进行修复，否则安装程序运行时如检查到有硬盘错误即会很麻烦。

3.用纸张记录安装文件的产品密匙(安装序列号)。

4.可能的情况下，用驱动程序备份工具(如:驱动精灵2004V1.9Beta.exe)将原WindowsXP下的所有驱动程序备份到硬盘上(如∶F:Drive)。最好能记下主板、网卡、显卡等主要硬件的型号及生产厂家，预先下载驱动程序备用。

5.如果你想在安装过程中格式化C盘或D盘(建议安装过程中格式化C盘)，请备份C盘或D盘有用的数据。

二、用光盘启动系统:

(如果你已经知道方法请转到下一步),重新启动系统并把光驱设为第一启动盘,保存设置并重启。将XP安装光盘放入光驱,重新启动电脑。刚启动时，当出现如下图所示时快速按下回车键，否则不能启动XP系统光盘安装。如果你不知道具体做法请参考与这相同的-->如何进入纯DOS系统:

光盘自启动后,如无意外即可见到安装界面,将出现如下图1所示

查看原图

全中文提示,“要现在安装WindowsXP,请按ENTER”，按回车键后,出现如下图2所示

查看原图

许可协议,这里没有选择的余地，按“F8”后如下图3

HYPERLINK

查看原图

这里用“向下或向上”方向键选择安装系统所用的分区，如果你已格式化C盘请选择C分区，选择好分区后按“Enter”键回车，出现下图4所示

查看原图

这里对所选分区可以进行格式化,从而转换文件系统格,或保存现有文件系统,有多种选择的余地,但要注意的是NTFS格式可节约磁盘空间提高安全性和减小磁盘碎片但同时存在很多问题MacOS和98/Me下看不到NTFS格式的分区,在这里选“用FAT文件系统格式化磁盘分区(快),按“Enter”键回车，出现下图5所示

查看原图

格式化C盘的警告,按F键将准备格式化c盘,出现下图6所示

HYPERLINK

查看原图

由于所选分区C的空间大于2048M(即2G),FAT文件系统不支持大于2048M的磁盘分区,所以安装程序会用FAT32文件系统格式对C盘进行格式化,按“Enter”键回车，出现下图7所示

查看原图图7中正在格式化C分区;只有用光盘启动或安装启动软盘启动XP安装程序,才能在安装过程中提供格式化分区选项；如果用MS-DOS启动盘启动进入DOS下,运行i386\winnt进行安装XP时,安装XP时没有格式化分区选项。格式化C分区完成后,出现下图8所示

被过滤广告

查看原图

图8中开始复制文件,文件复制完后，安装程序开始初始化Windows配置。然后系统将会自动在15秒后重新启动。重新启动后,出现下图9所示

HYPERLINK

查看原图

9

查看原图

过5分钟后，当提示还需33分钟时将出现如下图10

HYPERLINK

查看原图

区域和语言设置选用默认值就可以了，直接点“下一步”按钮，出现如下图11

查看原图

这里输入你想好的姓名和单位，这里的姓名是你以后注册的用户名，点“下一步”按钮，出现如下图12

HYPERLINK

查看原图

如果你没有预先记下产品密钥（安装序列号）就大件事啦！这里输入安装序列号，点“下一步”按钮，出现如下图13

HYPERLINK

查看原图

安装程序自动为你创建又长又难看的计算机名称,自己可任意更改，输入两次系统管理员密码，请记住这个密码，Administrator系统管理员在系统中具有最高权限，平时登陆系统不需要这个帐号。接着点“下一步”出现如下图14

查看原图

日期和时间设置不用讲,选北京时间，点“下一步”出现如下图15

HYPERLINK

查看原图

开始安装,复制系统文件、安装网络系统，很快出现如下图16

查看原图

让你选择网络安装所用的方式，选典型设置点“下一步”出现如下图17

HYPERLINK

查看原图

点“下一步”出现如下图18

HYPERLINK

查看原图

继续安装，到这里后就不用你参与了，安装程序会自动完成全过程。安装完成后自动重新启动，出现启动画面，如下图19

HYPERLINK

查看原图

第一次启动需要较长时间，请耐心等候，接下来是欢迎使用画面，提示设置系统，如下图20

查看原图

点击右下角的“下一步”按钮，出现设置上网连接画面，如下图21所示

HYPERLINK

查看原图

点击右下角的“下一步”按钮，出现设置上网连接画面，如下图21所示

查看原图

这里建立的宽带拨号连接,不会在桌面上建立拨号连接快捷方式,且默认的拨号连接名称为“我的ISP”(自定义除外);进入桌面后通过连接向导建立的宽带拨号连接,在桌面上会建立拨号连接快捷方式,且默认的拨号连接名称为“宽带连接”(自定义除外)。如果你不想在这里建立宽带拨号连接,请点击“跳过”按钮。

在这里我先创建一个宽带连接,选第一项“数字用户线(ADSL)或电缆调制解调器”,点击“下一步”按钮，如下图22所示

HYPERLINK

查看原图

目前使用的电信或联通(ADSL)住宅用户都有帐号和密码的,所以我选“是,我使用用户名和密码连接”,点击“下一步”按钮，如下图23所示

查看原图

输入电信或联通提供的帐号和密码,在“你的ISP的服务名”处输入你喜欢的名称,该名称作为拨号连接快捷菜单的名称,如果留空系统会自动创建名为“我的ISP”作为该连接的名称,点击“下一步”按钮，如下图24所示

查看原图

已经建立了拨号连接,微软当然想你现在就激活XP啦,不过即使不激活也有30天的试用期,又何必急呢?选择“否,请等候几天提醒我”,点击“下一步”按钮，如下图25所示

HYPERLINK

查看原图

输入一个你平时用来登陆计算机的用户名，点下一步出现如下图26

HYPERLINK

查看原图

点击完成，就结束安装。系统将注销并重新以新用户身份登陆。登陆桌面后如下图27

HYPERLINK

查看原图

六、找回常见的图标

在桌面上点开始-->连接到-->宽带连接，如下图32

查看原图

左键点“宽带连接”不放手，将其拖到桌面空白处,可见到桌面上多了一个“宽带连接”快捷方式。结果如下图33

HYPERLINK

查看原图

然后，右键在桌面空白处点击，在弹出的菜单中选“属性”，即打开显示“属性窗口”如下图34

查看原图

在图中单击“桌面”选项卡，出现如下图35

HYPERLINK

查看原图

在图中的左下部点击“自定义桌面”按钮，出现如下图36

查看原图

在图中的上部，将“我的文档”、“我的电脑”、“网上邻居”和“InternetExplorer”四个项目前面的空格上打钩，然后点“确定”，再“确定”，你将会看到桌面上多了你想要的图标。如下图37

键盘上每个键作用!!!

F1帮助

F2改名

F3搜索

F4地址

F5刷新

F6切换

F10菜单

CTRL+A全选

CTRL+C复制

CTRL+X剪切

CTRL+V粘贴

CTRL+Z撤消

CTRL+O打开

SHIFT+DELETE永久删除

DELETE删除

ALT+ENTER属性

ALT+F4关闭

CTRL+F4关闭

ALT+TAB切换

ALT+ESC切换

ALT+空格键窗口菜单

CTRL+ESC开始菜单

拖动某一项时按CTRL复制所选项目

拖动某一项时按CTRL+SHIFT创建快捷方式

将光盘插入到CD-ROM驱动器时按SHIFT键阻止光盘自动播放

Ctrl+1,2,3...切换到从左边数起第1,2,3...个标签

Ctrl+A全部选中当前页面内容

Ctrl+C复制当前选中内容

Ctrl+D打开“添加收藏”面版(把当前页面添加到收藏夹中)

Ctrl+E打开或关闭“搜索”侧边栏(各种搜索引擎可选)

Ctrl+F打开“查找”面版

Ctrl+G打开或关闭“简易收集”面板

Ctrl+H打开“历史”侧边栏

Ctrl+I打开“收藏夹”侧边栏/另:将所有垂直平铺或水平平铺或层叠的窗口恢复

Ctrl+K关闭除当前和锁定标签外的所有标签

Ctrl+L打开“打开”面版(可以在当前页面打开Iternet地址或其他文件...)

Ctrl+N新建一个空白窗口(可更改,Maxthon选项→标签→新建)

Ctrl+O打开“打开”面版(可以在当前页面打开Iternet地址或其他文件...)

Ctrl+P打开“打印”面板(可以打印网页,图片什么的...)

Ctrl+Q打开“添加到过滤列表”面板(将当前页面地址发送到过滤列表)

Ctrl+R刷新当前页面

Ctrl+S打开“保存网页”面板(可以将当前页面所有内容保存下来)

Ctrl+T垂直平铺所有窗口

Ctrl+V粘贴当前剪贴板内的内容

Ctrl+W关闭当前标签(窗口)

Ctrl+X剪切当前选中内容(一般只用于文本操作)

Ctrl+Y重做刚才动作(一般只用于文本操作)

Ctrl+Z撤消刚才动作(一般只用于文本操作)

Ctrl+F4关闭当前标签(窗口)

Ctrl+F5刷新当前页面

Ctrl+F6按页面打开的先后时间顺序向前切换标签(窗口)

Ctrl+F11隐藏或显示菜单栏

Ctrl+Tab以小菜单方式向下切换标签(窗口)

Ctrl+Enter域名自动完成[url=].**.com[/url](内容可更改,Maxthon选项→地址栏→常规)/另:当输入焦点在搜索栏中时,为高亮关键字

Ctrl+拖曳保存该链接的地址或已选中的文本或指定的图片到一个文件夹中(保存目录可更改,Maxthon选项→保存)

Ctrl+小键盘'+'当前页面放大20%

Ctrl+小键盘'-'当前页面缩小20%

Ctrl+小键盘'*'恢复当前页面的缩放为原始大小

Ctrl+Alt+S自动保存当前页面所有内容到指定文件夹(保存路径可更改,Maxthon选项→保存)

Ctrl+Shift+小键盘'+'所有页面放大20%

Ctrl+Shift+小键盘'-'所有页面缩小20%

Ctrl+Shift+F输入焦点移到搜索栏

Ctrl+Shift+G关闭“简易收集”面板

Ctrl+Shift+H打开并激活到你设置的主页

Ctrl+Shift+N在新窗口中打开剪贴板中的地址,如果剪贴板中为文字,则调用搜索引擎搜索该文字(搜索引擎可选择,Maxthon选项→搜索)

Ctrl+Shift+S打开“保存网页”面板(可以将当前页面所有内容保存下来,等同于Ctrl+S)

Ctrl+Shift+W关闭除锁定标签外的全部标签(窗口)

Ctrl+Shift+F6按页面打开的先后时间顺序向后切换标签(窗口)

Ctrl+Shift+Tab以小菜单方式向上切换标签(窗口)

Ctrl+Shift+Enter域名自动完成

Alt+1保存当前表单

Alt+2保存为通用表单

Alt+A展开收藏夹列表

资源管理器

END显示当前窗口的底端

HOME显示当前窗口的顶端

NUMLOCK+数字键盘的减号(-)折叠所选的文件夹

NUMLOCK+数字键盘的加号(+)显示所选文件夹的内容

NUMLOCK+数字键盘的星号(*)显示所选文件夹的所有子文件夹

向左键当前所选项处于展开状态时折叠该项，或选定其父文件夹

向右键当前所选项处于折叠状态时展开该项，或选定第一个子文件夹

自然键盘

【窗口】