با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

در این مقاله وبلاگی ایجاد خواهید کرد که از سرور مجازی GraphQL استفاده میکند. ما برنامه وبلاگ را با استفاده از کلاینت Apollo و Vue می سازیم. می توانید سرور مجازی GraphQL را بگیرید تا بتوانید همراه با آموزش آن را دنبال کنید.
فعال کردن CORS
سرور مجازی GraphQL با AdonisJS ساخته شده است. AdonisJS بسته ای را ارائه می دهد که می توانیم از آن برای مدیریت اشتراک گذاری مقطعی منبع (CORS) در API استفاده کنیم. به طور پیش فرض CORS در AdonisJS شروع میشود ، بنابراین باید آن را فعال کنیم. برای فعال کردن CORS در برنامه AdonisJS ، origin را به صورت زیر در config/cors.js روی true تنظیم می کنیم:
config/cors.js
origin: true
اگرچه سرور مجازی GraphQL کلون شده قبلاً CORS را فعال کرده است ، اما ذکر آن خالی از لطف نیست.
راه اندازی سرور مجازی GraphQL
از آنجا که برنامه وبلاگ ما از سرور مجازی GraphQL استفاده می کند ، باید سرور مجازی را شروع کرده و آن را برای بقیه آموزش در حالت اجرا نگه داریم. برای شروع ، وارد دیرکتوری پروژه سرور مجازی GraphQL می شویم و دستور زیر را اجرا می کنیم:
⦁ $ adonis serve –dev
⦁
با این کار سرور مجازی GraphQL شروع به کار می کند.

بقیه آموزش بر این فرض است که شما قبلاً سرور مجازی GraphQL را راه اندازی کرده اید و در حال اجرا است.
با توجه به این مسئله ، بیایید شروع به ساخت برنامه وبلاگ خود کنیم.
ایجاد یک برنامه Vue
با ایجاد یک برنامه جدید Vue با استفاده از Vue CLI شروع خواهیم کرد:
⦁ $ vue init webpack graphql-blog-app
⦁
⦁ $ // select `Y` to use Vue router
⦁
با این کار یک برنامه جدید Vue با نام Graphql-blog-app ایجاد می شود و متعلقات آن را نصب می کند.
نصب بسته های لازم
با ایجاد برنامه ، می توانیم به سراغ نصب بسته های لازم برای ساخت برنامه وبلاگ GraphQL برویم:
⦁ $ cd graphql-blog-app
⦁
⦁ $ npm install –save vue-apollo@next graphql apollo-client apollo-link apollo-link-context apollo-link-http apollo-cache-inmemory graphql-tag
بیایید به سرعت روی همه بسته ها مروری کنیم:
⦁ vue-apollo: یکپارچه سازی Apollo / GraphQL برای VueJS است. ما آخرین نسخه این افزونه را نصب می کنیم که به ما امکان می دهد از تمام ویژگی های فوق العاده ای که همراه با کلاینت آپولو 2.0 وجود دارد استفاده کنیم.
⦁ graphql: اجرای مرجع GraphQL برای JavaScript .
⦁ apollo-client: یک کلاینت ذخیره سازی GraphQL ، جامع و آماده تولید ، برای هر سرور مجازی یا چارچوب UI .
⦁ apollo-link: یک رابط استاندارد برای اصلاح جریان کنترل درخواستهای GraphQL و واکشی نتایج GraphQL .
⦁ apollo-link-context: برای تنظیم زمینه ای روی عملکرد شما استفاده میشود ، که توسط سایر پیوندها در پایین زنجیره استفاده می شود.
⦁ apollo-link-http: برای گرفتن نتایج GraphQL از طریق شبکه با استفاده از واکشی HTTP استفاده می شود.
⦁ apollo-cache-inmemory: اجرای حافظه پنهان برای آپولو Client 2.0.
⦁ Graphql-tag: برچسب تحت اللفظی قالب JavaScript که نمایش داده های GraphQL را تجزیه می کند.
راه اندازی Vue Apollo
در مرحله بعد ، اجازه دهید بسته ها را برای استفاده قرار دهیم. ما با ایجاد یک نمونه ApolloClient و نصب افزونه VueApollo شروع خواهیم کرد. src / main.js را باز کنید و کد زیر را به آن اضافه کنید:
src/main.js
import { ApolloClient } from ‘apollo-client’
import { HttpLink } from ‘apollo-link-http’
import { InMemoryCache } from ‘apollo-cache-inmemory’
import VueApollo from ‘vue-apollo’

const httpLink = new HttpLink({
// URL to graphql server, you should use an absolute URL here
uri: ‘http://localhost:3333/graphql’
})

// create the apollo client
const apolloClient = new ApolloClient({
link: httpLink,
cache: new InMemoryCache()
})

// install the vue plugin
Vue.use(VueApollo)

یک نمونه جدید از httpLink را با URL (http: // localhost: 3333 / Graphql) سرور مجازی GraphQL خود ایجاد می کنیم. سپس با استفاده از httpLink ایجاد شده در بالا ، یک کلاینت Apollo ایجاد می کنیم و مشخص می کنیم حافظه پنهان را می خواهیم. در آخر ، افزونه Vue Apollo را نصب می کنیم.
در مرحله بعدی، بیایید یک آبجکت apolloProvider ایجاد کنیم که در مؤلفه اصلی خود آن را مشخص خواهیم کرد:
src/main.js
const apolloProvider = new VueApollo({
defaultClient: apolloClient
})

// update Vue instance by adding `apolloProvider`
new Vue({
el: ‘#app’,
router,
apolloProvider,
template: ‘<App/>’,
components: { App }
})

ما نمونه جدیدی از افزونه Vue Apollo را با استفاده از apolloClient ایجاد شده به عنوان کلاینت پیش فرض مان ایجاد می کنیم. در آخر ، با اضافه کردن آن در نمونه Vue ، از آبجکت apolloProvider استفاده می کنیم ، به همان روشی که از روتر Vue استفاده خواهیم کرد.
اضافه کردن Bulma
به منظور استفاده از این آموزش ، از Bulma CSS استفاده خواهیم کرد. بنابراین ، اجازه دهید آن را اضافه کنیم. index.html را باز کنید و به شرح زیر به روز کنید:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
<title>GraphQL Blog App</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css”>
</head>
<body>
<div id=”app”></div>
<!– built files will be auto injected –>
</body>
</html>

ما Bulma را در CDN ارجاع می دهیم.
حذف کد استفاده نشده
هنگامی که برنامه Vue خود را ایجاد کردیم که در این آموزش استفاده نمی کنیم ، برخی از فایل ها و کد ها هستند که همراه آن می آیند. باید آنها را حذف کنیم تا در برنامه ما دخالت نکنند. مؤلفه Hello را حذف کرده و تمام منابع آن را از src / router / index.js حذف کنید.
اضافه کردن چیدمان مستر
این وبلاگ از یک طرح کلی در صفحات خود استفاده می کند. در این حالت ، بیایید یک چیدمان تعریف کنیم که همه صفحات از آن استفاده کنند. برای انجام این کار ، src / App.vue را باز کنید و به شرح زیر آپدیت کنید:
src/App.vue
<template>
<div id=”app”>
<nav class=”navbar is-primary” role=”navigation” aria-label=”main navigation”>
<div class=”container”>
<div class=”navbar-brand”>
<router-link class=”navbar-item” to=”/”>Blog App</router-link>

یک هدر اضافه می کنیم که همه صفحات از آن استفاده خواهند کرد.
ثبت نام کاربر
کاربران باید بتوانند در برنامه وبلاگ ما عضو شوند. ما یک مؤلفه SignUp ایجاد خواهیم کرد که آن را مدیریت کند. بنابراین ، در src/components یک پوشه ادمین جدید ایجاد کنید. تمام مؤلفه های مربوط به ادمین در این پوشه به صورت داخلی ایجاد می شوند.
قبل از ایجاد مؤلفه SignUp ، اجازه دهید یک فایل اختصاصی ایجاد کنیم که تمام نمایشگرها و جهش های GraphQL ما را در خود نگه می دارد. ما این فایل را مستقیماً در داخل src ایجاد خواهیم کرد. یک فایل Graphql.js را در داخل src ایجاد کنید و کد زیر را درون آن پیست کنید:
src/graphql.js
import gql from ‘graphql-tag’

export const SIGNUP_MUTATION = gql`mutation SignupMutation($username: String!, $email: String!, $password: String!) {
createUser(
username: $username,
email: $email,
password: $password
) {
id
username
email
}
}`

این جهش GraphQL است که ایجاد کاربر جدید در سرور مجازی GraphQL ما را کنترل می کند. نام کاربری ، ایمیل و رمز عبور کاربر را می گیرد. این متغیرها از مؤلفه SignUp منتقل می شوند.
در مرحله بعد ، بیایید مؤلفه SignUp را ایجاد کنیم. در داخل پوشه ادمین ، یک فایل SignUp.vue ایجاد کنید و کد زیر را در آن قرار دهید:
src/components/Admin/SignUp.vue
<template>
<section class=”section”>
<div class=”columns”>
<div class=”column is-4 is-offset-4″>
<h2 class=”title has-text-centered”>Signup</h2>

<form method=”POST” @submit.prevent=”signup”>
<div class=”field”>
<label class=”label”>Username</label>

<div class=”field”>
<label class=”label”>E-Mail Address</label>

<div class=”field”>
<label class=”label”>Password</label>

<p class=”control”>
<button class=”button is-primary is-fullwidth is-uppercase”>SignUp</button>
</p>
</form>
</div>
</div>
</section>
</template>

export default {
name: ‘SignUp’,
data () {
return {
username: ”,
email: ”,
password: ”
}
},
methods: {
signup () {
this.$apollo
.mutate({
mutation: SIGNUP_MUTATION,
variables: {
username: this.username,
email: this.email,
password: this.password
}
})
.then(response => {
// redirect to login page
this.$router.replace(‘/login’)
})
}
}
}
</script>

این مؤلفه فرم ثبت نام را برای کاربران ارائه می دهد. پس از ارسال فرم ، یک روش signup فراخوانی می شود. در روش signup ، از روش mutate موجود در this.$apollo استفاده می کنیم (از افزونه Vue Apollo. از جهش SIGNUP_MUTATION که قبلاً ایجاد شده استفاده می کنیم و متغیرهای لازم را می گذرانیم. پس از موفقیت در روند ثبت نام (یعنی وقتی کاربر ایجاد شد) کاربر را به صفحه ورود (که به زودی ایجاد خواهیم کرد) هدایت می کنیم.
اضافه کردن مسیر ثبت نام
src / router / index.js را باز کنید ، و کد زیر را به آن اضافه کنید:
src/router/index.js
import SignUp from ‘@/components/Admin/SignUp’

// add these inside the `routes` array
{
path: ‘/signup’,
name: ‘SignUp’,
component: SignUp
},

: این مسیر باید آخرین مسیر در آرایه مسیرها باشد.

اکنون باید بتوانیم یک پست واحد را مشاهده کنیم:

نتیجه
در این آموزش ، نحوه ساختن یک برنامه وبلاگ با GraphQL ، کلاینت Apollo و VueJS را مشاهده کردیم. همچنین دیدیم که چگونه برنامه frontend خود را به یک سرور مجازی GraphQL وصل کنیم. کد کامل این آموزش در GitHub موجود است.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade