基于vue和flask搭建一个测试平台
时间: 2024-06-01 08:03:35 浏览: 17
首先,需要安装Vue和Flask。
1. 安装Vue
Vue可以通过npm进行安装,安装命令如下:
```
npm install -g vue-cli
```
2. 安装Flask
Flask可以通过pip进行安装,安装命令如下:
```
pip install Flask
```
3. 创建Vue项目
使用Vue-cli创建一个新的Vue项目,命令如下:
```
vue init webpack my-project
```
4. 创建Flask项目
创建一个Flask项目,命令如下:
```
mkdir flask-app
cd flask-app
touch app.py
```
5. 编写Flask代码
在app.py中编写Flask代码,如下所示:
```python
from flask import Flask, jsonify, request
app = Flask(__name__)
@app.route('/api/hello', methods=['GET'])
def hello():
return jsonify({'message': 'Hello, World!'})
if __name__ == '__main__':
app.run(debug=True)
```
6. 编写Vue代码
在my-project目录下,打开src/components目录,创建一个Hello.vue文件,编写如下代码:
```vue
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
message: ''
}
},
mounted () {
this.$http.get('/api/hello').then(response => {
this.message = response.data.message
})
}
}
</script>
```
7. 运行项目
在my-project目录下,运行以下命令启动Vue项目:
```
npm run dev
```
在flask-app目录下,运行以下命令启动Flask项目:
```
python app.py
```
访问http://localhost:8080,即可看到页面上显示“Hello, World!”
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)