以下是一个使用Vue.js和Node.js构建的简单药品进销存管理系统的核心代码示例。请注意,这只是一个示例,实际系统将需要更多的功能和错误处理。
后端服务器 (Node.js 使用 Express 框架)
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
// 用于解析JSON请求体
app.use(bodyParser.json());
// 模拟的库存数据
let inventory = [
{ id: 1, name: '药品A', quantity: 100 },
// ...更多药品
];
// 获取所有库存
app.get('/api/inventory', (req, res) => {
res.json(inventory);
});
// 添加新药品
app.post('/api/inventory', (req, res) => {
const newDrug = { id: inventory.length + 1, ...req.body };
inventory.push(newDrug);
res.status(201).json(newDrug);
});
// 更新药品数量
app.put('/api/inventory/:id', (req, res) => {
const drugIndex = inventory.findIndex(d => d.id === parseInt(req.params.id));
if (drugIndex === -1) {
return res.status(404).json({ message: 'Drug not found' });
}
const updatedDrug = { ...inventory[drugIndex], ...req.body };
inventory.splice(drugIndex, 1, updatedDrug);
res.json(updatedDrug);
});
// 删除药品
app.delete('/api/inventory/:id', (req, res) => {
const drugIndex = inventory.findIndex(d => d.id === parseInt(req.params.id));
if (drugIndex === -1) {
return res.status(404).json({ message: 'Drug not found' });
}
inventory.splice(drugIndex, 1);
res.json({ message: 'Drug deleted successfully' });
});
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
前端 (Vue.js)
<template>
<div>
<!-- 药品列表展示 -->
<ul>
<li v-for="drug in drugs" :key="drug.id">
{{ drug.name }} - 数量: {{ drug.quantity }}
<!-- 更新数量的表单 -->
<form @submit.prevent="updateDrug(drug.id)">
新数量: <input type="number" v-model.number="drug.quantity">
<button type="submit">更新</button>
</form>
</li>
</ul>
<!-- 添加新药品的表单 -->
<form @submit.prevent="addDrug">
药品名称: <input type="text" v-model="newDrug.name">
数量: <input type="number" v-model.number="newDrug.quantity">
<button type="submit">添加</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
drugs: [],
newDrug: {
name: '',
quantity: 0
}
};
},
created() {
this.fetchDrugs();
},
methods: {
fetchDrugs() {
fetch('http://localhost:3000/api/inventory')