任务7 “官堰村振兴网” 交互功能.pptx

任务情景任务内容任务描述

任务情景完成了“官堰村振兴网”的所以前端功能模块任务开发，康康同学决定做一个登录页面。这项任务交给康康来完成！任务思考：康康同学开始思考完成首页的必备条件，确定了以下准备工作：1.获取交互功能模块原型图和图片素材。2.提前下载好准备Ajax插件。3.保证Web服务器环境运行。4.确定数据库字段创建完毕。

任务内容1.注册、登录、修改密码3个功能模块HTML+CSS布局，并完成CSS美化。2.JavaScript事件实现验证功能。3.Ajax异步交互技术。4.后端接收数据并操作MySql数据库如右图所示，本任务需完成的文件开发

前导学习素材准备实施准备

前导学习本书任务7已经详细介绍了Ajax交互技术、PHP基础以及MySQLi库常用函数，这里不再赘述。

前导学习在本次任务中，需要掌握以下知识与技能：1.运用HTML构造网页框架，编写网页。2.运用CSS技术实现网页布局，完善模块功能编写。3.实现JavaScript轮播图功能。 以上内容请参考教材“任务7“官堰村振兴网”交互功能——前导知识”部分进行学习并完成练习

素材准备步骤1：请在班群下载本书配套源码，找到“village”压缩包。步骤2：解压“village”压缩包。

结构编写样式编写实施过程特效编写

通过思考，认为本节任务需要完成2个页面的开发，同时获取了新闻页面的原型图：思考在本次任务中，需要掌握以下知识与技能：1.运用HTML构造网页框架，编写网页。2.运用CSS技术实现网页布局，完善模块功能编写。3.实现JavaScript轮播图功能。

结构编写步骤1：下载本书配套资源，在js文件中复制“jquery-1.11.2.min.js”、“jQuery.md5.js”、“jquery-form.js”3个文件文件放置本项目js目录中。步骤2：在html文件下新建“login.html”文件，在css文件下新建“base.css”文件与“reg.css”文件并完成文件引入。

结构编写步骤3：文件创建完毕后，请参考教材“任务7“官堰村振兴网”交互功能——任务实施”中“步骤1-1”——”步骤1-3“完成练习。步骤4：完成步骤3后，继续参考教材内容完成“reg.html”、“getpass.html”文件的结构编写。

样式编写步骤1：进行初始化样式的编辑——打开“base.css”文件，参考教材“任务7“官堰村振兴网”交互功能——任务实施”中“步骤2-1”——”步骤2-2“完成练习。步骤2：随后，完成新闻页面基础样式编辑——打开“reg.css”文件，继续参考教材内容完成相应练习。

特效编写编写js脚本，实现表单验证功能和Ajax请求代码，编写php脚本完成后端业务逻辑处理，最终返回数据到前端。参考教材“任务7“官堰村振兴网”交互功能——任务实施”中“步骤3-1”——”步骤3-4-2“完成js练习。

知识总结技能总结任务总结职素总结互相评价

任务总结总结类别总结内容知识form简单请求修改数据的sql语句运用$_REQUEST获取前台数据Ajax请求编写PHP后台业务逻辑编写技能运用HTML构造网页框架，编写网页。运用CSS技术实现网页布局，完善模块功能编写。实现JavaScript轮播图功能。职素沟通协作独立思考迎难而上互相评价基础知识完成互相评价页面效果完成互相评价职素认知完成互相评价

任务评价任务名称：“官堰村振兴网”交互功能任务承接人：交付日期：项目要求评价标准成绩Ajax交互编写（50分1.页面布局合理，代码有缩进，且类名有意义（10分）2.页面效果无明显错乱（20分）PHP代码编写（30分）1.可以成功连接数据库（10分）2.业务逻辑合理，成功返回数据给前端（10分）3.注册、登录、修改密码功能无缺陷（10分）数据库设计（20分）1.完成功能对应字段设计，字符类型合理（10分）2.实现数据库主键自增（10分）总分评价人评价级别（√）备注个人□优秀□良好□合格□不合格老师□优秀□良好□合格□不合格