Web前端开发-实验指导手册（第二版）(4)(1).doc

Web前端开发

实验指导书

王育才

2022.08

前言

《Web前端开发》课程是计算机科学与技术专业学生的一门专业选修课。通过本课程的学习，学生能够掌握Web前端开发常用技术（HTML、CSS、Javascript）、实用工具以及程序设计方法，具备运用前端开发技术实现网站页面的设计的能力。通过教、学、做使学生掌握基本前端涉及的知识及常见第三方库的使用，使学生具备良好的程序设计能力，具备运用前端技术解决实际问题的能力。

通过本门课的学习，使学生掌握基本前端涉及的知识及常见第三方库的使用，使学生具备良好的程序设计能力，具备运用前端技术解决实际问题的能力。

通过示范项目“电子交易系统管理端平台页面”中的应用程序的开发与管理，使学生能综合应用所学到的前端三项技术技能，具备较全面的理解和运用技术的能力。

目录

TOC\o1-3\h\z\u164026038前言 2

1564101565实验一前端框架搭建与登录页面设计与实现 4

507680028实验二用户注册和页面主体框架的设计与实现 5

625701065实验三用户、角色、菜单管理的设计与实现 7

2077863743实验四商品管理的设计与实现 9

276861087实验报告书写要求 10

实验一前端框架搭建与登录页面设计与实现

实验目的

掌握WEB前端开发环境的配置

基于Layui组件库搭建后台管理页面的设计

掌握CSS为页面修改配色与组件布局的方法

掌握使用Javascript实现页面验证的方法

实验内容

任务一开发环境准备

每个同学需要在本机完成前端实验项目所需开发环境和调试环境的搭建，包括：

环境的安装：开发工具Vscode及其相关插件的安装，插件包括：AutoCloseTag、HTMLCSSSupport、JavaScript(ES6)codesnippets、LiveServer、PathIntellisense；

安装调试用浏览器chrome，并确保开发者工具可用；

创建项目工程，引入Layui包。

任务二依据功能要求完成登录页面的设计与实现

要求实现登录页面（login.html），背景使用CSS设置图片或颜色，登录表单中要求有用户名输入框、密码输入框、校验码输入框，下方有新用户注册链接，有登录按钮。

校验要求，需要使用js对用户名、密码、验证码是否为空进行校验，并且要求校验用户名、密码的输入长度不小于6个字符，验证码长度与验证码图片中要求字符的长度一致（4个字符），不符合则弹出错误提示信息。校验合格则跳转到主页面（main.html）。

实现过程

检查WEB前端环境配置，缺少控件或软件及时安装。

参考Layui在线帮助文档：

/doc/index.html

/docs/index.html

建立前端项目，导入Layui库。

建立login.html页面，实现页面配色、布局，以及验证功能要求。

验收方法

各项任务均采用课上现场验收的方式，验收结束后老师根据完成情况给出每个同学的最终成绩，本子项目的实施成绩体现在过程考核成绩中。

要求数据库表截图，代码。

页面截图要求

登录网页页面截图

功能截图要求

登录代码中用于验证部分的JS代码截图

实验二用户注册和页面主体框架的设计与实现

一、实验目的

掌握使用JS实现页面之间跳转的功能

掌握使用ajax技术实现动态显示管理框架主菜单的方法

掌握使用Layui组织菜单的方法

掌握首页的布局和统计图表的显示方法

二、实验内容

任务一用户注册页面设计与实现

在登录页面中点击“注册”链接，弹出此页面，页面中需要包括新用户所需输入的基本信息（包括，用户名、密码、用户姓名、身份证号码、性别、出生日期），下方有保存按钮。

校验要求，需要使用js对用户名、密码、身份证号码是否为空进行校验，要求使用js从身份证号码中自动提取用户生日和性别信息并填入相应框中。点击保存，通过校验后，页面跳转回登录页面（login.html）

任务二完成主体管理页面框架的搭建

完成主体管理页面的框架搭建。要求包括头部栏、菜单栏、主体内容栏。头部栏中需要有系统banner（替换框架原有），名称部分替换为你的姓名、当前用户信息查看。

菜单包括2个一级菜单，结构如下：

一级菜单

二级菜单

系统管理

用户管理

角色管理

菜单管理

商品管理

商品信息维护

商品展示

任务三完成首页展现

首页要求：

上面有2个统计区域，一是系统商品总销售额。二是系统商品数量。

下面有2个统计图，统计图一显示2020、2021、2022年三年的每个季度的销售额的柱状图，统计图二显示，所有商品类别销售占比的饼图。

实现过程

登录页面登录成功后，跳转到main.html页面。

页面设计参