本地构建
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
四、安装第三方库
激活一个虚拟环境,终端会话的环境配置就会被修改,之后你键入 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简读:
一、准备各种文件
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/
2.执行命令生成镜像
docker build -t python-flask .
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
变更
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部署同前面