www.machinelearningmastery.ru

Машинное обучение, нейронные сети, искусственный интеллект
Header decor

Home

Как сделать приложение календаря с помощью Vue

Дата публикации Oct 3, 2019

Подпишитесь на мой список рассылки сейчас наhttp://jauyeung.net/subscribe/,

Следуйте за мной в Твиттере наhttps://twitter.com/AuMayeung

Для многих приложений запись даты является важной функцией. Наличие календаря часто является удобной функцией. К счастью, многие разработчики создали компоненты календаря, которые другие разработчики могут легко добавить в свои приложения.

Vue.js имеет много виджетов календаря, которые мы можем добавить в наши приложения. Одним из них является полный календарь Vue.js. У него много функций. Он имеет календарь на месяц, неделю и день. Кроме того, вы можете легко перейти к сегодняшнему или любому другому дню с помощью кнопок «назад» и «далее». Вы также можете перетащить диапазон дат в календаре, чтобы выбрать диапазон дат. С этим вы можете делать любые манипуляции с датами.

В этой статье мы создадим простое приложение-календарь, в котором пользователи смогут перетаскивать диапазон дат и добавлять запись в календаре Пользователи могут также нажать на существующую запись календаря и редактировать запись. Существующие записи также могут быть удалены. Форма для добавления и редактирования записи календаря будет иметь указатели даты и времени для выбора даты и времени.

Мы сохраним данные на сервере в файле JSON.

Мы будем использовать Vue.js для создания нашего приложения. Для начала запустим:

npx @vue/cli create calendar-app

Затем мы выбираем «Выбор объектов вручную» и выбираем Babel, CSS Preprocessor, Vue Router и Vuex.

После того, как приложение создано, мы должны установить несколько пакетов, которые нам нужны. Нам нужен Axios для выполнения HTTP-запросов к нашему бэкэнду, BootstrapVue для стиля, jQuery и Moment - это зависимости для пакета Vue-Full-Calendar, который мы будем использовать для отображения календаря. Vee-Validate для проверки формы, Vue-Ctk-Date-Time-Picker, чтобы позволить пользователям выбирать дату и время для событий календаря, а Vue-Full-Calendar используется для виджета календаря.

Мы бегаем:

npm i axios bootstrap-vue jquery moment vee-validate vue-ctk-date-time-picker vue-full-calendar

установить все пакеты.

Установив все пакеты, мы можем начать писать приложение. Сначала мы начнем с формы для ввода записей календаря.

Создайте файл с именемCalendarForm.vueвcomponentsпапку и добавить:

<template>
<div>
<ValidationObserver ref="observer" v-slot="{ invalid }">
<b-form @submit.prevent="onSubmit" novalidate>
<b-form-group label="Title" label-for="title">
<ValidationProvider name="title" rules="required" v-slot="{ errors }">
<b-form-input
:state="errors.length == 0"
v-model="form.title"
type="text"
required
placeholder="Title"
name="title"
></b-form-input>
<b-form-invalid-feedback :state="errors.length == 0">Title is required</b-form-invalid-feedback>
</ValidationProvider>
</b-form-group><b-form-group label="Start" label-for="start">
<ValidationProvider name="start" rules="required" v-slot="{ errors }">
<VueCtkDateTimePicker
input-class="form-control"
:state="errors.length == 0"
v-model="form.start"
name="start"
></VueCtkDateTimePicker>
<b-form-invalid-feedback :state="errors.length == 0">Start is required</b-form-invalid-feedback>
</ValidationProvider>
</b-form-group> <b-form-group label="End" label-for="end">
<ValidationProvider name="end" rules="required" v-slot="{ errors }">
<VueCtkDateTimePicker
input-class="form-control"
:state="errors.length == 0"
v-model="form.end"
name="end"
></VueCtkDateTimePicker>
<b-form-invalid-feedback :state="errors.length == 0">End is required</b-form-invalid-feedback>
</ValidationProvider>
</b-form-group> <b-button type="submit" variant="primary">Save</b-button>
<b-button type="button" variant="primary" @click="deleteEvent(form.id)">Delete</b-button>
</b-form>
</ValidationObserver>
</div>
</template><script>
import { requestsMixin } from "../mixins/requestsMixin";
import * as moment from "moment";export default {
name: "CalendarForm",
props: {
edit: Boolean,
calendarEvent: Object
},
mixins: [requestsMixin],
data() {
return {
form: {}
};
},
watch: {
calendarEvent: {
immediate: true,
deep: true,
handler(val, oldVal) {
this.form = val || {};
}
}
},
methods: {
async onSubmit() {
const isValid = await this.$refs.observer.validate();
if (!isValid) {
return;
}
this.form.start = moment(this.form.start).format("YYYY-MM-DD HH:mm:ss");
this.form.end = moment(this.form.end).format("YYYY-MM-DD HH:mm:ss"); if (this.edit) {
await this.editCalendar(this.form);
} else {
await this.addCalendar(this.form);
}
const response = await this.getCalendar();
this.$store.commit("setEvents", response.data);
this.$emit("eventSaved");
}, async deleteEvent(id) {
await this.deleteCalendar(id);
const response = await this.getCalendar();
this.$store.commit("setEvents", response.data);
this.$emit("eventSaved");
}
}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
button {
margin-right: 10px;
}
</style>

В этом файле мы используем компонент формы BootstrapVue для создания нашей формы. Мы используемVueCtkDateTimePickerдобавить в нашу форму указатель даты и времени, чтобы пользователи могли выбирать время и дату.

Мы заключаем каждый вход сValidationProviderкомпонент, чтобы позволить нам проверить каждое поле. Каждое поле является обязательным, поэтому мы устанавливаемrulesопора дляrequired,

Мы устанавливаем:stateпривязка кerrors.length == 0отображать ошибки только тогда, когдаerrorsмассив имеет длину больше 0. Это также относится кb-form-invalid-feedbackсоставная часть.

Форма имеет кнопку Сохранить для запускаonSubmitкогда кнопка нажата. Мы проверяем действительность формы, звоняthis.$refs.observer.validate(), У нас есть этот объект, потому что мы завернули форму сValidationObserverкомпонент сrefустановлен вobserver,

В функции мы форматируемstartа такжеendдаты, чтобы мы сохранили правильную дату и время.

Еслиeditprop установлен в true, тогда мы называемthis.editCalendarфункция вrequestsMixin, В противном случае мы называемthis.addCalendarв том же миксине.

Как только это удастся, мы называем this.$store.commit(“setEvents”, response.data);после звонкаthis.getCalendarпомещать последние события календаря в наш магазин Vuex.

После того, как это сделано, мы испускаемeventSavedсобытие, чтобы мы могли закрыть модалы в расположенном на главной странице.

Далее мы создаемmixinsпапка иrequestsMixin.jsфайл внутри него. Там мы добавляем:

const APIURL = "http://localhost:3000";
const axios = require("axios");export const requestsMixin = {
methods: {
getCalendar() {
return axios.get(`${APIURL}/calendar`);
}, addCalendar(data) {
return axios.post(`${APIURL}/calendar`, data);
}, editCalendar(data) {
return axios.put(`${APIURL}/calendar/${data.id}`, data);
}, deleteCalendar(id) {
return axios.delete(`${APIURL}/calendar/${id}`);
}
}
};

Это функции для выполнения HTTP-запросов к серверной части.

Далее мы модифицируемHome.vue, заменив существующий код на:

<template>
<div class="page">
<div class="buttons">
<b-button v-b-modal.add-modal>Add Calendar Event</b-button>
</div>
<full-calendar :events="events" @event-selected="openEditModal" defaultView="month" /><b-modal id="add-modal" title="Add Calendar Event" hide-footer ref="add-modal">
<CalendarForm :edit="false" @eventSaved="closeModal()" />
</b-modal><b-modal id="edit-modal" title="Edit Calendar Event" hide-footer ref="edit-modal">
<CalendarForm :edit="true" :calendarEvent="calendarEvent" @eventSaved="closeModal()" />
</b-modal>
</div>
</template><script>
// @ is an alias to /src
import CalendarForm from "@/components/CalendarForm.vue";
import { requestsMixin } from "../mixins/requestsMixin";export default {
name: "home",
components: {
CalendarForm
},
mixins: [requestsMixin],
computed: {
events() {
return this.$store.state.events;
}
},
data() {
return {
calendarEvent: {}
};
},
async beforeMount() {
await this.getEvents();
},
methods: {
async getEvents() {
const response = await this.getCalendar();
this.$store.commit("setEvents", response.data);
},
closeModal() {
this.$refs["add-modal"].hide();
this.$refs["edit-modal"].hide();
this.calendarEvent = {};
},
openEditModal(event) {
let { id, start, end, title } = event;
this.calendarEvent = { id, start, end, title };
this.$refs["edit-modal"].show();
}
}
};
</script><style lang="scss" scoped>
.buttons {
margin-bottom: 10px;
}
</style>

В этом файле мы включаемfull-calendarкомпонент из пакета Vue Full Calendar, а также добавление и редактирование модальных событий календаря. Мы используемCalendarFormдля обоих.

Обратите внимание, что мы обрабатываемeventSavedсобытие здесь, которое испускаетсяCalendarForm, Мы называемcloseModalкогда событие испускается, так что модалы закроются.

Мы также передаем вcalendarEventа такжеeditопора установленаtrueкогда мы открываем модальное редактирование.

refдля модального набора, чтобы мы могли показать и скрыть модальные ихref,

Мы получаем последнее состояниеeventsв магазине Vuex, посмотревthis.$store.state.events,

Далее мы заменим код вApp.vueс:

<template>
<div id="app">
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar-brand to="/">Calendar App</b-navbar-brand> <b-navbar-toggle target="nav-collapse"></b-navbar-toggle> <b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to="/" :active="path == '/'">Home</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<router-view />
</div>
</template><script>
export default {
data() {
return {
path: this.$route && this.$route.path
};
},
watch: {
$route(route) {
this.path = route.path;
}
}
};
</script><style lang="scss">
.page {
padding: 20px;
}
</style>

Добавляем BootstrapVueb-navbarздесь и смотреть маршрут, как он меняется, чтобы мы могли установитьactiveПодпишите ссылку на страницу, на которой сейчас находится пользователь.

Далее мы меняем код вmain.jsчтобы:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import FullCalendar from "vue-full-calendar";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css';
import { ValidationProvider, extend, ValidationObserver } from "vee-validate";
import { required } from "vee-validate/dist/rules";
import VueCtkDateTimePicker from 'vue-ctk-date-time-picker';extend("required", required);
Vue.component("ValidationProvider", ValidationProvider);
Vue.component("ValidationObserver", ValidationObserver);
Vue.use(FullCalendar);
Vue.use(BootstrapVue);
Vue.component('VueCtkDateTimePicker', VueCtkDateTimePicker);Vue.config.productionTip = false;new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");

Мы импортируем все используемые здесь пакеты приложений, такие как BootstrapVue, Vee-Validate и виджеты выбора календаря и даты и времени.

Стили также импортируются сюда, чтобы мы могли видеть их в приложении.

Далее вrouter.jsзамените существующий код на:

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import 'fullcalendar/dist/fullcalendar.css'Vue.use(Router);export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "home",
component: Home
}
]
});

установить маршруты для нашего приложения, чтобы при вводе пользователем указанного URL-адреса или переходе по ссылке с ним он мог видеть нашу страницу.

Далее вstore.jsзаменяем существующий код на:

import Vue from "vue";
import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({
state: {
events: []
},
mutations: {
setEvents(state, payload) {
state.events = payload;
}
},
actions: {}
});

Мы добавилиeventsсостояние для событий календаря, иsetEventsфункция, которую мы отправили сthis.$store.commitтак что мы можем установитьeventsв магазине и доступ к нему во всех наших компонентах.

Наконец, мы заменим код вindex.htmlс:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>Calendar App</title>
</head>
<body>
<noscript>
<strong
>We're sorry but vue-calendar-tutorial-app doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

изменить название приложения.

Теперь вся тяжелая работа выполнена. Все, что нам нужно сделать, это использовать пакет JSON Server NPM, расположенный по адресуhttps://github.com/typicode/json-serverдля нашего бэк-энда

Установите его, запустив:

npm i -g json-server

Затем запустите его:

json-server --watch db.json

Вdb.jsonзамените существующий контент на:

{
"calendar": []
}

Затем мы запускаем наше приложение, запустивnpm run serveв папке проекта нашего приложения, чтобы запустить наше приложение.

После этого вы должны увидеть:

Оригинальная статья

Footer decor

© www.machinelearningmastery.ru | Ссылки на оригиналы и авторов сохранены. | map