网站制作有限公司,广南网站建设,企业管理咨询公司前景,做旅游攻略的网站这一期开始开发header部分#xff0c;预期实现两个目标#xff1a;
创建 Flask 项目导入旅游数据后端实现旅游数据的查询
1 python 环境 开发环境
python 安装和pycharm安装需要去网上找包#xff0c;建议python使用3.8 或者3.9版本
2 新建项目
我们新建一个文件…这一期开始开发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 Flaskdef create_app():app Flask(__name__)from .routes import main as main_blueprintapp.register_blueprint(main_blueprint)return appconfig.py
class Config:passroutes.py
from flask import Blueprint, jsonifymain Blueprint(main, __name__)main.route(/test, methods[GET])
def test():data [{id: 1, name: John}, {id: 2, name: Jane}]return jsonify(data)requirements.txt
Flaskrun.py
from app import create_appapp create_app()if __name__ __main__:app.run(debugTrue, port8080)然后启动run.py 第一个Flask程序就已经搞定了! 3 前端与后端对接
下面测试一下前端与后端的对接打开前端项目安装axios
npm install axios创建一个文件夹api新建文件request.js这个是对axios进行封装
import axios from axiosconst 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/tourmounted() {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接口的结果
