Ant degin vue 日历中显示日程的前后端的完整代码
时间: 2024-03-26 21:35:45 浏览: 12
前端代码:
```
<template>
<div class="calendar">
<full-calendar :events="events" :config="config" />
</div>
</template>
<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import axios from "axios";
export default {
name: "Calendar",
components: {
FullCalendar,
},
data() {
return {
events: [],
config: {
plugins: [dayGridPlugin, interactionPlugin],
defaultView: "dayGridMonth",
header: {
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay",
},
editable: true,
eventLimit: true,
selectable: true,
selectHelper: true,
select: this.handleSelect,
eventClick: this.handleEventClick,
},
};
},
mounted() {
this.fetchEvents();
},
methods: {
async fetchEvents() {
try {
const response = await axios.get("/api/events");
const events = response.data.map((event) => ({
id: event.id,
title: event.title,
start: event.start_date,
end: event.end_date,
}));
this.events = events;
} catch (error) {
console.error(error);
}
},
async handleSelect(info) {
const title = prompt("Enter event title:");
const eventData = {
title,
start: info.startStr,
end: info.endStr,
};
try {
await axios.post("/api/events", eventData);
this.fetchEvents();
} catch (error) {
console.error(error);
}
},
async handleEventClick(info) {
const { id } = info.event;
try {
await axios.delete(`/api/events/${id}`);
this.fetchEvents();
} catch (error) {
console.error(error);
}
},
},
};
</script>
```
后端代码:
```
const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const db = require("./db");
const app = express();
const apiPort = 3000;
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());
app.use(bodyParser.json());
db.on("error", console.error.bind(console, "MongoDB connection error:"));
app.get("/api/events", (req, res) => {
db.collection("events")
.find({})
.toArray((err, events) => {
if (err) throw err;
res.send(events);
});
});
app.post("/api/events", (req, res) => {
const event = req.body;
db.collection("events").insertOne(event, (err, result) => {
if (err) throw err;
res.send(result.ops[0]);
});
});
app.delete("/api/events/:id", (req, res) => {
const id = req.params.id;
db.collection("events").deleteOne({ id }, (err, result) => {
if (err) throw err;
res.send(result);
});
});
app.listen(apiPort, () => console.log(`Server running on port ${apiPort}`));
```
其中,前端代码使用了 `@fullcalendar/vue` 和 `axios`,后端代码使用了 `express`,`body-parser`,`cors` 和 `mongodb`,请确保已经安装了这些依赖。另外,后端代码中的数据库连接需要根据实际情况进行修改。