ساخت اپلیکیشن ToDo با مجموعه MEVN (بخش اول) — از صفر تا صد

۹۶ بازدید
آخرین به‌روزرسانی: ۲۸ شهریور ۱۴۰۲
زمان مطالعه: ۷ دقیقه
ساخت اپلیکیشن ToDo با مجموعه MEVN (بخش اول) — از صفر تا صد

VueJS یک فناوری است که محبوبیت فراینده‌ای یافته است و از این رو دانستن شیوه یکپارچه‌سازی این فریمورک جاوا اسکریپت با فناوری‌های پراستفاده‌ای مانند MongoDB ،Express و Node که در کل مجموعه MEVN را تشکیل می‌دهد حائز اهمیت بالایی است. مجموعه MEVN ابزار زیبایی است که جایگزین مجموعه‌های MEAN و MERN می‌شود که به ترتیب از انگولار و ری‌اکت به عنوان فرانت‌اند‌های خود استفاده می‌کنند.

در این راهنمای دو قسمتی شیوه ایجاد یک مجموعه MEVN به شکل یک اپلیکیشن ToDo را توضیح می‌دهیم. این راهنما برای آغاز این پروژه و درک شیوه بسط آن کافی است. این راهنما به شما کمک می‌کند که فرایند راه‌اندازی فرانت‌اند / بک‌اند را طی کنید و همچنین ارتباط بین این دو طرف را برقرار کنید. ریپوی این پروژه را می‌توانید در این صفحه (+) ملاحظه کنید.

ایجاد پروژه

ابتدا ساختار پروژه را تنظیم می‌کنیم. یک مجموعه MEVN مانند همه مجموعه‌های دیگر دو بخش جداگانه خواهد داشت که یکی سمت کلاینت و فریمورک فرانت‌اند و دیگری سمت سرور و بک‌اند را شامل می‌شود.

بنابراین ابتدا با استفاده از cd به پوشه ریشه پروژه خود می‌رویم تا پوشه‌های client و server را ایجاد کنیم.

mkdir client
mkdir server

راه‌اندازی فرانت‌اند Vue

قبل از هر چیز باید مطمئن شوید که Vue-Cli 3 و Vue Cli-Init روی سیستم شما نصب شده‌اند. سپس همچنان که در پوشه root هستید، دستور زیر را برای راه‌اندازی فرانت‌اند وارد کنید:

vue init webpack client

این دستور یک پروژه Vue را مقداردهی می‌کند که از قالب Webpack استفاده می‌کند. این دقیقاً همان پروژه‌ای است که می‌خواهیم استفاده کنیم و بیشترین آشنایی را با آن داریم. اگر می‌خواهید قالب‌های دیگری که می‌توانید استفاده کنید را ببینید باید به این صفحه (+) مراجعه کنید.

سپس از شما خواسته می‌شود که تنظیمات پروژه خود را وارد کنید. به این منظور از تنظیمات زیر استفاده می‌کنیم. باید مطمئن شویم که vue-router را به عنوان جزئی ضروری برای روشی که این پروژه را نوشته‌ایم استفاده می‌کنیم.

لاراول

سپس با پیگیری دستورالعمل‌ها به پوشه client بروید و بسته‌های node را نصب کنید و سپس در نهایت پروژه خود را آغاز کنید.

cd client
npm install
npm run dev

اینک رندرینگ صفحه پیش‌فرض Vue را باید در آدرس http://localhost:8080 ببینید:

مجموعه MEVN

با این که این صفحه زیبا است؛ اما به هیچ یک از این صفحه‌ها و استایل‌های پیش‌فرض نیاز نخواهیم داشت. به مسیر src/app.vue بروید و آن را با قطعه بسیار کوتاه‌تر کدی که در ادامه صفحه ما را رندر می‌کند جایگزین کنید.

1<template>
2  <div id="app">
3    <router-view/>
4  </div>
5</template>
6<script>
7export default {
8  name: 'app',
9  data () {
10    return {
11      
12    }
13  }
14}
15</script>
16<style>
17</style>

اینک که فرانت‌اند را راه‌اندازی کردیم آماده توسعه هستیم و همین کار را برای یک‌اند نیز تکرار می‌کنیم.

راه‌اندازی بک‌اند

ابتدا قصد داریم با دستور /cd../server از پوشه کلاینت به پوشه server برویم. سپس باید یک فایل package.json بسازیم که npm و همه متادیتای مهم را راه‌اندازی کنیم و دستورهای اسکریپت را برای پروژه شامل شویم. دستور npm init را اجرا کنید و در همه گزینه‌ها صرفاً کلید اینتر را بزنید. اگر فایل package.json را باز کنید کد زیر را می‌بینید:

1{
2  "name": "server",
3  "version": "1.0.0",
4  "main": "index.js",
5  "scripts": {
6    "test": "echo \"Error: no test specified\" && exit 1"
7  },
8  "author": "",
9  "license": "ISC",
10  "keywords": [],
11  "description": ""
12}

این روش عالی است به جز این که دستور آغاز تعریف‌شده‌ای ندارد. دستور آغاز به ما امکان می‌دهد که دستور npm start را وارد کرده و سرور را آغاز کنید. ما می‌توانیم خط زیر را نیز اضافه کنیم:

“start”: “node src/app.js”

اما در این صورت باید به صورت دستی سرور را هر بار که فایل تغییر می‌یابد ری‌استارت کنید. یک راهکار مناسب استفاده از nodemon  (+) است. این یک بسته npm است که تغییرات فایل را تشخیص داده و به طور خودکار سرور را ری‌استارت می‌کند. ابتدا باید nodemon را با دستور زیر نصب کنید:

npm install --save nodemon

این دستور nodemon را به صورت یک وابستگی برای سرور شما ذخیره می‌کند. سپس باید در عمل nodemon را در دستور start خود بگنجانیم. بخش scripts اینک باید دستور start زیر را داشته باشد:

1"scripts": {
2    "start": "./node_modules/nodemon/bin/nodemon.js src/app.js",        
3    "test": "echo \"Error: no test specified\" && exit 1"
4 },

سپس برای این که عملاً اپلیکیشن Express را در حالت عملیاتی داشته باشیم باید چند وابستگی را به نام‌های express ،body-parser ،cors و morgan را نصب کنیم. این موارد را می‌توانیم با دستور زیر نصب کنیم:

npm install --save express body-parser cors morgan

اینک که وابستگی‌های ضروری را برای یک اپلیکیشن Express نصب کردیم باید در عمل فایل app.js را ایجاد کنیم. بنابراین یک پوشه به نام src در پوشه server ایجاد کرده و فایل app.js را در آن می‌سازیم.

مجموعه MEVN

در نهایت زمان آن فرا می‌رسد که سرور خود را اجرا کنیم. در این مرحله وابستگی‌ها را ایمپورت می‌کنیم، اپلیکیشن اکسپرس خود را تعریف کرده و مطمئن می‌شویم که اپلیکیشن از این وابستگی‌ها استفاده می‌کند.

1// import dependencies
2const express = require('express')
3const bodyParser = require('body-parser')
4const cors = require('cors')
5const morgan = require('morgan')
6const app = express() // create your express app
7// make app use dependencies
8app.use(morgan('dev'))
9app.use(bodyParser.json())
10app.use(cors())
11app.listen(process.env.PORT || 8081) // client is already running on 8080

بنابراین فعلاً اگر npm start را اجرا کنیم باید یک خروجی nodemon داشته باشیم که به اپلیکیشن اعلام کند باید اجرا شود. اما نمی‌توانیم عملاً هیچ کاری با این اپلیکیشن انجام دهیم، چون هیچ مسیر (route) تعریف‌شده‌ای وجود ندارد. بنابراین اگر بخواهیم به آدرس http://localhost:8081 برویم هیچ اتفاقی نمی‌افتد. در ادامه این وضعیت را اصلاح می‌کنیم.

اکنون تنها کاری که باید انجام دهیم تعریف کردن یک مسیر است. ما فرض می‌کنیم که شما قبلاً با Express کار کرده‌اید و از این رو وارد جزییات این کار نمی‌شویم. فایل app.js را باز کرده و کد زیر را وارد کنید:

1// import dependencies
2const express = require('express')
3const bodyParser = require('body-parser')
4const cors = require('cors')
5const morgan = require('morgan')
6const app = express() // create your express app
7// make app use dependencies
8app.use(morgan('dev'))
9app.use(bodyParser.json())
10app.use(cors())
11app.get('/todo', (req, res) => {
12  res.send([
13    'Thing 1',
14    'Thing 2'
15  ])
16})
17app.listen(process.env.PORT || 8081) // client is already running on 8080

اینک سرور باید به صورت خودکار (به لطف nodemon) ری‌استارت شود و باید به مسیر http://localhost:8081/todo برویم تا ببینیم که آرایه رشته‌ای در صفحه با قالب‌بندی زیر عرضه شده است:

“Thing 1”، “Thing 2”]

اینک موفق شدیم هم فرانت‌اند و هم بک‌اند را راه‌اندازی کنیم.

مسیریابی به صفحه نخست

اینک به پوشه client/src بازگردید و دو پوشه به نام‌های components و دیگری به نام router ایجاد کنید. پوشه components همه کامپوننت‌های اپلیکیشن را ذخیره می‌کند و پوشه router همه اطلاعات را که به اپلیکیشن امکان می‌دهند تا صفحه‌های چندگانه داشته باشد ذخیره می‌کند. ابتدا قصد داریم صفحه خود را بسازیم. در پوشه components فایلی به نام ToDo.vue ایجاد می‌کنیم که همان صفحه اصلی ما خواهد بود که در این راهنما با آن کار می‌کنیم. محتوای آن را به صورت زیر تنظیم می‌کنیم:

1<template lang="html">
2  <div>
3    <ul>
4      <li>
5        Hello World
6      </li>
7    </ul>
8  </div>
9</template>
10<script>
11export default {
12}
13</script>
14<style lang="css">
15</style>

اینک صفحه نخست خود را داریم؛ اما به روشی برای دسترسی به آن از localhost نیاز داریم. در پوشه client باید به مسیر router/index.js  برویم. این فایل همه مسیریابی را برای پروژه سمت کلاینت تأمین می‌کند. کد زیر را در آن قرار دهید:

1import Vue from 'vue'
2import Router from 'vue-router'
3import HelloWorld from '@/components/HelloWorld'
4import ToDo from '@/components/ToDo'
5Vue.use(Router)
6export default new Router({
7  routes: [
8    {
9      path: '/',
10      name: 'HelloWorld',
11      component: HelloWorld
12    }
13    {
14      path: '/todos',
15      component: ToDo
16    }
17  ]
18})

اگر همه کارها را به درستی انجام داده باشید، زمانی که به آدرس زیر بروید:

http://localhost:8080/#/todo

کامپوننت ToDos.vue باید رندر شود. این کامپوننت در حال حاضر صرفاً فهرستی از یک عنصر است که عبارت Hello World را نمایش می‌دهد. اینک ما یک اپلیکیشن چندصفحه‌ای داریم. بدین ترتیب شما با مبانی شیوه توسعه فرانت‌اند در VueJS آشنا شده‌اید؛ اما این دلیل ارائه این مقاله نبوده است و باید آن را به بک‌اند اتصال دهیم تا یک اپلیکیشن کامل باشد.

استفاده از Axios برای اتصال کلاینت به سرور

برای این که کلاینت بتواند با سرور ارتباط بگیرد و برعکس، از Axios استفاده می‌کنیم. Axios بسته‌ای است که می‌تواند درخواست‌های HTTP را به یک سرور node ارسال کند. ابتدا آن را با استفاده از دستور زیر نصب می‌کنیم:

npm install --save axios

سپس در دایرکتوری client/src یک پوشه دیگر به نام services ایجاد می‌کنیم. در این پوشه یک فایل به نام API.js می‌سازیم و کد زیر را در آن قرار می‌دهیم:

1import axios from 'axios'
2export default() => {
3  return axios.create({
4    baseURL: `http://localhost:8081/` // the url of our server
5  })
6}

در ادامه برای این که کد ماژولار و قابل نگهداری داشته باشیم، فایلی به نام ToDoAPI.js می‌سازیم که همه بخش‌های سرور که با note-ها مرتبط هستند را مدیریت می‌کند. در این فایل تابع‌های مختلفی که سرور را فراخوانی می‌کنند با استفاده از API مربوط به axios که قبلاً تعریف کردیم اعلان می‌کنیم. کد زیر را در فایل ToDoAPI.js قرار دهید:

1import API from '@/services/API'
2export default {
3  getToDos () {
4    return API().get('todo')
5  }
6}

اینک باید کامپوننت ToDo.vue را طوری تغییر دهیم که به طور صحیحی بارگذاری شود و داده‌ها را با فراخوانی سرور نمایش دهد. ابتدا ToDoAPI.js را در کامپوننت Vue خود ایمپورت می‌کنیم به طوری که بتوانیم ()getTodos را فراخوانی کنیم. سپس آن را در یک تابع async با استفاده از ساختار async/await جاوا اسکریپت فراخوانی می‌کنیم. در نهایت این تابع async در قلاب mounted در Vue فراخوانی می‌شود.

برای رندر کردن داده‌ها باید از دایرکتوری v-for برای پر کردن لیست to-do-های خود استفاده کنیم. در فایل ToDo.vue از کد زیر استفاده می‌کنیم:

1<template lang="html">
2  <div>
3    <ul>
4      <li v-for='todo in todos'>
5        <span>{{todo}}</span>
6      </li>
7    </ul>
8  </div>
9</template>
10<script>
11import ToDoAPI from '@/services/ToDoAPI.js'
12export default {
13  data () {
14    return {
15      todos: []
16    }
17  },
18  mounted () {
19    this.loadTodos()
20  },
21  methods: {
22    async loadTodos () {
23      const response = await ToDoAPI.getToDos()
24      this.todos = response.data
25    }
26  }
27}
28</script>
29<style lang="css">
30</style>

اینک خروجی زیر را داریم:

با این که این وضعیت شاید دستاورد بزرگی محسوب نشود؛ اما در واقع کار زیادی صورت گرفته است که فهرست آن‌ها را در ادامه می‌بینید:

  • یک اپلیکیشن عملیاتی Vue داریم.
  • یک سرور Node/Express داریم.
  • Axios به انتقال داده‌ها بین کلاینت و سرور می‌پردازد.
  • کلاینت با استفاده از Axios اقدام به دریافت و رندر کردن داده‌ها از سرور می‌کند.

در بخش بعدی اقدام به راه‌اندازی MongoDB می‌کنیم و روی زیباتر ساختن ظاهر همه اجزای اپلیکیشن خود نیز بیشتر کار می‌کنیم. برای مطالعه بخش دوم به لینک زیر مراجعه کنید:

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۱ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
mattmaribojoc
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *