node.js vue

作者：哥伤不起发布日期:2025-04-10 浏览:55
// server.js (Node.js)
const express = require('express');
const app = express();
const port = 3000;

app.use(express.static('public'));

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from Node.js server!' });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

// Explanation:
// This is a simple Node.js server using Express. It serves static files from the 'public' directory and provides an API endpoint '/api/data' that returns JSON data.

// public/index.html
<!DOCTYPE html>
<html>
<head>
  <title>Vue App</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="fetchData">Fetch Data</button>
  </div>

  <script src="app.js"></script>
</body>
</html>

// Explanation:
// This HTML file sets up a basic Vue.js application. It includes Vue.js from a CDN and links to a local JavaScript file 'app.js'.

// public/app.js
new Vue({
  el: '#app',
  data: {
    message: 'Welcome to Vue!'
  },
  methods: {
    fetchData() {
      fetch('/api/data')
        .then(response => response.json())
        .then(data => {
          this.message = data.message;
        });
    }
  }
});

// Explanation:
// This is the Vue.js application script. It initializes a Vue instance, defines a 'message' data property, and a method 'fetchData' that fetches data from the Node.js server and updates the 'message'.
上一篇：vue查看版本
下一篇：vue.config.js configurewebpack