校园电车租赁预约系统是一个需要后端和前端配合完成的项目。后端主要负责数据管理和业务逻辑处理，前端负责页面展示和用户交互。
在Node.js + Vue + ElementUI的环境下，可以使用Express.js作为后端框架，Vue作为前端框架，ElementUI提供组件库。
以下是一个非常简单的例子，展示了如何使用这些技术创建一个电车租赁预约系统的后端部分：
后端（Node.js + Express）:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// 模拟数据库
let bikes = [];
// API端点：租赁电车
app.post('/api/bikes/rent', (req, res) => {
const bikeId = req.body.bikeId;
// 假设我们已经处理了租赁请求，将电车ID添加到数据库
bikes.push(bikeId);
res.status(200).send('Bike rented successfully.');
});
// API端点：取消租赁电车
app.post('/api/bikes/return', (req, res) => {
const bikeId = req.body.bikeId;
// 假设我们已经处理了取消请求，将电车ID从数据库中移除
bikes = bikes.filter(id => id !== bikeId);
res.status(200).send('Bike returned successfully.');
});
// 监听3000端口
app.listen(3000, () => {
console.log('Server running on port 3000');
});
前端（Vue）:
<template>
<div>
<el-button @click="handleRent">租赁电车</el-button>
<el-button @click="handleReturn">取消租赁</el-button>
</div>
</template>
<script>
export default {
methods: {
handleRent() {
// 发送请求到后端以租赁电车
this.$http.post('/api/bikes/rent', { bikeId: '123' }).then(response => {
console.log(response.data);
});
},
handleReturn() {
// 发送请求到后端以取消租赁电车
this.$http.post('/api/bikes/return', { bikeId: '123' }).then(response => {
console.log(response.data);
});
}
}
}
</script>
在这个例子中，前端和后端通过HTTP请求进行通信。后端使用Express.js提供API端点，前端使用Vue的HTTP客户端发送请求。ElementUI用于构建用户界面。
请注意，这只是一个简化的示例，实际系统需要更复杂的逻辑，包括身份验证、错误处理、数据验证等。此外，数据库的使用也是必不可少的，以便持久化电车状态和租赁信息。