• {{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  阅读(254)  评论(0)    收藏  举报