前后端分离的艺品管理系统是一个复杂的项目，涉及到前后端的协作和数据交换。以下是一个简化的例子，展示如何使用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进行数据交换，并且在实际应用中，你需要实现更多的路由、数据库交互、用户认证等功能。