Node.js药房药品进销存库存管理系统vue

以下是一个使用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')