از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
برنامه های تک صفحه ای با Vue.js و Flask: پیمایش روتر Vue به پست دوم خوش آمدید روی استفاده از Vue.js و Flask برای توسعه وب تمام پشته. موضوع اصلی در این مقاله خواهد بود روی Vue Router، اما من دستورالعمل v-model و همچنین روش‌های Vue و ویژگی‌های محاسبه‌شده را نیز پوشش خواهم داد. همانطور که گفته شد، چیزی کافئین دار بگیرید و مصرف کنید …
سرفصلهای مطلب
پیمایش روتر Vue
به پست دوم خوش آمدید روی استفاده از Vue.js و Flask برای توسعه وب تمام پشته. موضوع اصلی در این مقاله خواهد بود روی Vue Router، اما من دستورالعمل v-model و همچنین روش‌های Vue و ویژگی‌های محاسبه‌شده را نیز پوشش خواهم داد. همانطور که گفته شد، یک چیز کافئین دار بگیرید و مقداری Vue خوبی مصرف کنید. کد این پست است روی GitHub من.
محتویات سری
- راه اندازی و آشنایی با VueJS
- مسیریاب Vue (تو اینجایی)
- مدیریت دولتی با Vuex
- RESTful API با Flask
- ادغام AJAX با REST API
- احراز هویت JWT
- استقرار در یک سرور خصوصی مجازی
آشنایی با روتر Vue
مانند بسیاری از جنبه های دیگر چارچوب Vue.js، با استفاده از روتر Vue پیمایش در صفحات مختلف و اجزای بعدی بسیار آسان است.
کنار 1 – موارد Vue و vue-router به تنهایی
برخی از موضوعات ارائه شده در این پست به بهترین وجه با نمونه‌های اسباب‌بازی کوچک‌تر توضیح داده می‌شوند، بنابراین مواقعی پیش می‌آید که من برای انجام این کار دست به کار شوم. در این کنار، آنچه را که برای رها کردن در یک نمونه Vue و روتر مستقل لازم است نشان خواهم داد. در حالی که Vue برای ساخت برنامه های SPA کامل فوق العاده است، توانایی حذف آن در یک HTML معمولی نیز ارزش واقعی دارد. page.
<!-- index.html -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<div>
<h3>Cartoon characters</h3>
<div v-for="(character, i) in characters" v-bind:key="i">
<h4>{{ character.name }}</h4>
<p><img v-bind:src="character.imgSrc" v-bind:alt="character.name"/></p>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
characters: ({
name: 'Scooby',
imgSrc: 'https://www.wbkidsgo.com/Portals/4/Images/Content/Characters/Scooby/characterArt-scooby-SD.png'
}, {
name: 'Shaggy',
imgSrc: 'https://upload.wikimedia.org/wikipedia/en/thumb/8/87/ShaggyRogers.png/150px-ShaggyRogers.png'
} )
}
})
</script>
این کاراکترهای کارتونی Scooby و Shaggy را نشان می دهد. مثال به معرفی v-bind: دستورالعملی برای اتصال پویا داده ها از characters آرایه به src و alt ویژگی های img عنصری که داده ها را قادر می سازد محتوا را هدایت کنند. این شبیه به روش درونیابی متن با استفاده از آن است {{}}، بجز v-bind داده ها را به صفات درون یابی می کند. شما می توانید یک نمونه کار از این را پیدا کنید اینجا.
به جای نمایش هر دو کاراکتر، بیایید رویکرد خود را تغییر دهیم، و به ما اجازه می‌دهد برای نمایش یک مؤلفه خاص «Scooby» یا «Shaggy» برای هر شخصیت، روی پیوندی کلیک کنیم. برای انجام این کار، کتابخانه vue-router را می کشم و تغییرات زیر را ایجاد می کنم:
<!-- index.html -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<p>
<router-link to="/scooby">Scooby</router-link>
<router-link to="/shaggy">Shaggy</router-link>
</p>
<router-view></router-view>
</div>
<script></script>
همانطور که احتمالاً می‌توانید بگویید، این پیاده‌سازی توسط مؤلفه‌های کدگذاری شده انجام می‌شود، که از دیدگاه قابلیت استفاده مجدد، تغییر سودمندی نیست. با این حال، استفاده آسان از vue-router را نشان می دهد. علاوه بر منبع کتابخانه vue-router، HTML حاوی دو عنصر جدید است، اجزای در واقع مخصوص vue-router.
اولین جزء vue-router است <router-link> که یک جزء است که یک مسیر مسیر را از طریق دریافت می کند to ویژگی، که در واقع یک “پارامتر” در یک جزء Vue نامیده می شود. را <router-link> کامپوننت یک عنصر پیوند ایجاد می کند که به رویدادهای کلیک پاسخ می دهد و به Vue می گوید که مؤلفه مرتبط با آن را نمایش دهد to پارامتر، یا “/scooby” یا “/shaggy”.
در زیر <router-link> یک جزء جدید دیگر است، <router-view>، جایی است که vue-router به Vue می گوید که اجزای UI، Scooby و Shaggy را تزریق کند. اجزای قالب سفارشی Scooby و Shaggy در قسمت تعریف شده اند script عنصر در پایین این مثال index.html page.
سپس یک شیء vue-router با a نمونه سازی می شود routes شی که یک آرایه مسیرها را مشابه آنچه در برنامه Survey مقاله اول دیدیم، تعریف می کند. در اینجا مسیرهای مسیر به اجزای Scooby و Shaggy ترسیم می شوند. آخرین کاری که باید انجام دهید این است که یک نمونه Vue را نمونه برداری کنید، یک شی روتر را به عنوان یک ویژگی به شی گزینه آن بدهید و نمونه را به برنامه متصل کنید. div.
می توانید کلیک کنید روی یا پیوند روتر Scooby یا Shaggy برای نمایش آنها، همانطور که در زیر نشان داده شده است. کد این مثال را می توان یافت اینجا.
استفاده از vue-router برای نمایش یک نظرسنجی فردی
به برنامه Survey برگردیم، اجازه دهید بحث خود را با نگاهی به فایل routes/index.js شروع کنیم.
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
}
)
})
خانه page نظرسنجی های برنامه را زمانی که root URL در درخواست شده است localhost:8080 زیرا به نگاشت شده است Home جزء از طریق مسیرهای روتر.
من هم نیاز دارم hook به Vue از طریق Vue.use(Router) عملکرد برای یک برنامه SPA مدولار مانند این. علاوه بر این، من باید روتر را در شیء گزینه‌ها اضافه کنم که به نمونه Vue در main.js شبیه به نمونه اسباب بازی Scooby/Shaggy.
با ادامه برنامه Survey یک مسیر جدید به آن اضافه می کنم routes شی که هر نظرسنجی و سوالات آن را به یک قابل استفاده مجدد ترسیم می کند Survey.vue جزء مبتنی بر فایل در فایل routes/index.js import آ Survey جزء و سپس یک مسیر برای ترسیم هر نظرسنجی با شناسه آن به آن اضافه کنید Survey جزء.
// ... omitted for brevity
import Survey from '@/components/Survey'
// ... omitted for brevity
export default new Router({
routes: (
{
// ... omitted for brevity
}, {
path: '/surveys/:id',
name: 'Survey',
component: Survey
}
)
})
توجه داشته باشید که :id بخشی از مسیر جدید /surveys/:id. این به عنوان یک بخش پویا شناخته می شود که می توانید آن را به عنوان یک متغیر در مسیر مسیر در نظر بگیرید. در این مورد من می گویم که :id استفاده خواهد شد برای شناسایی یک نظرسنجی خاص برای نمایش در Survey جزء بعدی ساخته می شود
در src/components/ دایرکتوری یک فایل به نام ایجاد کنید Survey.vue، سپس آن را باز کنید و بخش های قالب استاندارد، اسکریپت و استایل را به همراه کد زیر اضافه کنید:
<template>
<div>
<h3>I'm a Survey Component</h3>
</div>
</template>
<script>
export default {
data() {
return {
survey: {}
}
},
beforeMount() {
console.log('Survey.beforeMount -> :id === ', this.$route.params.id)
}
}
</script>
<style>
</style>
تمام فایل ها را ذخیره می کنم و سرور توسعه دهنده را با آن شروع می کنم npm run dev، سپس آدرس زیر را در مرورگر وارد کنید: localhost:8080/#/surveys/23. در console از ابزارهای توسعه دهنده مرورگر من تصویر زیر را می بینم.
پس چه اتفاقی افتاد؟
در template بخش من مقداری کد مزخرف اضافه کردم تا مشخص شود کامپوننت Survey توسط روتر ارائه می شود. در script بخش I یک شی نظرسنجی که در نهایت داده های نظرسنجی را نگه می دارد، مقداردهی اولیه کردم. در beforeMount چرخه زندگی hook اتفاق خیلی جالبی در حال رخ دادن است در این تابع به مسیر پنجره فعلی و پس از آن دسترسی دارم :id پارامتر تعریف شده در route مدول.
این قسمت آخر امکان پذیر است زیرا Survey شیء Vue جزء به نمونه vue-router اشاره دارد که به مسیر دسترسی دارد و به من امکان می دهد با آن به آن دسترسی داشته باشم. this.$route.params.id. یک مسیر می‌تواند چندین بخش پویا داشته باشد و همه در اجزای مربوطه از طریق آن قابل دسترسی هستند params عضو this.$route هدف – شی.
بعد من یک تابع ساختگی AJAX را در آن تعریف خواهم کرد api/index.js، که من از آن تماس می گیرم Survey اجزاء beforeMount hook برای واکشی نظرسنجی توسط :id. که در api/index.js تابع زیر را اضافه کنید:
const surveys = ({
id: 1,
name: 'Dogs',
// ... omitted for brevity
}, {
id: 2,
name: 'Cars',
// ... omitted for brevity
})
// ... omitted for brevity
export function fetchSurvey (surveyId) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const survey = surveys.find(survey => survey.id === surveyId)
if (survey) {
resolve(survey)
} else {
reject(Error('Survey does not exist'))
}
}, 300)
})
}
در حال حاضر بازگشت به Survey جزء من نیاز به import fetchSurvey و از آن در beforeMount برای بازیابی نظرسنجی درخواستی دوباره برای اهداف بصری، نام نظرسنجی را در قالب یک خروجی می‌دهم bulma هدر قهرمان
<template>
<div>
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
<h2 class="title">{{ survey.name }}</h2>
</div>
</div>
</section>
</div>
</template>
<script>
import { fetchSurvey } from '@/api'
export default {
data() {
return {
survey: {}
}
},
beforeMount() {
fetchSurvey(parseInt(this.$route.params.id))
.then((response) => {
this.survey = response
})
}
}
</script>
<style>
</style>
به روز رسانی URL مرورگر به localhost:8080/surveys/2، آنچه را که در زیر نشان داده شده است می بینم:
خیلی باحاله درسته؟
در مرحله بعد می خواهم کاری کمی مفیدتر با خودم انجام دهم Survey جزء و شامل سؤالات و انتخاب ها باشد.
<template>
<div>
<!-- omitted survey name header for brevity -->
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-10 is-offset-1">
<div v-for="question in survey.questions" v-bind:key="question.id">
<div class="column is-offset-3 is-6">
<h4 class='title has-text-centered'>{{ question.text }}</h4>
</div>
<div class="column is-offset-4 is-4">
<div class="control">
<div v-for="choice in question.choices" v-bind:key="choice.id">
<label class="radio">
<input type="radio" v-model="question.choice" :value="choice.id">
{{ choice.text }}
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
مجدداً مرورگر را با URL ذخیره و به روز کنید localhost:8080/#/surveys/2 اکنون فهرستی از سوالات و گزینه های موجود برای نظرسنجی خودروها را ارائه می دهد.
اجازه دهید سعی کنم برخی از ویژگی های جدید Vue را که در حال استفاده هستند باز کنم. ما قبلاً با استفاده از آن آشنا هستیم v-for دستورالعملی برای ایجاد سؤالات و انتخاب های نظرسنجی، بنابراین امیدواریم که بتوانید روش نمایش آنها را پیگیری کنید. با این حال، اگر تمرکز کنید روی چگونه دکمه‌های رادیویی برای انتخاب یک سؤال ایجاد می‌شوند، متوجه خواهید شد که من دو کار جدید یا کمی متفاوت انجام می‌دهم.
<div v-for="choice in question.choices" v-bind:key="choice.id">
<label class="radio">
<input type="radio" v-model="question.choice" :value="choice.id">
{{ choice.text }}
</label>
</div>
برای ورودی رادیویی من از v-model بخشنامه و آن را با ارزش عرضه کرد question.choice. کاری که این کار انجام می دهد این است که یک عضو جدید ایجاد می کند روی را question شیء انتخاب نامیده می شود و آن را با ورودی رادیویی ثبت می کند که به داده ها اجازه می دهد از ورودی رادیویی واقعی به داخل جریان پیدا کنند question.choice ویژگی شی من همچنین از یک نحو مختصر استفاده می کنم :value بجای v-bind:value برای پیوند دادن مقدار این ورودی رادیویی به مقدار گزینه‌های سؤالی که در حال تکرار هستند v-for.
کنار 2 – استفاده از دستور v-model
متوجه می شوم که v-model مفهوم احتمالاً کمی مبهم است، بنابراین اجازه دهید من را کنار بگذارم و مثال ساده دیگری را برای نشان دادن موضوع بیان کنم. مثال بی اهمیت زیر را در نظر بگیرید. مجدداً می توانید نمونه کار این کد را مشاهده کنید اینجا.
<!-- index.html -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<div>
<label for="name">What is your name</label>
<input id="name" type="text" v-model="textInput" />
<span>Hello {{ textInput }}</span>
</div>
<h4>Which do you like better?</h4>
<div v-for="choice in radioChoices" :key="choice">
<label>{{ choice }}</label>
<input name="fruit" type="radio" v-model="favoriteFruit" :value="choice"/>
</div>
<h4>So you like {{ favoriteFruit }}</h4>
</div>
<script>
new Vue({
el: '#app',
data: {
textInput: '',
radioChoices: ('apples', 'oranges'),
favoriteFruit: ''
}
})
</script>
اولین ورودی یک ورودی متنی است که نام کاربر را می‌پرسد. این ورودی متن دارای یک v-model با ویژگی داده در آن ثبت شده است textInput به آن متصل می شود، که ورودی متن را با آن همگام نگه می دارد textInput ویژگی داده از Vue نمونه، مثال. یک ثانیه وقت بگذارید و نام خود را در ورودی متن تایپ کنید و به روز رسانی آن را در ورودی مشاهده کنید <span>Hello {{ textInput }}</span> خروجی HTML
شگفت انگیز درست است؟
ورودی دوم یک ورودی رادیویی به نام “میوه” است که میوه های “سیب” و “پرتقال” را نمایش می دهد و از کاربر می خواهد مورد علاقه خود را انتخاب کند. ورودی رادیو به ثبت می شود favoriteFruit ویژگی داده از Vue نمونه از طریق v-model، که مقدار مربوط به هر ورودی رادیویی را از طریق :value="choice" ویژگی binding syntax برای نگه داشتن favoriteFruit همگام با ورودی رادیویی انتخاب شده باز هم می توانید ارزش آن را تماشا کنید favoriteFruit به روز رسانی در <h4>So you like {{ favoriteFruit }}</h4> خروجی عنصر
در زیر چند نمونه خروجی را نشان می دهم. من شما را تشویق می کنم تا با این مثال بازی کنید v-model واضح است.
تکمیل تجربه نظرسنجی
خوب، به برنامه نظرسنجی برگردید. به موردی فکر کنید که در نظرسنجی سؤالات بیشتری در زیر ارتفاع پیش فرض صفحه نمایش داده می شود. به طور کلی، ما می خواهیم مردم را از رفتن به پایین برای دیدن مهم ترین محتوای شما باز داریم. یک انتخاب بهتر این است که در میان سوالاتی که یک سوال و پاسخ های آن را در یک زمان نمایش می دهند صفحه بندی کنید.
به روز شده است Survey جزء این کار را در زیر انجام می دهد.
<template>
<div>
<!-- omitted for brevity -->
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-10 is-offset-1">
<div
v-for="(question, idx) in survey.questions" <!-- modified v-for -->
v-bind:key="question.id"
v-show="currentQuestion === idx"> <!-- new v-show directive -->
<div class="column is-offset-3 is-6">
<!-- <h4 class='title'>{{ idx }}) {{ question.text }}</h4> -->
<h4 class='title has-text-centered'>{{ question.text }}</h4>
</div>
<div class="column is-offset-4 is-4">
<div class="control">
<div v-for="choice in question.choices" v-bind:key="choice.id">
<label class="radio">
<input type="radio" v-model="question.choice" :value="choice.id">
{{ choice.text }}
</label>
</div>
</div>
</div>
</div>
<!-- new pagination buttons -->
<div class="column is-offset-one-quarter is-half">
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
<a class="pagination-previous" @click.stop="goToPreviousQuestion"><i class="fa fa-chevron-left" aria-hidden="true"></i> Back</a>
<a class="pagination-next" @click.stop="goToNextQuestion">Next <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
</nav>
</div>
<!-- new submit button -->
<div class="column has-text-centered">
<a v-if="surveyComplete" class='button is-focused is-primary is-large'
@click.stop="handleSubmit">
Submit
</a>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
import { fetchSurvey, saveSurveyResponse } from '@/api' // new AJAX func
export default {
data() {
return {
survey: {},
currentQuestion: 0 // new data prop
}
},
beforeMount() {
// omitted for brevity
},
methods: { // new Vue obj member
goToNextQuestion() {
if (this.currentQuestion === this.survey.questions.length - 1) {
this.currentQuestion = 0
} else {
this.currentQuestion++
}
},
goToPreviousQuestion() {
if (this.currentQuestion === 0) {
this.currentQuestion = this.survey.questions.lenth - 1
} else {
this.currentQuestion--
}
},
handleSubmit() {
saveSurveyResponse(this.survey)
.then(() => this.$router.push('/'))
}
},
computed: { // new Vue obj member
surveyComplete() {
if (this.survey.questions) {
const numQuestions = this.survey.questions.length
const numCompleted = this.survey.questions.filter(q => q.choice).length
return numQuestions === numCompleted
}
return false
}
}
}
</script>
این تغییرات با هم کار می کنند تا تجربه نظرسنجی را کامل کنند. همانطور که گره های سوال از تولید می شوند v-for="(question, idx) in survey.questions" من از v-show="currentQuestion === idx" دستورالعمل برای آزمایش اینکه آیا مقدار ویژگی داده، currentQuestion، با مقدار مطابقت دارد idx. این سوال را ایجاد می کند div قابل مشاهده است فقط اگر currentQuestion برابر با آن سوال است idx ارزش. از آنجایی که ارزش currectQuestion مقدار اولیه صفر است، سوال صفر به طور پیش فرض نمایش داده می شود.
در زیر سؤالات و پاسخ‌ها، دکمه‌های صفحه‌بندی به کاربر این امکان را می‌دهد که سؤالات را صفحه‌بندی کند. عنصر دکمه “بعدی” دارد @click="goToNextQuestion" در داخل آن، که یک کنترل کننده رویداد کلیک Vue است که با فراخوانی پاسخ می دهد goToNextQuestion عملکرد در داخل جدید methods ویژگی شیء Vue. یک شیء جزء Vue methods بخش جایی است که توابع را می توان برای انجام تعدادی کار تعریف کرد، اغلب برای تغییر حالت جزء. اینجا goToNextQuestion افزایش currentQuestion یکی، سوالی که نمایش داده می شود را پیش می برد یا آن را به سوال اول بازنشانی می کند. دکمه برگشت و مرتبط با آن goToPreviousQuestion روش دقیقا برعکس عمل می کند.
آخرین تغییر، قابلیت ارسال پاسخ نظرسنجی است. دکمه استفاده می کند v-show دوباره برای تعیین اینکه آیا دکمه باید بر اساس نمایش داده شود یا خیر روی مقدار یک ویژگی محاسبه شده به نام surveyCompleted. ویژگی های محاسبه شده یکی دیگر از ویژگی های عالی Vue است. آنها ویژگی هایی هستند که معمولاً روش نمایش اجزای UI را کنترل می کنند که وقتی منطق کمی پیچیده تر از بررسی یک مقدار واحد از یک ویژگی داده باشد، مفید هستند. به این ترتیب کد قالب تمیز و قابل تمرکز است روی ارائه در حالی که منطق در کد جاوا اسکریپت باقی می ماند.
شنونده رویداد کلیکی، @click="handleSubmit"، ثبت شده است روی دکمه لنگر ارسال، که handleSubmit روش. این روش تابع ساختگی AJAX را فراخوانی می کند saveSurveyResponse، که یک وعده را برمی گرداند و کنترل را به «ثم» می سپارد. “سپس زنجیر” دارای یک تماس است، .then(() -> this.$router.push('/'))، که شی روتر مؤلفه را فراخوانی می کند و برنامه را به صورت برنامه ریزی شده به مسیریاب برمی گرداند root مسیر نمایش Home جزء.
در api/index.js، اضافه کردن saveSurveyResponse تابع در پایین فایل این تابع یک شی پاسخ نظرسنجی را دریافت می کند و به سادگی “ذخیره پاسخ نظرسنجی…” را ثبت می کند. روی را console تا زمانی که در آینده قسمت جلویی را به REST API متصل کنم.
export function saveSurveyResponse (surveyResponse) {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("saving survey response...")
})
resolve()
}, 300)
})
}
ذخیره همه فایل ها و بازخوانی مرورگر با URL localhost:8080:/#/surveys/2 من آنچه در زیر است را می بینم. توصیه می کنم در برنامه کلیک کنید و مطمئن شوید که می توانید به طور منطقی جریان کنترل را از طریق آن ردیابی کنید Survey جزء.
کنار 3 – مسیریابی برنامه ای
مشابه قبل، می‌خواهم چند چیز را که با یکی از نمونه‌های اسباب‌بازی قبلی مورد بحث قرار گرفت، نشان دهم. در زیر مثال ناوبری را تغییر داده ام که Scooby یا Shaggy را نشان می دهد تا دیگر از <router-link> جزء.
<!-- index.html -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<p>
<a @click="toScooby">Scooby</a>
<a @click="toShaggy">Shaggy</a>
</p>
<router-view></router-view>
</div>
<script>
const Scooby = {
template: `
<div>
<h4>Scooby</h4>
<p>
<img src="https://www.wbkidsgo.com/Portals/4/Images/Content/Characters/Scooby/characterArt-scooby-SD.png" alt="scooby"/>
</p>
</div>`
}
const Shaggy = {
template: `
<div class="character">
<h4>Shaggy</h4>
<p>
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/87/ShaggyRogers.png/150px-ShaggyRogers.png" alt="shaggy"/>
</p>
</div>`
}
const router = new vue-router({
routes: (
{ path: '/characters/scooby', component: Scooby },
{ path: '/characters/shaggy', component: Shaggy }
)
})
const app = new Vue({
router: router,
methods: {
toScooby() { this.$router.push('/characters/scooby') },
toShaggy() { this.$router.push('/characters/shaggy') }
}
}).$mount('#app')
</script>
مثال دقیقاً به همان روش قبلی عمل می کند، اما اکنون مسیریابی از طریق ترکیبی از شنوندگان رویداد کلیک، روش های Vue و فراخوانی دستی انجام می شود. this.$router.push('/path'). این در واقع چیزی است <router-link> پشت صحنه را با استفاده از to="/path" ارزش. من شما را تشویق می کنم که با این مثال زنده بازی کنید اینجا.
افزودن پیوندهای روتر به کامپوننت Home
آخرین کاری که باید با Survey کامپوننت توانایی پیمایش به نظرسنجی را فراهم می کند Home جزء. همانطور که قبلاً با مثال Scooby و Shaggy نشان داده شد، vue-router این کار را بسیار آسان می کند. <router-link>.
برگشت در Home کامپوننت اصلاح زیر را انجام می دهد:
<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 class="card-foooter">
<router-link :to="`surveys/${survey.id}`" class="card-footer-item">Take Survey</router-link>
</div>
</div>
الف اضافه کردم <router-link> جزء داخل a bulma پاورقی کارت و به صورت پویا مسیر هر نظرسنجی را ساخت. این با مسیرهای رشته تحت اللفظی که در مثال قبلی ارائه کردم متفاوت است. برای تولید پویا مسیرها با استفاده از رشته‌های قالب جاوا اسکریپت و شناسه‌های نظرسنجی که روی آن تکرار می‌شوند، پیشوند را وارد می‌کنم. to پارامتر با دو نقطه (“:”)، که مخفف عبارت است v-bind بخشنامه
من همه فایل ها را ذخیره می کنم و بالا می کشم root مسیر URL، localhost:8080، در مرورگر من تا مطمئن شوم که کار می کند. شما باید بتوانید کلیک کنید روی پیوند هر نظرسنجی “برگزاری نظرسنجی” و نمایش داده شود Survey رابط کاربری مؤلفه
برای تکمیل تجربه، یک نوار ناوبری ساده با زبانه “صفحه اصلی” با استفاده از آن اضافه می کنم <router-link> و الف to پارامتر اشاره به برنامه root مسیر درون یک فایل کامپوننت جدید به نام Header.vue در دایرکتوری کامپوننت
<template>
<nav class="navbar is-light" role="navigation" aria-label="main navigation">
<div class="navbar-menu">
<div class="navbar-start">
<router-link to="/" class="navbar-item">
Home
</router-link>
</div>
</div>
</nav>
</template>
<script>
</script>
<style>
</style>
برای اطمینان از اینکه در هر یک گنجانده شده است page از برنامه من آن را در App.vue جزء. برای انجام این کار ابتدا من import را Header جزء به عنوان AppHeader در script سپس با افزودن یک ویژگی به نام آن را ثبت کنید components روی شئ Vue جزء App و آن را برابر با یک شی حاوی AppHeader جزء.
سپس کامپوننت را در قالب قرار می دهم <app-header> درست بالای <router-view> جزء. هنگام نامگذاری اجزا، استفاده از آن رایج است کیس پاسکال به هم پیوستن کلماتی که آن را توصیف می کنند، جایی که حرف اول هر کلمه بزرگ می شود. سپس آن را با حروف کوچک با خط فاصله بین هر کلمه که با یک حرف بزرگ شروع می شود در قالب قرار می دهم.
ذخیره فایل ها و رفرش کردن مرورگر من اکنون می بینم Header جزء حاوی نوار ناوبری در هر یک page از برنامه
منابع
آیا می‌خواهید درباره Vue.js و ساخت برنامه‌های وب جلویی بیشتر بدانید؟ سعی کنید برخی از منابع زیر را برای بررسی عمیق‌تر در این چارچوب ظاهری بررسی کنید:
نتیجه
اگر هنوز در حال خواندن این مطلب هستید، مقدار بسیار خوبی از Vue خوبی مصرف کرده اید. ما مطمئناً مطالب زیادی را در این پست پوشش دادیم و اگر شما تازه وارد Vue یا SPAهای تک فایلی هستید، احتمالاً ارزش یک بار خواندن و یک سفر به بخش عالی را دارد. اسناد Vue برای یک شیرجه عمیق تر
مثل همیشه، ممنون که خواندید و از نظر دادن یا انتقاد در زیر خجالت نکشید.
منتشر شده در 1403-01-27 05:53:03
