阅读量:0
这一期开始开发header部分,预期实现两个目标:
- 创建 Flask 项目
- 导入旅游数据
- 后端实现旅游数据的查询
1 python 环境 & 开发环境
python 安装和pycharm安装需要去网上找包,建议python使用3.8 或者3.9版本
2 新建项目
我们新建一个文件夹叫tour-flask, 然后用pycharm去打开。
创建文件夹app,然后再里面创建三个文件 init.py , routes.py 和 config.py
在根目录下创建run.py 和依赖文件requirements.txt
然后分别写几个文件:
__init__.py
from flask import Flask def create_app(): app = Flask(__name__) from .routes import main as main_blueprint app.register_blueprint(main_blueprint) return app
config.py
class Config: pass
routes.py
from flask import Blueprint, jsonify main = Blueprint('main', __name__) @main.route('/test', methods=['GET']) def test(): data = [{'id': 1, 'name': 'John'}, {'id': 2, 'name': 'Jane'}] return jsonify(data)
requirements.txt
Flask
run.py
from app import create_app app = create_app() if __name__ == '__main__': app.run(debug=True, port=8080)
然后启动run.py ,第一个Flask程序就已经搞定了!
3 前端与后端对接
下面测试一下前端与后端的对接,打开前端项目,安装axios
npm install axios
创建一个文件夹api,新建文件request.js,这个是对axios进行封装:
import axios from 'axios' const service = axios.create({ baseURL: '/api', timeout: 1200, }) export default service
然后新建一个文件tour.js:
import request from '@/api/request' // 测试 export function test() { return request({ url: '/test', method: 'get' }) }
下面直接修改Dashboard.vue,添加以下部分测试:
import {test} from "@/api/tour" mounted() { test().then(res=>{ console.log(res.data) }) }
修改vue.config.js 添加以下内容:
devServer: { port: 8999, // 端口号配置 // open: true // 自动打开浏览器 proxy: { "/api": { target: "http://localhost:8080", changeOrigin: true, ws: false, pathRewrite: { "^/api": "" } } } },
4 测试
然后把前端服务重新启动下,现在我们的端口启动在8999上了,因为上面改了端口,然后利用浏览器的开发者模式查看控制台,可以看到console.log打印出来的日志是访问后端的localhost:8080/test接口的结果