写一个 vue前后端 显示信息的项目

好的，我可以为您提供一个简单的示例项目。

1. 后端

使用 Node.js 和 Express 框架来创建一个简单的 RESTful API。

首先，安装依赖：

npm install express body-parser cors

然后，创建一个 `server.js` 文件：

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

const app = express();

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

// 数据
const messages = [
  { id: 1, text: 'Hello World', author: 'Alice' },
  { id: 2, text: 'Hi there', author: 'Bob' },
];

// 获取所有消息
app.get('/messages', (req, res) => {
  res.json(messages);
});

// 发送消息
app.post('/messages', (req, res) => {
  const message = req.body;
  message.id = messages.length + 1;
  messages.push(message);
  res.json(message);
});

// 启动服务器
app.listen(3000, () => console.log('Server started on port 3000'));

这个简单的后端程序创建了一个包含两个路由的 Express 应用程序。第一个路由是 `GET /messages`，用于获取所有消息。第二个路由是 `POST /messages`，用于发送消息。

2. 前端

使用 Vue.js 和 Axios 来创建一个简单的前端应用程序。

首先，新建一个 Vue.js 项目：

vue create frontend

安装 Axios：

npm install axios

然后，修改 `src/App.vue` 文件：

<template>
  <div>
    <h1>Messages</h1>
    <ul>
      <li v-for="message in messages" :key="message.id">
        {{ message.text }} - {{ message.author }}
      </li>
    </ul>
    <form @submit.prevent="sendMessage">
      <input v-model="newMessage.text" placeholder="Message" />
      <input v-model="newMessage.author" placeholder="Author" />
      <button>Send</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      messages: [],
      newMessage: {
        text: '',
        author: '',
      },
    };
  },
  methods: {
    getMessages() {
      axios.get('http://localhost:3000/messages').then((res) => {
        this.messages = res.data;
      });
    },
    sendMessage() {
      axios.post('http://localhost:3000/messages', this.newMessage).then((res) => {
        this.messages.push(res.data);
        this.newMessage.text = '';
        this.newMessage.author = '';
      });
    },
  },
  mounted() {
    this.getMessages();
  },
};
</script>

这个简单的前端程序使用 Vue.js 来显示所有消息，并提供一个表单来发送新的消息。在 `data` 中定义了 `messages` 和 `newMessage` 两个数据属性，在 `methods` 中定义了 `getMessages` 和 `sendMessage` 两个方法。

现在，启动前端和后端程序：

# 启动后端
node server.js

# 启动前端
cd frontend
npm run serve

访问 http://localhost:8080 即可看到一个简单的消息列表和表单，可以用来发送新的消息。