实验报告模板(Web技术及应用)

1、华北电力大学实 验 报 告要求：（1）实验报告按模板格式写，严禁同组之间直接拷贝，在实验报告中写清楚自己所做的内容；（2）答辩时（下周三，6楼教室） 按组交实验报告，各组组长负责收齐。| 实验名称 基于Web的招聘网的设计与实现 课程名称 Web技术及应用 | 专业班级：计科1103 学生姓名：高新星 学 号：2 成 绩： 指导教师： 王蓝婧 实验日期：2014-5 （实验报告如打印，纸张用A4，左装订；页边距：上下2.5cm,左2.9cm, 右2.1cm；字体：宋体小四号，1.25倍行距。）验证性、综合性实验报告应含的主要内容：一、实验目的及要求二、所用仪器、设备三、实验原理四、实验方法与步

2、骤五、实验结果与数据处理 六、讨论与结论（对实验现象、实验故障及处理方法、实验中存在的问题等进行分析和讨论，对实验的进一步想法或改进意见）七、所附实验输出的结果或数据设计性实验报告应含的主要内容：一、设计要求二、选择的方案三、所用仪器、设备四、实验方法与步骤五、实验结果与数据处理 六、结论（依据“设计要求”）七、所附实验输出的结果或数据* 封面左侧印痕处装订17 / 17文档可自由编辑打印一、 实验目的和要求要求写清楚实验内容和开发环境；小组成员分工 1 掌握WEB编程技术，熟悉网站开发知识11 简单掌握页面布局(1) 利用css调整页面布局(a) 学会css布局基本语法(b) 实际利用其进行

3、布局(2) 验证问题（利用控件及JS进行验证）12 数据库连接表1-1 category表属性值类型说明允许空值idIntId值否主键，自增professionVarchar（20）类别名称否 表2-1 people表属性值类型说明允许空值idintId否nameVarchar（20)姓名否addressVarchar（50)目标城市否schoolVarchar（50)毕业学校否majorVarchar（50)所学专业否phnumberVarchar（11)联系方式否salaryVarchar（20)年薪范围caidint类别ID外键creaetimedatetime提交时间图2-1 图题2、

4、 系统分析与设计系统的需求分析与设计，包括页面和数据库设计 程序1功能：人才招聘系统。包括前台与后台部分。前台主要是人员的查看，筛选。后台主要是对类别的增加、删除、修改，以及对人员的增删改，还有查询与筛选功能。 程序2功能：一个简单的登陆以及注册网站。登陆部分包括验证问题以及与数据库的链接，判断用户是否已经存在于数据库；注册部分包括必要的验证（判空、密码相等、邮箱格式），与数据库连接时查询用户名是否已经被这侧，若不存在，则添加到数据库。进入系统后，同样是对数据的删除以及修改、增加，统一由程序1详细说明。三、系统实现可先介绍整个系统实现过程中所采用的主要技术，再结合某个特定的页面或关键技术（登录

5、和注册页面，以及此项目中自己所做的内容）给出实现的代码，并给出运行的界面截图一、人才招聘系统（1）进入登录界面protected void btnchange_Click(object sender, EventArgs e) changcode(); protected void changcode() string code = "" int codeLength = 6; /验证码的长度 Random r = new Random(); char selectChar = '0', '1', '2', '3

6、9;, '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q'

7、;, 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z' ; / 所有候选组成验证码的字符，当然也可以用中文的 for (var i = 0; i < codeLength; i+) var charIndex = r.Next(36); /Math.floor(Math.random() * 36); code += selectCharcharIndex; btncode.Text = code; /登录按

8、钮 protected void btnLogin_Click(object sender, EventArgs e) string code = btncode.Text; string code2 = txtcode.Text.ToLower(); if (code = code2) string name = txtName.Text.Trim(); string pwd = txtPassword.Text.Trim(); bool b = LoginManager.Login(name, pwd); if (b) /登陆成功 Session"admin" = na

9、me; Response.Redirect("categorymanager.aspx"); else if (a = 2) a = 0; Response.Redirect("./Default.aspx"); else /登陆失败后 a = a + 1; Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "<script language='javascript' defer>alert('用户名或密码

10、输入错误');</script>"); else Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "<script language='javascript' defer>alert('验证码输入错误！');</script>"); （2）成功登录类别管理说明：数据库连接不许多说，类别管理这一块我用到了AJAX异步更新，只要点击类别名，就可以对名称进行修改，失去焦点后完成对数据的提交。

11、同时，有对同名类别的处理，即重新让用户输入。$(function () $(".caname").click(function () var obid = $(this); var oldText = $.trim($(this).text(); /获取原来地方的文本，并去掉前后空格 var input = $("<input type='text' value='" + oldText + " ' />"); $(this).html(input); /给文本框赋值 /使文本框的点击事件失

12、效 input.click(function () return false; ); /文本框的样式 input.css("border-width", "0"); input.css("text-align", "center"); input.height(obid.height(); /文本框高度适应td高度 input.width(obid.width(); input.trigger("focus").trigger("select"); /点击时全选 /文本框失去

13、焦点时的动作 input.blur(function () var newText = $.trim($(this).val(); /这儿快腻歪死我了，还得去掉空格！哎！ var input_blur = $(this); / 当老的类别名称与修改后的名称不同的时候才进行数据的提交操作 if (oldText != newText) / 获取该类别名所对应的ID(序号) var caid = $.trim(obid.prev().text(); / AJAX异步更改数据库 var url = "./handler/ChangeCaName.ashx?caname=" + e

14、ncodeURI(encodeURI(newText) + "&caid=" + caid + "&t=" + new Date().getTime(); $.get(url, function (data) if (data = "false") $("#test").text("类别修改失败,请检查是否类别名称重复!"); input_blur.trigger("focus").trigger("select"); / 文本框全选 el

15、se $("#test").text(""); obid.html(newText); ); else $("#test").text(""); / 前后文本一致,把文本框变成标签 obid.html(newText); ); /文本框按下某键时显示键值 input.keydown(function (event) var jianzhi = event.keyCode; switch (jianzhi) case 13: var newText = $.trim($(this).val(); /这儿快腻歪死我了，

16、还得去掉空格！哎！ var input_keydown = $(this); / 当老的类别名称与修改后的名称不同的时候才进行数据的提交操作 if (oldText != newText) / 获取该类别名所对应的ID(序号) var caid = $.trim(obid.prev().text(); / AJAX异步更改数据库 var url = "./handler/ChangeCaName.ashx?caname=" + encodeURI(encodeURI(newText) + "&caid=" + caid + "&

17、t=" + new Date().getTime(); $.get(url, function (data) if (data = "false") $("#test").text("类别修改失败,请检查是否类别名称重复!"); input_keydown.trigger("focus").trigger("select"); / 文本框全选 else obid.html(newText); $("#test").text(""); ); els

18、e $("#test").text(""); / 前后文本一致,把文本框变成标签 obid.html(newText); break; case 27: $("#test").text(""); obid.html(oldText); break; ); );); /屏蔽页面中其他部分Enter键的下 $(document).keydown(function (event) switch (event.keyCode) case 13: return false; );（3） 人员管理页 点击姓名，进入详细信息页（

19、4）添加新人 以上是后台部分，下面，给出前台功能及说明（5） 首页，点击相应人员姓名，进入详细信息。 搜索，如按学校“华电” 结果如下：protected void Page_Load(object sender, EventArgs e) string key=Server.UrlDecode( Request.QueryString"key"); string action=Request.QueryString"action" if ("byschool" = action) /按学校搜索 gvpeopleres.DataSource = new PeopleManager().SelectBySchool(key); gvpeoplere