基于vue和node的宿舍管理系统的源代码

基于Vue和Node的宿舍管理系统源代码如下：

前端部分（Vue）：

<template>
<div>
<h1>宿舍管理系统</h1>
<div v-for="dormitory in dormitories" :key="dormitory.id">
<h2>{{ dormitory.name }}</h2>
<p>管理员：{{ dormitory.admin }}</p>
<p>可用床位：{{ dormitory.availableBeds }}</p>
</div>
</div>
</template>

<script>
export default {
data() {
return {
dormitories: []
}
},
mounted() {
// 从后端获取宿舍数据
axios.get('/api/dormitories')
.then(response => {
this.dormitories = response.data;
})
.catch(error => {
console.log(error);
});
}
}
</script>

后端部分（Node）：

const express = require('express');
const app = express();
const dormitories = [
{ id: 1, name: 'A宿舍', admin: '张三', availableBeds: 20 },
{ id: 2, name: 'B宿舍', admin: '李四', availableBeds: 15 },
{ id: 3, name: 'C宿舍', admin: '王五', availableBeds: 18 }
];

app.get('/api/dormitories', (req, res) => {
res.json(dormitories);
});

app.listen(3000, () => {
console.log('服务器已启动');
});

这段代码实现了一个简单的宿舍管理系统，前端使用Vue框架进行页面渲染，后端使用Node.js搭建一个简单的服务器。前端页面通过发送HTTP请求到后端的API来获取宿舍数据，并将宿舍信息显示在页面上。后端使用Express框架处理请求，当收到"/api/dormitories"的GET请求时，返回预定义的宿舍数据。前端页面通过调用后端API获取数据并进行展示。