node+vue+mysql宠物网站

Question

基于Vue+Node+mysql的宠物健康记录与管理系统设计与实现写一个网站，提供源文件

Answer 1

上午好☀️☀️☀️️
本答案参考通义千问

要构建一个基于 Vue + Node.js + MySQL 的宠物健康记录与管理系统，我们可以从以下几个方面进行设计和实现：

---

一、系统概述

该系统是一个宠物健康信息管理网站，主要功能包括：

• 宠物信息录入（姓名、种类、年龄等）
• 健康记录（疫苗、体检、疾病等）
• 用户登录与权限管理
• 数据可视化展示
• 数据导出与打印功能

系统采用 Vue（前端） + Node.js（后端） + MySQL（数据库） 技术栈。

---

二、技术选型

| 模块 | 技术/工具 | |------------|-------------------------| | 前端 | Vue 3 + Element UI | | 后端 | Node.js + Express | | 数据库 | MySQL | | 开发环境 | VSCode, Git, npm |

---

三、项目结构

pet-health-system/
├── backend/              # Node.js 后端
│   ├── server.js         # 入口文件
│   ├── routes/           # 路由配置
│   ├── models/           # 数据库模型
│   └── config/           # 数据库配置
├── frontend/             # Vue 前端
│   ├── src/
│   │   ├── components/   # 组件
│   │   ├── views/        # 页面
│   │   ├── router.js     # 路由配置
│   │   └── main.js       # 入口文件
│   └── package.json
└── README.md

---

四、功能模块设计

1. 宠物信息管理

• 添加宠物
• 编辑宠物
• 删除宠物
• 查看宠物列表

2. 健康记录管理

• 添加健康记录（如疫苗、体检）
• 查看历史记录
• 按时间或类型筛选

3. 用户管理

• 注册与登录
• 权限控制（管理员/普通用户）

4. 数据展示

• 图表展示（使用 ECharts 或 Chart.js）
• 数据导出（Excel / PDF）

---

五、数据库设计（MySQL）

CREATE DATABASE pet_health;

USE pet_health;

-- 宠物表
CREATE TABLE pets (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50) NOT NULL,
    species VARCHAR(50) NOT NULL,
    age INT,
    owner_id INT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- 健康记录表
CREATE TABLE health_records (
    id INT AUTO_INCREMENT PRIMARY KEY,
    pet_id INT,
    record_type ENUM('vaccine', 'checkup', 'illness') NOT NULL,
    description TEXT,
    date DATE,
    FOREIGN KEY (pet_id) REFERENCES pets(id)
);

-- 用户表
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(100) NOT NULL,
    role ENUM('admin', 'user') DEFAULT 'user'
);

---

六、前端实现（Vue + Element UI）

1. 安装依赖

npm install vue element-ui axios

2. 示例代码：宠物列表页面（views/Pets.vue）

<template>
  <div>
    <el-table :data="pets" border style="width: 100%">
      <el-table-column prop="name" label="宠物名称"></el-table-column>
      <el-table-column prop="species" label="种类"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="editPet(scope.row)">编辑</el-button>
          <el-button @click="deletePet(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      pets: []
    };
  },
  mounted() {
    this.fetchPets();
  },
  methods: {
    async fetchPets() {
      const res = await axios.get('/api/pets');
      this.pets = res.data;
    },
    editPet(pet) {
      // 跳转到编辑页面
    },
    deletePet(id) {
      if (confirm('确定要删除该宠物吗？')) {
        axios.delete(`/api/pets/${id}`);
        this.fetchPets();
      }
    }
  }
};
</script>

---

七、后端实现（Node.js + Express）

1. 安装依赖

npm install express mysql2 cors body-parser

2. 示例代码：server.js

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const mysql = require('mysql2');

const app = express();

// 中间件
app.use(cors());
app.use(bodyParser.json());

// 数据库连接
const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '123456',
  database: 'pet_health'
});

db.connect((err) => {
  if (err) throw err;
  console.log('Connected to MySQL database.');
});

// 路由
app.get('/api/pets', (req, res) => {
  db.query('SELECT * FROM pets', (err, results) => {
    if (err) return res.status(500).send(err);
    res.send(results);
  });
});

app.post('/api/pets', (req, res) => {
  const { name, species, age } = req.body;
  db.query(
    'INSERT INTO pets (name, species, age) VALUES (?, ?, ?)',
    [name, species, age],
    (err, result) => {
      if (err) return res.status(500).send(err);
      res.send({ id: result.insertId, name, species, age });
    }
  );
});

app.delete('/api/pets/:id', (req, res) => {
  const { id } = req.params;
  db.query('DELETE FROM pets WHERE id = ?', [id], (err, result) => {
    if (err) return res.status(500).send(err);
    res.send({ message: '宠物删除成功' });
  });
});

// 启动服务器
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

---

八、部署与运行

1. 启动后端服务

cd backend
node server.js

2. 启动前端服务

cd frontend
npm run serve

访问 http://localhost:8080 即可看到前端页面。

---

九、源码获取建议

由于无法直接提供完整源码文件，你可以参考以下方式获取完整项目：

1. GitHub 仓库搜索关键词：

   • pet health system vue node mysql
   • pet management system with vue and nodejs

2. CSDN 或其他平台：

   • 搜索“基于Vue+Node+MySQL的宠物管理系统”相关文章，通常会附带源码下载链接。

3. 自行搭建：

   • 根据上述代码片段逐步构建，适合学习与实践。

---

十、扩展建议

• 增加用户权限验证（JWT）
• 添加图表展示功能（ECharts）
• 实现数据导出（Excel 导出插件）
• 使用 Vue Router 实现多页面跳转

---

✅ 总结

| 项目内容 | 内容详情 | |---------------------------|--------------------------------------------------------------------------| | 技术栈 | Vue + Node.js + MySQL | | 功能模块 | 宠物管理、健康记录、用户管理、数据展示 | | 数据库结构 | pets 表、health_records 表、users 表 | | 前端代码示例 | Vue + Element UI 实现宠物列表展示 | | 后端代码示例 | Node.js + Express + MySQL 实现 API 接口 | | 部署方式 | 前端使用 npm run serve，后端使用 node server.js |

---

如果你需要我帮你生成完整的 GitHub 项目模板 或 源码压缩包，可以告诉我，我可以为你提供更详细的代码结构和文件。