【星海出品】flask（一）demo

如何安装很早就讲过了，这里就省略了

创建虚拟环境

python -m venv ./venv

激活虚拟环境

source venv/Scripts/activate

退出虚拟环境

deactivate

打开一个vue项目，安装一些东西，然后启动

npm run serve
npm install element-plus --save
npm install axios --save

pip3 freeze > requirements.txt
cat requirements.txt
blinker==1.6.2
click==8.1.7
colorama==0.4.6
docx==0.2.4
fire==0.5.0
Flask==3.0.0
fonttools==4.39.3
itsdangerous==2.1.2
Jinja2==3.1.2
lxml==4.9.2
MarkupSafe==2.1.3
mod-wsgi @ file:///C:/Users/wang/Downloads/mod_wsgi-4.9.2-cp310-cp310-win_amd64.whl#sha256=fcb20934ba7e732d9407644f2e40dd73beac04013590ead5e16546a160411684
numpy==1.24.3
opencv-python==4.7.0.72
pdf2docx==0.5.6
Pillow==9.5.0
PyMuPDF==1.22.2
python-docx==0.8.11
six==1.16.0
termcolor==2.3.0
Werkzeug==3.0.0

写了一个简单的flask接口
命名随便命名，python直接启动就可。
企业级别启动会涉及到并发等问题。
可以使用 gunicorn 组件来启动。
详细功能可自己百度 gunicorn 的详细功能。

from flask import Flask,request
from flask import render_template
from flask import jsonify

app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False  # 禁止中文转义

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


@app.route("/user/login", methods=["POST"])
def user_login():
    """
    用户登录
    :return:
    """
    data = request.get_json()
    userName = data.get("userName")
    password = data.get("password")
    if userName == "admin" and password == "123456":
        return jsonify({
            "code": 0,
            "data": {
                "token": "666666"
            }
        })
    else:
        return jsonify({
            "code": 99999999,
            "msg": "用户名或密码错误"
        })


@app.route("/user/info", methods=["GET", "POST"])
def user_info():
    """
    获取当前用户信息
    :return:
    """
    token = request.headers.get("token")
    if token == "666666":
        return jsonify({
            "code": 0,
            "data": {
                "id": "1",
                "userName": "admin",
                "realName": "张三",
                "userType": 1
            }
        })
    return jsonify({
        "code": 99990403,
        "msg": "token不存在或已过期"
    })


@app.route('/my/blog/')
def blog_detail(blog_id):
    return 'you doing access {}'.format(blog_id)


@app.route('/book/list')
def book_detail():
    page = request.args.get('page',default=1,type=int)
    return '你获取的是{}'.format(page)


@app.route('/book/index')
def template():
    return render_template('book.html')


if __name__ == '__main__':
    app.run(host="0.0.0.0",debug=True)
# 增加host="0.0.0.0"
# 提供了局域网IP网文

写了一个简单vue访问界面，使用axios访问。之前讲了VUE的使用，这里就不展开了，只显示了axios界面
更多功能详情自己查看axios的功能，UI设计可以直接套用阿里或其他公司等完善的UI组件，这里就不展开了。

<template>
  <div>
    <p>账号
      <input type="text" v-model="UserNameA">
    p>
    <p>密码
      <input type="text" v-model="PassWordA">
    p>
    <button type="primary" @click="getMsg"> 获取token button>
    <button @click="consoleLog"> 验证 {{CheckV}} button>
    <button type="primary" @click="getName">获取名字button>
    <div>用户名：{{ this.userName }}div>
    <div>姓名：{{ this.userRealName }}div>
  div>
template>

<script>
// @ is an alias to /src
import axios from "axios";
export default {
  data() {
    return {
      user: {},
      token: "null",
      CheckV: "",
      userName: "",
      userRealName: ""
    };
  },
  methods:{
      getMsg(){
        console.log(this.UserNameA),
        console.log(this.PassWordA),
        this.token = axios.post(
          "/api/user/login",
          {
            "userName": this.UserNameA,
            "password": this.PassWordA
          },
          {
            headers:{},
          }
        ).then((res) => {
          if (res.data.code === 0){
            this.token = res.data.data.token;
          }
          }
        )
      },
      consoleLog(){
        console.log(this.token),
        this.CheckV = "True"
      },
      getName(){
      axios
      .post(
        "/api/user/info",
        {},
        {
          headers: {
            token: this.token,
          },
        }
      )
      .then((res) => {
        if (res.data.code === 0) {
          this.user = res.data.data;
        }
      });
      this.userName = this.user.userName,
      this.userRealName = this.user.realName
      },
  }
};
script>

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})
module.exports = {
  devServer: {
    // 设置代理
    proxy: {
      "/api": {
        target: "http://localhost:5000", // 访问数据的计算机域名
        ws: true, // 是否启用websockets
        changOrigin: true, //开启代理,
        pathRewrite: { // 重写代理规则，/api开头，代理到/
          '^/api': '/'
          // 例：/api/user/login代理到
          // http://localhost:5000/user/login
        }
      }
    }
  }
};