《实验报告模板(Web技术及应用).doc》由会员分享，可在线阅读，更多相关《实验报告模板(Web技术及应用).doc（21页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、华北电力大学实 验 报 告要求：（1）实验报告按模板格式写，严禁同组之间直接拷贝，在实验报告中写清楚自己所做的内容；（2）答辩时（下周三，6楼教室） 按组交实验报告，各组组长负责收齐。| 实验名称 基于Web的招聘网的设计与实现 课程名称 Web技术及应用 | 专业班级：计科1103 学生姓名：高新星 学 号：3 成 绩： 指导教师： 王蓝婧 实验日期：2014-5 （实验报告如打印，纸张用A4，左装订；页边距：上下2.5cm,左2.9cm, 右2.1cm；字体：宋体小四号，1.25倍行距。）验证性、综合性实验报告应含的主要内容：一、实验目的及要求二、所用仪器、设备三、实验原理四、实验方法与步
2、骤五、实验结果与数据处理 六、讨论与结论（对实验现象、实验故障及处理方法、实验中存在的问题等进行分析和讨论，对实验的进一步想法或改进意见）七、所附实验输出的结果或数据设计性实验报告应含的主要内容：一、设计要求二、选择的方案三、所用仪器、设备四、实验方法与步骤五、实验结果与数据处理 六、结论（依据“设计要求”）七、所附实验输出的结果或数据* 封面左侧印痕处装订一、 实验目的和要求要求写清楚实验内容和开发环境；小组成员分工 1 掌握WEB编程技术，熟悉网站开发知识11 简单掌握页面布局(1) 利用css调整页面布局(a) 学会css布局基本语法(b) 实际利用其进行布局(2) 验证问题（利用控件及
3、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 图题二、 系统分析与设计系统的需求分析与
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, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o,
6、p, q, 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; /登录按钮 protected void btnLogin_Click(object sender, EventArgs e) string code = btncode.Text; stri
7、ng 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) /登陆成功 Sessionadmin = name; Response.Redirect(categorymanager.aspx); else if (a = 2) a = 0; Response.Redirect(./Default.aspx); e
8、lse /登陆失败后 a = a + 1; Page.ClientScript.RegisterStartupScript(Page.GetType(), message, alert(用户名或密码输入错误);); else Page.ClientScript.RegisterStartupScript(Page.GetType(), message, alert(验证码输入错误！);); （2）成功登录类别管理说明：数据库连接不许多说，类别管理这一块我用到了AJAX异步更新，只要点击类别名，就可以对名称进行修改，失去焦点后完成对数据的提交。同时，有对同名类别的处理，即重新让用户输入。$(fu
9、nction () $(.caname).click(function () var obid = $(this); var oldText = $.trim($(this).text(); /获取原来地方的文本，并去掉前后空格 var input = $(); $(this).html(input); /给文本框赋值 /使文本框的点击事件失效 input.click(function () return false; ); /文本框的样式 input.css(border-width, 0); input.css(text-align, center); input.height(obid.
10、height(); /文本框高度适应td高度 input.width(obid.width(); input.trigger(focus).trigger(select); /点击时全选 /文本框失去焦点时的动作 input.blur(function () var newText = $.trim($(this).val(); /这儿快腻歪死我了，还得去掉空格！哎！ var input_blur = $(this); / 当老的类别名称与修改后的名称不同的时候才进行数据的提交操作 if (oldText != newText) / 获取该类别名所对应的ID(序号) var caid = $.
11、trim(obid.prev().text(); / AJAX异步更改数据库 var url = ./handler/ChangeCaName.ashx?caname= + encodeURI(encodeURI(newText) + &caid= + caid + &t= + new Date().getTime(); $.get(url, function (data) if (data = false) $(#test).text(类别修改失败,请检查是否类别名称重复!); input_blur.trigger(focus).trigger(select); / 文本框全选 else $
12、(#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(); /这儿快腻歪死我了，还得去掉空格！哎！ var input_keydown = $(this); / 当老的类别名称与修改后
13、的名称不同的时候才进行数据的提交操作 if (oldText != newText) / 获取该类别名所对应的ID(序号) var caid = $.trim(obid.prev().text(); / AJAX异步更改数据库 var url = ./handler/ChangeCaName.ashx?caname= + encodeURI(encodeURI(newText) + &caid= + caid + &t= + new Date().getTime(); $.get(url, function (data) if (data = false) $(#test).text(类别修改
14、失败,请检查是否类别名称重复!); input_keydown.trigger(focus).trigger(select); / 文本框全选 else obid.html(newText); $(#test).text(); ); else $(#test).text(); / 前后文本一致,把文本框变成标签 obid.html(newText); break; case 27: $(#test).text(); obid.html(oldText); break; ); );); /屏蔽页面中其他部分Enter键的下 $(document).keydown(function (event)
15、 switch (event.keyCode) case 13: return false; );（3） 人员管理页 点击姓名，进入详细信息页（4）添加新人 以上是后台部分，下面，给出前台功能及说明（5） 首页，点击相应人员姓名，进入详细信息。 搜索，如按学校“华电” 结果如下：protected void Page_Load(object sender, EventArgs e) string key=Server.UrlDecode( Request.QueryStringkey); string action=Request.QueryStringaction; if (byschool
16、 = action) /按学校搜索 gvpeopleres.DataSource = new PeopleManager().SelectBySchool(key); gvpeopleres.DataBind(); else /按目标地搜索 gvpeopleres.DataSource = new PeopleManager().SelectByAddress(key); gvpeopleres.DataBind(); 四、总结结合课程学习和实验，学习Web开发技术的总结或心得；对老师的上课方式、教学方法和内容有何意见；对自己本门课程学习进行打分（5、4、3），此外，小组组长对本组组员的表现进
17、行评价和打分 编本网站的过程中，页面布局简单可一些，主要精力放在了AJAX异步更新，以及与数据库交互这方面，学会了使用用户控件，比如每个页面都有的专业列表，就是使用用户控件来完成的，还有gridviewd的一些用法，诸如分页，绑定等等；数据库方面使用存储过程来进行数据的操作，提高了运行速度。关于安全方面，后台并不是输入URL就可以进入，而是在每一个页面都添加了用户的判断；AJAX异步主要使用了JS的部分语法，包括通过一般处理程序来进行数据库的异步更新。 附录（设计流程图、程序、表格、数据等）表1 表题表2 表题参考文献1 作者1, 作者2. 书名. 出版单位, 版本. 出版日期1 张三，李四，王五. Windows环境下网络编程技术及应用. 北京：电力工业出版社，第二版. 2006，92 作者1, 作者2. 论文名. 杂志名，年，卷（期）：页码范围2 马民，赵虹，孙犁等. 计算机技术在电力系统故障诊断中的应用. 计算机学报，2003，17（4）：1323