好的，这是一个简单的关于公益活动的项目，
使用 Node.js 和
Vue.js 开发。
后端代码（
使用 Express 框架）：
```js
const
express = require("
express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const app =
express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
mongoose.connect("mongodb://localhost:27017/gongyi", { useNewUrlParser: true, useUnifiedTopology: true });
const activitySchema = new mongoose.Schema({
title: String,
description: String,
date: Date,
location: String,
volunteers: [String],
donations: Number
});
const Activity = mongoose.model("Activity", activitySchema);
app.get("/api/activities", async (req, res) => {
const activities = await Activity.find();
res.send(activities);
});
app.post("/api/activities", async (req, res) => {
const activity = new Activity({
title: req.body.title,
description: req.body.description,
date: req.body.date,
location: req.body.location,
volunteers: [],
donations: 0
});
await activity.save();
res.send(activity);
});
app.post("/api/activities/:id/volunteers", async (req, res) => {
const activity = await Activity.findById(req.params.id);
activity.volunteers.push(req.body.name);
await activity.save();
res.send(activity);
});
app.post("/api/activities/:id/donate", async (req, res) => {
const activity = await Activity.findById(req.params.id);
activity.donations += req.body.amount;
await activity.save();
res.send(activity);
});
app.listen(3000, () => {
console.log("Server started on port 3000");
});
```
前端代码（
使用 Vue.js 框架）：
```html
<!DOCTYPE html>
<html>
<head>
<title>Gongyi Activity Manager</title>
<script src="https://cdn.jsdelivr.net/npm/
vue/
dist/
vue.js"></script>
<script src="https://unpkg.com/axios/
dist/axios.min.js"></script>
</head>
<body>
<h1>公益活动管理系统</h1>
<div id="app">
<h2>添加新活动</h2>
<form @submit.prevent="addActivity">
<div>
<label>标题：</label>
<input type="text" v-model="newActivity.title">
</div>
<div>
<label>描述：</label>
<textarea v-model="newActivity.description"></textarea>
</div>
<div>
<label>日期：</label>
<input type="date" v-model="newActivity.date">
</div>
<div>
<label>地点：</label>
<input type="text" v-model="newActivity.location">
</div>
<button type="submit">添加</button>
</form>
<h2>活动列表</h2>
<ul>
<li v-for="activity in activities">
<h3>{{ activity.title }}</h3>
<p>{{ activity.description }}</p>
<p>日期：{{ activity.date }}</p>
<p>地点：{{ activity.location }}</p>
<p>志愿者：{{ activity.volunteers.join(", ") }}</p>
<p>捐款：{{ activity.donations }}</p>
<form @submit.prevent="addVolunteer(activity)">
<div>
<label>姓名：</label>
<input type="text" v-model="newVolunteerName">
</div>
<button type="submit">报名志愿者</button>
</form>
<form @submit.prevent="donate(activity)">
<div>
<label>金额：</label>
<input type="number" v-model="donationAmount">
</div>
<button type="submit">捐款</button>
</form>
</li>
</ul>
</div>
<script>
new
Vue({
el: "#app",
data: {
activities: [],
newActivity: {
title: "",
description: "",
date: "",
location: ""
},
newVolunteerName: "",
donationAmount: 0
},
methods: {
async addActivity() {
const response = await axios.post("/api/activities", this.newActivity);
this.activities.push(response.data);
this.newActivity = {
title: "",
description: "",
date: "",
location: ""
};
},
async addVolunteer(activity) {
const response = await axios.post(`/api/activities/${activity._id}/volunteers`, { name: this.newVolunteerName });
activity.volunteers = response.data.volunteers;
this.newVolunteerName = "";
},
async donate(activity) {
const response = await axios.post(`/api/activities/${activity._id}/donate`, { amount: this.donationAmount });
activity.donations = response.data.donations;
this.donationAmount = 0;
}
},
async created() {
const response = await axios.get("/api/activities");
this.activities = response.data;
}
});
</script>
</body>
</html>
```
这是一个简单的公益活动管理系统，可以添加活动、报名志愿者、捐款等。你可以将代码复制到本地
运行，或者根据自己的需求进行修改和扩展。
1299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
