JavaEE 之 HTML+CSS+JS 綜合練習

資料 ? 青牛 ? 于 2019-06-28 15:26:17 ? 566 閱讀

3.1 項目概述

  1. 項目名稱 : 人員管理系統

  2. 項目需求 : 利用現有技術對人員進行可視化管理

  3. 項目概述 :

假設需要對某行業人員進行管理,該行業人員數據樣本如下

file
現因為人員管理較為復雜所以需要你使用HTML+CSS+JS技術完成對現有人員的 查詢 添加 刪除 修改 的數據管理

3.2 需求實現

3.2.1 樣例展示

人員展示
file

添加人員
file

更新人員
file

刪除人員
file

3.2.2 步驟實現

3.2.2.1 數據查詢 :
file

因為要存儲過個對象而不是變量,所以有限考慮用一個JSON數組來保存要操作的數據; 對于查詢來說其實就是通過一個按鈕單擊事件然后觸發一個JS方法,讀取數組數據,作為表格新的行列數據進行展 示;

整理好之后的實現思路

  1. 我們先來寫個頁面:

2 .編寫JS腳本定義數據:

  1. 定義完數據之后我們要想辦法進行展示,根據截圖所知,此處需要一個table,然后動態拼接tr td來展示數據,所以

我們先定義一個空table

  1. 定義完成后我們就開始編寫一個按鈕觸發一個JS事件來加載數據,根據圖中顯示需要定義一個查詢和一個添加按 鈕

  2. 根據按鈕的單擊事件開始寫JS方法

代碼
file
file

效果:
file
file

到此 人員數據的展示工作全部完畢,此處大家需要熟練掌握頁面元素的字符串拼接問題,這個在以后操作JS的時候 非常常用!

3.2.2.2 數據添加 :

添加其實就非常簡單了,主要是接收用戶輸入,然后把用戶輸入的內容組成一個新的JSON對象放入數組中然后調用 查詢方法重新加載一個數組數據,就可以看到你剛才添加的數據了

添加實現步驟如下:

首先添加需要接收用戶輸入,所以我們需要定義一個表單接收用戶輸入,但是為了讓我們的表單更加美化,我們決定 用

fieldset給form添加一個表單域,這樣表單會有一個邊框下過,然后用legend配上說明文字,這樣邊框會有一個標題

開起來會好看一些

代碼 :

file
效果:

file
創建完表單后我們就可以豐富一下表單內容了

代碼 :

file
file
效果 :
file

此處我們需要提交表單才能獲取,所以提交表單的方法是在form上加onsubmit方法
file

此處action屬性設置提交地址,因為我們沒有什么地址可以提交(一會兒我們用JS處理數據),所以此處設置為# 代表 當前地址不可用;

method屬性代表提交方式 我們選用post方式

onsubmit方法執行處理請求的JS方法

注意 : 表單的數據獲取方式必須是表單提交獲取里面的數據,但是我們又沒有學習服務器技術,所以此處只能這樣設 置,后期我們會把數據提交給具體處理請求的服務器,現在我們只能拿JS先對付著

事件觸發寫完后開始寫開始實現添加方法:

file
JS寫完之后進行聯動測試

頁面添加數據

file
根據我們理解此時我們已經添加了數據,如果成功的話應該是直接添加到上面的表格中,點擊確定看下效果 點擊確定后出現了這個
file

這個錯誤是提示你你的表單提交了但是地址不正確

誒這就很奇怪了呀,我們明明指定了JS方法它為什么還這么干呢?

這就是表單的特性了,頁面只要發現表單點擊了提交按鈕,不管三七二十幾都會把表單按照action中設置的地址進行 提交?

這樣就很尷尬了,我們能不能阻止表單提交呢? 完全可以!
file

在onsubmit方法里面添加一個return false?這樣頁面就會認為這個表單還沒有完成操作,所以就不會提交了,這是一 種欺騙頁面的手段? 從新刷新頁面看下效果:

file
怎么樣,頁面是不是被我們欺騙住了?

3.2.2.3 數據添加優化 :

需求1 : 添加的form需要點擊 "添加新人員" 按鈕再顯示
file

編程:

冷靜的分析一波需求我們可以知道,用戶需要點擊按鈕出現添加對話框,當然當我點擊取消按鈕的時候肯定也是希 望這個對話框消失的?

所以整理好需求之后,我們得到了下面的實現步驟

  1. 先設置表單在頁面加載的時候不顯示
    file

此處我們用style屬性來設置元素在頁面的顯示 display:none 表示該頁面元素隱藏,所以加完這個屬性之后頁面是 這樣的
file

  1. 編寫顯示form的JS方法

file

  1. 驗證效果

沒點的時候
file

點了的時候
file

  1. 點擊取消,讓form表單繼續隱藏,當然此處我們應該有個程序員眼光,這個隱藏form表單的方法一會做更新的時候 也會用,所以我們寫個通用的
    file

  2. 在取消按鈕上添加這個方法

file

  1. 驗證效果

頁面加載的時候
file

點擊添加
file

正常添加
file

點擊取消
file

到此,添加功能全部實現
實現代碼

file
file
file
file
file
file
3.2.2.3 數據刪除 :
file
先觀察刪除效果

刪除效果是在每個數據的后面加一個操作,然后添加刪除和更新按鈕

接下來點擊那個數據后面的刪除按鈕就刪除那個數據?

這里有幾個問題 :

  1. 我們沒有這兩個按鈕?

  2. 刪除一條數據的依據是什么?

問題解決 :

構建這兩個按鈕,只需要在查詢方法中補充列即可

file
效果 :

file
解決第二個問題,刪除的依據是什么?

我們可以先觀察數據,比如這兩條數據都是存在JSON數組里,我們需要找到要刪除的數據才能刪除

但是如果按名稱或者性別或者年齡或者籍貫都有可能找到很多重復數據,所以此處我們用不會重復的編號來精確鎖定數據

修改一下刪除的button
file

此處需要注意,因為我們是在字符串里寫這些東西,一對雙引號里面是不允許再次出現雙引號的,所以此處雙引號的 地方我們都是用單引號代替的!

修改好了之后我們就得到了一個deletePerson(id)方法實現它!
file

此處我們在刪除空元素的時候使用了一個數組的splice()方法

JavaScript splice() 方法

定義和用法

splice() 方法向/從數組中添加/刪除項目,然后返回被刪除的項目。

注釋:該方法會改變原始數組。

語法

arrayObject.splice(index,howmany,item1,.....,itemX)
file

返回值
file

說明

splice() 方法可刪除從 index 處開始的零個或多個元素,并且用參數列表中聲明的一個或多個值來替換那些被刪除的元素。 如果從 arrayObject 中刪除了元素,則返回的是含有被刪除的元素的數組。

說明 :
file

此處需要簡單注意下 i = i-1 是為了配置已經縮短長度的數組,就好比現在驗證的是索引=2的數據,一看是null 刪除 了,然后你再次驗證不能從索引3的開始,必須再驗證一遍索引為2的數據,這樣才能保證數據的正確?

到此,刪除方法實現完成!

3.2.2.3 數據更新 :

更來相對其他三個操作難度稍微大了一些,因為更新分兩部分進行,

第一部分 需要把要更新的數據展示出來

第二部分 在展示出來的數據基礎上進行數據更新

所以先完成第一部分 : 數據展示工作

數據終要展示到頁面,所以我們先構建頁面,此處我們可以把form1稍微修改一下就編程了一個更新展示頁面
file
file

展示數據的時候需要注意,我們展示的數據是有id編號的,所以這個屬性也必須接收到,但是ID我們又不希望用戶修 改,所以此處我們用隱藏域保存數據;

寫完頁面之后我們在編寫JS方法展示數據

先修改更新的button 加入JS方法
file

編寫這個方法
file

效果 :
file

到這 更新的第一步就算完事了

再繼續第二步根據更新的JS完成操作

file
效果:

更新趙文明的數據
file

開始更新

file
至此,頁面級別的增刪改查數據全部完成;

終代碼

file
file
file
file
file
file
file
file
file
file

版權聲明:原創作品,允許轉載,轉載時務必以超鏈接的形式表明出處和作者信息。否則將追究法律責任。來自海牛部落-青牛,http://hainiubl.com/topics/36799
點贊
成為第一個點贊的人吧 :bowtie:
回復數量: 0
    暫無評論~~
    • 請注意單詞拼寫,以及中英文排版,參考此頁
    • 支持 Markdown 格式, **粗體**、~~刪除線~~、`單行代碼`, 更多語法請見這里 Markdown 語法
    • 支持表情,可用Emoji的自動補全, 在輸入的時候只需要 ":" 就可以自動提示了 :metal: :point_right: 表情列表 :star: :sparkles:
    • 上傳圖片, 支持拖拽和剪切板黏貼上傳, 格式限制 - jpg, png, gif,教程
    • 發布框支持本地存儲功能,會在內容變更時保存,「提交」按鈕點擊時清空
    Ctrl+Enter
    所罗门王的宝矿在线客服 快乐12每日必出4码组合 北京赛车pk10下截 极速快3走势图 山东群英会开奖结果查 贵州快三开奖结果 内蒙古十一选五开奖 辽宁快乐12任选三技巧 天津十一选五走势图表 青海快3昨天开奖号 山东十一选五遗漏走势 湖北快3号码遗漏 天津11选5基本走势图 白小姐图片一肖中特133911 金牛棋牌手机版最新 羽毛球场地标准尺寸 股票分析软件哪个好用