• {{item}}
  • {{item}}
  • {{item}}
  • {{item}}
  • 天祈
  • {{item.name}}
  • {{item.name}}
  • {{item.name}}
  • {{item.name}}

Web开发——健身网站“金轮健身”

大一上学期Web开发的期末大作业
博客园图床不好搞，图片有点多，懒狗一只，半途而废了，大伙自己看视频看源码结合文章看实际效果吧。



摘要

视频讲解

源码分享

TanJI-C/Web-CoachOnline (github.com)

快速预览

该网站最终可以分为7个页面。分别为首页(HomePage)，教程(Course)，教练预约(CoachAppointment)，登录注册界面(LoginRegister)，用户界面(UserInfo)，教练界面(CoachInfo)，管理者界面(AdminInfo)。

  1. 首页：首页实现基础的展示和导航作用。实现了轮播图（展示网站创办的三个理念），教程指导（“教程”页面的简略版），健身知识（“教程”页面的简略版），专业指导（“教练预约”的简略版，实现了比较好的动态交互效果），关于金轮健身（地图功能的实现）。

    image-20220326234814305

  2. 教程：实现用户的选课功能，以及计算功能。“选课功能”包括实现支付想要购买课程以及将购买后的课程实行进行更新（从可以选的课程中去掉，在“我的课程”中可见）。计算功能包括简单的卡路里计算，BMI计算，标准体重计算等等相关计算功能。

    ![img](file:///C:/Users/Hello/AppData/Local/Temp/msohtmlclip1/01/clip_image002.gif)

  3. 教练预约：实现私人教练的预约功能。教练分为“所有教练”（卡片展示）以及“优秀教练”(手风琴展示），点击对应的按钮会弹出窗格，可以进一步完成私人教练的预约功能（包括“加入到关注的教练”以及“填写预约信息”）。

    ![img](file:///C:/Users/Hello/AppData/Local/Temp/msohtmlclip1/01/clip_image004.gif)

  4. 登录注册界面：实现用户的登录注册功能以及管理员的登录功能。用户登录之后会跳转到对应的界面（教练登录跳转到教练界面，用户登录跳转到用户界面），管理员登录需要通过二维码进行（为方便处理，点击弹出窗的确定之后可以跳转到管理者界面）。注册成功之后执行自动登录同样会跳转到对应界面。登录注册包含检测功能。

    ![img](file:///C:/Users/Hello/AppData/Local/Temp/msohtmlclip1/01/clip_image006.jpg)

  5. 用户界面：实现用户的基本功能，包括查询我的课程，我的教练，我的信息，我的计划。该界面通过嵌套两个导航栏（第一个是左右式，第二个是上下式的，如下图所示），实现了用户的多信息查看。

    ![img](file:///C:/Users/Hello/AppData/Local/Temp/msohtmlclip1/01/clip_image008.jpg)

  6. 教练界面：实现了管理学生的出勤记录，查看私教预约安排时间表，查看个人信息的功能。

    ![img](file:///C:/Users/Hello/AppData/Local/Temp/msohtmlclip1/01/clip_image010.gif)

  7. 管理者界面：实现了用户的管理功能，教练的管理功能，以及查看健身网所有课程的功能。用户以及教练的管理功能差不多，可以进行添加成员（点击表格顶部左侧按钮），删除成员（表格成员信息右侧按钮），更新成员信息（直接点击单元格进行更改），筛选用户信息功能（点击表格顶部右侧按钮）。

    ![img](file:///C:/Users/Hello/AppData/Local/Temp/msohtmlclip1/01/clip_image012.gif)

  8. 页面头部：以导航栏的形式固定在各个页面的顶部，实现基本的导航功能，提高网站的易用性。共有四种情况（图8-1，图8-2，图8-3，图8-4），为了页面的直接链接，笔者将所有按钮都放在了一起（图8-5）。通过JS实现了导航栏在不同位置的背景颜色，在页面最顶部时呈现透明，不是在页面最顶部时呈现黑色。

    image-20220326233553876

  9. 页面尾部：底部同样实现了一些基本的导航功能。通过CSS样式实现了良好的交互性。

    image-20220327000004348

Project Plan

  1. 功能性描述：

建设一个以线下健身房为基准，提供线上预约服务、简单网站服务以及查看自身服务的网站。线上预约服务包括线下团课报名，以及线下私人教练预约功能。简单网站服务包括简单的卡路里计算、BMI计算等与健身相关的服务。查看自身服务的功能包括查看自己预约的团课，查看自己预约的教练，查看自己的信息，查看自己的健身计划。

  1. 技术性描述：

    1. 语言使用：此次搭建使用了HTML，CSS，JavaScript三种基础语言。

    2. 框架使用：使用了Bootstrap框架（主），layui框架（仅使用其表格功能以及图标使用--）。

    3. 类库使用：几乎所有页面都使用了jquery库，部分页面使用了animate（动画库），qrcode（二维码生成器库），jquery-confirm（确认框库）。

  2. 在宣传性以及实用性上，笔者做了一个平衡，在宣传性实现的同时，还做到了较高的实用性实现了许多的功能。效果见Functional
    Description说明

  3. A Navigation Chart

    1. 页首导航栏：左侧按钮导向主功能界面，右侧按钮导向个人信息界面或登录注册界面。

      1. 导航栏为动态导航栏，会根据不同的登进人员有四种不同状态，非登录状态，用户登录状态，教练登录状态，管理者登录状态。为了页面的直接链接以及方便展示，笔者将首页的导航栏设置为非登录状态，将教程，教练预约界面的导航栏设置为杂糅用户教练管理者登录状态的状态，将用户（教练，管理员）界面设置用户（教练，管理员）登录状态。

      image-20220326233553876

      图 1-1非登录状态（首页）

      image-20220326234357914

      图 1-2杂糅状态（教程，教练预约）

      image-20220326234414037

      图 1-3用户登录状态（用户界面）

      image-20220326234418924

      图 1-4教练登录状态（教练界面）

      image-20220326234425110

      图 1-5管理员登录状态（管理员界面）

      1. 结构：跳转关系图如下

      image-20220326234436290

Visual Style (Storyboard / Moodboard)

  1. 色调：该网站以橙红色（#FF3300），黑色，白色为主色，以橙黄色，黄色，红色为辅助色。
  2. 整体风格：在页面交互效果上，实现了较好的效果，在保证功能实现的同时，也给予用户十分良好的反馈。如鼠标经过时有样式上的改变，甚至于html内容上的改变。在Functional
    Description中将进一步说明。

Website Document Outline （WireFrame Design）

主功能界面（首页，教程，教练预约界面）以及登录注册界面的线框图以图6-1为基准，个人信息界面（用户界面，教练界面，管理员界面）的线框图以图6-2为基准。

image-20220326235035846

​ 图 6-2线框图1

image-20220326235055662

​ 图 6-2线框图2



## 细节说明

下面将逐个页面的对实现的功能进行介绍：

页首页脚导航（额外说明）

  1. 页首导航栏功能：基础功能在A Navigation
    Chart已经说明此外不予赘述。为提高网页的交互性，使用JS实现了导航栏在不同位置的背景颜色，在页面最顶部时呈现透明，不是在页面最顶部时呈现黑色（上图都是透明情况，下图是黑色情况）

    image-20220326233553876

    图 1-6黑色情况

  2. 页首导航栏实现：完整html代码，以及部分css代码如图，

    image-20220327000314756

    image-20220327000320319

  3. 页脚导航栏功能：基本的链接，联系说明，版权说明。

    image-20220327000325849

  4. 页脚导航栏实现：部分html代码以及部分css代码

    image-20220327000342774

    image-20220327000347300

首页：

  1. 轮播图：实现了基本的轮播功能，以及简单的动画效果，提高了交互性，下为实现效果

    image-20220327000355637

    1. 注意事项：跳到下一个动画时，元素会以动画进行过渡；移动到按钮，按钮颜色会改变。

    2. 功能实现：使用了bootstrap提供接口，以及animate库。html代码，css代码如下。

      image-20220327000418602

      image-20220327000423868

  2. 教程指导：使用了bootstrap提供的栅格布局，实现了简单的布局。效果如下图

    image-20220327000437337

    1. 功能实现：功能较为简单这里为节省空间，不放出代码了

  3. 健身知识：左侧实现了点击切换课程的功能，让用户对团课有一个简单的浏览。右侧时计算工具。点击左侧相关链接之后会跳转至教程界面的团课报名，点击右侧则会跳转至教程界面的实用工具。

    image-20220327000449294

    1. 功能实现：使用了bootstrap提供接口以及栅格布局实现了效果，这里为节省空间只放出右侧的html代码。

      image-20220327000455529

  4. 专业指导：列出了一些私人教练，让用户对私人教练有一个简单的浏览和了解。

    image-20220327000507863

    1. 注意事项：教练卡片实现了较好的交互效果。

    2. 功能实现：通过css实现了较好的交互效果，下面仅展示html以及css核心代码

      image-20220327000520923

      image-20220327000524962

  5. 关于金轮健身：实现了毛玻璃效果，以及地图功能

    1. 功能实现：毛玻璃效果以及后面两个球的实现CSS代码如图所示，地图展示功能html以及JS部分。
      毛玻璃主要是要设置盒子div的背景颜色过渡以及模糊处理。而地图功能主要是使用百度地图提供的api（注意该功能的查看需要联网）

      image-20220327000548655

      image-20220327000552305

      image-20220327000558039

教程：

  1. 轮播图：功能实现类似于首页的轮播图，为维持新鲜感，使用css对其位置进行了简单调整。

    image-20220327000606335

    1. 功能实现：按钮组的位置调整通过css的text-align进行调整，这里通过调用bootstrap对应的类进行了调整。下面展示一个窗格的html代码

      image-20220327000611778

  2. 团课报名：重点功能，实现了学生购买线下团体课的功能，样式上使用了毛玻璃效果。

    image-20220327000616275

    1. 功能说明：“我的课程”是个人已经购买的团课，“所有课程”是个人未购买的团课，剩下的三个按钮会显示未购买课程中对应分类的课程。

    2. 注意事项：

      1. 左侧为导航栏，方便学生筛选。购买前和购买后的课程卡片会有所不同，卡片的橙色购买按钮会变为灰色的已购买按钮。下图展示已购买后的团课卡片

        image-20220327000634130

      2. 点击购买团课卡片的购买按钮会出现支付确认界面，因为没有实现后端功能，笔者这里设置为点击确定即为购买成功，取消则为取消购买。购买成功之后团课卡片会移动到我的课程（左侧按钮）中去。

        image-20220327000638856

    3. 功能实现：

      1. 右侧按钮的筛选功能：使用了isotope库，通过对盒子设置对应的类名实现对团课卡片的分类，然后将类名与对应按钮进行绑定操作（见HTML代码），最后加点JS代码实现最后的功能。

        image-20220327000652750

        image-20220327000656016

      2. 二维码支付框：使用了jquery-confirm库（确认框部分），qrcode库（二维码生成）。在弹框生成的时候设置其内容，调用qrcode库，生成二维码；并在点击确定时，进行刷新和修改卡片的按钮内容。JS代码实现如下

        image-20220327000700969

  3. 实用功能：可以进行简单的健康计算，以及简单的卡路里计算功能。

    image-20220327000749173

    image-20220327000752469

    image-20220327000756094

    1. 注意事项：上面四个按钮会打开侧边栏幕布，并动态修改幕布的内容，计算出的结果也不一样。下面的按钮则会弹出一个窗口。

    2. 功能实现：

      1. 上面四个按钮：实用bootstrap提供的幕布模板，并在此基础上修改代码内容，插入表单。

        1. 为动态修改幕布内容，通过JS让对应的按钮绑定上函数进行实现。另外为了实现同一个按钮，不同按钮呼唤出来的情况下功能不同，需要为其设定进行标记，这里通过设置一个新属性实现。下为HTML代码以及JS代码。image-20220327000811845

          image-20220327000818981

        2. 为实现对应数据的计算，通过JS让“计算”按钮绑定上函数进行实现。下为JS代码。

          image-20220327000827093

          image-20220327000835262

      2. 卡路里计算器：实用bootstrap提供的模态框模板，并在此基础上修改代码内容，插入表单。

        1. 为实现对应数据的计算，通过JS让“计算”按钮绑定上函数进行实现。下为JS代码。

          image-20220327000842138

教练预约：

  1. “多种选择 任君挑选”：展示所有教练，实现了很好的交互效果

    1. 功能实现：实用了bootstrap的栅格布局，并通过CSS对鼠标经过事件进行了设置。此外为了代码的简洁性，卡片的添加使用了JS进行。下面是鼠标经过交互对应的CSS代码，以及卡片添加的代码。

      image-20220327000849444

      image-20220327000855075

    2. “8个jojo……”：实现了手风琴效果

      1. 功能实现：通过CSS进行实现，核心属性为flex-shrink以及flex-grow。另外为了代码简洁性同样使用了JS实现了卡片的添加。CSS以及JS代码见下。

        image-20220327000903417

        image-20220327000907516

    3. 私人教练预约功能：重点功能，点击当前页面的任何一个包括手风琴在内的教练卡片，都会弹出底下幕布，实现进一步的私人教练预约功能。

      image-20220327000912576

      1. 注意事项：顶部按钮可以将教练列为关注的教练，左侧表单可以进行选择

      2. 功能实现：使用了qrcode库生成支付二维码，顶部按钮通过bootstrap提供的模态框实现，右侧套餐的选择通过JS实现。下为幕布的html代码，以及“顶部按钮”、“支付二维码生成”“套餐选择”的实现JS代码。

        image-20220327000917762

        image-20220327000923000

登录注册界面

  1. 登录功能：实现了表单检测

    1. 注意事项：选择“用户登录”选项之后登录会跳转到用户界面，选择“教练登录”则会跳转到教练界面。右上角可以跳转到注册功能。

      1. 功能实现：使用bootstrap提供的表单实现表单检测功能。通过submit函数实现不同登录选项跳转到不同页面，下面是html代码，以及JS代码。

        image-20220327000930923

        image-20220327000934508

    2. 注册功能：实现了表单检测，以及发送验证码倒数功能。

      1. 注意事项：注册选项不同，跳转的页面也不相同。右上角可以跳转到登录功能。

      2. 功能实现：倒数功能使用setInterval函数实现，下面是JS代码

        image-20220327000940668

    3. 登录与注册的动画效果

      1. 功能实现：通过设定div盒子的高度以及盒子的隐藏实现点击出现登录注册的效果，JS代码如下。

        image-20220327000946755

    4. 管理员登录：将管理员的登录设置为二维码登录

      1. 功能实现：使用了bootstrap提供的模态框模板，将其内容简单修改，并引入qrcode库即可，不予赘述。

用户界面

  1. 用户简单信息展示：简单的展示功能

    image-20220327000953749

    1. 功能实现：使用bootstrap提供的栅格功能进行了实现，不予赘述。

    2. 个人管理：左边的四个导航栏分别为我的课程，我的教练，我的信息，我的计划，右边的则是对应的导航栏内容。

      1. 功能实现：通过嵌套bootstrap提供的导航模板，实现基本的结构，在通过一些栅格布局，以及简单调整进行实现。不予赘述

教练界面：

  1. 教练简单信息展示：简单的展示功能

    image-20220327000958578

    1. 功能实现：略

    2. 个人管理：实现了团课出勤登记，以及教练个人私教预约安排

      1. 团课出勤登记：

        image-20220327001003728

        1. 注意事项：点击表格右上角图标可以进行筛选

        2. 功能实现：使用layui的表格功能：layui表格关键HTML代码以及设置代码见下。

          image-20220327001009628

          image-20220327001013485

      2. 私教预约安排：

        1. 功能实现上和“课程”页面的“团课报名”差不多，此处不予赘述。

管理员界面

  1. 教练简单信息展示：简单的展示功能

    image-20220327001019252

    1. 个人管理：实现了用户（教练）的添加、删除以及数据更新，以及课程一览

      1. 注意事项：点击表格右上角图标可以进行筛选。用户（教练）的数据更新通过点击对应单元格直接编辑实现。右侧查看按钮可以查看成员信息。

      2. 功能实现：

        1. 用户（教练）添加：结合layui提供的接口以及自己的JS调整进行实现。首先要加入新的表单标签，由下图左边一大长串的append函数实现；然后绑定提交按钮，进行数据验证，最后通过提供的cache，reload函数将读到的数据弹入表格中并进行重载渲染。下位JS代码

          image-20220327001024766

        2. 更新数据通过调整layui提供的接口进行实现，直接点击单元格进行编辑即可

        3. 删除数据：通过layui提供的接口进行实现。先弹出确认框，点击确认之后，在调用del函数进行删除。

          image-20220327001031516

        4. 查看数据：通过layui提供的接口进行实现。代码见下

          image-20220327001034844

        5. Layui表格关键HTML代码见下

          image-20220327001039320

posted @ 2022-03-27 00:38  TanJI_C  阅读(255)  评论(0)    收藏  举报