實驗報告模板(Web技術(shù)及應用)

1、華北電力大學實 驗 報 告要求：（1）實驗報告按模板格式寫，嚴禁同組之間直接拷貝，在實驗報告中寫清楚自己所做的內(nèi)容；（2）答辯時（下周三，6樓教室） 按組交實驗報告，各組組長負責收齊。| 實驗名稱 基于Web的招聘網(wǎng)的設計與實現(xiàn) 課程名稱 Web技術(shù)及應用 | 專業(yè)班級：計科1103 學生姓名：高新星 學 號：2 成 績： 指導教師： 王藍婧 實驗日期：2014-5 （實驗報告如打印，紙張用A4，左裝訂；頁邊距：上下2.5cm,左2.9cm, 右2.1cm；字體：宋體小四號，1.25倍行距。）驗證性、綜合性實驗報告應含的主要內(nèi)容：一、實驗目的及要求二、所用儀器、設備三、實驗原理四、實驗方法與步

2、驟五、實驗結(jié)果與數(shù)據(jù)處理 六、討論與結(jié)論（對實驗現(xiàn)象、實驗故障及處理方法、實驗中存在的問題等進行分析和討論，對實驗的進一步想法或改進意見）七、所附實驗輸出的結(jié)果或數(shù)據(jù)設計性實驗報告應含的主要內(nèi)容：一、設計要求二、選擇的方案三、所用儀器、設備四、實驗方法與步驟五、實驗結(jié)果與數(shù)據(jù)處理 六、結(jié)論（依據(jù)“設計要求”）七、所附實驗輸出的結(jié)果或數(shù)據(jù)* 封面左側(cè)印痕處裝訂17 / 17文檔可自由編輯打印一、 實驗目的和要求要求寫清楚實驗內(nèi)容和開發(fā)環(huán)境；小組成員分工 1 掌握WEB編程技術(shù)，熟悉網(wǎng)站開發(fā)知識11 簡單掌握頁面布局(1) 利用css調(diào)整頁面布局(a) 學會css布局基本語法(b) 實際利用其進行

3、布局(2) 驗證問題（利用控件及JS進行驗證）12 數(shù)據(jù)庫連接表1-1 category表屬性值類型說明允許空值idIntId值否主鍵，自增professionVarchar（20）類別名稱否 表2-1 people表屬性值類型說明允許空值idintId否nameVarchar（20)姓名否addressVarchar（50)目標城市否schoolVarchar（50)畢業(yè)學校否majorVarchar（50)所學專業(yè)否phnumberVarchar（11)聯(lián)系方式否salaryVarchar（20)年薪范圍caidint類別ID外鍵creaetimedatetime提交時間圖2-1 圖題2、

4、 系統(tǒng)分析與設計系統(tǒng)的需求分析與設計，包括頁面和數(shù)據(jù)庫設計 程序1功能：人才招聘系統(tǒng)。包括前臺與后臺部分。前臺主要是人員的查看，篩選。后臺主要是對類別的增加、刪除、修改，以及對人員的增刪改，還有查詢與篩選功能。 程序2功能：一個簡單的登陸以及注冊網(wǎng)站。登陸部分包括驗證問題以及與數(shù)據(jù)庫的鏈接，判斷用戶是否已經(jīng)存在于數(shù)據(jù)庫；注冊部分包括必要的驗證（判空、密碼相等、郵箱格式），與數(shù)據(jù)庫連接時查詢用戶名是否已經(jīng)被這側(cè)，若不存在，則添加到數(shù)據(jù)庫。進入系統(tǒng)后，同樣是對數(shù)據(jù)的刪除以及修改、增加，統(tǒng)一由程序1詳細說明。三、系統(tǒng)實現(xiàn)可先介紹整個系統(tǒng)實現(xiàn)過程中所采用的主要技術(shù)，再結(jié)合某個特定的頁面或關(guān)鍵技術(shù)（登錄

5、和注冊頁面，以及此項目中自己所做的內(nèi)容）給出實現(xiàn)的代碼，并給出運行的界面截圖一、人才招聘系統(tǒng)（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）成功登錄類別管理說明：數(shù)據(jù)庫連接不許多說，類別管理這一塊我用到了AJAX異步更新，只要點擊類別名，就可以對名稱進行修改，失去焦點后完成對數(shù)據(jù)的提交。

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); / 當老的類別名稱與修改后的名稱不同的時候才進行數(shù)據(jù)的提交操作 if (oldText != newText) / 獲取該類別名所對應的ID(序號) var caid = $.trim(obid.prev().text(); / AJAX異步更改數(shù)據(jù)庫 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); / 當老的類別名稱與修改后的名稱不同的時候才進行數(shù)據(jù)的提交操作 if (oldText != newText) / 獲取該類別名所對應的ID(序號) var caid = $.trim(obid.prev().text(); / AJAX異步更改數(shù)據(jù)庫 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） 首頁，點擊相應人員姓名，進入詳細信息。 搜索，如按學校“華電” 結(jié)果如下：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