摘要：随着互联网科技的发展，现代化信息管理技术也在在一天天的快速发展。同时给广大人民群众的日常生活和工作生涯都带来了非常大的便当，互联网的信息化建设与管理为公司，个人等节约了许多人力操作运营的成本，提高了人们的工作效率。加上现在我国全民一起运动健身的思想普及，越来越多的体育馆对广大人群众开放。对于用户的来说，他们需要一个随时随地都能快速查看信息并且实时预约的查询搜索成本和交易成本都很低的体育场馆预约系统。对于管理员来说可以实时掌握体育场馆预约的状况。

针对上面的各种情况分析，我们的市场此时很需要提供一个在线体育场馆预约系统来满足以上各方面需求。此系统项目主要完成以下内容：

(1)完成微信端和Web端的体育场馆预约系统的设计与实现；

(2)完成会员用户UI，包括体育场馆预约系统网站注册和登陆界面，用户所需要的

  场馆场地信息进行实时查询与搜索界面，最后进行在线预约和取消预约的界面；

(3)完成后台管理员的UI界面，主要有管理员对会员和会员体育场馆预约记录的搜

  索查询界面，信息查看弹窗界面以及删除，修改等的管理界面，管理员对场馆的

  管理界面，还有管理员对场馆资讯的管理界面，最后是系统管理界面其中有系统

  日志和系统设置。

体育场馆预约系统主要使用JQuery，Bootstrap，HTML+CSS等技术来定制该系统UI界面的设计与实现。为用户提供体育场馆的信息，也能接收用户提出的的需求信息，降低会员用户的查询搜索成本和预约交易成本。让体育场馆的管理员们使用现代化信息管理技术管理体育场馆，节约人力操作运营的成本同时优化资源，提高体育场馆管理员的工作效率和场馆的利用率；会员用户的功能模块与后台管理员的功能模块相互分离，以便提高系统的安全性而且有利于系统的管理。

关键词：JQuery；HTML+CSS；预约系统；UI界面

目录

摘要

Abstract

1 概述-1

1.1 研究背景和意义-1

1.2 研究目的和内容-2

2 系统分析-3

2.1 系统需求分析-3

2.2 采用的关键技术介绍-5

2.2.1 开发工具-5

2.2.2 JQuery技术-5

2.2.3 Bootstrap技术-6

2.2.4 HTML与CSS技术-6

2.3 可行性分析-6

2.3.1 技术可行性-6

2.3.2 操作可行性-7

2.3.3 经济可行性-7

3 系统概要分析-8

3.1 系统总体设计-8

3.2 会员用户模块设计-9

3.2 管理员系统模块设计-10

4 系统UI详细设计及实现-12

4.1 微信用户UI-12

4.1.1 主界面-12

4.1.2 登陆与注册界面-13

4.1.3 场馆查找界面-14

4.1.4 场馆详情界面-14

4.1.5 场馆预约界面-15

4.1.6 场馆预约成功界面-16

4.1.7 场馆资讯界面-16

4.1.8 预约查看与取消预约界面-17

4.2 Web端用户UI-18

4.2.1 主界面-18

4.2.2 注册与登录界面-19

4.2.3 场馆查询界面-20

4.2.4 场馆预约界面-20

4.3 管理员UI-21

4.3.1 主界面-21

4.3.2 会员管理界面-22

4.3.3 场馆管理界面-25

4.3.4 资讯管理界面-27

4.3.5 数据统计界面-29

4.3.6 系统管理界面-29

5 系统测试与分析-31

5.1 注册与登录模块测试-31

结    论-35

参 考 文 献-36

致    谢-37