Trung tâm cá nhân
sách gpt4 ăn đã đi

Front-end: Uniapp đóng gói các ghi chú yêu cầu mạng

In lại Tác giả: qq735679552 Thời gian cập nhật: 29-09-2022 22:32:09 30 4
mua khóa gpt4 giày nike

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

Bài viết blog CFSDN này Front End: Ghi chú yêu cầu mạng đóng gói Uniapp được tác giả sưu tầm và biên soạn. Nếu các bạn quan tâm đến bài viết này thì nhớ like nhé.

Front-end: Uniapp đóng gói các ghi chú yêu cầu mạng

Là một framework front-end để phát triển di động, uniapp hiện rất phổ biến ở Trung Quốc. Các hệ thống được phát triển dựa trên framework uniapp sử dụng các công cụ phát triển HbuilderX có thể dễ dàng chuyển đổi thành các chương trình di động như applet và APP, giúp giảm đáng kể chi phí phát triển di động. . Yêu cầu mạng là một công nghệ thiết yếu cho mọi dự án front-end nên việc đóng gói các yêu cầu mạng front-end là cần thiết. Hôm nay tôi sẽ giới thiệu với các bạn cách thực hiện việc đóng gói các yêu cầu mạng đơn giản dựa trên uniapp. người mới.

Front-end: Uniapp đóng gói các ghi chú yêu cầu mạng

1. Trước tiên hãy cài đặt công cụ phát triển HbuilderX để tạo dự án uniapp.

Front-end: Uniapp đóng gói các ghi chú yêu cầu mạng

2. Tạo các tập tin config, js và request.js trong thư mục chung.

  1. URL cơ sở ="https://qqlykm.cn/api/yan/gc.php";//Truy vấn ngẫu nhiên giao diện thơ cổ 

yêu cầu.js 。

  1. nhập {GlobeConfig} từ 'config.js' 
  2. xuất khẩu const yêu cầu = (tùy chọn)=>{ 
  3.     trở lại lời hứa mới((giải quyết, từ chối)=>{ 
  4.         // Phần thân đóng gói: yêu cầu mạng 
  5.         uni.yêu cầu({                
  6.             địa chỉ: "/api"+tùy chọn.url, 
  7.             dữ liệu: options.data || {},        
  8.       // Giá trị mặc định là GET. Nếu bạn cần thay đổi nó, hãy đặt các giá trị phương thức khác trong options. 
  9.             phương pháp: options.method || 'LẤY',       
  10.             thành công: (res) => { 
  11.                 console.log(res.data); // Console hiển thị thông tin dữ liệu 
  12.                 giải quyết(res) 
  13.             }, 
  14.             thất bại: (err) =>{ 
  15.                 // Không thể hiển thị hộp bật lên trên trang 
  16.                 uni.showToast({ 
  17.                     tiêu đề: 'Giao diện yêu cầu không thành công' 
  18.                 }) 
  19.                 //trả về thông báo lỗi 
  20.                 từ chối(err) 
  21.             }, 
  22.             bắt:(e)=>{ 
  23.                 console.log(e); 
  24.             } 
  25.         }) 
  26.     } 
  27.     ) 
  28. } 
  29. // https://qqlykm.cn/api/yan/gc.php giao diện kiểm tra 
  30. {"mã số":"200","tin nhắn":"thành công" , 
  31.  "dữ liệu": 
  32.  {"Thơ":"Lời hứa của ngàn người không bằng sự quan tâm của một người.", 
  33.   "Nhà thơ":"vô giá trị", 
  34.   "Tiêu đề bài thơ":"Sử ký · Tiểu sử của Thương Quân"} 
  35. } 

3. Main.js nhập yêu cầu mạng được đóng gói.

  1. // Nhập các yêu cầu mạng được đóng gói 
  2. nhập khẩu {yêu cầu} từ 'chung/request.js' 
  3. Vue.prototype.$request = yêu cầu 

4. Tạo bản demo.vue thử nghiệm mới.

  1.  
  2.     <xem lớp="nội dung">   
  3.         <xem lớp="bài viết-siêu dữ liệu"> 
  4.           "">{{Tiêu đề bài thơ}}                
  5.         xem> 
  6.         <xem> 
  7.             "">Tác giả: {{Nhà thơ} 
  8.         xem> 
  9.         <xem lớp="nội dung bài viết"> 
  10.           <xem>{{Thơ}}xem> 
  11.         xem> 
  12.     xem> 
  13.  
  14.  
  15.  
  16.  
  17.     xuất khẩu mặc định { 
  18.         dữ liệu() { 
  19.             trở lại { 
  20.                 Tiêu đề bài thơ: "", 
  21.                 Nhà thơ: "", 
  22.                 Thơ: "" 
  23.             } 
  24.         }, 
  25.         khi tải() { 
  26.             initData(); 
  27.         }, 
  28.  
  29.         phương pháp: { 
  30.             initData không đồng bộ() { 
  31.                 cửa sổ; 
  32.                 const res = chờ đợi điều này.$request({ 
  33.                     địa chỉ: '', // URL được yêu cầu có thể được ghi vào tệp cấu hình theo mặc định 
  34.                     dữ liệu: { 
  35.                         // Yêu cầu các tham số của giao diện, có thể trống 
  36.                     } 
  37.                 }) 
  38.                 //Gán giá trị cho dữ liệu trên trang  
  39.                 nếu (res.data.msg == "thành công") { 
  40.                     this.Poem_title = res.data.data.Poem_title; 
  41.                     này.Poet = res.data.data.Poet=="vô giá trị" ? "Vô danh": res.data.data.Poet; 
  42.                     this.Poetry = res.data.data.Poetry; 
  43.                 } 
  44.  
  45.             } 
  46.         } 
  47.     } 
  48.  
  49.  
  50. "scss" có phạm vi> 
  51.  

  。

Chạy trang.

Front-end: Uniapp đóng gói các ghi chú yêu cầu mạng

Trang blog cá nhân: https://programmerblog.xyz.

Liên kết gốc: https://mp.weixin.qq.com/s/t41pyip0zvNBHZsWfXj1Jg.

Cuối cùng, bài viết này về giao diện người dùng: Ghi chú yêu cầu mạng được đóng gói Uniapp kết thúc tại đây. Nếu bạn muốn biết thêm về giao diện người dùng: Ghi chú yêu cầu mạng được đóng gói Uniapp, vui lòng tìm kiếm bài viết CFSDN hoặc tiếp tục duyệt qua các bài viết liên quan. hỗ trợ nó trong tương lai blog của tôi! .

30 4 0
Đề xuất bài viết: Dữ liệu của trò chơi di động Liên Minh Huyền Thoại giữa Android và iOS có thể tương tác được không? Làm cách nào để chuyển dữ liệu của trò chơi di động Liên Minh Huyền Thoại từ Android sang Apple?
Đề xuất bài viết: Thực chiến! Hãy nói về cách giải quyết vấn đề phân trang sâu của MySQL
Đề xuất bài viết: Cách xóa hình mờ trên ứng dụng Xingtu. Hướng dẫn cách xóa hình mờ trên ứng dụng Xingtu.
Đề xuất bài viết: Cách cắt ảnh và đổi hình nền trong ảnh đánh thức. Cách xóa người thừa trong ảnh đánh thức.
qq735679552
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress