CFSDN nhấn mạnh vào việc tạo ra giá trị thông qua mã nguồn mở. Chúng tôi cam kết xây dựng một nền tảng chia sẻ tài nguyên để mọi người làm CNTT có thể tìm thấy thế giới tuyệt vời của riêng mình tại đây.

Bài đăng trên blog CFSDN này, Chơi với Mockjs, front-end cũng có thể chạy rất mượt mà, được tác giả thu thập và biên soạn. Nếu bạn quan tâm đến bài viết này, hãy nhớ thích nó.

Chức năng của mockjs là tạo dữ liệu mô phỏng ngẫu nhiên, chặn các yêu cầu ajax, thêm, xóa, sửa đổi và truy vấn dữ liệu. Khi tạo dữ liệu, chúng ta cần có khả năng sử dụng cú pháp của mock.js một cách thành thạo.

Đặc tả cú pháp của Mockjs bao gồm hai phần: đặc tả định nghĩa mẫu dữ liệu và đặc tả định nghĩa chỗ giữ chỗ dữ liệu.

1. Thông số kỹ thuật định nghĩa mẫu dữ liệu

Mỗi thuộc tính trong mẫu dữ liệu bao gồm: tên thuộc tính, quy tắc tạo và giá trị thuộc tính.

Cú pháp là:

1. "tên|quy tắc": giá trị 

Những điều đáng chú ý là:

• Sử dụng | để phân tách tên thuộc tính và quy tắc tạo.
• Quy tắc tạo là một tham số tùy chọn.
• Có 7 dạng quy tắc tạo thế hệ.
• Ý nghĩa của quy tắc được tạo ra cần phụ thuộc vào loại giá trị thuộc tính.
• Giá trị thuộc tính có thể chỉ định giá trị ban đầu và kiểu.

Định dạng của các quy tắc được tạo ra là:

1.1. Giá trị thuộc tính có kiểu String

Số lần lặp lại của một biến là một giá trị ngẫu nhiên.

1. 'tên|min-max':sợi dây 
2. Bằng cách tạo ra một chuỗi lặp đi lặp lại phút đến tối đa Một chuỗi nằm giữa . . 
3.  
4. //sử dụng 
5. 'tên|1-3':'Một' 
6. Kết quả chạy: Tạo một biến chuỗi có số chữ a từ 1 đến 3. Kết quả có thể là: a, aa, aaa 

Chỉ định trực tiếp số lần lặp lại.

1. 'tên|số lượng':sợi dây 
2. Bằng cách tạo ra một chuỗi lặp đi lặp lại đếm Một chuỗi thời gian. . 
3.  
4. //sử dụng 
5. 'tên|3':'Một' 
6. Kết quả chạy: aaa 

1.2. Giá trị thuộc tính là Số

Tạo ra số lượng ngày càng tăng.

1. 'tên|+1':số 
2. Giá trị ban đầu là num và giá trị thuộc tính được tạo ra sẽ tự động tăng thêm 1 

Tạo ra một giá trị khoảng.

1. 'tên|min-max':số 
2. Tạo ra một phút đến tối đa Giá trị giữa num được sử dụng để chỉ định loại 
3.  
4. //sử dụng 
5. 'tên|1-3': 1 
6. Kết quả đang chạy: Tạo một số từ 1-3. Kết quả có thể là: 1, 2, 3 

Tạo một số có dấu thập phân.

1. 'tên|min-max.dmin-dmax': số 
2. Tạo một số dấu phẩy động có phần nguyên nằm giữa phút Và tối đa Các chữ số thập phân được giữ giữa dmin và dmax. num được dùng để chỉ định kiểu. 
3.  
4. //sử dụng 
5. 'số1|1-10.1-2': 1 
6. Kết quả chạy: Tạo ra các số dấu phẩy động từ 1 đến 10 với 1 đến 2 chữ số thập phân. Ví dụ: 2.1, 3.12, v.v. 
7.  
8. 'số2|5.1-2': 1 
9. Tạo một số dấu phẩy động có phần nguyên là 5 và từ 1 đến 2 chữ số thập phân. Ví dụ: 5.1, 5.33, 5.09, v.v. 
10.  
11. 'số3|5.2': 1 
12. Tạo một số dấu phẩy động với số nguyên 5 và hai chữ số thập phân. Ví dụ: 5.11, 5.67, v.v. 

1.3. Giá trị thuộc tính là Boolean

1. 'tên|1': boolean 
2. Tạo ra một giá trị ngẫu nhiên với xác suất một nửa là đúng hoặc một nửa là sai. 
3.  
4. //sử dụng 
5. 'Giống như|1': ĐÚNG VẬY 
6. Giá trị được tạo ra bởi isLike có thể là ĐÚNG VẬY ,SAI. Xác suất là như nhau. 

1. 'tên|min-max': giá trị 
2. Tạo một giá trị Boolean ngẫu nhiên. 
3. Xác suất giá trị là giá trị là phút / (phút + tối đa), 
4. Xác suất có giá trị !value là tối đa / (phút + tối đa). 
5.  
6. //sử dụng 
7. 'thích|1-5': ĐÚNG VẬY 
8. phát ra ĐÚNG VẬY Xác suất là 1/6. phát ra SAI Xác suất là 5/6 

1.4. Giá trị thuộc tính là đối tượng

Tạo một đối tượng có số lượng thuộc tính được chỉ định.

1. 'obj|số': sự vật 
2. Chọn ngẫu nhiên số thuộc tính từ đối tượng giá trị thuộc tính. 
3.  
4. //sử dụng 
5. 'đối tượng|2': { 
6.              Một: '1', 
7.              b: '2', 
8.              c: '3' 
9.             } 
10. Kết quả của hoạt động có thể là: 
11. {Một: "3", b: "2"} 
12. {c: "3", b: "2"} 
13. {Một: "3", c: "2"} 

Tạo một đối tượng có số lượng thuộc tính ngẫu nhiên.

1. 'obj|min-max': sự vật 
2. Chọn ngẫu nhiên từ đối tượng phút đến tối đa thuộc tính để tạo ra một đối tượng. 
3.  
4. //sử dụng 
5. 'đối tượng|1-2': { 
6.              Một: '1', 
7.              b: '2', 
8.              c: '3' 
9.             } 
10. Kết quả của hoạt động có thể là: 
11. {Một: "3"} 
12. {b: "3"} 
13. {c: "3"} 
14. {Một: "3", b: "2"} 
15. {c: "3", b: "2"} 
16. {Một: "3", c: "2"} 

1.5. Giá trị thuộc tính là một mảng

Lấy một phần tử từ mảng làm kết quả.

1. 'arr|1':mảng 
2. Chọn ngẫu nhiên một phần tử từ mảng giá trị thuộc tính và trả về nó dưới dạng kết quả 
3.  
4. //sử dụng 
5. 'arr|1':[1,2,3] 
6. Kết quả chạy là: 1, 2, 3 ba kết quả 

Tạo một mảng mới.

1. 'arr|min-max': mảng 
2. Tạo một mảng mới bằng cách lặp lại các phần tử của mảng, số lần lặp lại phút đến tối đa . 
3.  
4. //sử dụng 
5. 'arr|1-2': [ 1,2,3 ] 
6. Kết quả chạy là: [ 1,2,3 ] hoặc [ 1,2,3,1,2,3 ] 

1. 'arr|số': mảng 
2. Tạo một mảng mới bằng cách lặp lại các phần tử của mảng num lần. 
3.  
4. //sử dụng 
5. 'arr|2': [ 1,2,3 ] 
6. Kết quả chạy là: [ 1,2,3,1,2,3 ] 

1.6. Giá trị thuộc tính là một hàm

1. 'tên':Chức năng 
2. Chức năng Giá trị trả về được sử dụng làm giá trị thuộc tính cuối cùng. 
3.  
4. //sử dụng 
5. 'tên': ()=>{ 
6.  trở lại 'học trên web' 
7. } 
8. Kết quả của việc chạy là học web 

Trong chỗ giữ chỗ dữ liệu, điều quan trọng là giá trị thuộc tính phải là một hàm. Tôi sẽ giải thích chi tiết sau.

1.7. Giá trị thuộc tính là một RegExp thông thường

1. 'tên':biểu thức chính quy 
2. Tạo chuỗi ký tự khớp dựa trên biểu thức chính quy regexp theo thứ tự ngược lại. Được sử dụng để tạo chuỗi theo định dạng tùy chỉnh 
3.  
4. //sử dụng 
5. 'reg': /[a-zA-Z0-9]2/ 
6. Tạo một chuỗi có độ dài 2 bao gồm bất kỳ sự kết hợp nào của chữ hoa, chữ thường và số 
7.  
8. 'reg':/\d{5,10}/ 
9. Tạo bất kỳ chuỗi 5 đến 10 chữ số nào 

2. Thông số kỹ thuật định nghĩa chỗ giữ dữ liệu

Trình giữ chỗ dữ liệu chỉ chiếm không gian trong chuỗi thuộc tính và không xuất hiện trong giá trị thuộc tính cuối cùng.

Sử dụng định dạng:

1. @Giữ chỗ 
2. @placeholder(tham số [, tham số]) 
3.  
4. //sử dụng 
5. 'tên': "@tên", 
6.  Tạo tên tiếng Anh, chẳng hạn như Edward Rodriguez 
7.  
8. //Với tham số 
9. 'Đầu tiên':"@tên(giữa)", 
10. Tạo tên tiếng Anh có tên đệm. Ví dụ: Ruth Paul Robinson 
11.  
12. 'tên': "@cname", 
13.  Tạo tên tiếng Trung 

Để ý:

• Sử dụng @ để chỉ ra rằng chuỗi theo sau nó là một định danh.
• Tất cả các chỗ giữ chỗ đều đề cập đến các phương thức trong mock.Random.
• Nếu bạn cần mở rộng chỗ giữ chỗ tùy chỉnh, hãy sử dụng Mock.Random.extend().
• Trình giữ chỗ cũng có thể tham chiếu đến nội dung trong "mẫu dữ liệu".
• Trình giữ chỗ có mức độ ưu tiên cao hơn các thuộc tính trong mẫu dữ liệu.
• Cả đường dẫn tương đối và tuyệt đối đều được hỗ trợ.

1. Giả.giả('@string("số", 5)') 
2. Tạo chuỗi năm chữ số 
3.  
4. Giả.giả('@màu sắc') 
5. Tạo màu ngẫu nhiên 
6. //Tương đương với 
7. Ngẫu nhiên.màu() 

3. Ví dụ sử dụng

Tạo giao diện API trả về một mảng được tạo ngẫu nhiên:

1. xuất khẩu mặc định [ 
2.  { 
3.   địa chỉ: "/api/danh sách", 
4.   phương pháp: "bưu kiện", 
5.   phản hồi: ({ url, body }) => { 
6.    // body là dữ liệu được truyền vào khi đăng bài 
7.    // url là giao diện yêu cầu và khi sử dụng phương thức get, nó cũng bao gồm các tham số đã truyền 
8.    trở lại { 
9.     Mã số: 200, 
10.     tin nhắn: "Được rồi", 
11.     // Tạo một mảng 
12.     // chiều dài từ 10 đến 20 
13.     'danh sách|10-20': [{ 
14.      tên:'@cname' //Tạo tên tiếng Trung 
15.     }] 
16.    }; 
17.   } 
18.  } 
19. ] 

Tất cả các chỗ giữ chỗ đều tham chiếu đến các phương thức trong Mock.random, vì vậy chúng ta có thể thay đổi mã trên thành:

1. 'danh sách|10-20': [{ 
2.  tên:Random.cname() //Tạo tên tiếng Trung 
3. }] 

Khi chúng ta kiểm tra lại vào thời điểm này, chúng ta thấy rằng các tên trong mảng được tạo ra hoàn toàn giống nhau. Nếu chúng ta muốn tạo ra nhiều tên khác nhau thì giải quyết như thế nào?

Giải pháp: Thay đổi giá trị thuộc tính thành một hàm và sử dụng giá trị trả về của hàm làm kết quả cuối cùng.

1. 'danh sách|10-20': [{ 
2.  tên:()=>{ 
3.   Ngẫu nhiên.cname() 
4.  }  
5. }] 

Liên kết gốc: https://www.toutiao.com/a7038875111243465227/ .

Cuối cùng, bài viết này về việc chơi với Mockjs và chạy front-end rất mượt mà đã kết thúc ở đây. Nếu bạn muốn biết thêm về việc chơi với Mockjs và chạy front-end rất mượt mà, vui lòng tìm kiếm các bài viết trên CFSDN hoặc tiếp tục duyệt các bài viết liên quan. Tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .