基于微信平台的潮鞋购买小程序的设计与实现

摘要在经济建设越来越好的今天，人们在生活好的同时越来越多的年轻人将目光投向潮流发展的身上，其中潮鞋就是该背景下的产物。潮流市场的迅速发展让潮鞋电商应运而生，本系统以小程序的特点结合中国当代青年潮流文化发展趋势设计与实现一款购买潮鞋小程序。项目主要使用MINA框架和SSM框架搭建实现系统的小程序前端和后台，实现小程序端具有浏览商品，加入购物车，订单信息管理，收货地址管理等完整的网上购物体验和服务器后台具有对小程序端商品上下架管理，订单接收等完整的购物系统平台。本项目主要搭建了小程序用户端，后台管理端，数据库管理端三大系统模块，其中小程序客户端使用了自带的MINA框架，后台管理端采用了SSM框架技术，数据库管理端使用MySQL设计。客户端页面通过MINA框架的逻辑层对后台管理端进行http请求获取MySQL数据。本文主要对小程序客户端的商品详情，商品分类，购物车，个人信息管理及数据库管理设计五大模块进行阐释。关键词：微信小程序购物商城潮鞋SSM框架MINA框架

AbstractThisarticledesignsandimplementsasmallprogramforbuyingtrendyshoesbycombiningthedevelopmenttrendofcontemporaryChineseyouthcultureandcontemporaryyoungpeople’sconsumermentality.TheMINAframeworkandtheSSMframeworkaremainlyusedtobuildthesmallprogramfront-endandbackgroundtoimplementthesystem.Acompleteonlineshoppingexperiencesuchasbrowsingproducts,addingtoashoppingcart,orderinformationmanagement,andreceivingaddressmanagement.Theserverbackendhasacompleteshoppingsystemplatformforthemanagementandremovalofmerchandisefromtheappletandorderreceiving.Today,economicconstructionisgettingbetterandbetter,andmoreandmoreyoungpeopleareturningtheirattentiontothedevelopmentofthetrendwhilepeoplearelivingwell,andthetideshoesaretheproductsofthisbackground.Withtherapiddevelopmentofthetrendmarket,tideshoese-commercehasemergedasthetimesrequire.ThissystemusesthecharacteristicsofsmallprogramstodesignandimplementasmallprogramforpurchasingtrendyshoesincombinationwiththedevelopmenttrendofChinesecontemporaryyouthculture.Thisprojectmainlybuildsthreemajorsystemmodules:appletclient,backgroundmanagementanddatabasemanagement.Amongthem,theappletclientusesthebuilt-inMINAframework,thebackgroundmanagementusesSSMframeworktechnology,andthedatabasemanagementusesMySQLdesign..TheclientpageusesthelogiclayeroftheMINAframeworktomakeanHTTPrequesttothebackgroundmanagementterminaltoobtainMySQLdata.Thisarticlemainlyexplainsthefivemodulesoftheclient'sproductdetails,productclassification,shoppingcart,personalinformationmanagementanddatabasemanagementdesign.□Keywords：WeChatMiniProgranShoppingSystemSneakersSSMFrameworkMINAFramework

目录TOC\o"4-4"\h\z\t"标题1,2,标题2,3,标题3,4,标题,1"第一章 引言 引言1.1研究的背景及意义网上购物在如今互联网蓬勃发展的背景下不再是一件困难的事，从最初的的亚马逊、eBay引入中国，再到中国阿里巴巴等自创网络购物平台的诞生；从最初的网上银行支付到现在支付宝支付，微信支付的出现，更因为互联网技术的发展有了指纹支付，刷脸支付等便捷的支付方式。随着移动通信的逐渐升级，3G升级到4G再到现在的5G覆盖，网络购物不再是一台笨重的电脑才可以实现的事情了，成熟的APP开发技术，使得网络购物系统植入移动端成为现实，基于移动端的网络购物模式发挥了智能终端的便携性。小程序的推出一定程度上实现了应用的“触手可及”[1]。纵观网络购物系统的发展，无一不是向着便捷性在靠近。随着2017年具有一套成熟的开发技术体系的微信小程序的出现，以其具有“即拿即用，即用即走”的便携性由此打入物联网市场，基于世界第三大的微信APP社交系统，具有微信转发，扫码进入等多种入口方式，凭借着强大的用户量所产生的社交裂变效应，为网络购物带来新的机遇。社交网络在商业营销中体现了越来越大的价值[2]。 有数据显示，潮牌词条在2019年淘系平台的搜索热度达数亿次之多，潮鞋电商在这背景下也迅速发展起来，便有了世界最大的潮鞋售卖平台毒APP并以此平台为代表的垂直电商迅速崛起。在这一背景下，潮流必然成为未来电商的主流趋势。在这一潮流的浪潮中，我们似乎不难发现，小程序自带的一个天然，突出的强社交属性对这股浪潮有着更有力的支撑。我们早已对传统网络购物方式产生一种厌烦心理，当平台活动促销需要转换平台进行用户交流分享，这无疑不是一个平台在发展上的绊脚石，但小程序恰巧的避开了这些缺点。微信平台是世界第三的社交平台，拥有众多的用户基础，拥有多种入口方式的小程序在微信内一触即达，在微信平台内随意转换。使用微信就可以体验到原生APP的服务为企业带来众多的新用户，促进了购买转化率。小程序的产生加速了移动互联网对传统商业的变革[3]。综上，面对这一潮流的新浪潮，结合小程序的强社交属性，设计出一款以潮鞋为主题的轻型应用成为可能。1.2研究的内容 本选题紧密贴合实际生活，结合当今中国当代青年的潮流文化现状并洞察中国潮流市场的未来，并根据微信小程序所具有的特点，设计开发一个基于微信平台的潮鞋购买商城小程序，这符合当代青年的消费方式以及消费特性，在快节奏的生活当中，能拥有方便快捷的消费方式和服务。 本文通过微信平台提供的小程序开发者工具以及后台开发的相关技术，设计开发一款具有商品详情，购物车，订单详情等基本功能的潮鞋购买小程序，这样顺应了当今电商发展趋势并满足了当代青年的潮流文化的需求。1.3国内外研究现状小程序是一个基于ApacheMinaServer的网络通信应用框架的产物，Mina基于JAVA开发技术实现，他可以支持TCP/UDP协议。微信开发者工具是作为微信小程序的唯一开发环境，小程序是用MINA框架开发的，它可以调用框架中所包含的的丰富的组件和API。开发者利用开发框架可以以尽可能简单和高效的方式开发出和原生APP等同的服务体验应用，小程序所显示的页面即视图层是由微信开发者共计提供的视图层描述逻辑语言WXML和WXSS搭配JavaScript的逻辑层框架实现的，并将数据传输和时间系统嵌入在视图层和逻辑层之中。2017年推出至今的小程序，其所带来的全新电商环境，线上线下互通的场景功能，并且微信平台所具有的巨大流量，被越来越多的电商平台和开发者所青睐。轻型应用为电商发展提供了新的发展方式。BAT巨头的带动，投资市场的热捧，让小程序正在变成未来主要的商业服务方式。根据微信官方数据显示，目前小程序的覆盖率越来越广泛，其覆盖范围已超过200个相关细分行业，服务对象超过1000亿人次，城市服务覆盖的地方有300多个地级城市，同时年交易增长速度非常快，在短短的几年期间，其创造的商业价值超过5000亿。相较于APP，小程序只在微信上运营，因此它能降低技术和成本的门槛[4]。而且小程序有众多的入口方式能节省更多的运营成本去拉新促活。小程序已经发展到各个行业，尤其是小程序电商的发展，为电商行业带来新的方向。接下来，电商将有更大的爆发！1.4论文结构本文主要的研究方向是：通过设计实现一款基于微信平台的购买潮流鞋款的小程序商城，结合潮鞋市场发展，开发出一款能同时在ios端微信平台和Android端微信平台流畅运行，商城各功能稳定的平台。本文结构有如下的几个部分。第一章：引言。该章有项目的背景及意义，研究的内容，国内外研究现状，论文结构，四大部分，项目的背景及意义阐述了作者对选该课题的出发点，结合实际情况要开发一个怎样的平台进行说明。研究的内容结合国内外现状分析了当下传统电商的痛点对要构建的小程序平台进行系统构思。论文结构给出该课题发展的方向和该课题内容的总体结构。第二章：系统相关技术研究。本章内容介绍系统的前端和后台包括数据库所用到的开发环境和技术，对框架进行总体的分析。第三章：系统运行分析。本章内容主要内容是确定项目需求，需要实现怎样的功能，实现这一套工能具有怎样的一套流程进行了说明分析。第四章：系统设计。本章内容介绍了潮鞋购买微信小程序整个系统项目的详细步骤与功能实现的过程。在该项目中开发环境的部署以及数据库的设计与实现，详细说明小程序端与后台管理端以及数据库的交互原理。第五章：小程序模块的实现。本章内容主要介绍小程序各功能各页面的实现逻辑和主要代码展示。第六章：对设计完整的系统项目进行系统测试。基于ios端的微信平台和Android端的微信平台测试系统功能是否完整，页面展示是否合理，流畅性是否合格给出实际效果，对不合格的地方给出建议并改进。结论：本章是对项目和论文全过程的总结，简要阐述过程中遇到的问题以及用到的方法和对现有的相似的项目进行简单对比发现异同，以及存在的问题和对今后工作的展望。

第二章系统相关技术研究2.1微信小程序平台 微信小程序自上线以来已经运营超过200万的程序，全面开放申请后，企业、个体、政府、媒体等各个职能部门的开发者都可在微信平台研发小程序[5]。小程序开发的IDE环境是由腾讯公司提供的微信开发者工具，在开发微信小程序前我们需要到微信公众平台注册微信小程序开发账号并拿到AppID，方便对小程序的保密工作和统筹管理。然后到微信公众平台小程序开发文档下载适合电脑系统的微信开发者工具并进行安装。本次开发环境在windows10下开发。安装完成后打开微信开发者工具填写项目相关信息，并填写微信公众平台获取的AppID创建项目。 微信小程序是利用MINA应用框架开发的。MINA框架对微信客户端中的文件系统，网络通信，任务管理，数据安全等基础功能进行封装，通过提供一整套JavaScriptAPI给上层，让开发者可以非常方便使用微信客户端提供的各种基础功能，快速构建一个完整的应用系统[6]。图2-1微信MINA框架图在视图层方面，在2-1框架图中我们可以看到微信小程序在实现数据和事件的传递中分为两大部分：在页面的视图层方面，小程序开发与web开发总体相似，MINA提供了一套与HTML标签语言相似的一系列组件名为WXLL[7]。WXML是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构[8]。描述页面样式逻辑语言MINA则是用了.WXSS来替代了web开发中的.CSS文件，但是其语法规则是一样的。以APPService的逻辑层为服务中心的小程序运行在微信客户端的异步线程中。APPService逻辑中处理页面的交互逻辑，加载页面数据和触发事件等操作。小程序在处理页面的交互逻辑和网络请求上是通过JavaScript语言来实现的，但是和web开发不同的是，由于框架并非运行在浏览器中，一些web端的组件在小程序中无法实现，但结合小程序的特性并降低开发难度微信官方在JavaScript的基础上作了一定的修改，如在逻辑层上增加小程序特有的App和Page方法，以支持小程序实现扫一扫和支付等特有功能。MINA的系统层提供小程序数据处理的功能，它主要进行数据缓存和网络请求，和微信基本功能的调用。当视图层要获取存储在系统层中的数据时，视图层需要请求逻辑层中的setData方法发送到视图层。文件存储和网络请求的实现则可以利用MINA提供的丰富的API接口，如wx.getStorage获取本地数据缓存，wx.request的作用是发起http请求[9]。2.2SpringFramework框架SpringFramework是一个开源的基于Java开发的应用程序框架，它的诞生降低了企业应用开发的复杂性。在开发过程中使用者可以选用想要的组件这就是框架具有分层架构的优势，同时为J2EE应用程序开发提供集成的框架。在JavaEE开发中，需要用到EJB来处理业务逻辑[10]。Spring的用途不仅限于服务器端的开发。从简单性、可测试性和松耦合的角度而言，任何Java应用都可以从Spring中受益。Spring的核心是控制反转（IoC）和面向切面（AOP）。简单来说，Spring是一个分层的JavaSE/EEfull-stack(一站式)轻量级开源框架[11]。SpringFramework主要由20个模块组成，这些模块主要组成CoreContainer、DataAccess/Integration、Web、AOP、Instrumentation、Message和Test几部分，如2-2框架图所示：DataAccess/IntegrationORMJDBCOXMJMSTransactionWebServletWebSoketWebDataAccess/IntegrationORMJDBCOXMJMSTransactionWebServletWebSoketWebPortletAOPAspectsInstrumentationMessagingBeansCoreContextSpELCoreContainerTest SpringFramework的主要特性包括：（1）基于JavaBeans控制反转（IOC）原理的强大配置管理使应用程序的创建变得更快、更容易。可运行在多种环境的核心Bean工厂。（3）数据库事务的一般化抽象层，允许插件式事务管理器，简化事务的划分使之与底层无关。（4）基于核心spring函数的灵活MVCweb应用框架。开发人员将通过策略接口对框架进行高度控制，使框架适合各种呈现技术，如JSP、FreeMarker、Speed、Tiles、iText和Poi。mediumspring可以很容易地与任何基于MVC框架的web层相结合，比如struts、webwork或walltaps。（5）JDBC抽象层提供了一个有目标的异常级别（不再从SQL异常中提取原始代码），简化了错误处理，并大大减少了程序员的编码量，不必编写另一个“中止模块”，而且JDBC的异常级别与源数据输入对象的异常级别匹配。SpringFramework各种使用场景都在模块中清晰地展示出来，spring替开发者管理了大量的基础框架，开发者只要把注意力集中在代码逻辑中，这样就极大地降低了开发的复杂程度。

2.3MyBatis框架MyBatis是一个用Java开发的优秀持久层框架，他的原型是apache的开源项目ibatis。把数据永久存储到存储设备当中是持久层的主要功能，简单的来说就是他可以对数据库进行增删改查等一系列操作。在maven构建的项目中，要使用到MyBatis只需要依赖代码dependency到pom.xml文件中，在项目创建.DAO文件项目根据需求设计即可。MyBatis的主要作用就是在项目中对数据库进行访问操作，一般置于DAO层也称为数据持久层。在web需要操作访问数据库时，Controller（控制层）会接收来自前端控制器DispatcherServl发送的请求，接着Controller唤醒Service业务处理层与DAO层进行交接，获取命令后DAO层数据持久层访问数据库，根据命令对数据库进行增删改查操作，然后请求的数据原路返回最后到Controller层返回具体页面和数据到小程序端。MyBatis有很多优点，得益于MyBatis对JDBC进行了封装，开发者只需要把注意力放在SQL语句编写上而不需要处理SQL外部的驱动以及创建连接的复杂过程，这样与JDBC相比较可以减少一半的工作量，再者MyBatis是基于SQL语句编程，相当灵活，不会对应用程序或者数据库造成任何影响，SQL卸载XML文件里提供XML标签，支持动态编写SQL语句，并可重用。但是MyBatis也有不好的一方面，由于SQL语句的编写工作量较大，发者在面对此编写工作时有一定难题，同时开发人员对SQL语句的熟练程度很重要，并且不能随意更改数据库移植性差的相关数据。2.4前端选用技术2.4.1Vue框架在设计与开发后台管理系统的web管理端时，作者选用了web三大主流框架之一的Vue框架，Vue是最简单的框架之一。Vue基于JavaScript开发用户搭建用户界面的框架，首先通过Vue函数创建一个新的Vue实例，便可以搭建你想要的Vue应用，语法规则如下图所示：图2-3Vue语法在Vue构造器中需要有一个DOM元素中的id作为参数，实例创建后，Vue响应式系统就会存储data对象中的属性值，视图会因为属性值的变化而产生相应的变化匹配更新为新的值。因此，结合spring框架能较容易地得到自己想要的结果。2.4.2bootstrap框架Bootstrap是一个可视化布局系统，基于HTML，CSS，JavaScript的前端框架。开发者可以利用Bootstrap中丰富的web组件快速开发一个完整的网站，这些组件包括我们网站常见的下拉框，导航，缩略图，自动排版，等等。Bootstra4是目前最新版本其基于jQuery的强大的插件系统，能够利用Sass变量和大量mixin、响应式栅格系统、可扩展的预制组件快速开发出原型生态和APP。2.5MySQL数据库MySQL是一个关系型数据管理系统由MySQLAB公司使用C语言和C++语言进行开发编写，并且经过多种编译器进行编译测试，现在属于Oracle公司的产品。MySQL是一款面向多系统并且开源免费的软件，对市面上的流行的编程语言兼容性强，支持C、C++、Python、Java、PHP、.NET等语言开发，查询算法优化好，查询数据速度快，使用标准的SQL语言形式，并且多线程可靠性高，对于一些中小型企业或者个人开发者十分友好。数据库具有结构化、冗余度最低、偏高的程序和数据独立性、方便补充、有利于应用程序的添加等优点，庞大的信息系统都是以数据库设计为基础的[12]。从图2-4MySQL逻辑架构图可以看出，MySQL总分为三个部分。（1）客户端：负责对链接进行响应，安全检验，授权认证等功能。每个客户端的请求都对应着一个线程，连接时服务端会对客户端进行登录验证，登陆之后还会对客户端进行是否有对应操作权限的验证。（2）核心服务层：核心服务层可以实现跨存储引擎功能，可以实现对触发视图和过程的存储。（3）存储引擎：实现数据库中的数据存储和提取，服务层与春促引擎进行交互需要使用到服务层的API接口，这些API对不同存储引擎间的差异进行了屏蔽。图2-4MySQL逻辑架构图

第三章系统运行分析3.1系统功能需求分析在小程序端方面，根据分析淘宝，京东等购物APP确定了用户购物习惯的基本需求，考虑到项目在微信小程序端运行，系统功能向着三个目标设计：在功能方面，要比一般购物APP单一；在设计方面也要比一般购物APP更为简洁；在应用场景上尽量减少与购物无关的功能，如分享好物之类的功能。在参考了市面上流量较多的购买潮鞋的APP平台，如毒APP、get，虎扑等之类后，本着小程序最基本的简洁原则，给小程序分为了4大部分，分别为“首页”、“分类”、“购物车”、“我的”。“首页”主要作为展示使用，对潮流鞋款，平台活动等进行展示。“分类”是一个购物商城最基本的主菜单，让消费者可以根据自己的需求很快找到目标物品。“购物车”可以让消费者进行对比，快速消费等。“我的”菜单是消费者的一个信息查询修改功能，可以查询到订单信息，修改默认收货地址等主要功能，是一款购物APP必不可少的。会员信息商城配置编辑商品订单管理广告展示系统管理会员信息商城配置编辑商品订单管理广告展示系统管理授权登录浏览商品浏览分类生成订单首页广告添加购物车后台管理小程序端图3-1后台管理和小程序功能图3.2系统功能分析 3.2.1商品展示当用户进入小程序时，小程序会调用用户登录API，用户确认授权登录后首先展示的就是小程序首页页面，用户可以在首页进入各个页面进行浏览，首页展示的内容有平台活动广告轮播图和热门商品、新品首发等板块。用户浏览小程序购物系统如图3-2：消费者消费者浏览轮播广告查看活动商品详情添加购物车浏览热门商品浏览热门精选详情页查看商品详情添加购物车浏览新品首发查看商品详情添加购物车图3-2用户浏览小程序购物系统 用户浏览小程序功能分析如下：（1）用户打开小程序，小程序调用系统登录API提示获取用户昵称头像信息，用户同意后进入小程序首页。（2）进入首页可以看到首页顶端的轮播广告栏，播放的是平台最新的活动信息，在轮播广告下面有用户热门点击的分类栏目，点击进入时各分类的详细商品展示，紧挨分类菜单下的是热门精选模块，展示热门鞋款。（3）在首页最顶端展示时，用户可以下拉刷新商品展示信息。（4）进入商品详情页有商品的参数详情，详细图片，商家交易规则展示。用户看到想要购买的商品点击添加购物车可添加到购物车当中。 3.2.2商品分类消费者查看分类选择分类分类商品矩阵显示查看商品详情购买消费者查看分类选择分类分类商品矩阵显示查看商品详情购买/添加购物车图3-3小程序分类流程分析图 小程序分类检索功能需求分析如下：通过小程序首页底端导航栏“分类”菜单进入小程序分类页面，用户可见到分类的详细信息。商品分类根据鞋类售卖的特点在小程序分类页面的左半部分设计列式的一级分类，在分类页面的右半部分是一级分类的子分类，以矩阵形式呈现，用户根据需求点击子分类是子分类的商品展示页面。商品展示页以矩阵方式显示，确定需求后可以选择商品的数量添加进购物车，若选择的数量超过库存数量则会提示超出库存量！3.2.3购物车功能消费者添加购物车编辑商品增加商品数量删除商品查看商品详情查看商品数量查看商品总金额提价订单 购物车同样可以在首页底端的导航栏进入，在没有添加商品的情况下会显示购物车为空，也可以在商品详情页添加购物车，在购物车的icon消费者添加购物车编辑商品增加商品数量删除商品查看商品详情查看商品数量查看商品总金额提价订单图3-4购物车功能分析图 购物车功能分析如下：进入购物车页面有两种方式分别是从首页的导航栏进入和在商品详情页进入购物车提供商品数量增减删除功能，当超过库存数量时会提示库存不足，或者通过点击商品复选框删除商品。在购物车页面可以直接显示选购的商品的具体数量，点击商品可以查看商品详情。在购物车页面会直接显示选购商品的总金额，在确定选购后点击下单提交订单。 3.2.4订单支付消费者库存检索生成订单管理收货地址查看商品数量金额确认下单支付 消费者库存检索生成订单管理收货地址查看商品数量金额确认下单支付图3-5订单支付功能分析 对于订单支付功能的分析：生成订单前，检索商品数据库库存量，若下单数量超过库存量则提示库存不足。下单成功后进入正式的订单支付页面。订单首要的是管理收货地址，可以通过点击顶部地址栏设置常用地址，可以添加多个地址也可以删除地址。选择优惠券后可显示实际支付金额，对于运费后台系统可设置消费金额达到一定额度为免运费。确认无误后通过微信支付完成订单支付。 3.2.5订单信息管理消费者下单生成订单查看付款状态验证收货地址取消/消费者下单生成订单查看付款状态验证收货地址取消/购买订单操作图3-6订单信息功能分析 订单信息功能分析：在商品详情或者购物车页面下单，无论支付，取消支付或者支付失败都会生成订单详情到订单信息管理页面。在我的订单信息管理页面订单信息以列显示，已经取消的订单在订单编号后面会有已取消字样，对于未进行取消/购买操作的订单点击进入订单详情页，可选择取消购买，重新付款。在商品详情页展示下单时间，订单编号，商品详情，订单地址，订单金额。核验地址及商品价格信息，用户根据自己的需求进行取消/购买操作。3.3系统流程分析本系统主要为一款潮鞋购买的商城小程序，以微信小程序为客户端配合服务器和数据库作逻辑和数据支持。在微信小程序部分，主要提供给用户商品浏览，对商品分类检索，购物车功能，个人信息管理等主要网上购物体验。为了配合数据的合理输出，在数据库设计方面，各个表都有一定的关联性和拓展性。图3-7小程序端业务流程图 用户使用小程序端流程如图3-7所示，用户进入小程序后系统会判断用户是否已经登录，若未登录则获取用户信息，用户就可以浏览商品，当用户挑选到合适的潮鞋时将潮鞋加入购物车，当用户挑选完毕之后可进行结算下单，填写用户相关信息，确认订单信息后，根据支付结果的不同产生不同的订单信息，到此小程序业务流程走完。

第四章系统设计与实现4.1系统总体框架设计数据库返回数据请求数据Api请求返回数据Tomcat服务器SpringframeworkMyBatis小程序客户端MINA框架缓存系统主要由微信小程序端，后台管理端，数据库搭建而成。微信小程序端使用MINA框架在微信开发者工具的IDE环境中编写，利用MINA提供的丰富的API和组件与运行在Tomcat服务器中的后台系统进行交互，服务器端主要采用SSM框架（Spring+SpringMVC+MyBatis）搭建对小程序端的API请求进行回应，反馈用户在小程序页面进行的一切购物行为的操作，实现小程序端与数据库的数据交接，为用户在使用小程序过程中提供流畅的体验。除了Tomcat本地服务器提供业务逻辑外，小程序端所展示的的数据，产生的数据进行存储也必不可少，MySQL数据库担任了主要任务，数据库返回数据请求数据Api请求返回数据Tomcat服务器SpringframeworkMyBatis小程序客户端MINA框架缓存图4-1系统框架图4.2系统开发环境部署项目开发环境基于windows10系统开发。在编译语言上选择JAVA为主要开发语言，选用JDK1.8.0_202版本的开发工具包，托管于maven仓库中。项目选择springframework和myBatis作为web管理端开发框架，项目加载于版本为8.5.51的appache-tomcat服务器上。开发工具的选择上，web系统管理端采用intellijIDEA来开发后台管理系统，处理交互逻辑和对数据库的请求。微信小程序端则使用微信官方提供的微信开发者平台编写小程序的主页面，为了便于数据库数据的管理使用了SQLyog软件作为数据库的可视化管理工具。4.3数据库管理系统设计 为了提升项目的运行速度，让用户获得良好的体验，设计一个良好的数据库是必不可少的。本数据库主要介绍全部商品，收获地址，商品分类，购物车四大数据库模块，该数据库设计与实现严格遵循了数据库设计的三大范式。商品信息商品id商品名称商品价格商品图片路由地址商品类别商品库存量商品信息商品id商品名称商品价格商品图片路由地址商品类别商品库存量分类id商品编号图4-2商品属性图商品信息表nideshop_goods数据表，如下表所示：FiledTypeNullKeyIdint(11)unsignedNOPRIcategory_idint(11)unsignedYESMULgoods_snvarchar(60)YESMULnamevarchar(120)YESMULlist_pic_urlvarchar(255)YESretail_pricedecimal(10,2)unsignedYES表4-3nideshop_goods表分类信息分类名称分类级别分类图片路由地址Parentid排列位置id （2分类信息分类名称分类级别分类图片路由地址Parentid排列位置id图4-4商品分类属性图 分类信息表nideshop_category数据表如下表4-5所示：表4-5nideshop_category表FiledTypeNullKeyIdint(11)unsignedNOPRInamevarchar(90)NObanner_urlvarchar(255)YESlevelvarchar(255)YESshow_indextinyint(1)YESparent_idint(11)unsignedYESMUL地址信息id用户id用户名称用户手机号详细地址用户所在区用户所在省用户所在市地址信息id用户id用户名称用户手机号详细地址用户所在区用户所在省用户所在市图4-6用户收货地址信属性图 用户收货地址信息表nideshop_address数据表如表4-7所示：表4-7nideshop_address表FiledTypeNullKeyIdmediumint(8)unsignedNOPRIuser_idmediumint(8)unsignedYESMULtel_numbervarchar(60)YESprovince_Namevarchar(50)YEScity_Namevarchar(50)YEScountry_Nmaevarchar(50)YESdetail_infovarchar(120)YES用户信息id用户id商品id商品编号商品名称商品价格商品图片 （4）系统购物车数据表有输入下属性：用户信息id用户id商品id商品编号商品名称商品价格商品图片图4-8购物车属性图 购物车信息表nideshop_cart数据表如表4-9所示：表4-9nideshop_cart表FiledTypeNullKeyIdmediumint(8)unsignedNOPRIuser_idmediumint(8)unsignedNOgoods_idvarchar(60)NOgoods_snvarchar(60)NOgoods_Namevarchar(120)NOlist_pic_urlvarchar(255)NOretail_pricedecimal(10,2)NO

第五章小程序购物系统实现作为系统实现的主要部分，小程序端给用户浏览商品，添加购物车，订单支付等体验。在这样一些操作中，需要依靠MINA框架提供的.WXSS与.WXML文件进行页面的美观设计，还需要.JS文件提供业务逻辑处理服务器和数据库数据，在.WXML页面绑定数据后输出展示。MINA框架提供了给开发者方便管理的模块，每个小程序页面的实现都有4个文件包括.JS、.JOSN、.WXML、.WXSS文件，其中.JS文件充当了控制管理的角色，为页面显示跳转提供逻辑也提供API接口处理小程序端的数据请求。.WXML文件则是内容输出的承担者，而.WXSS就是对内容进行排版装修，让页面舒适美观展示给用户。小程序购物系统生态如图5-1：图5-1小程序你购物系统生态图 在小程序端设计与实现的基础上，为了不造成代码冗余减少重复代码开发，减轻代码的工作量，本小程序对小程序端对服务器的请求API在api.js文件中进行了封装。同样，在小程序端更多重复利用到的请求request也在util.js中进行了封装。当小程序的某一模块需要进行api请求时，只需在该模块的JS文件中导入API和request的文件包即可，如需要请求名为data的api时则简要代码如：util.request(api.data).then(function（res）){}。然后通过setData方法对数据进行绑定。5.1首页展示模块实现 每个小程序的都有一个“首页”，首页设计的是否简洁美观都影响着用户的第一印象。首页采用三段式设计结构，分别为顶部的banner广告栏，中间以商品专题为主要内容，可以上下滑动浏览，底部则固定的导航栏。首先是banner平台活动及广告的展示，我们使用的是swiper轮播图面板指示点样式。轮播图宽度750，高度200-900，支持jpg、png格式，且要求一组轮播图片高度应当一致。轮播图是一个店铺对外宣传的窗口，卖家可以基于自己提供的商品或服务通过轮播图展示经营理念、营销策略、促销手段等，与PC端的轮播图设计要求不同，在移动端的轮播图装修设计要求简明扼要的介绍店铺上新、促销折扣等内容，展示内容不宜过多[13]。图片轮播的逻辑直接在.WXML中实现，图片来自于请求api中的Banner数组，.WXML通过wx：for方法配合.WXSS样式遍历baner中图片地址的属性名即可以实现图片的轮播效果。简要代码所示如下： <viewclass="container"> <swiperclass="banner"indicator-dots="true"autoplay="true"interval="3000"duration="1000"> <swiper-itemwx:for="{{banner}}"wx:key="{{item.id}}"> <navigatorurl="{{item.link}}"> <imagesrc="{{item.image_url}}"background-size="cover"></image> </navigator> </swiper-item> </swiper> 其中banner数组的请求是在.JS业务逻辑层实现的，.js文件通过已封装好的API进行对服务器对应的数据进行请求，若请求成功则用setData方法进行数据绑定，然后在视图层中使用wx:for方法遍历。首页活动广告信息栏轮播图展示如下：图5-2活动广告轮播图 首页底部导航栏是面向整个小程序设计的，所以导航栏的样式及代码逻辑并没有编写在index文件的四大层中，我们利用了全局的app.josn文件使用tarBar方法进行封装，实现小程序在任何页面都可以使导航栏完整统一展示。主要代码如下： "tabBar":{"backgroundColor":"#fafafa","borderStyle":"white","selectedColor":"#b4282d","color":"#666","list":[{"pagePath":"pages/index/index","iconPath":"static/images/ic_menu_choice_nor.png","selectedIconPath":"static/images/ic_menu_choice_pressed.png","text":"首页"},] 在这里只展示了首页的导航标志，在其余的导航标志中的逻辑代码与此同理，其中text是导航栏的名字，pagePath是导航栏的路径，剩下的是导航栏的相关图标。利用这方法分别在导航栏设置首页，分类，购物车，我的，导航分类。5.2分类模块实现 在分类页面的容器内设置了两个BOX，其中左边BOX为分类导航栏，右边BOX为分类子菜单。在项目中为分类页面创建了catelog文件夹，在catelog.log逻辑层中利用封装好的api对分类导航栏的分类名进行HTTP请求，关键代码如下：util.request(api.CatalogList).then(function(res){that.setData({navList:res.data.categoryList,currentCategory:res.data.currentCategory});wx.hideLoading();});util.request(api.GoodsCount).then(function(res){that.setData({goodsCount:res.data.goodsCount});});}在catelog.wxml视图层中，通过对逻辑层中的that.setData内的属性名navList进行绑定进行内容输出。为了便于用户清楚点击了哪个分类名，利用请求的navlist内的id进行绑定实现动态效果，让正在浏览的板块显示为字体与左边框红色显示。关键代码如下：<viewclass="item{{currentCategory.id==item.id?'active':''}}"wx:for="{{navList}}"data-id="{{item.id}}"data-index="{{index}}"bindtap="switchCate">{{}}</view>实现效果如下图所示：图5-3分类效果图5.3商品详情板块实现 商品详情页面是重复使用率最高的一个模块，在任何地方进入商品详情页面只要点击商品的banner通过navigator方法跳转到所选商品的详情页面，在url上通过绑定指定商品的item.id实现精确显示。为了减少代码重复使开发难度降低，所有相关商品详情页面的样式输出及业务逻辑都封装在goods文件夹中。在视图层上，使用scroll-y上下滑动组件实现商品浏览，在goods.wxml设计中大面积展示商品的详情图，在详情图下方注有商城服务条款及商品名称价格，使用bindtap方法点击商品规格数量跳转到商品的参数数量选择页面。主要代码如下 <swiperclass="goodsimgs"><swiper-itemwx:for="{{goods}}"wx:key="{{item.id}}"><imagesrc="{{goods.list_pic_url}}"mode="aspectFit"></image></swiper-item></swiper>……<viewclass="c"><textclass="name">{{}}</text><textclass="desc">{{goods.goods_brief}}</text><textclass="price">￥{{goods.retail_price}}</text><viewclass="brand"wx:if="{{}}"><navigatorurl="../brandDetail/brandDetail?id={{brand.id}}"><text>{{}}</text></navigator></view></view>在小程序端实现效果如图：图5-4商品详情图5.4购物车模块实现 购物车主要提供物品存放功能，用户可对购物车商品进行编辑管理。小程序首页可通过点击底部购物车导航栏tabBar跳转到购物车页面，tabBar封装在全局app.josn中，对小程序底部导航栏进行统一管理。用户也可以在商品详情页上通过点击bindtap绑定的购物车标志加入商品到购物车，若购物车没有商品添加到购物车可以按照自己的想法设定提示。我们将加入购物车添加bindtap=addtoCart事件，当用户点击加入购物车时触发逻辑层addtoCart函数，逻辑层通过封装的requst和api进行http请求，将指定的id商品加入购物车中，并在视图层中显示出来，逻辑代码主要如下： addToCart:function(){varthat=this;……//添加到购物车util.request(api.CartAdd,{goodsId:this.data.goods.id,number:this.data.number,productId:checkedProduct[0].id},'POST','application/json').then(function(res){let_res=res;if(_res.errno==0){wx.showToast({title:'添加成功'});console.log(res.data)that.setData({openAttr:!that.data.openAttr,cartGoodsCount:_res.data.cartTotal.goodsCount});});}以上业务逻辑是在商品详情逻辑层实现的，这段代码逻辑在数据库中起到的作用是将指定id商品的数据增加到购物车所属的表里面。要在购物车页面cart.wxml显示出来则需要在cart.wxml中进行数据绑定，请求cart.js进行http请求获得购物车所属的表数据，请求成功后则可以在视图层配合cart.wxss进行渲染输出。主要代码如下：getCartList:function(){letthat=this;util.request(api.CartList).then(function(res){if(res.errno===0){console.log(res.data.cartList)that.setData({cartGoods:res.data.cartList,cartTotal:res.data.cartTotal});} that.setData({checkedAllStatus:that.isCheckedAll()});});}实现效果下图所示：图5-5购物车商品显示图5.5个人信息管理模块实现个人信息管理模块主要设计三大板块，用户的头像、昵称，订单信息管理和地址管理。这三大板块都位于ucenter文件夹下的index文件中。用户打开小程序需要登录微信账号进行授权来获取用户的头像、昵称、性别等信息，这个过程需要调用到wx.getStorageSync组件来存储app.globalData.userInfo获得的用户信息数据。效果图如图所示：图5-6登录信息展示图订单信息管理页面对每一个订单都进行了商品id绑定，通过navigator方法对订单详情页的url与订单商品的id绑定点击进入订单详情页面。每个生成的订单无论支付成功与否都会存储在数据库的订单数据表中，当用户在个人信息管理页面点击我的订单时都会在order.js逻辑层触发getOrderList()函数，通过封装好的request对api.OrderList进行http请求，通过this.setData方法进行数据绑定返回给视图层，主要代码有：getOrderList(){letthat=this;if(that.data.totalPages<=that.data.1){that.setData({nomore:true})return;}util.request(api.OrderList,{page:that.data.page,size:that.data.size}).then(function(res){if(res.errno===0){that.setData({orderList:that.data.orderList.concat(res.data.data),page:res.data.currentPage+1,totalPages:res.data.totalPages});wx.hideLoading();}});},商品详情页主要是展示订单编号和用户下单的时间，付款状态，及收货信息地址。用户点击订单表单会通过navigator进入订单详情页面orderDetail.wxml当中，订单详情页的逻辑层与订单也一样会通过封装好的request对api.OrderDetail进行http请求，然后通过this.setData方法返回给视图层，逻辑层代码主要有：getOrderDetail(){letthat=this;util.request(api.OrderDetail,{orderId:that.data.orderId}).then(function(res){if(res.errno===0){that.setData({orderInfo:res.data.orderInfo,orderGoods:res.data.orderGoods,handleOption:res.data.handleOption});//that.payTimer();}});订单详情图如下所示：图5-7订单详情图 地址管理主要提供地址的选择及增删功能。关于增加地址功能在addressAdd的逻辑层下实现，同样的，用户在增加用户信息地址的页面添加了自己的信息点击保存后，addressAdd逻辑层会通过request对api.addressAdd进行http请求把数据上传到服务器，用户在打开地址管理页面address逻辑层会自动onLoad请求api.AddressList数据，数据请求成功后通过this.setData方法进行数据绑定就可以显示添加进来的信息地址了。当用户想要删除地址时用户可点击垃圾桶标志，逻辑层会触发wx.showModal方法提示是否删除地址，当按下确认的时候逻辑层会将通过event.target方法绑定好的地址id绑定在api.AddressDelete上，通过request进行http请求，服务器的Controller层收到api请求后将参数发给Service层，Service层调用Dao的接口对id地址所在的数据库进行删除后业务流程即完成。增加用户地址逻辑代码主要有： getAddressDetail(){letthat=this;util.request(api.AddressDetail,{id:that.data.addressId}).then(function(res){if(res.errno===0){if(res.data){that.setData({address:res.data});}}});}, 删除地址逻辑代码主要有：success:function(res){if(res.confirm){letaddressId=event.target.dataset.addressId;util.request(api.AddressDelete,{id:addressId},'POST','application/json').then(function(res){if(res.errno===0){that.getAddressList();}});}}})地址管理模块显示效果如下图：图5-8用户地址管理效果图

第六章系统测试6.1测试方案项目开发完成后对项目进行自我测试是一个项目开发的规范，基于微信平台的小程序购鞋购买商城需要通过移动端的真机测试。目前，国内移动端操作系统市场份额中Android操作系统占比77.14%，ios操作系统占比22.83%，而其他移动端操作系统占比只有0.04%，所以为了考虑实际降低成本此次测试只对Android端和ios端进行。在小程序开发IDE环境微信开发者工具中有真机调试功能，开发者只需要打开申请appid的微信账号扫一扫真机调试中的二维码就可以在手机上打开完成好的小程序进行测试体验，开发者可在微信开发者工具中进行断点调用API功能进行调试。基于ios系统的微信小程序运行测试，手机型号为iphoneXR，运行系统IOS13.3，微信版本7.0.10。测试结果为运行流畅，能进行数据获取及提交，页面显示完整，结果显示如图6-1所示：图6-1ios系统运行测试图基于Android系统的微信小程序运行测试，手机型号为Nexus5，运行系统为Android4.4，微信版本7.0.10。测试结果为运行流畅，能进行数据获取及提交，页面显示完整，结果显示如图6-2所示：图6-2Android系统运行测试图6.2功能测试系统功能测试是项目最后的验收阶段，开发者通过多移动端系统真机调试测试包含用户登录，商品分类，加入购物车，订单详情，地址管理等功能是否完整，流畅性是否合格做出判断。用户登录测试：表6-3用户登录测试表测试意图测试用户首次使用时是否有微信授权登录。方法用户在没有登录过得状态下打开小程序。预计结果微信小程序会弹出授权登录按钮。实际结果弹出授权按钮，与预计结果相同。商品分类测试：表6-4商品分类测试表商品分类测试意图分类矩阵是否排布准确，归类是否准确。方法首页导航栏打开分类菜单，显示后再打开分类子菜单。预计结果排布呈矩阵排列没有错位情况，归类准确。实际结果与预计结果相符。购物车功能测试：表6-5购物车功能测试表购物车测试意图能够添加购物车，并能在购物车页面准确显示添加的商品。方法在商品详情页点击添加购物车按钮并打开购物车。预计结果添加购物车后页面显示添加成功，在购物车页面能够准确显示商品。实际结果与预计结果相符。地址管理功能测试：表6-6地址管理功能测试表地址管理侧示意图测试是否能够进行地址增删操作。方法点开我的信息管理页面进入收货地址管理，删除地址添加地址。预计结果删除地址会提示是否确认删除，删除成功后不在收货地址显示，添加地址保存后能在地址管理页显示。实际结果与预计结果相符6.3测试结论 经过系统性测试，小程序商城在系统适配方面各个功能正常，未出现页面不能正常显示，数据拉取失败的现象，各功能的响应速度尚可，能较好满足用户的购物体验。网络请求上未出现请求失败，网络延迟较大而图片等资料显示不及的情况，能快速反馈用户的交互，是一款达到购物平台要求的小程序。

结论 本项目搭建了一个以购买潮鞋为主题的小程序平台，是一款页面大方，内容简洁，功能完整，流畅度高能达到消费者日常购物标准的购物系统。本系统在后台开发上应用了springframe和myBatis框架搭配MySQL数据库为小程序但提供服务和数据支持。本系统在完成的过程中，参考了相关课题的研究成果，与之对比简洁目标性强是本系统的最大特点，在后台开发上采用了面向对象的编程思想，但在页面展示和用户交互效果方向上有进一步的发展空间。系统在最终完成的情况下，由于时间有限和技术不够成熟的原因没有实现购物优惠券和手机绑定问题，作为一个以购物为主题的小程序平台，没有购物优惠券等优惠活动的平台对消费者的吸引力大打折扣，没有手机账号绑定功能对于平台用户管理方面会引起数据流失。在今后的学习发展中需要加强此方面的学习。

参考文献[1]艾佳.微信小程序的现状与发展,新媒体研究,2019(09):80-81[2]朱勇贞.基于微信的电商平台的设计与实现[D],东华大学,2017[3]邱家玉.微信小程序电商发展现状和对策探讨[J].现代商业,2019(23):26-27[4]匡文波,李芮,任卓如.微信小程序面面观[J].新闻论坛,2017(02):15-18 [5]邢榕珊,匡芳君.微信小程序设计[J],计算机时代,2018(08):9-12[6] 金峰,基于微信小程序的家用物联网系统开发[D].2019[7]程子珍.基于微信小程序的网上购物系统的设计与实现[D],首都经济贸易大学,2018[8]孙月玲.微信小程序的设计与开发,科技创新导报[J],2018(14):142-144+146[9] 武思怡,解佺,张雨,侯秉昀.微信小程序开发研究[J],无线互联科技,2018(11):52-54[10]吴婉楠.基于SpringMVC和MyBatis框架的炒股比赛系统的设计与实现[D],南京大学,2016[11]王建文,基于SSM的团险佣金管理平台的设计与实现[D].2015[12]储广昕.分析软件开发中数据库设计理论的实践[J],信息通信,2015(05):127-128[13] 刘蓉,孙晓雅.微信小程序商城的用户体验评价研究,电子商务,2019(08):44-45+47

致谢 时光荏苒，四年的大学生活就要结束了，大学的时光像一幅拼图，从最初懵懵懂懂踏进东软校门，到如今毕业论文的最后一块拼图拼合完整。首先，我感谢东软校园给了这么一个美好的平台给我专研学识，教我成长，以我良师，给我益友。我感谢全体教过我的老师们，他们对专业知识的热情以及认真负责的教学态度，我感谢这四年来所有同学对我的帮助和关心，在我最困难的时候帮我度过难关，遇到你们是我最大的幸运。 经过长时间的专研学习，我终于完成了毕业设计以及论文写作。我对我的指导老师许明鹤老师深表感激，从论文选题到论文定稿，我的指导老师许明鹤老师始终给我以耐心的指导和正确的建议，即使在放假期间仍提醒我们跟好进度，给予我们及时的通知。在此，我致以指导老师最真挚的感激！ 最后，感谢各位辛苦评阅我论文的各位教授，感谢你们的付出！谢谢！

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复制当前