由于篇幅所限，以下仅展示如何使用Node.js和Vue创建一个简单的API接口，以及如何在前端使用Element UI进行页面布局。
后端 (Node.js 和 Express):
安装Express:
npm install express
创建一个简单的API服务器:
const express = require('express');
const app = express();
const port = 3000;
app.use(express.json()); // 用于解析JSON的中间件
// 居民信息数据（示例）
const residents = [];
// 添加居民的API端点
app.post('/api/residents', (req, res) => {
const newResident = {
id: residents.length + 1,
name: req.body.name,
age: req.body.age,
// 其他信息...
};
residents.push(newResident);
res.status(201).json(newResident);
});
// 获取所有居民的API端点
app.get('/api/residents', (req, res) => {
res.json(residents);
});
app.listen(port, () => {
console.log(`服务器运行在 http://localhost:${port}`);
});
前端 (Vue 和 Element UI):
安装Vue CLI:
npm install -g @vue/cli
创建一个Vue项目并添加Element UI:
vue create community-residents-manager
cd community-residents-manager
vue add element
在Vue组件中使用Element UI组件创建表单并发送请求:
<template>
<el-form :model="residentForm" ref="residentForm" label-width="120px">
<el-form-item label="姓名">
<el-input v-model="residentForm.name" />
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="residentForm.age" type="number" />
</el-form-item>
<!-- 其他信息字段 -->
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
residentForm: {
name: '',
age: null,
// 其他信息...
}
};
},
methods: {
async submitForm() {
try {
const response = await this.$http.post('api/residents', this.residentForm);
this.$message.success('添加成功');
// 处理成功添加后的逻辑，例如刷新页面或显示新添加的居民信息
} catch (error) {
this.$message.error('添加失败');
}
}
}
};
</script>
以上代码展示了如何使用Vue和Element UI创建一个简单的表单，并通过Vue的HTTP客户端发送POST请求到后端API。这只是一个简化示例，实际系统可能需要更复杂的逻辑，例如数据验证、错误处理、分页、搜索、可视化等功能。