Flask环境搭建

本地构建
将项目部署到云服务器
- 一、准备各种文件
- 二、在服务器上创建容器
Vue使用Axios调用接口
- 一、准备各种文件
  - vue
  - python
- 二、部署

本地构建

Python 自带的 venv 创建虚拟环境，安装 Flask
可以不在本地构建，直接在服务器安装

一、创建项目目录

创建文件夹 flask-test

mkdir flask-test

进入文件夹

cd flask-test

二、创建虚拟环境

默认情况下Python 3.3 及更高版本中虚拟环境已经成为内置模块

python -m venv .

命令执行完成后，当前目录下就会新增一个名为 venv 的目录来存储这个虚拟环境的相关文件。

使用这个命令来让 Python 运行 venv 包，它会创建一个名为 venv 的虚拟环境。命令中的第一个“venv”是 Python 创建虚拟环境的模块的名称，第二个是虚拟环境名称(可以直接用一个点代表命名和当前所在文件夹同名)

三、激活虚拟环境

创建完毕之后还需要激活才能够进入这个虚拟环境。要激活你的全新虚拟环境，需使用以下命令：

# 进入Scripts
cd Scripts
# 激活命令
.\activate

1-1653816771608

四、安装第三方库

激活一个虚拟环境，终端会话的环境配置就会被修改，之后你键入 python 的时候，实际上是调用的虚拟环境中的 Python 解释器。此外，终端提示符也被修改成包含被激活的虚拟环境的名称的格式。这种激活是临时的和私有的，因此在关闭终端窗口时它们将不会保留，也不会影响其他的会话。那么，当你需要同时打开多个终端窗口来调试不同的应用时，每个终端窗口都可以激活不同的虚拟环境而不会相互影响。

一般 pip 下载会很慢，可以参考 Python- 解决PIP下载安装速度慢

pip install --user -U pip  # 更新 pip，也可以不更新。
pip install flask
pip install django

更新 pip 的问题：
可以参考我的《python 虚拟环境中更新 pip，解决 PermissionError 问题》

如果使用 pip install -U pip 的时候遇到 “PermissionErro” 无权访问磁盘读取的问题，按照网上的教程在命令中赋予用户权限：pip install --user -U pip。但由于安装出错，原来的 pip 已经卸载了，所以要手动删掉 venv 文件夹重新创建虚拟环境。
如果一开始就使用 python -m pip install --upgrade pip 来更新 pip，也会提示安装成功，但这是使用了全局安装过的 pip，而不是在这个虚拟环境中。运行 pip list 还可以看到以前安装的其他第三方包。所以，解决办法跟上面一样，重来，然后运行 pip install --user -U pip。

五、退出虚拟环境

# 直接敲
deactivate

六、删除虚拟环境

直接手动删掉 venv 文件夹

将项目部署到云服务器

需要提前安装docker环境
由于 flask自带的web server Werkzeug 太弱了不适合生产环境所以一般会使用第三方的webserver gunican

gunicorn官方手册：https://docs.gunicorn.org/en/stable/settings.html#config

gunicorn简读：

2-1653816795965

一、准备各种文件

3-1653816805898

hello.py

from flask import Flask

app = Flask(__name__)  # 记住这里的变量名app


@app.route('/')
def index():
    return 'Hello World'


if __name__ == '__main__':
    app.run(debug=True)

requirements.txt

certifi==2020.12.5
chardet==4.0.0
idna==2.10
requests==2.25.1
urllib3==1.26.3
Flask==2.0.1

Dockerfile

FROM python:3.7.1

WORKDIR /code

ADD . /code

RUN pip install --upgrade pip -i https://pypi.tuna.tsinghua.edu.cn/simple

RUN pip install --no-cache-dir -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple

RUN pip install gunicorn -i https://pypi.tuna.tsinghua.edu.cn/simple

EXPOSE 80

CMD gunicorn hello:app --bind 0.0.0.0:80

二、在服务器上创建容器

1.将文件移动到服务器

cd /home/xjs/amber/docker-flask/

4-1653816824015

2.执行命令生成镜像

docker build -t python-flask .

5-1653816829753

3.执行命令运行镜像

-测试执行
docker run -it --rm -p 9000:80 python-flask
-在后台运行
sudo docker run --name python-flask-test -p 9000:80 python-flask

这时可以使用服务器ip:端口号例如：

http://39.103.135.221:9000/ 来访问

注意服务器需要开启9000端口的访问权限

Vue使用Axios调用接口

一、准备各种文件

vue

testPythonApi.vue

<template>
  <div>测试调用pythonAPI</div>
</template>

<script>
export default {
  components: {},
  props: {},
  data () {
    return {
    }
  },
  created () {
    this.transferApi()
  },
  methods: {
    transferApi () {
      this.$axios({
        method: 'get',
        // url: '/amber/urlData/', // 接口地址
        baseURL: '/usepython'
      }).then(response => {
        console.log('2021年07月24日22:00:14 testPythonApi.vue[response]——[response] :', response)
      }).catch(error => console.log(error, 'error'))
    }
  }
}
</script>
<style scoped>
</style>

默认的axios配置

vuetemp\src\request\http.js

import axios from 'axios' // 引入axios
import router from '@/router/index' // 使用路由跳转

import { MessageBox, Message } from 'element-ui' // 引入element-ui消息提示

// 环境的切换
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = '/dev'
  // http://127.0.0.1:8801
} else if (process.env.NODE_ENV === 'debug') {
  axios.defaults.baseURL = '/api'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = '/api'
}

// 超过了时间，就会告知用户当前请求超时，请刷新，单位ms
axios.defaults.timeout = 15000

// 添加 请求 拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  let loginToken = localStorage.getItem('x-login-token')
  config.headers.token = loginToken
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加 响应 拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  console.log('2021年04月30日00:43:47 http.js[网络正常]——[null] :', null)
  console.log('2021年07月05日21:29:20 http.js[相应数据]——[response] :', response)
  if (response.data.code === 401) {
    console.log('2021年04月29日23:45:01 http.js[]——[null] :', response.data.message)
    // router.push({path: '/login', name: 'login', redirect: true})
    // 登录失败，清空token
    localStorage.removeItem('x-login-token')
    location.reload()// 刷新页面
    Message.error(response.data.message)
  }
  if (response.data.code === 200) {
    console.log('2021年04月30日00:40:53 http.js[200]——[null] :', null)
    return response.data // 异步操作执行成功
  } else if (response.data.code === 500) {
    let message = response.data.message
    if (response.data.data && response.data.data.msg) {
      message = message + (':' + response.data.data.msg)
    }
    console.log('2021年04月29日23:48:55 http.js[null]——[null] :', message + (':' + response.data.data.msg))
    return Promise.reject(response) // 异步操作执行失败
  } else {
    // 未触发后端状态参数，原样返回
    return response
  }
}, function (error) {
  // 对响应错误做点什么
  console.log('2021年04月29日23:46:25 http.js[响应错误]——[error] :', error)
  return Promise.reject(error)
})

export default axios

使用proxyTable代理解决跨域，部署后使用nginx代替

vuetemp\config\index.js

const path = require('path')
module.exports = {
  dev: {
    //解决跨域
    proxyTable: {
      // 调用python接口
      '/usepython': {
        target: 'http://39.103.135.221:9000',
        changeOrigin: true,
        pathRewrite: {
          '^/usepython': ''
        }
      }
    },
  },
}

python

变更

hello.py

from flask import Flask, jsonify

app = Flask(__name__)  # 记住这里的变量名app


@app.route('/')
def index():
    return jsonify({'author': 'xjs'})


if __name__ == '__main__':
    app.run(debug=True)

变更

requirements.txt

certifi==2020.12.5
chardet==4.0.0
idna==2.10
requests==2.25.1
urllib3==1.26.3
Flask==2.0.1
jsonify==0.5

二、部署

python部署同前面

SwordJS