vue加node.js项目源码
时间: 2023-12-19 20:32:31 浏览: 27
根据提供的引用内容,Vue加Node.js项目源码通常由以下组成:
1. 前端部分:使用Vue框架进行开发,负责实现用户界面和交互逻辑。
2. 后端部分:使用Node.js和Express框架进行开发,负责处理前端发送的请求并与数据库进行交互。
以下是一个简单的Vue加Node.js项目源码示例:
前端部分(Vue):
```vue
<template>
<div>
<h1>{{ message }}</h1>
<button @click="getData">获取数据</button>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
methods: {
getData() {
// 发送请求给后端获取数据
fetch('/api/data')
.then(response => response.json())
.then(data => {
this.message = data.message;
})
.catch(error => {
console.error(error);
});
}
}
}
</script>
```
后端部分(Node.js + Express):
```javascript
const express = require('express');
const app = express();
app.get('/api/data', (req, res) => {
// 从数据库获取数据
const data = {
message: 'Hello, World!'
};
res.json(data);
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
```
这个示例中,前端部分使用Vue框架创建了一个简单的页面,点击按钮后会发送请求给后端获取数据,并将数据展示在页面上。后端部分使用Node.js和Express框架创建了一个简单的服务器,当收到前端发送的请求时,返回一个包含消息的JSON数据。