用python flask框架写一个前后端分离的项目
时间: 2023-11-18 14:10:23 浏览: 49
好的,下面是一个简单的前后端分离的项目示例,使用 Python Flask 框架和 Vue.js 前端框架。
1. 环境配置
首先,需要安装 Python 3 和 Node.js。
然后,使用以下命令安装 Flask 和相关扩展:
```
pip install flask flask-cors flask-restful
```
2. 后端开发
在项目根目录下创建 `app.py` 文件,编写以下代码:
```python
from flask import Flask, jsonify
from flask_cors import CORS
from flask_restful import Api, Resource
app = Flask(__name__)
api = Api(app)
CORS(app)
class HelloWorld(Resource):
def get(self):
return jsonify({"message": "Hello, World!"})
api.add_resource(HelloWorld, "/api/hello")
if __name__ == "__main__":
app.run(debug=True)
```
这个代码创建了一个 Flask 应用,同时使用 Flask-RESTful 扩展创建了一个 `/api/hello` 的 API,返回一个 JSON 格式的消息。
3. 前端开发
在项目根目录下,使用以下命令初始化一个 Vue.js 项目:
```
vue create frontend
```
然后,进入 `frontend` 目录,使用以下命令安装 axios:
```
npm install axios --save
```
接着,创建一个 `src/App.vue` 文件,编写以下代码:
```html
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
message: "",
};
},
mounted() {
axios.get("http://localhost:5000/api/hello").then((res) => {
this.message = res.data.message;
});
},
};
</script>
```
这个代码创建了一个 Vue.js 应用,通过 axios 发送 HTTP 请求到 Flask 后端,获取 `/api/hello` 的响应,并显示在页面上。
4. 运行项目
在项目根目录下,使用以下命令分别启动 Flask 和 Vue.js 服务器:
```
python app.py
```
```
cd frontend
npm run serve
```
然后,打开浏览器,访问 `http://localhost:8080`,即可看到页面上显示的消息。
相关推荐
![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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)