一个前端和后端交互的项目代码
时间: 2024-03-09 16:45:16 浏览: 23
好的,这里提供一个简单的前后端交互的项目代码示例。
前端代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>前后端交互示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button v-on:click="getData">获取数据</button>
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '前后端交互示例',
list: []
},
methods: {
getData: function() {
var that = this;
axios.get('/api/data').then(function(response) {
that.list = response.data;
}).catch(function(error) {
console.log(error);
});
}
}
});
</script>
</body>
</html>
```
上面的代码中,我们使用Vue框架来构建前端界面,并使用axios库来发送HTTP请求。在Vue实例中,我们定义了一个`list`数组用来存储从后端获取的数据,并在`getData`方法中发送HTTP GET请求来获取数据。获取到数据后,我们将其赋值给`list`数组。
后端代码:
```javascript
var express = require('express');
var app = express();
app.get('/api/data', function(req, res) {
var data = [
{id: 1, name: '数据1'},
{id: 2, name: '数据2'},
{id: 3, name: '数据3'}
];
res.send(data);
});
app.listen(3000, function() {
console.log('服务已启动');
});
```
上面的代码中,我们使用Express框架来构建后端服务,并在`/api/data`路由中返回一个包含三条数据的JSON数组。
当我们在浏览器中访问前端页面时,页面会显示一个按钮和一个空的列表。当我们点击按钮时,前端会向后端发送HTTP GET请求获取数据,并将数据显示在列表中。