我在开发 Web 应用程序时遇到问题，我在服务器端使用 python flask，每次运行 python 应用程序时，我都会收到“无法加载资源，404 页面未找到”错误。
这是应用架构： \自由 \静止的 索引.css 索引.js \图片 模板 主页.html 应用.py
这是我的 app.py 代码：
from flask import Flask, request, jsonify, render_template
import sqlite3
app = Flask(__name__)
app.route('/')
def index():
return render_template('Home.html')
@app.route('/SubmitForm',methods=['POST'])
def SubmitForm():
data = request.get_json()
name, email, message = data['name'], data['email'], data['message']
connection = sqlite3.connect("messages.db")
cursor = connection.cursor()
cursor.execute("""CREATE TABLE IF NOT EXISTS messages(name TEXT,email TEXT,message TEXT)""")
cursor.execute("INSERT INTO messages VALUES(?,?,?)",[name,email,message])
connection.commit()
connection.close()
response = jsonify({'status': 'success', 'message': 'message added to the database successfully'})
return response
if __name__ == '__main__':
app.run()
这是我的 Home.html 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Libertas startup</title>
<link rel="stylesheet" href="../static/index.css">
</head>
<body>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services/products">Services/Products</a>
<a href="#team">Team</a>
<a href="#connect">Connect</a>
</nav>
<section id="home" class="home">
<h1>Libertas</h1>
<p id="slogan"></p>
</section>
<section id="about" class="about">
<h1>About Us</h1>
<p>We are a startup that aims to make it easier for everyone to be a digital nomad.<br>We provide products and services that solves major problems that digital nomads face in their journey.<br>We believe that Freedom, location-independence, and divercifying experiences will be the core values of work and life in the future, so we just embraced those values because we believe in the future.</p>
<img src="../static/images/5.jpg" id="about.image">
</section>
<section id="services/products" class="services">
<h1>services & products</h1>
<div class="commodities">
<div class="commodity">
<div class="name"><h1>Odyssey</h1></div>
<div class="description"><p>An app that allows digital nomads to combine the flexibility of solo-travel and the socialization of group travel</p></div>
<div class="preview"><img src="../static/images/6.png"></div>
<div class="learn_more"><button>learn more</button></div>
</div>
<div class="commodity">
<div class="name"><h1>Nomad Space</h1></div>
<div class="description"><p>A co-working space catered towards, and exclusive to Digital Nomads</p></div>
<div class="preview"><img src="../static/images/7.jpg"></div>
<div class="learn_more"><button>learn more</button></div>
</div>
</div>
</section>
<section id="team" class="team">
<h1>Team</h1>
<div class="team_member">
<div class="preview"><img src="../static/images/8.JPEG"></div>
<div class="member_info">
<div class="name"><h1>Moe Hasan</h1></div>
<div class="position"><p>Founder, CEO, and CTO.</p></div>
<div class="description"><p>Am an interdisciplinary, self-taught software developer, content creator on Youtube, Founder, and most importantly, A science lover.</p></div>
<div class="connect">
<a href=""><img src="../static/images/10.svg"></a>
<a><img src="../static/images/11.svg"></a>
<a><img src="../static/images/12.svg"></a>
</div>
</div>
</div>
<div class="team_member">
<div class="preview"><img src="../static/images/9.JPG"></div>
<div class="member_info">
<div class="name"><h1>We're Hiring!</h1></div>
<div class="position"><p>CMO</p></div>
<div class="description"><p>We need a cofounder who is willing to occupy the position of CMO.<br>for more info, please reach out to us via the form in the "connect" section.</p></div>
<div class="connect">
<a><img src="../static/images/10.svg"></a>
<a><img src="../static/images/11.svg"></a>
<a><img src="../static/images/12.svg"></a>
</div>
</div>
</div>
<div class="team_member">
<div class="preview"><img src="../static/images/9.JPG"></div>
<div class="member_info">
<div class="name"><h1>We're Hiring!</h1></div>
<div class="position"><p>UX/UI expert</p></div>
<div class="description"><p>We need a cofounder who is willing to occupy the position of chief UX/UI designer.<br>for more info, please reach out to us via the form in the "connect" section.</p></div>
<div class="connect">
<a><img src="../static/images/10.svg"></a>
<a><img src="../static/images/11.svg"></a>
<a><img src="../static/images/12.svg"></a>
</div>
</div>
</div>
</section>
<section id="connect" class="connect">
<form class="connect_form" id="connect_form" method="post" action="">
<h1>connect with us</h1>
<div class="costumer_credentials">
<input type="text" placeholder="Name" id="UserName">
<input type="email" placeholder="Email" id="Email">
</div>
<div class="costumer_message">
<input type="text" placeholder="message" id="Message">
</div>
<h3 id="Error_Message" style="color: red;"></h3>
<input type="submit" id="SubmitButton" class="SubmitButton">
</form>
</section>
<script src="../static/index.js"></script>
</body>
</html>
```
And here's my index.js code:
`
var i = 0;
var slogan = 'For a Free New World';
function typeWriter() {
if (i < slogan.length) {
document.getElementById('slogan').innerHTML += slogan.charAt(i);
i++;
setTimeout(typeWriter, 100);
}
}
typeWriter()
const form = document.getElementById("connect_form")
const submit_button = document.getElementById("SubmitButton")
submit_button.addEventListener("click",SubmitForm)
//the function that sends the data to the server side after checking them
function SubmitForm(event){
//stopping the form from refreshing the page
event.preventDefault();
//taking the inputs and storing them in variables
let name = document.getElementById("UserName").value.trim();
let email = document.getElementById("Email").value.trim();
let message = document.getElementById("Message").value.trim();
//checking the inputs using RegEx
const nameRegex = /^[a-zA-Z\s]+$/
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
if(!nameRegex.test(name) || !emailRegex.test(email)){
document.getElementById("Error_Message").innerHTML = "Please input valid Name and Email"
form.reset();
}
else{
//converting the data to JSON format before sending it to the server side
const Object_Message = {"name":name,"email":email,"message":message}
const Json_message = JSON.stringify(Object_Message)
//sending the JSON formatted data to the server side
fetch('/SubmitForm', {method: 'POST',headers: {'Content-Type': 'application/json'},body: Json_message,credentials:"include"})
.then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json();})
.then(data => {console.log('Response data:', data);})
.catch(error => {console.error('There was a problem with the fetch operation:', error);});
}
}
`