• 026-32601 داخلی 4

جلسه بیست و هفتم آموزش فریم ورک vue.js : آموزش درخواست های http در vue.js

آموزش درخواست های http در vue.js

در جلسه قبلی از آموزش vuejs به مبحث انیمیشن ها پرداختیم، حال جلسه بیست و هفتم به آموزش درخواست های http در vue.js می پردازیم.

مفهوم درخواست های http چیست؟

HTTP در واقع بستری برای ارتباط بین مرورگرها و سرورهاست؛ صفحات وب فایلهایی هستند که در مرورگرها نمایش داده میشوند و توسط سرورها ایجاد می شوند ؛ روشی که درواقع توسط آن، فایلها به مرورگر میرسد HTTP می باشد که مخفف Hypertext transfer protocol می باشد

 

فرآیند درخواست/پاسخ (request/response) پروتکل http:

زمانیکه مرورگر درخواست را ایجاد میکند، سرور پاسخ مناسب با آن را فراهم میکند.

پاسخ های http به صورت یکسری کدها داده میشود مثل کدهای زیر:

  • ۲۰۰: OK
  • ۳۰۱: بطور دائمی منتقل شده (Moved Permanently)
  • ۳۰۲: بطور موقت منتقل شده (Moved Temporary)
  • ۴۰۴: صفحه یافت نشد (Not Found)

میتوان از هر فریم ورکی برای درخواست های http استفاده کرد مثل  jquery و ولی جالب نیست بهتر است از همان فریم ورکی که مربوط به vue.js هست استفاده کنیم

استفاده از پلاگین vue-resource برای درخواستهای http در vue.js:

مراحل نصب پلاگین:
1- نصب پلاگین
2- Npm install – -save vue-resource
3- افزودن dependency به اپلیکیشن ، داخل main.js

import VueResource from 'vue-resource';

4- برای استفاده از پلاگین ها از متد use استفاده میکنیم به صورت زیر

Vue.use(VueResource);

Firebase چیست؟

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

حال ما نیاز داریم تا برای ارتباط با دیتابیس و دریافت و ارسال اطلاعات از یک سرور استفاده کنیم؛ چون فعلا api نداریم از فایربیس استفاده میکنیم.
در ایران چون فایبربیس نیاز به فیلتر شکن دارد، بهتر است از آن استفاده نکنیم ولی در این جلسه برای آموزش از فایبربیس استفاده میکنیم.

نحوه راه اندازی Firebase:

1- ابتدا باید یک در سایت https://firebase.google.com یک حساب کاربری ایجاد کنید

2- بعد از ثبت نام و ورود یک پروژه میسازیم

3- در بخش develop -> database -> با حالت start in test mode یک دیتابیس ایجاد میکنیم

4- قسمت cloud در بالا را به realtime database تغییر میدهیم چون به url ای که تولید میکنه احتیاج داریم.

5- در منوی Rules هم دسترسی read  و write را true میکنیم که اجازه دسترسی داشته باشیم – برای دسترسی به table ها

6- حال که دیتابیس ایجاد شده است ، در App.vue یک فرم ایجاد میکنیم و با استفاده از http$ به لینکی که فایبریس برامون ساخته بود برای ارتباط با دیتابیسمون وصل میشویم و با استفاده از متدهای مختلف get و post و … عملیات مورد نظر را انجام میدهیم.

به مثال زیر توجه کنید:

<template>
  <div class="container">
    <br>
    <div class="row">
      <div class="col-md-12">
        <div class="form-group">
          <label for="UserName">User Name</label>
          <input
            type="text"
            id="UserName"
            class="form-control"
            placeholder="enter user name"
            v-model="User.UserName"
          >
        </div>
        <div class="form-group">
          <label for="UserName">Email</label>
          <input
            type="text"
            id="Email"
            class="form-control"
            placeholder="enter email"
            v-model="User.Email"
          >
        </div>
        <button type="submit" class="btn btn-success" @click="submitForm">Send</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      User: {
        UserName: "",
        Email: ""
      }
    };
  },
  methods: {
    submitForm() {
      this.$http
        .post("https://vue-resource-32d1a.firebaseio.com/User.json", this.User)
        .then(
          response => {
            console.log(response);
          },
          error => {
            console.log(error);
          }
        );
    }
  }
};
</script>

توضیحات کد بالا :

1- برای ارسال فرم یک متد برای کلیک button در فرم باید ایجاد کنیم. ( متد SubmitForm)

2- مقادیر داخل data را به فیلدهامون بایند میکنیم ( در مبحث فرم ها این موارد را توضیح دادیم) – در کنسول هم میتوان مقادیر را مشاهده کرد

3- همانطور که میدانید ، vuejs javascript کلاینت ساید هست و mysql سرور ساید، ما نیاز به اپلیکیشنی داریم که سمت سرور باشد و ارتباط ما را با دیتابیس mysql برقرار کند؛ به این منظور از http استفاده میکنیم.

this.$http زمانیکه vue-resource را نصب میکنیم فعال می شود: همانطور که در بالا مشاهده میکنید از طریق این کد به دیتابیس وصل شد

داخل http متدهای زیر وجود دارد:

get

post

put

delete

در بالا برای ارسال اطلاعات به سرور از متد post استفاده نموده ایم.

سرور ما همان لینک فایربیسی هست که ایجاد کرده

4- در مرحله بعد میخواهیم بگیم که یک table داخل دیتابیس ایجاد کند؛ نام table ای که مد نظرمون هست را با پسوند json در ادامه لینک سرور میدهیم؛ چون دیتایی که فایبرس تولید میکند حالت json و no sql دارد.

5- توسط then میگوییم عد از ارتباط با جدول دیتابیسمون ، چه کاری انجام دهد؛ گفتیم که با درخواست از http یکسری response به ما بر میگرداند که میتوانیم ازشون لاگ بگیریم و ببینیم داخل دیتابیس و table چه چیزی داریم

6- با مشاهده دیتابیس در فایبربیس مشاهده میکنیم که یک جدول با مقادیر نام و یوزری که ساخته بودیم ایجاد نموده است. یعنی با کد بالا مقادیر user object را به دیتابیس ارسال وذخیره میکند.