react demo 人員表實現筆記

2021-08-20 22:39:13 字數 1247 閱讀 1491

人員基本資訊列表展示

人員錄入及刪除

人員詳細資訊檢視

人員資訊編輯

根據人員身份篩選

根據人員屬性排序

根據人員姓名、年齡、身份、性別關鍵字進行搜尋

介面模組劃分如下:

元件名稱和介紹:

managesystem    最外層容器,容納整個應用

staffheader    負責接受使用者檢索,篩選,排序操作

staffitem    負責展示一條人員基本資訊

staffpannel    負責展示所有基於使用者操作結果的條目

stafffooter    負責新人員的新增

staffdetail    負責展示和編輯人員詳細資訊

框架結構:

managesystem

staffheader

staffpannel

staffitem

staffitem

staffitem...

stafffooter

staffdetail

就是編寫各個元件的js頁面,最後用managersystem.js串起來。

npm init,生成package.json檔案;

npm修改script命令,改為webpack打包;

在package.json中新增依賴;

編輯webpack.config.js配置檔案;

最後npm start打包;

將資料封裝在staff類中,並且實現具體的使用者操作函式

修改staffooter.js:新增onclick事件繫結在addstaff上;

修改managersystem.js:配置stafffooter中的addstaff屬性方法為本地addstaff方法(實際上是引用this.staff的方法)

修改staff.js:addstaff方法的具體實現;

同上一步(6)差不多,具體實現邏輯為字串匹配。

SQL修改表結構 sqlserver 菜鳥筆記

新加表字段 alter table 表名 add欄位名 字段型別 字段型別大小 例句 alter table custom ma store addseal varchar 20 alter table custom ma store addsealdetail varchar 100 刪除表字段 ...

98五筆86五筆及五筆字體口訣字根表

五筆字根口訣 86版 a區 11 g 王旁青頭戔 兼 五一,12 f 土士二幹十寸雨。二一還有革字底 13 d 大犬三羊古石廠,羊有直斜套去大 14 s 木丁西,15 a 工戈草頭右框七。b區 21 h 目具上止卜虎皮,22 j 日早兩豎與蟲依。23 k 口與川,字根稀,24 l 田甲方框四車力。2...

springboot如何實現 網路直播課筆記

底座支撐就是spring ioc,aop spring叫容器比如說水杯,放了一堆bean物件 new 工廠的方式 ioc容器 生產物件,依賴注入,需要知道物件裡有多少個屬性,有多少個方法,知道這些資訊 xml檔案配置 註解的方式 其他的方式進行bean資訊的定義 inte ce中間層,讀取bean基...