怎么使用Vue+Laravel開發(fā)CRUD應(yīng)用

本篇內(nèi)容主要講解“怎么使用Vue+Laravel開發(fā)CRUD應(yīng)用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么使用Vue+Laravel開發(fā)CRUD應(yīng)用”吧!

成都一家集口碑和實(shí)力的網(wǎng)站建設(shè)服務(wù)商，擁有專業(yè)的企業(yè)建站團(tuán)隊(duì)和靠譜的建站技術(shù)，十余年企業(yè)及個(gè)人網(wǎng)站建設(shè)經(jīng)驗(yàn) ,為成都數(shù)千家客戶提供網(wǎng)頁設(shè)計(jì)制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營銷型網(wǎng)站建設(shè)，高端網(wǎng)站設(shè)計(jì)，同時(shí)也為不同行業(yè)的客戶提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè)，傳統(tǒng)機(jī)械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務(wù)商就選創(chuàng)新互聯(lián)建站。

CURD （增刪改查）是數(shù)據(jù)存儲的基本操作，也是你作為 Laravel 開發(fā)人員首先要學(xué)習(xí)的內(nèi)容之一

但是，如果要結(jié)合以 Vue.js 作為前端的應(yīng)用程序該注意哪些問題呢？首先，因?yàn)楝F(xiàn)在的操作不刷新頁面，所以你需要異步 CURD 。因此，你需要確保數(shù)據(jù)在前后端的一致性。

演示 app

這是一個(gè)讓使用者創(chuàng)建一個(gè) “Cruds“ 的全棧應(yīng)用，當(dāng)我進(jìn)入這個(gè)應(yīng)用時(shí)，它會創(chuàng)造很多不可思議的東西。外星人獨(dú)特的名稱和可以在紅色，綠色和黑色的自由轉(zhuǎn)換。

Cruds 應(yīng)用展示在主頁，你可以通過 add 按鈕添加 Cruds ， delete 按鈕刪除它們，或者更新它們的顏色。

怎么使用Vue+Laravel開發(fā)CRUD應(yīng)用

Laravel 后端的 CRUD

我們將使用 Laravel 后端開始本教程，來完成 CRUD 操作。我將保持這一部分簡短，因?yàn)?Laravel 的 CRUD 是其他地方廣泛涉及的主題.

總之，我們完成以下操作

設(shè)置數(shù)據(jù)庫
通過資源控制器來編寫一個(gè) RESTful API 的路由
在控制器中定義方法，來完成 CRUD 操作

Database

首先是遷移，我們的 Cruds 有兩個(gè)屬性：名稱和顏色，我們將其設(shè)置為 text 類型

2018_02_02_081739_create_cruds_table.php

increments('id');
      $table->text('name');
      $table->text('color');
      $table->timestamps();
    });
  }

  ...
}
...

API

現(xiàn)在我們來設(shè)置 RESTful API 路由. 這個(gè) resource 方法將自動創(chuàng)建我們所需要的所有操作. 但是, 我們不需要 edit, show 和 store 這幾個(gè)路由,因此我們需要排除它們.

routes/api.php

 ['edit', 'show', 'store']
]);

有了這些, 我們現(xiàn)在可以在API中使用以下路由:

HTTP 方法	地址	方法	路由名
GET	/api/cruds	index	cruds.index
GET	/api/cruds/create	create	cruds.create
PUT	/api/cruds/{id}	update	cruds.update
DELETE	/api/cruds/{id}	destroy	cruds.destroy

控制器

我們現(xiàn)在需要在控制器中實(shí)現(xiàn)這些操作：

app/Http/Controllers/CrudsController.php

我們先簡要概述下每種方法：
create 方法。我們使用 Laravel 附帶的 Faker 包，為 Crud 隨機(jī)生成名稱和顏色字段 。隨后，我們將新生成的數(shù)據(jù)作為 JSON 返回。
name = $faker->lexify('????????');
  $crud->color = $faker->boolean ? 'red' : 'green';
  $crud->save();

  return response($crud->jsonSerialize(), Response::HTTP_CREATED);
}
index方法。我們使用 index 方法返回 Cruds 的全部數(shù)據(jù)。在一個(gè)更嚴(yán)肅的應(yīng)用中，我們會使用分頁，但是現(xiàn)在我們盡量保持簡潔。
jsonSerialize(), Response::HTTP_OK);
}
update。此方法允許客戶端更改 Crud 的顏色。
color = $request->color;
  $crud->save();

  return response(null, Response::HTTP_OK);
}
destroy。 刪除 Cruds 的方法。
Vue.js 應(yīng)用
現(xiàn)在開始處理 Vue 頁面展示部分。先來創(chuàng)建一個(gè)組件 ---  CrudComponent.vue，用來展示 Cruds 的內(nèi)容。
這個(gè)組件主要是展示的功能，沒有太多的業(yè)務(wù)邏輯。主要有以下幾個(gè)重點(diǎn)：
展示一張圖片，圖片的顏色取決于 Crud 的顏色（ 也就是展示 red.png 還是 green.png)
有一個(gè)刪除按鈕，當(dāng)點(diǎn)擊時(shí)會觸發(fā) del 方法，繼而觸發(fā)一個(gè) delete 事件，并攜帶當(dāng)前 Crud 的 ID 作為參數(shù)
有一個(gè) HTML 選擇器 ( 用來選擇顏色 )，當(dāng)發(fā)生選擇時(shí)，會觸發(fā) update 方法，繼而觸發(fā)一個(gè) update 事件，并攜帶當(dāng)前 Crud 的 ID 和新選擇的顏色作為參數(shù)
resources/assets/js/components/CrudComponent.vue


在這個(gè)項(xiàng)目中還有一個(gè)組件 App.vue。它在整個(gè)項(xiàng)目中的地位非常重要，所有主要的邏輯都寫在這里。下面就來逐步分析這個(gè)文件。
先從 template 標(biāo)簽開始,  它主要處理了下面這些業(yè)務(wù)：
為我們上面提到的 crud-component 組件占位
遍歷包含 Crud 對象的數(shù)組（也就是 cruds 數(shù)組 )，數(shù)組中的每個(gè)元素都對應(yīng)著一個(gè) crud-component 組件。我們以 props 的形式把每個(gè) Crud 的屬性傳遞給這個(gè)組件，并且監(jiān)聽來自這個(gè)組件的 update 和 delete 事件
設(shè)置一個(gè) Add 按鈕，當(dāng)點(diǎn)擊時(shí)，會觸發(fā) create 方法，從而創(chuàng)建新的 Cruds
resources/assets/js/components/App.vue
下面來看 App.js 文件的 script 部分:
首先通過 Crud 函數(shù)創(chuàng)建用于展示 Cruds 的對象, 包括 ID, 顏色和姓名
然后， 引入  CrudComponent 組件
組件的 cruds 數(shù)組作為 data 的屬性。 關(guān)于對 CRUD 的增刪改查的具體操作， 會在下一步展開說明。
resources/assets/js/components/App.vue

前端通過 AJAX 觸發(fā) CURD
在一個(gè)完整的項(xiàng)目中，所有的 CRUD 操作都是在后端完成的，因?yàn)閿?shù)據(jù)庫是跟后端交互的。然而，觸發(fā) CRUD 的操作幾乎都是在前端完成的。
因此，一個(gè) HTTP 客戶端（也就是負(fù)責(zé)在前后端之間交互數(shù)據(jù)的橋梁）的作用是非常重要的。被 Laravel 前端默認(rèn)封裝的 Axios， 就是一個(gè)非常好用的 HTTP 客戶端。
再來看下資源表，每個(gè) AJAX 請求都需要有一個(gè)明確的 API 接口：
Verb Path Action Route Name
GET /api/cruds index cruds.index
GET /api/cruds/create create cruds.create
PUT /api/cruds/{id} update cruds.update
DELETE /api/cruds/{id} destroy cruds.destroy
Read
首先來看 read 方法。這個(gè)方法是負(fù)責(zé)在前端發(fā)起 Cruds 請求的，對應(yīng)后端的處理在是控制器里的 index 方法，因此使用 GET 請求 /api/cruds。
由于 Laravel 前端默認(rèn)把 Axios 設(shè)置為 window 的一個(gè)屬性， 因此我們可以使用  window.axios.get 來發(fā)起一個(gè) GET 請求。
對于像 get, post 等 Axios 方法的返回結(jié)果，我們可以再繼續(xù)鏈?zhǔn)秸{(diào)用 then 方法，在 then 方法里可以獲取到 AJAX 響應(yīng)數(shù)據(jù)的主體  data 屬性。
resources/assets/js/components/App.vue
...

methods() {
  read() {
    window.axios.get('/api/cruds').then(({ data }) => {
      // console.log(data)
    });
  },
  ...
}

/*
Sample response:

[
  {
    "id": 0,
    "name": "ijjpfodc",
    "color": "green",
    "created_at": "2018-02-02 09:15:24",
    "updated_at": "2018-02-02 09:24:12"
  },
  {
    "id": 1,
    "name": "wjwxecrf",
    "color": "red",
    "created_at": "2018-02-03 09:26:31",
    "updated_at": "2018-02-03 09:26:31"
  }
]
*/
從上面的返回結(jié)果可以看出，返回的結(jié)果是 JSON 數(shù)組。Axios 會自動將其解析并轉(zhuǎn)成 JavaScript 對象返給我們。這樣方便我們在回調(diào)函數(shù)里對結(jié)果進(jìn)行遍歷，并通過  Crud 工廠方法創(chuàng)建新的 Cruds，并存到 data 屬性的 cruds 數(shù)組中，例如  this.cruds.push(...)。
resources/assets/js/components/App.vue
...

methods() {
  read() {
    window.axios.get('/api/cruds').then(({ data }) => {
      data.forEach(crud => {
        this.cruds.push(new Crud(crud));
      });
    });
  },
},
...
created() {
  this.read();
}
注意：我們通過 created 方法，可以使程序在剛一加載時(shí)就觸發(fā)  read 方法，但這并非最佳實(shí)踐。最好方案應(yīng)該是直接去掉 read 方法，當(dāng)程序第一次加載的時(shí)候，就把應(yīng)用的初始狀態(tài)都包含在文檔投中。
通過上面的步驟，我們就能看到 Cruds 展示在界面上了：
更新 (以及狀態(tài)同步)
執(zhí)行 update 方法需要發(fā)送表單數(shù)據(jù)，比如 color，這樣控制器才知道要更新哪些數(shù)據(jù)。Crud 的 ID 是從服務(wù)端獲取的。
還記得我在本文開篇就提到關(guān)于前后端數(shù)據(jù)一致的問題，這里就是一個(gè)很好的例子。
當(dāng)需要執(zhí)行 update 方法時(shí)，我們可以不用等待服務(wù)器返回結(jié)果，就在前端更新 Crud 對象，因?yàn)槲覀兒芮宄潞髴?yīng)該是什么狀態(tài)。
但是，我們不應(yīng)該這么做。為什么？因?yàn)橛泻芏嘣蚩赡軙?dǎo)致更新數(shù)據(jù)的請求失敗，比如網(wǎng)絡(luò)突然中斷，或者更新的值被數(shù)據(jù)庫拒絕等。
所以等待服務(wù)器返回更新成功的信息后，再刷新前端的狀態(tài)是非常重要的，這樣我們才能確保前后端數(shù)據(jù)的一致。
resources/assets/js/components/App.vue
methods: {
  read() {
    ...
  },
  update(id, color) {
    window.axios.put(`/api/cruds/${id}`, { color }).then(() => {
      // 一旦請求成功，就更新 Crud 的顏色
      this.cruds.find(crud => crud.id === id).color = color;
    });
  },
  ...
}
你可能會說這樣非必要的等待會影響用戶體驗(yàn)，但是我想說，我們在不確定的情況下更新狀態(tài)，誤導(dǎo)用戶，這應(yīng)該會造成更差的用戶體驗(yàn)。
創(chuàng)建和刪除
現(xiàn)在你已經(jīng)明白整個(gè)架構(gòu)的關(guān)鍵點(diǎn)了，剩下兩個(gè)方法，不需要我解釋，你也應(yīng)該能夠理解其中的邏輯了：
resources/assets/js/components/App.vue
methods: {
  read() {
    ...
  },
  update(id, color) {
    ...
  },
  create() {
    window.axios.get('/api/cruds/create').then(({ data }) => {
      this.cruds.push(new Crud(data));
    });
  },
  del(id) {
    window.axios.delete(`/api/cruds/${id}`).then(() => {
      let index = this.cruds.findIndex(crud => crud.id === id);
      this.cruds.splice(index, 1);
    });
  }
}
加載界面 和 禁止互動
你應(yīng)該知道，我們這個(gè)項(xiàng)目VUE前端的CRUD操作都是異步方式的，所以前端AJAX請求服務(wù)器并等待服務(wù)器響應(yīng)返回響應(yīng)，總會有一點(diǎn)延遲。因?yàn)橛脩舨恢谰W(wǎng)站在做什么，此空檔期用戶的體驗(yàn)不是很好，這學(xué)問關(guān)聯(lián)到UX。
為了改善這UX問題，因此最好添加上一些加載界面并在等待當(dāng)前操作解決時(shí)禁用任何交互。這可以讓用戶知道網(wǎng)站在做了什么，而且可以確保數(shù)據(jù)的狀態(tài)。
Vuejs有很多很好的插件能完成這個(gè)功能，但是在此為了讓學(xué)者更好的理解，做一些簡單的快速的邏輯來完成這個(gè)功能，我將創(chuàng)建一個(gè)半透明的p，在AJAX操作過程中覆蓋整個(gè)屏幕，這個(gè)邏輯能完成兩個(gè)功能：加載界面和禁止互動。一石兩鳥，完美~
resources/views/index.blade.php




當(dāng)進(jìn)行 AJAX 請求的時(shí)候，就把 mute 的值從 false 改為 true,  通過這個(gè)值的變化，控制半透明 p 的顯示或隱藏。
resources/assets/js/components/App.vue
export default {
  data() {
    return {
      cruds: [],
      mute: false
    }
  },
  ...
}
下面就是在 update 方法中切換 mute 值的過程。當(dāng)執(zhí)行 update 方法時(shí)，mute 值被設(shè)為 true。當(dāng)請求成功，再把 mute 值設(shè)為 false, 這樣用戶就可以繼續(xù)操作應(yīng)用了。
resources/assets/js/components/App.vue
update(id, color) {
  this.mute = true;
  window.axios.put(`/api/cruds/${id}`, { color }).then(() => {
    this.cruds.find(crud => crud.id === id).color = color;
    this.mute = false;
  });
},
在 CRUDE 的每個(gè)方法里都要有這樣的操作，在此，為了節(jié)約篇幅，我就不一一寫明了。
為了保證大家不會忘記這個(gè)重要的操作，我們直接在 
 元素上方增加了   元素。
從下面的代碼可以看到，當(dāng) 
 元素被加上 class  on  后，它將以灰色調(diào)完全覆蓋整個(gè)應(yīng)用，并阻止所有的點(diǎn)擊事件：
resources/views/index.blade.php

getLocale() }}">

  
  
  
  
  Cruds
  






最后一個(gè)問題是對于 on class 的管理，我們可以在  mute 的值上加一個(gè) watch，每當(dāng) mute 的值發(fā)生改變的時(shí)候，就加上或刪除  on class：
export default {
  ...
  watch: {
    mute(val) {
      document.getElementById('mute').className = val ? "on" : "";
    }
  }
}
完成上面所有的步驟，你就可以擁有一個(gè)帶有加載指示器的全棧Vue / Laravel CRUD 的應(yīng)用程序了。再來看下完整效果吧：
到此，相信大家對“怎么使用Vue+Laravel開發(fā)CRUD應(yīng)用”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！            
            
                        

            網(wǎng)頁標(biāo)題：怎么使用Vue+Laravel開發(fā)CRUD應(yīng)用            

            文章URL：http://weahome.cn/article/jjpisj.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

怎么使用Vue+Laravel開發(fā)CRUD應(yīng)用

演示 app

Laravel 后端的 CRUD

Database

API

控制器

Vue.js 應(yīng)用

Name: {{ name | properCase }}

Cruds

前端通過 AJAX 觸發(fā) CURD

Read

更新 (以及狀態(tài)同步)

創(chuàng)建和刪除

加載界面和禁止互動

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

怎么使用Vue+Laravel開發(fā)CRUD應(yīng)用

演示 app

Laravel 后端的 CRUD

Database

API

控制器

Vue.js 應(yīng)用

Name: {{ name | properCase }}

Cruds

前端通過 AJAX 觸發(fā) CURD

Read

更新 (以及狀態(tài)同步)

創(chuàng)建和刪除

加載界面 和 禁止互動

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管

加載界面和禁止互動