- 前端部分 (HTML, CSS, JavaScript)gjijg.com
index.html
html
Welcome to the Simple App!
Fetch DataData will be displayed here
.container {
margin-top: 100px;
}
button {
padding: 10px 20px;
font-size: 16px;
}
script.js
javascript
function fetchData() {
fetch(‘/data’)
.then(response => response.json())
.then(data => {
document.getElementById(‘data-display’).innerText = Data from server: ${data.message}
;
})
.catch(error => {
console.error(‘Error:’, error);
});
}
2. 后端部分 (Python, Flask)
app.py
python
from flask import Flask, jsonify, render_template
app = Flask(name)
@app.route(‘/’)
def index():
return render_template(‘index.html’)
@app.route(‘/data’)
def data():
return jsonify({‘message’: ‘Hello from the server!’})
if name == ‘main’:
app.run(debug=True)
运行步骤:
安装Flask:如果你还没有安装Flask,可以通过pip来安装:pip install flask。
运行服务器:将上述Python代码保存为app.py,然后在命令行中运行python app.py。这将启动一个本地服务器。
访问APP:在浏览器中访问http://127.0.0.1:5000/来查看你的APP。当你点击“Fetch Data”按钮时,前端JavaScript代码会向服务器发送请求,并显示从服务器返回的数据。
请注意,这只是一个非常基础的示例,用于展示如何使用多种语言(HTML、CSS、JavaScript和Python)来创建一个简单的Web APP。在实际开发中,你可能需要考虑更多的功能、安全性、性能和用户体验等因素。创建一个完整的APP涉及到很多步骤,并且通常需要多种技术和工具。由于您要求使用多种电脑语言,我将为您提供一个简单的示例,展示如何使用HTML、CSS和JavaScript(前端)以及Python(后端,使用Flask框架)来创建一个简单的Web APP。
- 前端部分 (HTML, CSS, JavaScript)
index.html
html
Welcome to the Simple App!
Fetch DataData will be displayed here
.container {
margin-top: 100px;
}
button {
padding: 10px 20px;
font-size: 16px;
}
script.js
javascript
function fetchData() {
fetch(‘/data’)
.then(response => response.json())
.then(data => {
document.getElementById(‘data-display’).innerText = Data from server: ${data.message}
;
})
.catch(error => {
console.error(‘Error:’, error);
});
}
2. 后端部分 (Python, Flask)
app.py
python
from flask import Flask, jsonify, render_template
app = Flask(name)
@app.route(‘/’)
def index():
return render_template(‘index.html’)
@app.route(‘/data’)
def data():
return jsonify({‘message’: ‘Hello from the server!’})
if name == ‘main’:
app.run(debug=True)
运行步骤:
安装Flask:如果你还没有安装Flask,可以通过pip来安装:pip install flask。
运行服务器:将上述Python代码保存为app.py,然后在命令行中运行python app.py。这将启动一个本地服务器。
访问APP:在浏览器中访问http://127.0.0.1:5000/来查看你的APP。当你点击“Fetch Data”按钮时,前端JavaScript代码会向服务器发送请求,并显示从服务器返回的数据。
请注意,这只是一个非常基础的示例,用于展示如何使用多种语言(HTML、CSS、JavaScript和Python)来创建一个简单的Web APP。在实际开发中,你可能需要考虑更多的功能、安全性、性能和用户体验等因素。