软件工程基于微信小程序的美容美发预约系统的设计与实现.docx

软件工程基于微信小程序的美容美发预约系统的设计与实现.docx

《软件工程基于微信小程序的美容美发预约系统的设计与实现.docx》由会员分享，可在线阅读，更多相关《软件工程基于微信小程序的美容美发预约系统的设计与实现.docx（36页珍藏版）》请在冰豆网上搜索。

软件工程基于微信小程序的美容美发预约系统的设计与实现

内容摘要

在快节奏的时代当中，人们很难抽出恰当的时间来去到实体店来保养美化自己，往往已经制定的安排被迫取消，这实在当代人的一个痛点。

假如有一款不需要下载app的微信小程序，微信用户基数大，小程序是部署在微信平台运行的，简单，快捷，极度方便人们使用，至此就提出了一款基于微信小程序的美容美发预约项目，通过小程序，顾客只需要在手机上浏览各种美容美发美甲项目，可以减免顾客消费的场地不定性，消费时间不定性，以及内容的不定性，通过微信小程序就可以提前了解美容项目的具体详情，而不需要到实体店等待技师的介绍。

根据自己的空闲时间来预约自己想要的美容美发等项目，可以享受提前预约，随时预约，随时取消，理性安排的优越体验感，避免直接到店享受美容美发项目的人满为患，店铺休息等各种尴尬的问题。

关键词：

提前预约小程序美容美发保养美化

Abstract

Inthefast-pacedera,itisdifficulttofindtherighttimetogotothestoretomaintaintheirbeautification,oftenhasbeenestablishedarrangementshavebeenforcedtocancel,thisisapainincontemporarypeople.IfthereisawechatAPPthatdoesn'tneedtodownloadanAPP,wechathasalargeuserbase,andtheAPPisdeployedtorunonthewechatplatform,whichissimple,fastandextremelyconvenientforpeopletouse,sofar,abeautysalonreservationprojectbasedonawechatAPPhasbeenproposed.ThroughtheAPP,customersonlyneedtobrowsevariousbeautysalonandnailsalonprojectsontheirmobilephones,whichcanreducetheuncertaintyofthevenueforcustomers'consumption,consumptiontimeuncertainty,aswellascontentuncertainty,throughtheWECHATAPPcanbeawareofthespecificdetailsofbeautyprogramsinadvance,withouttheneedtogotothestorewaitingfortheintroductionoftechnicians.AccordingtotheirownfreetimetomakeappointmentsfortheBeautySalonandotheritemstheywant,theycanenjoythesuperiorexperienceofmakingappointmentsinadvance,makingappointmentsatanytime,cancellingatanytime,arrangingrationally,andavoidingtheovercrowdingofpeoplewhogodirectlytothestoretoenjoythebeautysalonandhairsalonitems,awkwardquestionsaboutthestorebreak.

Keywords:

MakeanappointmentinadvanceAppletHairdressingMaintenanceandbeautification

第一章引言

1.1开发背景

微信成为人们日常使用最多的消费，通讯工具，拥有大量的用户量，微信小程序作为以微信平台为基准的不用下载app就能使用里面的功能，自然吸引了大量微信用户的喜欢，对比传统的原生应用程序，微信小程序似乎更加的简单快捷，而美容美发预约系统正是基于当前火爆的微信小程序的的开发，顾客只需在日常的通讯工具微信中使用微信小程序直接可以进入到美容美发预约小程序里面，浏览美容美发套餐的的相关信息并实现一键预约，简单快捷。

1.2研究目的和意义

（1）研究目的：

爱美之心人皆有之，在这个城市步伐快节奏的工作生活当中，特别对于女孩子来说，能在繁忙的工作或者学习之余抽出一段小小的空闲去做一次美容或者美发是每一个爱美女孩子的心愿，而当每次想去美容店放松一下，享受一下的时候，却有一个苦恼？

美容院是否营业，是否需要排队，金钱预留是怎样的，有什么美容美发套餐我可以去放松的，预留的时间是否充裕，这其中充满太多的未知性严重降低顾客的消费欲望。

美容美发预约小程序的的宗旨就是让顾客能提前了解到套餐的服务内容，了解美容美发套餐的透明度。

自己能有选择性预约保养套餐，做到自己安排时间，减少金钱，时间，精力三者的盲目性。

（2）研究意义：

时代的发展变迁，人们在解决温饱的基础上，越来越注重自己的外在形象，一个好的形象在很多场合都让你更加出众，基于这个需求，各种美容美发实体店如雨后春笋一般拔地而起，格式各样的美容套餐层出不穷，有需求就有供应，目前的美容美发店铺基本都是顾客进店询问套餐的服务内容，技师，服务时间，金额等信息再选择套餐进行消费，线上预约好套餐确定好时间再去店里消费，消费的主动权掌握在顾客手中，有助于顾客合理安排时间精力进行享受消费，很好得避免了顾客时间精力的浪费，线上预约再消费是一个新的消费的主流，相信能打破传统的消费观念，让顾客进行美容美发消费的同时，时间的可安排性，未知因素的确定性，消费的透明度得到更好的掌控。

1.3研究内容及创新点

1.3.1主要工作内容

1、美容美发预约小程序以顾客的消费流程作为基础详细的分析与讨论，搭建项目组成结构以及理清并掌握其中的核心的问题，需要学习小程序的组成与构架，同时参考大量小程序网页相关专业的知识、课外书籍以及网络资源来辅助完成。

2、美容美发预约小程序的基础结构，首先要将界面搭建成型，以及做好界面的基础交互，主要分为小程序的外观页面分布设计、具体功能模块的应用、以及走通基础小程序的业务流程。

3、需要对国内目前的美容美发项目的组成以及商业架构，以及人们消费心理等多方面的知识都有基础的分析能力和了解

4、小程序的的开发周期需要持续一段较长的时间，在这个过程中需要到微信开发者平台了解微信小程序前端的知识体系，后端需要用到什么框架，以及后端数据和前端的交互等多方面的知识，全面了解开发过程中所需要用到的知识点，提升小程序开发工作效率，减少小程序开发的周期。

1.3.2小程序主要创新点

1、美容美发预约小程序是一个大胆的尝试，与传统的源生应用程序最大的区别在于，不用下载那繁琐的应用，只需要一个小小的网页，就可以达到有源生应用程序同样的使用效果。

2、美容美发预约小程序的界面简洁明了，特征突出，目的明确，顾客使用起来小程序在人机交互方面更加简易。

3、美容美发预约小程序使用接口的方式访问数据，前端读取后端数据的读取速度更加快速。

4、美容美发预约小程序采用灵活的前后端分离技术，页面良好的交互性更好的适应数据信息的改进和创新。

1.4技术支持

《美容美发预约》是基于微信小程序开发的一款应用程序，所涉及到的技术栈有以下几种：

基础语言采用的是JavaScript，网页骨架采用HTML，网页外观CSS，数据库采用主流数据库mysql，后端接口开发语言Node.js，开发工具采用微信开发者工具。

1.5本章小结

本章介绍了第三产业中的美容美发项目线上预约的发展前景，基于目前微信小程序正在热门当中，开发一项基于微信小程序的美容美发预约系统，顾客可以通过小程序提前浏览到商品的详细情况，让顾客实现先线上了解并预约再门店消费。

做到时间，金钱，精力的同步掌控，同时还介绍了微信小程序所需要的基本技术以及做好一款微信预约小程序需要做什么，如何做。

总此，便是本章论文所描述的大体内容。

第二章开发相关概念与技术

2.1关于小程序的介绍

2.1.1小程序的概念

微信小程序，一款不用下载安装繁琐的应用就可以使用的网页程序，用户使用微信小程序访问网页可以做到与原生app同样功能，微信用户只需要拿出手机扫一扫小程序二维码，好友分享链接或者在微信搜一下小程序名字就可以打开应用并使用其中的功能。

2015年以来，微信小程序开始慢慢变得火热起来，相对原生app，人们更喜欢轻盈便捷的网页小程序，小程序也慢慢走进社会的大多数行业，比如金融业，教育，销售餐饮等每个行业都有对应的小程序，小程序活跃在各大市场当中。

小程序的兴起带动了中国IT界对于微信小程序的研发的热潮，受到数以万计的普通程序员的追捧，同时小程序还应用于公交，地铁等大多数公共场合，让每一个微信用户都能享受小程序带来的便捷，小程序的兴起为大多数人赢得了就业机会，单是2017年，小程序带动人们就业就达到180万的数目，大大增加社会效益。

小程序，方便快捷，不占用内存，安全稳定开发成本低，入口众多等多方面的优点让它在市场中占有很大的分量。

2.1.2小程序的作用

1.广泛消费场景

小程序作为一个便捷的网页程序，轻小，快捷得特点让它渗透了行业的各个领域，小程序场景的使用与设计使得它成为互联网新的一匹“黑马”，它的出现被业界称为变革的先驱者。

事实上小程序也确实做到了，它在潜移默化中改变了用户对应用的使用习惯，基于线下的消费，服务需求，引领线上开发，产品为王的新的经营方式。

2.可及时更新页面数据

小程序最重要一个属性，就是可以通过更改接口及时的更新网站内容与信息，用户可以在最短时间了解小程序最新发布内容，随时浏览最新消息而不需要下载更新。

信息的更新会随着接口的改变而随之改变，并不会存在信息延迟的特点，大大提高了微信小程序的灵活性，同时提供了用户的更优越的用户体验。

3.平台没有限制

微信小程序是一款运行在微信上的网页。

无论任何电脑以及手机安装有通讯工具微信即可扫码或者识别并使用，不存在某一方面限制而无法访问。

4.提高开发效率，降低开发成本

如果将小程序的页面以及功能功能的实现与其他源生应用程序进行对比，从展示布局扩展到，那么小程序的开发并不需要配置相对复杂的环境，以及对应的依赖包。

大大得降低管理成本。

2.2小程序前端的介绍

微信小程序前端是近几年慢慢发展的热门项目，一开始的时候只有简单的应用能实现功能的程序，小程序的火热发酵发展，小程序的使用者对用户交互这一方面的需求日益增高，既要视觉上的满足也要增加使用者的用户交互体验，而JavaScript加上WXSS和WXML就能满足视觉上的要求以及小程序与使用者的交互也能更加融洽，使用WXML，WXSS构成前端页面的组成要素，JavaScript负责的是增加人机交互体验和逻辑数据的处理。

JavaScript负责将数据库的数据传递给前端页面并进行渲染，而用户的操作交互则通过JS的逻辑思维进行对数据库的数据进行读写操作。

2.2.1系统开发所需的技能

1.WXML的逻辑与写法

开发人员需要适应WXML的逻辑与编写，WXML不像HTML那么宽松，单个标志需要以END结束，否则运行页面将会报错，无法正确进行页面的渲染，页面将渲染失败，无法满足需求文档所要求的功能页面展示。

WXML可以与page页面的动态数据进行绑定，WXML主要的功能是构建界面元素并进行数据的渲染展示。

2.WXSS的使用

WXSS用来控制WXML的控件在所属page页面当中怎么展示，在页面绘制采用WXSS组件样式，对页面的布局、颜色等因素和页面内容等多方面有着很大的搭建作用，WXSS是通过调控页面结构的风格，从而搭建整个页面的主题风格，WXSS相当于一个修饰器，修饰我们的界面元素之间的布局以及他们之间的相互关系。

3.JavaScript

JavaScript是一种轻量级的编程语言，属于脚本解释性语言，JavaScript对于新手来说很容易入门，可插入HTML页面中，由现代所有的浏览器都可以执行程序，JavaScript的标准库维护状态活跃，主要的标准库包括：

Underscore,Loadsh,Ramda,MathJS,Moment,Sugar等当前热门的JS标准库。

JavaScript的主要用途包括：

嵌入动态文本到HTML页面，对浏览器做出响应，读写HTML元素，检测访客的浏览器信息，控制cookies，包括创建和修改等，最关键的是新兴的node.js把JavaScript引入了服务器端，JavaScript已经成为全能型选手。

4.nodeJS

Node.js提供一种简单安全的方法在JavaScript中构建高性能，可扩展性的网络应用程序，主要特点有：

单线程，非阻塞，事件驱动编程，以及跨平台。

正是Node.js具有多方面的优点，使得它在服务器端占领一个领先地位。

Node.js适用于密集型场景，ResultFulAPI,RPC服务等多个流行场景，最重要的是Node.js可以作为基础工具，前端领域的编译器，构建工具，搭建脚手架等，比较出名的例如Webpack，Guip都是比较成功的。

2.3微信开发者工具

微信开发者工具是微信官方提供给开发者开发使用并进行调试的工具，借用微信开发者工具可以更方便，安全得开发符合需求功能的网页小程序。

开发者工具的简单易用，易部署，易发布等优点，带动开发人员开发微信小程序的积极性、提供小程序开发文档，目的是引导和帮助小程序开发人员解决开发所遇到的重点难点，微信小程序设计指南，旨在帮助小程序开发人员构建总体程序框架与设计，微信开发者工具能实现开发调试、编辑代码和发布程序等多方面重要功能。

2.4本章小结

本章讲述了微信小程序的基本信息以及前端与以及开发工具等概念，通过了解开发所需要的WXMLWXSSJavaScript等前端知识，对于开发有很大的知识框架，对于开发的过程有很大的指导作用，从基础知识概念到实际运用知识操作，一步一步逐渐完善我们的项目。

第三章 系统开发环境与流程

3.1运行环境

本软件的运行环境：

WINDOWS操作系统。

硬件平台：

i5及以上

操作系统和版本：

Windows10

支撑环境和版本：

微信开发者工具V1.02mysqlworkbench8.0

3.2系统开发流程

1、可行性分析与需求调研：

经过市场走访多家美容美化店铺发现，目前的大部分美容美发服务大多数都是通过顾客进店咨询和顾客打电话进行预约服务的主要的两种途径，而通过用户拥有基数大微信小程序来进行对服务的预约还是市面上还是比较少的，开发一款微信小程序来让顾客来预约美容美发套餐是有很大的市场前景的，综上所述，我认为开发微信美容美发预约服务小程序具有可行性。

2、需求分析：

美容美发预约小程序是运行在微信上面的，顾客只需要在微信上通过网页即可访问，稳定性高，不用下载APP对于那些繁于电话预约来说，通过自己小程序就可以实现美容美发服务的预约功能，小程序是当前比较火爆的的网页程序，通过小程序来预约服务消费简单快捷的特点更是一个亮点，顾客可以在小程序上面进行对商品的浏览并轻易的预约，并安排好时间去店里服务。

3、概要设计：

美容美发预约小程序主要分为四个模块，首页模块，技师模块，我的模块，以及预约订单管理模块，后端采用接口进行数据的传输，顾客可以先浏览服务信息，进行选择服务进行预约，并可以进入预约订单进行操作，数据库使用mysql用来存储数据信息。

4、详细设计：

美容美发预约小程序主要分为四个模块，首页模块，技师模块，我的模块，以及预约订单管理模块。

在首页模块，顾客可以首页浏览到商品服务的信息，顾客可以根据不同的项目来进行对服务进行切换，点击项目图片可以跳转到商品服务具体信息页面，顾客可以填写基本信息，对服务进行预约；在技师模块，顾客可以选择技师并可以浏览技师的基本信息，并可以选择该技师名下的服务进行预约；在我的模块，顾客可以浏览商家的基本信息，并由此进入预约订单管理界面；在预约订单模块，进入预约订单预约列表，顾客可以对预约订单信息的浏览，并可以进行对订单的取消操作。

5、系统编码：

根据详细设计的要求，在认真分析预约整个流程过程中进行对数据结构，以及算法分析，同试实现各模块数据联通，并根据需求进行严谨编码，系统的功能，性能，接口，界面等方面均符合要求。

6、测试验收：

根据详细设计文档来测试系统软件的功能，性能，接口，界面等多方面能否符合要求。

3.3本章小结

本章主要研究系统的开发流程与系统所需环境，从需求分析到测试验收，明确系统开发每一步所走的流程，以及系统开发需要的软硬件、系统环境以及其他需求，从需求分析开始着手，明确自己的系统需要那些功能点，那些功能点是符合用户需求的，避免出现没有意义的功能点，概要设计与详细设计的目的是，确认那一部分功能为侧重点，哪一些功能为难点实现的功能，做好接下来的开发的时间精力安排。

为开发者提供一个的清晰路径过程以及一个明确的目标需求，对于系统的功能设计有很大的指导作用。

第四章 系统功能需求

4.1系统功能概述

《美容美发预约》系统是一款基于微信小程序开发的美容美发预约系统，主要是用来让顾客可以通过使用微信小程序提前预约到相应的美容美发套餐服务，先线上预约再自己安排时间到店里面进行消费服务，该美容美发预约系统主要包含首页模块、技师模块、预约订单模块、我的模块四个大模块。

4.2系统常规功能

首页模块：

主要包含广告，以及商品服务的列表展示，并实现商品服务预约的功能。

技师模块：

主要是技师信息的展示，以及技师所属的服务商品得列表展示功能，预约订单模块：

主要是查询预约服务详细情况功能，个人中心模块：

主要是预约订单查询的入口功能，和查询美容美发商家信息的功能。

4.2.1首页模块

1.主页页面：

（1）主页页面的响应序列流程：

接口获取数据成功以后，首页上方会有广告轮播图，下方是美容美化的套餐信息，分页有五个分类切换，分别为“推荐”“美甲”“美容”“美发”“美睫”在不同的分类下有不同的服务信息，顾客可以根据自己想要的服务点击进去不同的分页，点击对应的套餐，进入相关的详情信息页面并能实现预约，图4-1所示。

图4-1主页信息页面

（2）失败后的主页页面，提示顾客“暂无数据”，图4-2所示，失败的原因可能有如下原因：

1、网络异常造成的加载数据失败

2、有网络，但是非常慢，以至于到达设定的延时时间失败

3、接口数据编码错误异常，数据访问失败

4、数据库数据异常，数据访问失败

5、其他未列出的错误

图4-2主页信息加载失败页面

当顾客点击对应的套餐，进入套餐详情信息页面，顾客会浏览到套餐的基本信息，下图4-3所示

图4-3套餐详细信息页面

当顾客点击预约套餐，进入商品预约资料信息页面，顾客填写选择基本信息以后即可预约套餐，并生成套餐预约订单，图4-4，图4-5所示所示

图4-4预约填写信息页面

图4-5预约列表信息页面

4.2.2技师模块

1.技师页面：

（1）响应序列流程：

顾客点击下表导航“技师”，进入技师页面，可以看到技师人员的列表，选择技师点击可进去技师的详细个人信息，顾客可以了解到技师的的工作经历等多方面的信息，以及属于技师的美容美发套餐，供应顾客选择图4-6所示。

图4-6技师列表信息页面

（2）失败后的技师页面，提示顾客“暂无数据”，如图4-7所示，失败的原因可能有如下原因：

1、网络异常造成的加载数据失败

2、有网络，但是非常慢，以至于到达设定的延时时间失败

3、接口数据编码错误异常，数据访问失败

4、数据库数据异常，数据访问失败

5、其他未列出的错误

图4-7技师详情信息加载失败页面

当顾客点击技师列表，则会展示可以展示技师的个人基本信息以及技师的基本服务内容，图4-8所示

图4-8技师详情信息页面

4.2.3预约订单模块

1.预约订单页面：

（1）响应序列流程：

顾客填写信息，确定预约下单以后，在我的预约下面会生成，预约订单的基本信息，图4-9所示

图4-9预约列表信息页面

（2）顾客预约下未生成预约订单的原因主要有如下原因：

1、网络异常造成的加载数据失败

2、有网络，但是非常慢，以至于到达设定的延时时间失败

3、接口数据编码错误异常，数据访问失败

4、数据库数据异常，数据访问失败

5、其他未列出的错误

当顾客点击预约订单列表，会展示预约订单的基本信息，同时顾客可以取消预约，订单列表将会在列表中删除。

图4-10所示

图4-10预约列表详情页面

4.2.4个人中心模块

1.我的页面：

（1）响应序列流程：

顾客点击“我的”页面，将会有两个功能入口，分别是“我的预约”和“店铺信息”图4-11所示

图4-11我的信息页面

当顾客点击“我的预约”，会展示预约订单的基本信息如4-12所示，同时顾客可以点击“店铺信息”，订单列表将会在列表中删除。

图4-13所示

图4-12我的预约订单页面

图4-13店铺信息页面

4.3本章小结

第四章把整个《美容美发预约》系统的功能模块做了一个详细的描述与分析，每个页面到具体的操作流程都作了一个详尽的介绍，这些的功能点的分析，不但有利于项目顺利开发，而且还能让阅读者对整个系统有了初步的了解，方便阅读者对本小程序的操作，这一章系统功能模块的分析对开发的指导有很大的指导作用的，开发者需要根据需求文档来编写相应的程序的功能，如果没有一个准确的开发功能的需求文档来作为基础标准，到后面出现一些需求变更或者不明确的要求，会对整个项目的进展产生严重的影响，所以本章的描述对于后续的进展是非常重要的，也是项目的成功的一部分，对于的数据库的设计有着很大的指导作用。

第五章系统总体设计

5.1编写目的

系统总体设计的目的是确定美容美发预约系统的主要功能与性能参数，使用的技术，系统所使用的架构等一些重要的参数指标，系统设计是软件开发完成的地基，底层建设决定高层的坚固，大大程度上决定了软件开发过程中所用到的功能模块，技术，时间，成本等因素，这些因素决定了软件后续的开发流程能否正确进行，系统设计是在小程序的用户需求基础上，对软件的层次结构，软件实现的技术框架，软件的模块结构等多方面进行分析，构建产品总图以及功能总图，可以看出，系统总体设计是在软件开发中最重要的指导框架，能提高系统总体蓝图的构建，架构起整个系统的总体流程。

5.2总体软件实现架构描述

5.2.1软件层次结构

[描述软件层次结构，每个层次需要完成的功能。

从总体的角度进行功能模块的划分，并对关键的功能模块进行定位]图5-1所示：

图5-1软件总体框架

5.2.2软件实现技术架构

[说明整个软件项目的实现技术架构。

比如采用什么平台、开发工具等。

]，图5-2所示：

图5-2软件实现技术架构

5.2.3系统总体模块结构

图5-3所示：

图5-3系统总体模块架构

5.3系统常规功能子系统

5.3.1首页模