جزئیات تکمیلی Resourceها

Additional Resource Details

در قسمت قبل مشاهده کردیم که می توانیم از resource های پیش فرض استفاده کنیم اما تغییر آنچنانی در استفاده یا عدم استفاده از آن ها وجود نداشت. در واقع قدرت resource ها زمانی مشخص می شود که از resource های خودمان استفاده کنیم، یعنی resource های خودمان را تعریف کنیم. من برای این کار وارد created در فایل App.vue می شود و می گوییم:

created() {
  const customAction = {
    saveAlt: {method: "POST", url: "alternative.json"}
  }
  this.resource = this.$resource("data.json");
}

یعنی تابعی داریم که درون آن باید دقیقا به شکل بالا عمل کنیم. نامی را برای action خود (رفتار resource) انتخاب می کنید که من customAction را انتخاب کرده ام. سپس یک شیء را به آن می دهید. من به این شیء method درخواست و همچنین url را داده ام اما شما می توانید هر طور خواستید با آن کار کنید. توجه کنید که من به جای data.json مقدار alternative.json را داده ام که یک مقدار سلیقه ای است. در واقع اگر نام انتهایی url در firebase را تغییر بدهید، یک node جدید به این نام در آنجا ایجاد می شود (در ادامه آن را خواهید دید). سپس برای اینکه بتوانیم از resource تعریف شده استفاده کنیم باید به متد resource آرگومان دیگری را بدهیم:

created() {
  const customAction = {
    saveAlt: {method: "POST", url: "alternative.json"}
  }
  this.resource = this.$resource("data.json", {}, customAction);
}

آرگومان دوم را خالی گذاشته ام چرا که فعلا با آن کار نداریم. این آرگومان به شما اجازه می دهد پارامتر هایی را به صورت یک شیء پاس داده و به URL پیوست کنید. آرگومان سوم نیز همان action خودمان است که بالاتر تعریف کرده ایم. حالا به متد submit می رویم و کد جلسه ی قبل (this.resource.save) را کامنت می کنم و کد جدید خود را در آن می نویسم:

submit() {
  // this.$http.post("data.json", this.user).then(
  //   response => {
  //     console.log(response);
  //   },
  //   error => {
  //     console.log(error);
  //   }
  // );
  // this.resource.save({}, this.user);
  this.resource.saveAlt(this.user);
},

یعنی به راحتی متد saveAlt را صدا زده و اطلاعات مورد نیاز را به آن پاس داده ایم. در این مرحله کدها را ذخیره کرده و به مرورگر می رویم تا فرم را باری دیگر پُر کنیم. با ثبت اطلاعات و کلیک روی دکمه ی submit و رفتن به داشبورد خودمان در firebase با چنین ساختاری روبرو می شویم:

همانطور که می بینید اولین node ما به اسم data با اطلاعات قبلی وجود دارد و node جدید با نام alternative نیز ساخته شده است که حاوی اطلاعات جدید ما است. در نهایت باید بدانید که resource ها راه جایگزینی برای دستورات عادی post و Get (روشی که در جلسات اول این فصل کار کردیم) هستند و هیچ کدام بر دیگری برتری ندارد. در نهایت این سلیقه ی شما است که کدام را انتخاب کنید.

مسئله ی بعدی منعطف تر کردن URL است. در حال حاضر action های پیش فرض همیشه در resource خود data.json را به عنوان URL دارند (جدا از action ای که خودمان تعریف کرده ایم):

    this.resource = this.$resource("data.json", {}, customAction);

ما می توانیم این کد را به شکل زیر تغییر بدهیم:

created() {
  const customAction = {
    saveAlt: { method: "POST", url: "alternative.json" }
  };
  this.resource = this.$resource("{node}.json", {}, customAction);
}

یعنی از یک شیء با هر نامی (من نام node را انتخاب کرده ام) که خواستیم استفاده کنیم. حالا می توانیم به صورت پویا قسمت node را در URL وارد کنیم. البته saveAlt که قبلا تعریف کرده ایم، دستورات save را در متد submit انجام می دهد و URL خودش را دارد بنابراین این تنظیمات را نادیده می گیرد اما می توانیم به fetchData برویم و برای دستور GET از آن استفاده کنیم. من برای پیشرفته تر شدن کار یک input جدید را بالای دکمه ی Get Data تعریف می کنم:

// بقیه ی کدها //
<button class="btn btn-primary" @click="submit">Submit</button>
<hr />
<input class="form-control" type="text" v-model="node" />
<br />
<br />
<button class="btn btn-primary" @click="fetchData">Get Data</button>
// بقیه ی کدها //

من input جدید خودم را به یک خصوصیت به نام node متصل کرده ام که باید آن را تعریف کنیم بنابراین:

data() {
  return {
    user: {
      username: "",
      email: ""
    },
    users: [],
    resource: {},
    node: "data"
  };
},

من node را به صورت پیش فرض روی data گذاشته ام. ما می خواهیم کاربر بتواند هر مقداری را درون input وارد کند و اگر آن input وجود داشت، اطلاعات درون آن گرفته شده و نمایش داده شود. برای این کار یک resource دیگر تعریف می کنیم تا در URL خود از قالب رسمی resource ها برای URL ها استفاده کند. شما می توانید آموزش کامل این قالب خاص را در documentation رسمی vue-resource پیدا کنید. برای تعریف resource بعدی می توانیم به محل تعریف resource قبلی رفته و بگوییم:

created() {
  const customAction = {
    saveAlt: { method: "POST", url: "alternative.json" },
    getData: {method: "GET"}
  };
  this.resource = this.$resource("{node}.json", {}, customAction);
}

همانطور که می بینید برای getData هیچ url ای تعریف نکرده ام تا از url پیش فرض استفاده کند. حالا به متد fetchData رفته و می گوییم:

fetchData() {
  // this.$http
  //   .get("data.json")
  //   .then(response => {
  //     return response.json();
  //   })
  //   .then(data => {
  //     const resultArray = [];
  //     for (let key in data) {
  //       resultArray.push(data[key]);
  //     }
  //     this.users = resultArray;
  //   });
  this.resource
    .getData({ node: this.node })
    .then(response => {
      return response.json();
    })
    .then(data => {
      const resultArray = [];
      for (let key in data) {
        resultArray.push(data[key]);
      }
      this.users = resultArray;
    });
}

من ابتدا کدهای قبلی را کامنت کرده ام. سپس از getData استفاده کرده و به عنوان اولین پارامتر به آن node را داده ام. اگر یادتان باشد این node همان {node} ای است که در this.$resource استفاده کرده بودیم. در نهایت با یک then داده ها را مثل همیشه گرفته و نمایش داده ام. با رفتن به مرورگر و تایپ کردن data یا node می توانیم داده های این node ها را در مرورگر دریافت کرده و مشاهده کنیم.