前后端分离nodejs+vue+ElementUi展览馆艺术品管理系统

前后端分离的艺品管理系统是一个复杂的项目，涉及到前后端的协作和数据交换。以下是一个简化的例子，展示如何使用Node.js（使用Express框架）和Vue（结合Element UI）创建一个艺品管理系统的基本框架。

后端（Node.js + Express）:

const express = require('express');
const app = express();
const port = 3000;
 
// 用于与前端交换JSON数据
app.use(express.json());
 
// 一个简单的艺品信息路由
app.get('/artworks', (req, res) => {
  const artworks = [
    { id: 1, name: '画作1' },
    { id: 2, name: '画作2' }
  ];
  res.json(artworks);
});
 
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

前端（Vue + Element UI）:

<template>
  <div>
    <el-button @click="fetchArtworks">加载艺品</el-button>
    <el-table :data="artworks" style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="艺品名称"></el-table-column>
    </el-table>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import { ElButton, ElTable, ElTableColumn } from 'element-plus';
import axios from 'axios';
 
export default {
  components: {
    ElButton,
    ElTable,
    ElTableColumn
  },
  setup() {
    const artworks = ref([]);
 
    const fetchArtworks = async () => {
      try {
        const response = await axios.get('http://localhost:3000/artworks');
        artworks.value = response.data;
      } catch (error) {
        console.error('Error fetching artworks:', error);
      }
    };
 
    return { artworks, fetchArtworks };
  }
};
</script>

在这个例子中，前端Vue应用使用Element UI组件库来构建用户界面，并通过axios发送HTTP请求从后端获取艺品数据。后端Express服务器提供了一个API端点/artworks，用于返回艺品信息。

这个例子展示了前后端如何通过HTTP进行数据交换，并且在实际应用中，你需要实现更多的路由、数据库交互、用户认证等功能。