flask简洁前端页面
时间: 2023-10-23 14:09:18 浏览: 68
要创建一个简洁的前端页面,可以使用Flask和HTML来实现。下面是一个示例:
首先,确保已经安装了Flask。然后,在你的Flask应用程序中创建一个名为`templates`的文件夹,用于存放HTML文件。
在`templates`文件夹中,创建一个名为`index.html`的文件,作为主页面。在这个文件中,可以添加一些简单的HTML元素,例如一个标题和一些文本。
```html
<!DOCTYPE html>
<html>
<head>
<title>简洁前端页面</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
p {
color: #666;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>欢迎来到简洁前端页面</h1>
<p>这是一个使用Flask创建的简洁前端页面示例。</p>
</body>
</html>
```
接下来,在你的Flask应用程序的主文件中,创建一个路由来渲染这个HTML页面。
```python
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()
```
请确保Flask应用程序的主文件与`templates`文件夹位于同一目录下。
现在,当你运行Flask应用程序并访问根URL(例如`http://localhost:5000/`),你应该能够看到简洁的前端页面了。
这只是一个简单的示例,你可以根据需要在HTML中添加更多元素和样式来创建更丰富的前端页面。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)