在本教程中，我們將學(xué)習(xí)如何使用 VueJS、GraphQL和 Hasura 構(gòu)建 CRUD 應(yīng)用程序。不要害怕技術(shù)堆棧；只要堅(jiān)持到博客的結(jié)尾，您就可以構(gòu)建基本的 CRUD VueJS 應(yīng)用程序、CRUD GraphQL 應(yīng)用程序和 Hasura 應(yīng)用程序。

許多開(kāi)發(fā)人員將 GraphQL 視為一種數(shù)據(jù)庫(kù)技術(shù)，但事實(shí)并非如此！

GraphQL 是一種查詢語(yǔ)言——構(gòu)建 REST API 的替代方法。GraphQL 提供了一個(gè)接口來(lái)存儲(chǔ)滿足應(yīng)用程序要求的信息。

Facebook 將其開(kāi)發(fā)為一項(xiàng)內(nèi)部技術(shù)，以增強(qiáng)應(yīng)用程序的多功能性，隨后將其作為開(kāi)源軟件發(fā)布。從那時(shí)起，軟件開(kāi)發(fā)社區(qū)就將其用作開(kāi)發(fā) Web 服務(wù)最喜歡的技術(shù)堆棧之一。

教程目標(biāo)：使用 VueJS、GraphQL 和 Hasura 構(gòu)建 CRUD 應(yīng)用程序

在著手構(gòu)建基本的 CRUD 應(yīng)用程序之前，請(qǐng)觀看以下視頻以了解我們正在構(gòu)建的內(nèi)容。

先決條件

• VueJS 和 GraphQL 的基礎(chǔ)知識(shí)

• VS 代碼或任何其他 IDE

• 熟悉 Javascript 和 HTML

使用 Hasura 建立數(shù)據(jù)庫(kù)

首先你需要注冊(cè)Hasura cloud。訪問(wèn)hasura.io來(lái)做同樣的事情。

Hasura 使用 GraphQL 立即讓您的應(yīng)用程序查詢、更新和接收數(shù)據(jù)的實(shí)時(shí)通知。注冊(cè)成功后，您必須連接您的數(shù)據(jù)庫(kù)。您可以使用任何現(xiàn)有的數(shù)據(jù)庫(kù)，也可以免費(fèi)從 Heroku 創(chuàng)建。

完成創(chuàng)建或連接數(shù)據(jù)庫(kù)后，讓我們轉(zhuǎn)到代碼部分。

不確定從哪里開(kāi)始，那么您來(lái)對(duì)地方了。
如果您不確定從哪里開(kāi)始，那么您可以從我們這里聘請(qǐng) VueJS 開(kāi)發(fā)人員，他們非常有信心和熱情地完成您的項(xiàng)目。

初始設(shè)置和安裝

您可以創(chuàng)建新的 VueJS 應(yīng)用程序或使用現(xiàn)有的應(yīng)用程序。

在這里，我通過(guò)使用 vue-cli 進(jìn)行設(shè)置來(lái)使用一個(gè)新的 vue 應(yīng)用程序。所以這是創(chuàng)建應(yīng)用程序的命令。

vue 創(chuàng)建 vue-graphql-demo

運(yùn)行以下命令以安裝所有依賴項(xiàng)。

npm 安裝vue-apollo@3.0.0-beta.28 apollo-cache-inmemory apollo-link-http apollo-client graphql-tag graphql --save

然后在 src/ 下創(chuàng)建一個(gè)名為 apollo.js 的文件，并注冊(cè)下面的所有包。

// 阿波羅.js

從 'vue' 導(dǎo)入 Vue從 'vue-apollo' 導(dǎo)入 VueApollo從 'apollo-client' 導(dǎo)入 { ApolloClient }從 'apollo-link-http' 導(dǎo)入 { HttpLink }從 'apollo-cache-inmemory' 導(dǎo)入 { InMemoryCache }
 const httpLink = new HttpLink({
    // 你應(yīng)該在這里使用絕對(duì) URL
    uri: 'https://your-app.hasura.app/v1/graphql',
    標(biāo)題：{
      “x-hasura-admin-secret”：“令牌”
    }})
 // 創(chuàng)建阿波羅客戶端export const apolloClient = new ApolloClient({
    鏈接：http鏈接，
    緩存：新的 InMemoryCache(),
    connectToDevTools：真})
 const apolloProvider = new VueApollo({
    默認(rèn)客戶端：apolloClient})
 // 安裝vue插件Vue.use(VueApollo)
 導(dǎo)出默認(rèn)的 apolloProvider

從 GraphQL/API 選項(xiàng)卡獲取您的 URL 和x-hasura-admin-secret，如下所示。

現(xiàn)在是時(shí)候更新您的main.js文件了。將此apollo.js導(dǎo)入main.js 。

// 主.js

從 'vue' 導(dǎo)入 Vue從 './App.vue' 導(dǎo)入應(yīng)用程序從 './apollo' 導(dǎo)入 apolloProvider
 Vue.config.productionTip = false新的 Vue({
 阿波羅供應(yīng)商，
 渲染：h => h(App)}).$mount('#app')

所以我們?cè)谶@里完成了初始設(shè)置?，F(xiàn)在，是時(shí)候進(jìn)行查詢以獲取數(shù)據(jù)、更新數(shù)據(jù)和刪除數(shù)據(jù)了。

在這里我創(chuàng)建了用戶表。為用戶創(chuàng)建一個(gè)組件，讓我們添加獲取用戶數(shù)據(jù)的查詢。

實(shí)現(xiàn)CRUD操作

使用以下代碼片段在您的應(yīng)用程序中實(shí)施 CRUD 操作。

創(chuàng)造

const name = this.name;const email = this.email;這個(gè)。$apollo.mutate({變異：gql`mutation addUser($name: String!, $email: String!) {
        insert_users(objects: [{ name: $name, email: $email }]) {
             返回 {
               用戶身份
             }
         }
       }`,變量：{
   姓名，
   電子郵件，},refetchQueries: ["getUsers"],});

與我們插入數(shù)據(jù)一樣，我們需要更新特定用戶的數(shù)據(jù)并將其刪除。

讀

阿波羅：{
   用戶列表：{
     查詢：gql`
       查詢 getUsers {
         用戶{
           用戶身份
           姓名
           電子郵件
         }
       }
     `,
     更新：（數(shù)據(jù)）=> {
       返回?cái)?shù)據(jù)。用戶；
     },
   },
 },

在 userList 變量中，您將獲得一個(gè)用戶對(duì)象，因此讓我們將其添加到表元素中?，F(xiàn)在，是時(shí)候添加用戶了，所以制作一個(gè)表單并添加兩個(gè)字段，名稱和電子郵件。

更新

const name = this.editUser.name;const email = this.editUser.email;const user_id = this.editUser.user_id;這個(gè)。$apollo.mutate({
   變異：gql`
    mutation updateUsers($user_id: Int, $name: String!, $email: String!) {
      更新用戶（
        其中：{ user_id: { _eq: $user_id } }
          _set: { email: $email, name: $name }
        ) {
           返回 {
           用戶身份
          }
        }	
      }
    `,
      變量：{
        用戶身份，
        姓名，
        電子郵件，
     },
      refetchQueries: ["getUsers"],
   });

刪除

讓 user_id = id;
   這個(gè)。$apollo.mutate({
     變異：gql`
       突變 deleteUser($user_id: Int) {
        delete_users（其中：{user_id：{_eq：$user_id}}）{
           返回 {
             用戶身份
           }
         }
       }
      `,
     變量：{
        用戶身份，
     },
     refetchQueries: ["getUsers"],
  });

Github 存儲(chǔ)庫(kù)：使用 VueJS、GraphQL 和 Hasura 構(gòu)建 CRUD 應(yīng)用程序開(kāi)發(fā)

這是構(gòu)建 CRUD Vue js 應(yīng)用程序、GraphQL CRUD 和 Hasura 的源代碼 – vue-graphql-demo。隨意克隆和探索有關(guān)代碼庫(kù)的更多信息。

結(jié)論

言鼎科技主做軟件開(kāi)發(fā),微信小程序,網(wǎng)站開(kāi)發(fā),軟件外包,手機(jī)APP開(kāi)發(fā)。如有需要記得聯(lián)系我們！