cruda
1.0.0
ครูด้า โมเดลมุมมอง CRUD ให้การโฮสต์ข้อมูล สถานะ และการดำเนินการ เช่น submit() / form.name / loading.table ซึ่งทำให้นักพัฒนาสร้างมุมมอง CRUD ได้เร็วขึ้น
Cruda จัดเตรียม API แบบรวมสำหรับ UIFrameworks ต่างๆ โดย Cruda-adapters
<!-- $crud.query (query data hosting) -->
< el-input v-model =" $crud.query.xxx " > </ el-input >
<!-- $crud.table.data (table data hosting) -->
< el-table v-model =" $crud.table.data " > </ el-table >
<!-- $crud.form (form data hosting) -->
< el-form :model =" $crud.form " > </ el-form >
<!-- $crud.table.data (tree data hosting) -->
< el-tree :model =" $crud.table.data " > </ el-tree > $crud . submit ( formEl ) //submit form
$crud . reload ( ) //reload table
$crud . cancel ( ) //cancel form <!-- loading.query will be set automatically when reload() is called -->
< button class =" ... " :loading =" $crud.loading.query " @click =" $crud.reload() " >
查询
</ button > /* when you call the toQuery(), Cruda will
1. set loading.query to True
2. package query, pagination, order, ...
3. emit hooks
4. catch exceptions
5. ...
*/
$crud . toQuery ( ) $crud . toQuery ( ) //GET
$crud . toDelete ( ) //DELETE
$crud . doUpdate ( ) //PUTคุณสามารถตั้งค่าเริ่มต้นส่วนกลางของ Cruda ได้ หากฉากทั้งหมดมีลักษณะการทำงานเหมือนกันในโปรเจ็กต์ของคุณ
//what properties does 'rs' have depends on the backend return value
CRUD . defaults [ CRUD . HOOK . AFTER_QUERY ] = function ( crud , rs ) {
crud . pagination . total = rs . data . total
crud . table . data = rs . data . records || [ ]
}
CRUD . defaults . pagination . pageSize = 10
CRUD . defaults . view . opQuery = true
CRUD . defaults . table . rowKey = 'id'คุณสามารถแก้ไข URL/วิธีการเพื่อปรับให้เข้ากับบริการแบ็กเอนด์ได้
CRUD . RESTAPI = {
QUERY : { url : "" , method : "GET" } ,
QUERY_DETAILS : { url : "/{id}" , method : "GET" } , //(v1.20+)
ADD : { url : "" , method : "POST" } ,
UPDATE : { url : "" , method : "PUT" } ,
DELETE : { url : "" , method : "DELETE" } ,
EXPORT : { url : "/export" , method : "GET" } ,
IMPORT : { url : "/import" , method : "POST" } ,
SORT : { url : "/sort" , method : "PUT" } ,
COPY : { url : "/copy" , method : "POST" } ,
ADD_OR_UPDATE : { url : "/addorupdate" , method : "POST" } , //(v1.20+)
} หรือตั้งค่า API เฉพาะอินสแตนซ์เมื่อเปิดใช้งาน
const $crud = useCrud ( {
url : '/api/single' ,
restApi : {
//支持对象格式或字符串格式(仅能设置url)
ADD : { url : '/add-batch' , method : 'POST' } ,
COPY : '/copy2'
}
} )* โปรดทราบว่าคีย์ API จะต้องเป็นตัวพิมพ์ใหญ่
CRUD.xApi(apiName, apiUrl, config) ใช้เพื่อขยาย CRUD RESTAPI แบบกำหนดเอง ด้านล่างนี้เป็นตัวอย่าง
//1. Extends an API. After that it will
/**
* a. Attach a method 'toClone' to the CRUD instance
* b. Add 'BEFORE_CLONE' and 'AFTER_CLONE' to CRUD.HOOK
*/
CRUD . xApi ( 'clone' , '/clone' , { method : 'POST' } )
//2. Add listener
onHook ( this , CRUD . HOOK . AFTER_CLONE , ( crud , rs ) => {
console . log ( 'xApi-->' , rs . data )
} )
//3. Call toClone
this . $crud . toClone ( { x : 1 , y : 2 } ) ; เราสามารถกำหนดค่า autoResponse เพื่อรีเฟรชมุมมองตารางโดยอัตโนมัติ ซึ่งอาจช่วยให้คุณหลีกเลี่ยงการสูญเสียสถานะของเพจหากคุณ reload() เพจหลังจากเพิ่ม/อัปเดต/ลบ/คัดลอกการส่งก่อนหน้านี้ กรณีทั่วไปคือคุณอาจสูญเสียลำดับชั้นทั้งหมดของ TreeTable ที่คุณเปิดไว้ก่อนหน้านี้เมื่อคุณ reload() ด้านล่างคือการกำหนดค่า
//1. Set a response validator to check if the response is valid
$crud . autoResponse . validator = ( response : { status : number } ) => {
return response . status === 200
}
//2. For such an Add-Oper like add/copy/import/..., it must set a getter in order to obtain new records with primary key from backend
CRUD . defaults . autoResponse . getter = ( response : any ) => {
return [ response . data ]
}
//2. If primary keys are generated at frontend, you can either return submitRows
CRUD . defaults . autoResponse . getter = ( response : any , submitRows ?: any [ ] ) => {
return submitRows
}
//3. For TreeTable, you need set parentKeyField in order to find parentNode. Default 'pid'
CRUD . defaults . autoResponse . parentKeyField = 'pid'
//4. Set insert position with 'head/tail'. Default 'head'
CRUD . defaults . autoResponse . position = 'head'
//4. For TreeTable, you need set childrenKeyField in order to find childNodes. Default 'children'
CRUD . defaults . autoResponse . childrenKeyField = 'children' หลังจากนั้น CRUDA จะรีเฟรชมุมมองตาราง หากคุณต้องการรีเฟรชด้วยตนเองคุณสามารถเรียก autoProcess() ใน hook ด้านล่าง
// Other hooks which can invode autoProcess please see the doc below
onHook ( CRUD . HOOK . AFTER_DELETE , ( crud , rs , rows , autoProcess ) => {
autoProcess ( )
} ) เราสามารถกำหนดค่า pagination.frontend เพื่อเปิดใช้งานการแบ่งหน้าส่วนหน้าได้
useCrud ( {
...
pagination : {
//enable
frontend : true ,
}
} )
//Set global cache hook(Optional)
CRUD . defaults [ CRUD . HOOK . BEFORE_CACHE ] = function ( crud , rs , cache ) {
//cache custom data
cache ( {
data : {
rows : rs . data . rows ,
total : rs . data . total
}
} )
}
CRUD . defaults [ CRUD . HOOK . AFTER_QUERY ] = function ( crud , rs , params , slice ) {
//filter cache data
const keyword = params . keyword
let list = filter ( defaultTo ( rs . data . rows , [ ] ) , ( item : any ) => {
return test ( item . email , keyword ) ||
test ( item . uname , keyword ) ||
test ( item . ip , keyword ) ||
test ( item . domain , keyword )
} )
crud . pagination . total = defaultTo ( list . length , 0 ) ;
//use slice() to slice list. If pagination.frontend is disabled, slice() will return the list directly
crud . table . data = slice ( list ) ;
} หลังจากเปิดใช้งาน pagination.frontend วิธีการ toQuery/reload จะไม่ร้องขอแบ็กเอนด์อีกต่อไป ให้ใช้ reset แทน
สวิตช์แสดงผลของส่วนประกอบ
- opQuery
- opAdd
- opUpdate
- opDelete
- opส่งออก
- opนำเข้า
- opSort
- opCopy
สลับสถานะการโหลด
- แบบสอบถาม
- โต๊ะ
- เดล
- ส่ง
- รูปร่าง
- ส่งออก
- นำเข้า
- เรียงลำดับ
- สำเนา
คอนเทนเนอร์ข้อมูลแบบสอบถาม
จัดเรียงคอนเทนเนอร์ข้อมูล
ที่เก็บข้อมูลตาราง
- ข้อมูล
- การเลือก
- คอลัมน์ทั้งหมด
- คำสั่งซื้อ
- แถวคีย์✅
ภาชนะแบ่งหน้า
- ขนาดหน้า✅
- หน้าปัจจุบัน
- ทั้งหมด
- ส่วนหน้า
ที่เก็บข้อมูลแบบฟอร์ม
สถานะแบบฟอร์ม 0：ปกติ;1：เพิ่ม;2：อัปเดต;3：ดู;4：เพิ่มหรืออัปเดต
พารามิเตอร์ที่ใช้งานไม่ได้
ข้อผิดพลาด crud msg {ชื่อ ข้อความ สถานะ}
แก้ไข id ของ
table.row
คีย์ crud ในหลายอินสแตนซ์
เปิด/ปิดการแก้ไขสแนปชอต
แผนที่ภาพรวม สิ่งสำคัญคือ
table.row[rowKey]
จะทำลายการตรวจสอบหลังจากจับครั้งแรก
จะอัปเดตมุมมองตารางโดยอัตโนมัติหลังจากที่คุณเพิ่ม/อัปเดต/ลบ/คัดลอก
crud.table.data
จะรวมเข้ากับคำขอ GET
API อินสแตนซ์ที่จะกู้คืน
8. RESTAPI
เปิดใช้งานแคชการค้นหาและข้อมูลแคชที่กำหนดเองโดย hook
BEFORE_CACHEหรือใช้การตอบสนองแบ็กเอนด์เริ่มต้นเป็นข้อมูลแคช เสานี้จะเป็นจริงหากเปิดใช้งานpagination.frontend
✅ ระบุว่ารองรับค่าเริ่มต้นสากล ⚡ ระบุว่ารองรับการเปิดใช้งานในรูปแบบออบเจ็กต์
(เมื่อ
frontendเป็นเท็จ) แบบสอบถามอินสแตนซ์ ส่งคำขอ GET ไปที่แบ็กเอนด์ อาร์กิวเมนต์ 'query' จะรวมเข้ากับ $crud.query
อินสแตนซ์เดล ส่งคำขอ DELETE ไปที่แบ็กเอนด์
การส่งออกอินสแตนซ์ ส่งคำขอ GET ไปที่แบ็กเอนด์
การนำเข้าอินสแตนซ์ ใช้
fieldNameเพื่อระบุชื่อไฟล์ของคำขอเซิร์ฟเวอร์。 ส่งคำขอ POST ไปที่แบ็กเอนด์
ตั้งค่า
formStatusเป็น 'เพิ่ม'
ตั้งค่า
formStatusเป็น 'อัปเดต' และส่งคำขอ GET (ค่าเริ่มต้น) ไปยังแบ็กเอนด์
ตั้งค่า
formStatusเป็น 'AddOrUpdate' และส่งคำขอ GET (ค่าเริ่มต้น) ไปยังแบ็กเอนด์
ตั้งค่า
formStatusเป็น 'ดู' และส่งคำขอ GET (ค่าเริ่มต้น) ไปยังแบ็กเอนด์
การเรียงลำดับอินสแตนซ์ ส่งคำขอ PUT (ค่าเริ่มต้น) ไปที่แบ็กเอนด์
คัดลอกอินสแตนซ์ ส่งคำขอ POST (ค่าเริ่มต้น) ไปที่แบ็กเอนด์
ตั้งค่า
formStatusเป็น 'ปกติ'
ส่ง args ไปที่
BEFORE_SUBMIT
เหมือนกับ
submit()แต่จะไม่ตรวจสอบformStatus
เหมือนกับ
submit()แต่จะไม่ตรวจสอบformStatus
เหมือนกับ
submit()แต่จะไม่ตรวจสอบformStatus
*ขึ้นอยู่กับอะแดปเตอร์ .จะตรวจสอบแบบฟอร์มหรือ CustomComponent หนึ่งรายการขึ้นไป (ซึ่งมีเมธอด validate()) แล้วเรียก
submit()
รีเซ็ตการแบ่งหน้าและเรียก toQuery()
ส่งคืน restUrl ของอินสแตนซ์
ตั้งค่าพารามิเตอร์ URL
ส่งคืนข้อมูลแถว
มักใช้ในเหตุการณ์การเลือกแถว เช่น
selection-changeในelement-ui
โดยปกติใช้ในเหตุการณ์การเรียงลำดับตารางเช่น
sort-changeในelement-uiมันจะเรียกtoQuery()โดยอัตโนมัติ
กลับบริบทของ crud
ล้างข้อมูลแคชและรีโหลดการโทร ()
ปล่อยก่อนสอบถาม สามารถแก้ไขพารามิเตอร์ก่อนส่งคำขอได้ ยกเลิกได้ หากถูกยกเลิก
AFTER_QUERYจะไม่ส่งเสียง
ปล่อยออกมาหลังจากการสอบถาม สามารถตั้งค่าข้อมูลตารางด้วย 'rs' หากเปิดใช้งาน
pagination.frontendคุณจะสามารถใช้พารามิเตอร์และ Slice() เพื่อกรองและแบ่งข้อมูลแคชได้
ปล่อยก่อนลบ ยกเลิกได้ หากถูกยกเลิก
AFTER_DELETEจะไม่ส่งเสียงออกมา
ปล่อยออกมาหลังจากลบ ใช้
autoProcess()เพื่ออัปเดตมุมมองตาราง
ปล่อยก่อนเพิ่ม สามารถล้างข้อมูลแบบฟอร์มหรือสร้าง UUID ได้ ยกเลิกได้ หากถูกยกเลิก
formStatusจะไม่เปลี่ยนแปลง ...args จากtoAdd()
ปล่อยหลังจากเพิ่มและก่อน
AFTER_SUBMITใช้autoProcess()เพื่ออัปเดตมุมมองตาราง
ปล่อยก่อนอัพเดต ยกเลิกได้ หากถูกยกเลิก
formStatusจะไม่เปลี่ยนแปลง ใช้skip()เพื่อหยุดการสืบค้นรายละเอียดและจะไม่ส่งAFTER_DETAILS
ปล่อยหลังจากอัปเดตและก่อน
AFTER_SUBMITใช้autoProcess()เพื่ออัปเดตมุมมองตาราง
ปล่อยก่อนเพิ่ม/อัปเดต ยกเลิกได้ หากถูกยกเลิก
formStatusจะไม่เปลี่ยนแปลง ใช้doView()เพื่อสอบถามรายละเอียด
ปล่อยหลังจากเพิ่ม/อัปเดตและก่อน
AFTER_SUBMITใช้autoProcess()เพื่ออัปเดตมุมมองตาราง
ฉายก่อนดู.. ยกเลิกได้ หากถูกยกเลิก
formStatusจะไม่เปลี่ยนแปลง ใช้skip()เพื่อหยุดการสืบค้นรายละเอียดและจะไม่ส่งAFTER_DETAILS
ปล่อยหลังจาก
toUpdate/toViewและไม่ถูกข้ามโดยskip()
ปล่อยหลังจาก
toUpdateและAFTER_DETAILS
ปล่อยหลังจาก
toViewและAFTER_DETAILS
ปล่อยก่อนส่งแบบฟอร์ม ยกเลิกได้ หากถูกยกเลิก
AFTER_SUBMITจะไม่ส่งเสียง ใช้setForm(formObject)เพื่อตั้งค่าข้อมูลฟอร์มที่จะส่ง
ปล่อยออกมาหลังจากส่งแบบฟอร์ม สามารถโหลดหน้าใหม่ได้ แจ้งที่นี่ ใช้
autoProcess()เพื่ออัปเดตมุมมองตาราง
ปล่อยก่อนส่งออก ยกเลิกได้ หากถูกยกเลิก
AFTER_EXPORTจะไม่ส่งเสียง
ปล่อยออกมาหลังจากการส่งออกเสร็จสมบูรณ์
ปล่อยก่อนนำเข้า สามารถแก้ไขพารามิเตอร์ก่อนส่งคำขอได้ ยกเลิกได้ หากถูกยกเลิก
AFTER_IMPORTจะไม่ส่งเสียงออกมา
ปล่อยออกมาหลังจากการนำเข้าเสร็จสมบูรณ์
ปล่อยออกมาก่อนจัดเรียง ยกเลิกได้ หากถูกยกเลิก
AFTER_SORTจะไม่ส่งเสียงออกมา
ปล่อยออกมาหลังจากการเรียงลำดับเสร็จสมบูรณ์
ปล่อยออกมาก่อนที่จะคัดลอก ยกเลิกได้ หากถูกยกเลิก
AFTER_COPYจะไม่ส่งเสียงออกมา
ปล่อยออกมาหลังจากการคัดลอกเสร็จสมบูรณ์ ใช้
autoProcess()เพื่ออัปเดตมุมมองตาราง
ปล่อยเมื่อมีข้อผิดพลาด
ปล่อยหลังจากยกเลิก () ถูกเรียก
ปล่อยออกมาหลังจากเรียก sendForm()
ปล่อยก่อนที่จะกู้คืนสแนปชอต
ปล่อยหลังจากเปิดใช้งานแบบสอบถามและ
cacheใช้cache(data)เพื่อกำหนดข้อมูลแคชเอง
ต้องระบุ 'crudName' เมื่อตรวจพบหลายอินสแตนซ์
Rx 【ส่วนประกอบที่กำหนดเอง】
การตรวจสอบแบบฟอร์ม xxx
Rx 【ตรวจสอบกฎการตรวจสอบ】
ไม่พบ [คำขอ] ในตัวเลือกการติดตั้ง
Rx 【ติดตั้ง】
table.rowKey เป็นค่าว่าง 'Xxx' อาจทำให้เกิดข้อผิดพลาด - toDelete/Update/View()
Rx 【ตั้งค่า rowKey เป็นค่าที่ไม่ว่างเปล่า】
