از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
برنامه های تک صفحه ای با Vue.js و Flask: راه اندازی Vue.js مقدمه این پست ابتدایی یک سری آموزشی است روی استفاده از Vue.js و Flask برای توسعه وب پشته کامل. در این مجموعه من قصد دارم روش ساخت یک برنامه وب نظرسنجی را نشان دهم که در آن معماری برنامه از یک قسمت جلویی متشکل از یک Vue.js Single تشکیل شده است.
سرفصلهای مطلب
راه اندازی و آشنایی با Vue.js
معرفی
این پست آغازین یک سری آموزشی است روی استفاده کردن Vue.js و فلاسک برای توسعه وب پشته کامل. در این سری قصد دارم روش ساخت یک برنامه وب نظرسنجی را که در آن معماری برنامه شامل یک صفحه جلویی متشکل از یک برنامه Vue.js Single Page Application (SPA) و یک Backend REST API با استفاده از چارچوب وب Flask باشد، بسازیم.
این پست اول، راه‌اندازی و ساختار اولیه پروژه را با استفاده از دستورالعمل Vue.js v-for و مراحل چرخه عمر کامپوننت پوشش می‌دهد.
محتویات سری
- راه اندازی و آشنایی با Vue.js (تو اینجایی)
- مسیریاب Vue
- مدیریت دولتی با Vuex
- RESTful API با Flask
- ادغام AJAX با REST API
- احراز هویت JWT
- استقرار در یک سرور خصوصی مجازی
راه اندازی Frontend با vue-cli و webpack
من از دو ابزار بسیار مهم برای پروژه Vue.js استفاده خواهم کرد که رسمی هستند رابط خط فرمان Vue.js (CLI) و ابزار بسیار قدرتمند باندلر و ساخت ماژول بسته وب. هر دوی این ابزارها متکی هستند روی را Node.js زمان اجرا و مدیر بسته آن، npm. اگر قبلا نصب نکرده اید node سپس لطفا با Node.js مشورت کنید اسناد نصب برای سیستم شما، که شامل نصب npm نیز می شود.
Vue.js CL (vue-cli) را نصب کنید:
$ npm install vue-cli -g
اکنون با نصب CLI از آن برای مقداردهی اولیه یک برنامه Vue.js SPA استفاده خواهم کرد. CLI کارهای زیر را انجام می دهد:
- بسته وب را برای بسته بندی کد من نصب و پیکربندی کنید
- یک سرور توسعه با بارگذاری مجدد داغ نصب کنید (هنگام تغییر فایل، سرور به طور خودکار راه اندازی مجدد می شود)
- یک وابستگی برای vue-router اضافه کنید
- یک ساختار اولیه فایل Vue.js SPA را ایجاد کنید
من ابتدا یک پوشه سطح بالا ایجاد می کنم که حاوی تمام کدهای این آموزش به نام “survey” است. سپس دو دایرکتوری دیگر به نام‌های “frontend” (برای Vue.js SPA) و “backend” (برای توسعه REST API) ایجاد می‌کنم، سپس فهرست کاری خود را به دایرکتوری frontend تغییر می‌دهم.
$ mkdir survey
$ cd survey
$ mkdir frontend
$ mkdir backend
$ cd frontend
حالا برای جادوی واقعی. دستور مقداردهی اولیه Vue CLI وارد میشود، که سپس از من می‌خواهد به یک سری سؤال پاسخ دهم.
Enter را فشار دهید تا پیش‌فرض‌ها را برای سؤالات بپذیرید (i) نام پروژه، (ii) شرح پروژه، (iii) نویسنده پروژه، (iv) ساخت مستقل. هنگامی که از شما خواسته شد vue-router را نصب کنید، “Y” را برای بله وارد کنید. “n” را برای ورودی های باقی مانده وارد کنید و پیش فرض ها را بپذیرید.
$ vue init webpack survey-spa
? Project name survey-spa
? Project description A Vue.js project
? Author Adam McQuistan <(email protected)>
? Vue build standalone
? Install vue-router? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "survey-spa".
# Installing project dependencies ...
...
اکنون باید یک فهرست جدید به نام “survey-spa” وجود داشته باشد. دایرکتوری ها را به این دایرکتوری تغییر دهید و دستور npm را برای کامپایل پروژه و راه اندازی سرور توسعه دهنده صادر کنید.
$ cd survey-spa
$ npm run dev
الان میتونم وارد بشم http://localhost:8080 در پنجره مرورگر من و من باید قالب boilerplate Vue.js را ببینم page مشابه آنچه در زیر نشان داده شده است.
ساختار فایل ایجاد شده شبیه آنچه در زیر نشان داده شده است. من عمداً باتلاق مزخرفات را در پوشه node_modules حذف کردم.
survey-spa/
├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── logo.png
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html
├── package-lock.json
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ ├── main.js
│ └── router
│ └── index.js
└── static
این احتمالاً در چند بار اولی که به آن نگاه می‌کنید کمی سخت به نظر می‌رسد، اما نگران نباشید که ما واقعاً باید به فایل‌های زیر دایرکتوری src/، به علاوه فایل index.html توجه کنیم. البته فایل‌های دیگر مهم هستند و شاید روزی به آنچه از آنها استفاده میشود بپردازم، اما در حال حاضر فقط آنها را نادیده بگیرید.
فایل‌های زیر دایرکتوری src/ جایی هستند که من کد را برای هدایت عملکرد برنامه می‌نویسم. اجازه دهید این فایل ها را باز کنیم و ایده ای در مورد آنچه که در حال انجام است به دست آوریم روی.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>survey-spa</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
این تنها فایل HTML است که Vue SPA از آن استفاده می‌کند و به ندرت حاوی چیزی بیشتر از آنچه در بالا نشان داده شده است، میشود، با این استثنا که گاهی اوقات شما به چارچوب‌های CSS و دیگر کتابخانه‌های جاوا اسکریپت در این فایل پیوند می‌دهید. تنها div عنصری که با پیش فرض تولید می شود id از “app” چیزی است که نمونه اصلی Vue به آن متصل می شود. آن شی Vue HTML و CSS را که در کامپوننت‌ها هستند، تزریق می‌کند تا بعداً در مورد آن بحث شود. div برای تولید رابط کاربری
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
فایل main.js نقطه ورودی اولیه برنامه است و جایی است که نمونه Vue و پسوندهایی مانند vue-router و vuex. همانطور که می بینید این جایی است که نمونه Vue در آن قرار دارد. نمونه در برنامه ثبت شده است div قبلاً مورد بحث قرار گرفت، به علاوه به شی روتر و سطح بالا تغذیه می شود App جزء.
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
فایل App.vue به عنوان اجزای برنامه سطح بالا عمل می کند و اغلب شامل طرح کلی برنامه است. اجزای Vue ساختار خاصی دارند که حاوی الف است <template> بخش برای HTML خاص جزء، a <script> بخش برای تعریف Vue شیء و رفتارهای آن جزء پیاده سازی شده در جاوا اسکریپت، و a <styles> بخش برای قوانین CSS / SCSS. این بیت آخر ممکن است کمی گیج کننده باشد زیرا به طور پیش فرض قوانین سبکی که در یک جزء تعریف می کنید فقط به آن جزء مربوط نمی شود. آنها در واقع همه عناصر کل پروژه را تحت تاثیر قرار می دهند مگر اینکه a را اضافه کنید scoped نسبت دادن به <style> عنصر
روتر/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: (
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
)
})
اسکریپت index.js در دایرکتوری روتر جایی است که URL های برنامه تعریف شده و به اجزای آن نگاشت می شوند. دو خط اول import را Vue و Router اشیاء، که سپس توسط use روش روی را Vue هدف – شی.
مسیر پیش‌فرض که از الگوی پک وب vue-cli ارائه میشود، به سادگی این است root یا مسیر فهرست برای برنامه، که سرورها را بالا می برد HelloWorld جزء. برای ترسیم مسیر مسیر به یک جزء، ابتدا باید وارد شود، سپس باید یک شی مسیر را در آن تعریف کنید routes آرایه ای که به آن یک مسیر، یک نام و جزء نمایش داده می شود.
components/HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a href="https://vuejs.org" target="_blank">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank">Forum</a>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank">Community Chat</a>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank">Twitter</a>
</li>
<br>
<li>
<a href="http://vuejs-templates.github.io/webpack/" target="_blank">
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a href="http://router.vuejs.org/" target="_blank">vue-router</a>
</li>
<li>
<a href="http://vuex.vuejs.org/" target="_blank">vuex</a>
</li>
<li>
<a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a>
</li>
<li>
<a href="https://github.com/vuejs/awesome-vue" target="_blank">
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
دایرکتوری “components” جایی است که اجزای رابط کاربری در آن قرار دارند. این HelloWorld کامپوننت بالا دوباره شامل سه بخش اصلی الگو، اسکریپت و سبک است که همگی دارای نمونه ای از محتوای قالب اولیه Vue-cli هستند.
به محتویات بخش اسکریپت نگاهی بیندازید. در اینجا خواهید دید که یک شی در حال صادرات است. این جسم به داخل بدن تزریق می شود Vue نمونه ای که در فایل main.js مقداردهی اولیه شد. داخل این شی جاوا اسکریپت یک است data روشی که یک شی را برمی گرداند. این آبجکت جایی است که می‌توانید حالت (داده) در سطح مؤلفه را قرار دهید و در این مثال یک ویژگی واحد است که نامیده میشود msg.
می‌توانید به وضعیت مؤلفه خود با نام ویژگی آن در HTML در بخش الگو دسترسی داشته باشید و آن را نمایش دهید. در مثال ارائه شده شما این را به صورت می بینید {{ msg }}. براکت های دوتایی شکل پیش فرض قالب برای انجام درونیابی متن هستند و از سبیل سیستم قالب هر زمان که می‌خواهید داده‌ها را در HTML مؤلفه‌تان نمایش دهید، آنها را در دو براکت مجعد بپیچید.
آوردن در برخی از سبک
برای اینکه این برنامه کمی جذابیت بیشتری داشته باشد، از آن استفاده خواهم کرد بولما چارچوب CSS. هدف از این آموزش نخواهد بود روی روش استفاده از Bulma، اما من همچنان می‌خواهم آن را برای جلوگیری از ظاهر ضعیف HTML بی‌استیل اضافه کنم.
برگشت در terminal در همان دایرکتوری فایل package.json نصب کنید و bulma را در پروژه با دستور زیر ذخیره کنید:
$ npm install --save bulma
علاوه بر این، من باید چند ابزار توسعه دهنده را نصب کنم تا به درستی استایل ها را برای برنامه بارگذاری کنم تا اجزا بدانند چگونه با آنها کار کنند. برای انجام این کار، npm این بسته های اضافی را نصب کنید.
$ npm install --save-dev vue-style-loader
$ npm install --save-dev css-loader
$ npm install --save-dev sass-loader
$ npm install --save-dev node-sass
اکنون App.vue را باز کنید و قسمت style را با آنچه در زیر است جایگزین کنید import چارچوب bulma با استفاده از scss import نحو.
<style lang="scss">
@import '~bulma/bulma'
</style>
به آن خانه بده (page)
بسیار خوب، اکنون که درک اولیه ای از ساختار و بخش های اصلی یک برنامه Vue.js SPA داریم، می توانم شروع به نوشتن کد کنم.
با تغییر نام فایل HelloWorld.vue به Home.vue شروع کنید و سپس محتویات بخش های قالب، اسکریپت و سبک را پاک کنید. همچنین، در App.vue خط نشان‌واره تصویر Vue را حذف کنید <img src="./assets/logo.png"> و محتویات را پاک کنید <style> عنصر در حالی که شما در آنجا هستید. در نهایت، router/index.js و را باز کنید import کامپوننت Home.vue را به جای HelloWorld.vue و شی route را برای استفاده از کامپوننت Home به روز کنید.
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
Vue.use(Router)
export default new Router({
routes: (
{
path: '/',
name: 'Home',
component: Home
}
)
})
حالا فایل Home.vue را باز کنید و قسمت اسکریپت را با آنچه در زیر است پر کنید.
export default {
data() {
return {
surveys: ({
id: 1,
name: 'Dogs',
created_at: new Date(2017, 12, 1),
questions: (
{
id: 1,
text: 'What is your favorite dog?',
choices: (
{ id: 1, text: 'Beagle', selected: 0 },
{ id: 2, text: 'Labrador', selected: 0 },
{ id: 3, text: 'Rottweiler', selected: 0 })
}, {
id: 2,
text: 'What is your second favorite dog?',
choices: (
{ id: 5, text: 'Beagle', selected: 0 },
{ id: 6, text: 'Labrador', selected: 0 },
{ id: 7, text: 'Rottweiler', selected: 0 })
})
}, {
id: 2,
name: 'Cars',
created_at: new Date(2017, 12, 3),
questions: (
{
id: 5,
text: 'What is your favorite car?',
choices: (
{ id: 17, text: 'Corvette', selected: 0 },
{ id: 18, text: 'Mustang', selected: 0 },
{ id: 19, text: 'Camaro', selected: 0 })
}, {
id: 6,
text: 'What is your second favorite car?',
choices: (
{ id: 21, text: 'Corvette', selected: 0 },
{ id: 22, text: 'Mustang', selected: 0 },
{ id: 23, text: 'Camaro', selected: 0 })
})
})
}
}
}
این به ما برخی از داده های ساختگی می دهد تا با آنها کار کنیم. همانطور که احتمالاً می توانید بگویید نشان دهنده دو نظرسنجی است، یکی در مورد سگ ها و دیگری در مورد اتومبیل. داده ها با ارائه محتوایی برای نمایش، درایو پشت HTML را که می خواهیم بنویسیم، فراهم می کند.
حالا در قسمت قالب یک را اضافه می کنم div که تمام عناصر دیگر من را در بر خواهد گرفت. هر کامپوننت Vue باید یک عنصر والد واحد داشته باشد، نمی تواند عناصر خواهر و برادر سطح بالا وجود داشته باشد یا کامپوننت کامپایل نمی شود. در داخل این div من یک بخش برای Bulma اضافه خواهم کرد هدر قهرمان.
در زیر هدر قسمت دیگری برای نمایش نام هر نظرسنجی و تاریخ ایجاد آن وجود دارد. در این بلوک HTML است که ما شروع به دیدن برخی از جذابیت های ارائه شده توسط Vue.js خواهیم کرد.
<template>
<div>
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
<h2 class="title">Check out recent surveys</h2>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="card" v-for="survey in surveys" v-bind:key="survey.id">
<div class="card-content">
<p class="title">{{ survey.name}}</p>
<p class='subtitle'>{{ survey.created_at.toDateString() }}</p>
</div>
</div>
</div>
</section>
</div>
</template>
فایل‌های ذخیره‌نشده را در پروژه ذخیره کنید و مرورگر خود را به‌روزرسانی کنید، که اکنون باید مطابق شکل زیر ظاهر شود:
همانطور که در تصویر مشاهده می کنید، دو کارت Bulma نظرسنجی نمایش داده می شود. این دو نظرسنجی به آرایه ای از اشیاء نظرسنجی که در تابع داده من از من بودند، نگاشت می شوند Home جزء، که من با استفاده از دستور v-for به HTML خود وارد کردم.
یک بار دیگر به زیربخش زیر کد قالب اصلی که نشان دهنده یک نظرسنجی است نگاهی بیندازید. کل این عنصر و فرزندان آن یک بار برای هر نظرسنجی در سایت تکرار می شوند surveys آرایه. اساسا، داده ها باعث تولید HTML می شوند.
قسمت v-bind:key در حال افزودن یک ویژگی به نام است key برابر با شناسه نظرسنجی برای هر کدام است div با کلاس “کارت”. Vue از این کلیدها برای پیگیری صریح هر کدام استفاده می کند node در DOM ایجاد شده است که به حسابداری و عملکرد کمک می کند. توصیه می شود همیشه یک کلید منحصر به فرد برای بیرونی ترین عنصری که در ارتباط با دستور v-for استفاده می شود، تنظیم کنید.
<div class="card" v-for="survey in surveys" v-bind:key="survey.id">
<div class="card-content">
<p class="title">{{ survey.name}}</p>
<p class='subtitle'>{{survey.created_at.toDateString()}}</p>
</div>
</div>
دستور v-for از یک دستور استفاده می کند item in items جایی که items قابل تکرار است مانند یک آرایه یا خصوصیات یک شی و item یک نام مستعار برای هر عنصر در تکرارپذیر است. با این حال، تغییراتی در این نحو وجود دارد که به انعطاف پذیری و کنترل بیشتری اجازه می دهد.
مثلاً بگویید من یک آرایه از حروف داشتم var letters = ('a', 'd', 'a', 'm') که می‌خواستم از آن برای ایجاد یک لیست نامرتب HTML قدیمی استفاده کنم که هر حرف و شاخص مربوط به آن را نمایش می‌دهد. خوب این می تواند با این تغییر v-for انجام شود:
<ul>
<li v-for="(letter, i) in letters" v-bind:key="i">
Index position {{ i }} has letter {{ letter }}
</li>
</ul>
حاصل خروجی زیر:
• Index position 0 has letter a
• Index position 1 has letter d
• Index position 2 has letter a
• Index position 3 has letter m
برای تکرار بر روی خصوصیات یک شیء، نحو کاملاً مشابه است. با توجه به یک شی مانند var person = { name: 'adam', occupation: 'software developer', residence: 'lincoln, nebraska' }، تکرار با دستور v-for به شکل زیر است:
<ul>
<li v-for="(value, key) in person" v-bind:key=”key”>
key -> {{ key }}, value -> {{ value }}
</li>
</ul>
• key -> name, value -> adam
• key -> occupation, value -> software developer
• key -> residence, value -> lincoln, nebraska
تمسخر درخواست AJAX برای نظرسنجی
من اولین مؤلفه رابط کاربری کاربردی خود را دارم که مجموعه ای از نظرسنجی ها را نمایش می دهد، اما در پایان برنامه واقعی باید داده های نظرسنجی را از REST API ما واکشی کند. برای اینکه این موضوع کمی واقعی‌تر شود، می‌خواهم توابع درخواست AJAX را برای تغذیه Home بررسی مولفه ها
در پوشه src یک پوشه جدید به نام “api” ایجاد کنید و سپس یک اسکریپت به نام index.js در آن اضافه کنید. اینجاست که من توابع AJAX خود را مسخره خواهم کرد. در این فایل جدید را برش و پیست کنید surveys آرایه از مولفه Home.vue به عنوان یک ثابت جهانی.
// api/index.js
const surveys = ({
id: 1,
name: 'Dogs',
created_at: new Date(2018, 1, 1),
questions: ({
id: 1,
text: 'What is your favorite dog?',
choices: (
{ id: 1, text: 'Beagle', selected: 0 },
{ id: 2, text: 'Labrador', selected: 0 },
{ id: 3, text: 'Rottweiler', selected: 0 })
}, {
id: 2,
text: 'What is your second favorite dog?',
choices: (
{ id: 5, text: 'Beagle', selected: 0 },
{ id: 6, text: 'Labrador', selected: 0 },
{ id: 7, text: 'Rottweiler', selected: 0 })
})
}, {
id: 2,
name: 'Cars',
created_at: new Date(2018, 1, 3),
questions: ({
id: 5,
text: 'What is your favorite car?',
choices: (
{ id: 17, text: 'Corvette', selected: 0 },
{ id: 18, text: 'Mustang', selected: 0 },
{ id: 19, text: 'Camaro', selected: 0 })
}, {
id: 6,
text: 'What is your second favorite car?',
choices: (
{ id: 21, text: 'Corvette', selected: 0 },
{ id: 22, text: 'Mustang', selected: 0 },
{ id: 23, text: 'Camaro', selected: 0 })
})
})
در زیر این آرایه از نظرسنجی ها تابعی به نام ایجاد کنید fetchSurveys که پس از 300 میلی ثانیه انتظار (برای شبیه سازی تاخیر API) یک وعده را با آرایه نظرسنجی ها برمی گرداند. تابع باید صادر شود تا بتوان از طریق آن به آن دسترسی داشت Home جزء.
export function fetchSurveys() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(surveys)
}, 300)
})
}
بازگشت به تابع داده از Home جزء اولیه surveys ویژگی به یک آرایه خالی و import را fetchSurveys عملکرد در بخش اسکریپت
<script>
import { fetchSurvey } from '@/api'
export default {
data() {
return {
surveys: ()
}
}
}
</script>
اجزای Vue دارای یک سری مراحل چرخه حیات تعریف شده هستند که برای توسعه دهنده هنگام انجام کارهای مختلف مانند کشیدن داده با استفاده از درخواست AJAX معنادار است. به منظور تغذیه داده های نظرسنجی به Home جزء من نیاز به hook وارد یکی از مراحل چرخه حیات Vue، به ویژه در beforeMount صحنه. چندین مرحله دیگر وجود دارد که برای موارد بسیار بیشتر از درخواست های AJAX مفید است، اما من به رسمی موکول می کنم اسناد Vue.js برای توضیح جزئیات
این beforeMount مرحله چرخه حیات برای فراخوانی API به خوبی کار می کند زیرا درست قبل از شروع نصب کامپوننت ما و درست قبل از آن اجرا می شود. render نامیده میشود روی جزء ما این به آن زمان می دهد تا داده ها را قبل از نمایش به کاربر واکشی کند.
برای استفاده از beforeMount مرحله از Home کامپوننت تنها کاری که باید انجام دهم این است که آن را به عنوان یک روش جدید به شی Vue کامپوننت اضافه کنم. در داخل این تابع من با من تماس خواهم گرفت fetchSurveys عملکرد و بررسی های برگشتی را به نظرسنجی ها اختصاص دهید data ویژگی.
<script>
import { fetchSurveys } from '@/api'
export default {
data() {
return {
surveys: ()
}
},
beforeMount() {
fetchSurveys().then(response => {
this.surveys = response
})
}
}
</script>
ذخیره همه فایل‌های پروژه و رفرش کردن مرورگر همین صفحه اصلی را به من می‌دهد page قبلاً دیدیم، اما اکنون با یک تماس مسخره شده AJAX.
منابع
آیا می‌خواهید درباره Vue.js و ساخت برنامه‌های وب جلویی بیشتر بدانید؟ سعی کنید برخی از منابع زیر را برای بررسی عمیق‌تر در این چارچوب ظاهری بررسی کنید:
نتیجه
این پست به اصول اولیه راه اندازی یک برنامه Vue.js SPA با vue-cli با استفاده از قالب وب پک پرداخته است. علاوه بر راه‌اندازی پروژه، روش استفاده از داده‌ها را در قالب یک تکرار برای تولید پویا محتوای UI با استفاده از دستورالعمل قدرتمند v-for Vue.js توضیح دادم. برای آخرین موضوع اصلی که زدم روی مراحل چرخه عمر اجزا و چگونگی beforeMount مرحله می تواند در بارگذاری داده ها در یک مؤلفه با درخواست ساختگی AJAX مفید باشد.
در پست بعدی روش استفاده از پسوند vue-router برای جریان از یکی را پوشش خواهم داد page به دیگری که به برنامه ما یک مفهوم گردش کار می دهد. کد این آموزش را می توانید در آدرس زیر بیابید حساب GitHub من که شامل یک شاخه برای هر پست می باشد. ممنون که خواندید و لطفاً در زیر نظر یا نقد خود را بنویسید.
منتشر شده در 1403-01-27 08:03:04
