这一期开始开发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接口的结果