nodejs vue

### 集成Node.js与Vue的方法 #### 使用Vue CLI创建项目并配置代理服务器 对于前端部分，可以通过 Vue CLI 创建新的 Vue 应用程序。这一步骤确保了项目的结构化和工具链的支持[^1]。 ```bash npm install -g @vue/cli vue create my-project cd my-project ``` 为了使前后端在同一域名下运行，减少跨域问题，在`vue.config.js`文件中设置代理： ```javascript module.exports = { devServer: { proxy: 'http://localhost:3000' // Node.js 后端服务地址 } } ``` #### 构建完整的应用程序框架 在后端采用 Express 搭配 Node.js 实现 API 接口的服务端逻辑处理。Express 是一个轻量级的 Web 框架，非常适合快速搭建 RESTful APIs[^4]。 ```javascript const express = require('express'); const app = express(); app.use(express.json()); // 定义API路由 app.get('/api/data', (req, res) => { res.json({ message: "Hello from server!" }); }); app.listen(3000, () => console.log('Server running on port 3000')); ``` #### 数据库集成 当涉及到持久化存储时，可以选择 MongoDB 并利用 Mongoose ODM 进行模型定义以及数据库交互操作。Mongoose 提供了一种简单的方式来管理和查询 MongoDB 中的数据集合[^3]。 ```javascript const mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/my_database', { useNewUrlParser: true }); const Schema = mongoose.Schema; let ArticleSchema = new Schema({ title: String, content: String }); let ArticleModel = mongoose.model('Article', ArticleSchema); ``` #### 组件间通信 为了让 Vue 前端应用能够调用到这些接口，通常会借助 Axios 或 Fetch API 发送 HTTP 请求获取所需资源。下面是一个简单的例子展示了如何从后端拉取数据并在组件内渲染出来。 ```html <template> <div id="app"> <h1>{{ msg }}</h1> </div> </template> <script> import axios from 'axios'; export default { name: 'App', data() { return { msg: '' }; }, mounted() { this.fetchData(); }, methods: { async fetchData() { try { const response = await axios.get('/api/data'); this.msg = response.data.message; } catch(error){ console.error("Error fetching data:", error); } } } }; </script> ```