https://www.bilibili.com/video/BV15W421N7mc/
演示视频:
1 系统实现及测试
1.1 系统主要模块的实现
1.1.1 系统登录功能界面
管理员进入系统之后首先要进入到系统的登录页面,会员在进行留言等操作时也需要登录到系统中,在登录页面中将验证用户输入的用户名以及密码是否正确,输入正确的用户名及密码才可以成功的登录系统,如果用户名或者密码错误将返回错误提示,其实现页面如图6.1、6.2所示。
图1.1 系统管理员登录界面
图1.2 会员登录界面
1.1.2 修改登录密码功能界面
管理员成功登录系统之后,点击导航栏菜单“修改登录密码”,系统跳转到修改登录密码子界面,在这里需要输入正确的原密码和设置新密码,才能实现修改操作,其实现页面如图6.3所示。
图1.1 修改登录密码界面
1.1.3 会员注册功能界面
在系统首页导航栏点击“注册会员”菜单,可以打开会员注册信息填写页面,在这里需要填写或选择会员帐号、密码、姓名、性别、年龄、驾照编号以及身份证号信息,确定保存时系统会对必填项进行非空验证,是否为空是通过form表单中的οnsubmit="return checkForm()来检查,checkForm()函数中是各种的校验输入数据的方式,其实现页面如图6.4所示。
图1.1 会员注册界面
1.1.4 注册信息管理功能界面
注册信息管理页面功能是展示当前已经添加到系统当中的所有会员信息列表,可以选择指定的会员信息进行删除操作。其实现页面如图6.5中所示。
图1.1 注册信息管理界面
1.1.5 球队信息管理功能界面
在球队信息管理页面中可以列表显示出所有的球队信息,包括球队信息的球队名称、地址以及介绍信息,可以选择指定的球队进行删除的操作。其实现页面如图6.6所示。
图1.1 球队信息管理界面
如果需要添加球队信息,可以进入到球队添加页面,添加时系统会对必填项进行非空验证,是否为空是通过form表单中的οnsubmit="return checkForm()来检查,checkForm()函数中是各种的校验输入数据的方式,其实现页面如图6.7所示。
图1.2 球队管理界面
1.1.6 球员信息管理功能界面
在球员信息管理页面中可以列表显示出所有的球员信息,包括球员信息的所在球队、姓名、性别、年龄、球衣号码、位置、积分以及进球信息,并可以选择指定的球员进行删除的操作。其实现页面如图6.8所示。
图1.1 球员信息管理界面
如果需要添加球员信息,可以进入到球员添加页面,添加时系统会对必填项进行非空验证,是否为空是通过form表单中的οnsubmit="return checkForm()来检查,checkForm()函数中是各种的校验输入数据的方式。其实现页面如图6.9所示。
图1.2 球员添加界面
1.1.7 比赛信息管理功能界面
在比赛信息管理页面中可以列表显示出所有的比赛信息,并可以选择指定的比赛进行删除的操作,点击更新比赛结果按钮可以对比赛结果信息进行刚更新。其实现页面如图6.10、6.11所示。
图1.1 比赛信息管理界面
图1.2 更新比赛结果界面
如果需要添加比赛信息,可以进入到比赛添加页面,添加时系统会对必填项进行非空验证,是否为空是通过form表单中的οnsubmit="return checkForm()来检查,checkForm()函数中是各种的校验输入数据的方式。其实现页面如图6.12所示。
图1.3 比赛添加界面
1.1.8 友情链接信息管理功能界面
在友情链接信息管理页面中可以列表显示出所有的友情链接信息,并可以选择指定的友情链接进行删除的操作。其实现页面如图6.13所示。
图1.1 友情链接信息管理界面
如果需要添加友情链接信息,可以进入到友情链接添加页面,添加时系统会对必填项进行非空验证,是否为空是通过form表单中的οnsubmit="return checkForm()来检查,checkForm()函数中是各种的校验输入数据的方式。其实现页面如图6.14所示。
图1.2 友情链接添加界面
1.1.9 留言信息管理功能界面
在留言信息管理页面中可以列表显示出所有的留言信息,并可以选择指定的留言进行删除的操作,点击回复按钮可以对留言信息进行回复。其实现页面如图6.15、6.16所示。
图1.1 留言信息管理界面
图1.2 留言回复界面
1.1.10 会员查看球队信息功能界面
会员在系统首页可以查看球队信息,在球队信息列表中可以查看球队信息所有内容。其实现页面如图6.17所示。
图1.1 球队信息列表界面
1.1.11 会员查看比赛信息功能界面
会员点击导航栏菜单“比赛信息”以及查看所有的比赛,在比赛信息列表中点击球队可查看球队和该球队球员详细信息。其实现页面如图6.18、6.19中所示。
图1.1 比赛信息列表界面
图1.2 球队详细界面
1.1.12 系统留言交流功能界面
会员在系统首页可以查看系统留言板信息,在留言信息列表中点击可进入查看留言详细内容,点击我要留言可进行留言交流。其实现页面如图6.20、6.21中所示。
图1.1 留言板信息列表界面
图1.2 填写留言信息界面