前端(HTML/CSS/JavaScript)filesmax.com
index.html
html
Welcome to My Simple App
Get Data from Server<script src="app.js"></script>
styles.css
css
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
margin-bottom: 20px;
}
app.js
javascript
document.getElementById(‘getDataBtn’).addEventListener(‘click’, function() {
fetch(‘/api/data’)
.then(response => response.json())
.then(data => {
document.getElementById(‘dataDisplay’).textContent = JSON.stringify(data, null, 2);
})
.catch(error => {
console.error(‘Error:’, error);
});
});
后端(Node.js/Express)
首先,你需要安装Node.js和npm(Node Package Manager)。然后,你可以使用Express框架来创建一个简单的后端服务器。
server.js
javascript
const express = require(‘express’);
const app = express();
const port = 3000;
app.get(‘/api/data’, (req, res) => {
const data = {
message: ‘Hello from the server!’,
timestamp: new Date().toISOString()
};
res.json(data);
});
app.listen(port, () => {
console.log(Server is running on port ${port}
);
});
要运行这个后端服务器,你需要在项目目录中运行以下命令来安装Express:
bash
npm init -y # 初始化一个新的npm项目
npm install express # 安装Express框架
node server.js # 运行服务器
现在,当你点击“Get Data from Server”按钮时,前端将向后端发送一个GET请求,后端将返回一个包含消息和时间戳的对象,前端将把这个对象的内容显示在网页上。由于“一个app”通常涉及多个层面(如前端、后端、数据库等),并且不同的平台(如iOS、Android、Web)有不同的开发语言和工具,我将为你提供一个简化的示例,涵盖前端(Web)和后端(Node.js)的基本代码。
前端(HTML/CSS/JavaScript)
index.html
html
Welcome to My Simple App
Get Data from Server<script src="app.js"></script>
styles.css
css
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
margin-bottom: 20px;
}
app.js
javascript
document.getElementById(‘getDataBtn’).addEventListener(‘click’, function() {
fetch(‘/api/data’)
.then(response => response.json())
.then(data => {
document.getElementById(‘dataDisplay’).textContent = JSON.stringify(data, null, 2);
})
.catch(error => {
console.error(‘Error:’, error);
});
});
后端(Node.js/Express)
首先,你需要安装Node.js和npm(Node Package Manager)。然后,你可以使用Express框架来创建一个简单的后端服务器。
server.js
javascript
const express = require(‘express’);
const app = express();
const port = 3000;
app.get(‘/api/data’, (req, res) => {
const data = {
message: ‘Hello from the server!’,
timestamp: new Date().toISOString()
};
res.json(data);
});
app.listen(port, () => {
console.log(Server is running on port ${port}
);
});
要运行这个后端服务器,你需要在项目目录中运行以下命令来安装Express:
bash
npm init -y # 初始化一个新的npm项目
npm install express # 安装Express框架
node server.js # 运行服务器
现在,当你点击“Get Data from Server”按钮时,前端将向后端发送一个GET请求,后端将返回一个包含消息和时间戳的对象,前端将把这个对象的内容显示在网页上。