【Python】【Flask】【字符串索引】计算人民币与美元的相互计算

人工智能86

简介

假设1美元等于7.0183人民币,1人民币等于0.1424美元,设计与编写解决"人民币与美元相互兑换"这-问题的程序。( 美元或者人民币采用输入的方式,输入的值为自己学号
最后三个必须在跑步截图中反映出来!您还可以设计接口,这不是必需的。

[En]

The last three must be reflected in the running screenshot! You can also design an interface, which is not required.

提交要求:
(1)共两个文件;
(2)第一个文件为.py文件;
(3)第二个文件学号+姓名+货币兑换word; .
(4)其中word文件中包含:程序代码截图、程序运行输入与结果截图

【本文要点】

1.本文前端使用HTML+CSS+JavaScript,后端采用Python Flask框架,实现计算人民币与美元的换算。

2.前端使用原生JS的方式向后端提交数据

【Python】【Flask】【字符串索引】计算人民币与美元的相互计算

本文的关键在于

1、如何使用原生JS向后端POST提交数据

2、Python Flask框架的简单使用(获取数据,返回数据)

Python Code

导包

from flask import Flask
from flask import request # 获取数据
from flask_cors import CORS # 解决跨域问题
app = Flask(__name__)
CORS(app, resources={r"/*": {"origins": "*"}}) # 解决跨域问题

设置首页

这里的代码不用细看,你只需要知道 @app.route("/",methods=["GET"]) 设置首页就可以了。
我们稍后将分析前端代码。

[En]

We will analyze the front-end code later.

@app.route("/",methods=["GET"])
def main():
    return r"""

    Title

    汇率计算
    待计算金额

            CNY
            USD

        function calc() {
            //创建XMLHttpRequest对象
            let obj
            if (window.XMLHttpRequest) {
                //IE7以上
                obj = new XMLHttpRequest();
            } else {
                //IE5、IE6
                obj = new ActiveXObject("Microsoft,XMLHTTP")
            }
            //规定请求类型,请求路径,是否异步
            obj.open("POST", "/calc", true)
            //发送请求
            let s = document.getElementById("select_type")
            let i = s.selectedIndex
            let v_2 = s.options[i].value
            let v_1 = document.getElementById("number").value
            let v = v_1 + v_2
            let value = "value=" + v
            obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  // 设置请求头
            obj.send(value)
            //请求完成后的处理
            obj.onreadystatechange = function (data) {
              console.log("data:",data)
                if (obj.readyState === 4 && obj.status === 200) {
                    //responseText:获取字符串形式的响应数据;responseXML:获取XML形式的响应数据
                  txt = obj.responseText
                  console.log(txt)
                    //JSON.parse();JSON字符串转化为JS对象;JSON.stringify():JS转为JSON字符串
                    let r = JSON.parse(txt)
                    //调用对象内的属性回填数据
                    document.getElementById("result").innerText=r["result"]+(r["type"]==="CNY"?"USD":"CNY")
                }else{
                  console.log("获取返回数据失败")
                }
            }

        }

"""

你可能会好奇为什么我设置了跨域,但是页面却不是分来的。
实际上我调试的时候,前端是单独的页面,而不是写在Python里面的。
【Python】【Flask】【字符串索引】计算人民币与美元的相互计算
所以你实际上可以这样做:

[En]

So you can actually go like this:

首页你就 return "hello word"
然后前端不管写在哪都行,只要Post地址正确就行。

计算的接口

@app.route("/calc",methods=["POST","GET"])
def calc():
    result=0
    value =request.values.get("value")
    print(value)
    if value=="":
        result=-1
    print("【INFO】", "用户输入", value)
    type = value[-3::1].upper()
    print("【INFO】", "类型为", type)

    try:
        number = int(value[:-3])
        print("【INFO】", "金额为", number)
    except:
        return -1
    if type == "CNY":
        # 表示输入的人民币,需要计算为美元
        result=number * 0.1424
    elif type == "USD":
        # 表示输入的美元,需要计算为人民币
        result=number / 0.1424
    print("【INFO】", "结果为",result)
    return {"result": result, "type": type}

这是最关键的地方,事实上代码并不多,只是我写的注释多。
我们要确认的是得到的参数格式是"1CNY"或者"1USD"这样的。当然,如果你不是这个格式,也可以,分析数据的时候改动一下就可以了。
以我的格式为例,数据+单位的格式。

[En]

Take my format as an example, the format of data + units.

我们得到的是一个完整的字符串,我们需要拆分数据和单位,我们可以根据单位来判断是美元对人民币还是人民币对美元。

[En]

What we get is a whole string, we need to split the data and units, and we can judge whether it is from US dollar to RMB or RMB to US dollar by the unit.

观察可知,单位都是三个字符,所以: value[-3::1] 来取出字符。-3就是从倒数第三个开始取,两个冒号中间是空的,啥也没写,代表取到结束为止,最后那个1代表的是步长为1。

1,2,3 步长为1
2,4,6步长为2
你知道步长意味着什么,对吧?

[En]

You know what step length means, right?

再通过 .upper()的方式将单位转为大写方便判断(考虑的是用户输入的可能是大写,有可能是小写)
这些都是Python基础,就在这里简单提一下。

问题0:设置请求方式

如果想要接收POST请求,需要设置请求方法支持POST

@app.route("/calc",methods=["POST","GET"])

我这样设置的是POST和GET请求都支持。关于这个地方,你只需知道methods需要的值是一个列表就行了

问题1:关于接收数据可能存在的问题

情况: print(request.data) 存在数据,但是 value =request.values.get("value")取不到数据。

错误:状态码500

原因:无法识别来自前端的数据

[En]

Reason: unable to recognize the data from the front end

解决方案:在前端发送数据时声明数据类型。例如

[En]

Solution: declare the data type when the data is sent from the front end. For example

 obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  // 设置请求头

这就是我在写作过程中遇到的问题。我想强调的是,“当前端发送数据时,一定要在头部声明数据类型。”

[En]

This is the problem I encountered in the process of writing. I want to emphasize that "when the front end sends data, be sure to declare the data type in the header."

Python Flask接受参数的方法有很多,你可以参考这篇文章:
Flask 1.1.2:request中存储参数的属性(form、args、data、json、files、values)使用简介_mola tutu的博客-CSDN博客_request.values

另外,量的换算、换算、加、减、乘、除都是加、减、乘、除的数值,我们得到的是一个字符串。

[En]

In addition, the amount conversion, conversion, addition, subtraction, multiplication and division are all numerical values that add, subtract, multiply and divide each other, and what we get is a string.

所以要将字符串转型。如果你前端不去限制数值类型,传过来的不是个数字,字符串转为数值类型的时候就会发生错误,所以要使用异常处理try。

问题2:返回结果

返回的结果要符合JSON格式。也就是你要返回的是Python字典,而不是单纯的一个数字,一个字符串。

    return {"result": result, "type": type}

启动

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

完整代码

# -*- coding: UTF-8 -*-
# 开发人员:萌狼蓝天
# 博客:Https://mllt.cc
# 笔记:Https://cnblogs.com/mllt
# 哔哩哔哩/微信公众号:萌狼蓝天
# 开发时间:2022/9/26
import json

from flask import Flask
from flask import request
from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources={r"/*": {"origins": "*"}})

@app.route("/calc",methods=["POST","GET"])
def calc():
    result=0
    value =request.values.get("value")
    print(value)
    if value=="":
        result=-1
    print("【INFO】", "用户输入", value)
    type = value[-3::1].upper()
    print("【INFO】", "类型为", type)

    try:
        number = int(value[:-3])
        print("【INFO】", "金额为", number)
    except:
        return -1
    if type == "CNY":
        # 表示输入的人民币,需要计算为美元
        result=number * 0.1424
    elif type == "USD":
        # 表示输入的美元,需要计算为人民币
        result=number / 0.1424
    print("【INFO】", "结果为",result)
    return {"result": result, "type": type}

@app.route("/",methods=["GET"])
def main():
    return r"""

    Title

    汇率计算
    待计算金额

            CNY
            USD

        function calc() {
            //创建XMLHttpRequest对象
            let obj
            if (window.XMLHttpRequest) {
                //IE7以上
                obj = new XMLHttpRequest();
            } else {
                //IE5、IE6
                obj = new ActiveXObject("Microsoft,XMLHTTP")
            }
            //规定请求类型,请求路径,是否异步
            obj.open("POST", "/calc", true)
            //发送请求
            let s = document.getElementById("select_type")
            let i = s.selectedIndex
            let v_2 = s.options[i].value
            let v_1 = document.getElementById("number").value
            let v = v_1 + v_2
            let value = "value=" + v
            obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  // 设置请求头
            obj.send(value)
            //请求完成后的处理
            obj.onreadystatechange = function (data) {
              console.log("data:",data)
                if (obj.readyState === 4 && obj.status === 200) {
                    //responseText:获取字符串形式的响应数据;responseXML:获取XML形式的响应数据
                  txt = obj.responseText
                  console.log(txt)
                    //JSON.parse();JSON字符串转化为JS对象;JSON.stringify():JS转为JSON字符串
                    let r = JSON.parse(txt)
                    //调用对象内的属性回填数据
                    document.getElementById("result").innerText=r["result"]+(r["type"]==="CNY"?"USD":"CNY")
                }else{
                  console.log("获取返回数据失败")
                }
            }

        }

"""

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

HTML Code


    Title

    汇率计算
    待计算金额

            CNY
            USD

        function calc() {
            //创建XMLHttpRequest对象
            let obj
            if (window.XMLHttpRequest) {
                //IE7以上
                obj = new XMLHttpRequest();
            } else {
                //IE5、IE6
                obj = new ActiveXObject("Microsoft,XMLHTTP")
            }
            //规定请求类型,请求路径,是否异步
            obj.open("POST", "http://127.0.0.1:5000/calc", true)
            //发送请求
            let s = document.getElementById("select_type")
            let i = s.selectedIndex
            let v_2 = s.options[i].value
            let v_1 = document.getElementById("number").value
            let v = v_1 + v_2
            let value = "value=" + v
            obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  // 设置请求头
            obj.send(value)
            //请求完成后的处理
            obj.onreadystatechange = function (data) {
              console.log("data:",data)
                if (obj.readyState === 4 && obj.status === 200) {
                    //responseText:获取字符串形式的响应数据;responseXML:获取XML形式的响应数据
                  txt = obj.responseText
                  console.log(txt)
                    //JSON.parse();JSON字符串转化为JS对象;JSON.stringify():JS转为JSON字符串
                    let r = JSON.parse(txt)
                    //调用对象内的属性回填数据
                    document.getElementById("result").innerText=r["result"]+(r["type"]==="CNY"?"USD":"CNY")
                }else{
                  console.log("获取返回数据失败")
                }
            }

        }

问题分析

分析:获取下拉列表框的选中值

            let s = document.getElementById("select_type") //获取到下拉列表框元素对象
            let i = s.selectedIndex //获取当先被选中值的索引
            let v_2 = s.options[i].value //根据索引获取值
            let v_1 = document.getElementById("number").value //获取文本框元素的值
            let v = v_1 + v_2 //将两个值以字符串的形式拼接起来
            let value = "value=" + v //写成后端可以识别的格式,多条数据使用&隔开

分析:将计算后的数据显示出来

document.getElementById("result").innerText=r["result"]+(r["type"]==="CNY"?"USD":"CNY")

在我们得到数据后,我们得到了计算值,它计算出我们传递给它的钱的类型。

[En]

After we get the data, we get the calculated value, and it calculates the type of money we passed to it.

价值可以直接使用,但货币的类型

[En]

The value can be used directly, but the type of money

你想一下,我们传给他的是人民币CNY,它分析之后,告诉我们是钱钱类型是CNY,而计算出来的钱钱类型是USD

所以我们获得CNY,就要转为USD;获得USD,就转为CNY

这里使用的是三项式运算符。

[En]

The trinomial operator is used here.

r["type"]==="CNY"?"USD":"CNY"

Some bugs

因为这只是一项任务,所以代码非常好。有几个地方可以进一步优化。

[En]

Because it's just an assignment, the code is pretty good. There are a few places that can be further optimized.

1.前端限制输入必须是数值,而不是字母汉字特殊字符等乱七八糟的

2.后端字符串转为数值时,不应该是转为int型,万一人家输入的有小数你对吧?

更新后的代码

1.前端传入为空时处理
2.数据类型使用Decimal
3.修改了汇率错误的问题

# -*- coding: UTF-8 -*-
# 开发人员:萌狼蓝天
# 博客:Https://mllt.cc
# 笔记:Https://cnblogs.com/mllt
# 哔哩哔哩/微信公众号:萌狼蓝天
# 开发时间:2022/9/26
from flask import Flask
from flask import request
from flask_cors import CORS
from decimal import Decimal
app = Flask(__name__)
CORS(app, resources={r"/*": {"origins": "*"}})

@app.route("/calc",methods=["POST","GET"])
def calc():
    result=0
    value =request.values.get("value")
    print(value)
    if value=="":
        result=-1
    print("【INFO】", "用户输入", value)
    type = value[-3::1].upper()
    print("【INFO】", "类型为", type)

    try:
        number = Decimal(value[:-3])
        print("【INFO】", "金额为", number)
    except:
        return -1
    if type == "CNY":
        # 表示输入的人民币,需要计算为美元
        result=number * Decimal("0.1424")
    elif type == "USD":
        # 表示输入的美元,需要计算为人民币
        result=number * Decimal("7.0183")
    print("【INFO】", "结果为",result)
    return {"result": result, "type": type}

@app.route("/",methods=["GET"])
def main():
    return r"""

    Title

    汇率计算
    待计算金额

            CNY
            USD

        function calc() {
            //创建XMLHttpRequest对象
            let obj
            if (window.XMLHttpRequest) {
                //IE7以上
                obj = new XMLHttpRequest();
            } else {
                //IE5、IE6
                obj = new ActiveXObject("Microsoft,XMLHTTP")
            }
            //规定请求类型,请求路径,是否异步
            obj.open("POST", "http://127.0.0.1:5000/calc", true)
            //发送请求
            let s = document.getElementById("select_type")
            let i = s.selectedIndex
            let v_2 = s.options[i].value
            let v_1 = document.getElementById("number").value
            if(v_1==="" || v_1===null){
                v_1="0"
            }
            let v = v_1 + v_2
            let value = "value=" + v
            obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  // 设置请求头
            obj.send(value)
            //请求完成后的处理
            obj.onreadystatechange = function (data) {
              console.log("data:",data)
                if (obj.readyState === 4 && obj.status === 200) {
                    //responseText:获取字符串形式的响应数据;responseXML:获取XML形式的响应数据
                  txt = obj.responseText
                  console.log(txt)
                    //JSON.parse();JSON字符串转化为JS对象;JSON.stringify():JS转为JSON字符串
                    let r = JSON.parse(txt)
                    //调用对象内的属性回填数据
                    document.getElementById("result").innerText=r["result"]+(r["type"]==="CNY"?"USD":"CNY")
                }else{
                  console.log("获取返回数据失败")
                }
            }

        }

"""

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

Original: https://www.cnblogs.com/mllt/p/python-flask-js-post.html
Author: 萌狼蓝天
Title: 【Python】【Flask】【字符串索引】计算人民币与美元的相互计算



相关阅读

Title: 我的重装python3.7+tensorflow2.1.0+opencv+keras过程记录

安装Anaconda

1.anaconda地址下载地址:清华大学开源软件镜像站

2.版本对应关系查看:anaconda python 版本对应关系

3.配环境:
D:\MySoftware\Anaconda3
D:\MySoftware\Anaconda3\Scripts
D:\MySoftware\Anaconda3\Library
D:\MySoftware\Anaconda3\Library\mingw-w64

装好了命令行试运行:
【Python】【Flask】【字符串索引】计算人民币与美元的相互计算
一直报warning,卸载重装了好几次都没成功去掉,没有找到一劳永逸的去除办法,但好像说没什么影响
提供一种单次有效的办法:在命令行输入python出现"Warning:This Python interpreter is in a conda environment, but the environment has no,评论区有另一种方法,有人说有用但我看不太懂什么意思

后来发现环境没有激活的话tensorflow库是用不了的,我原来使用的VSCode也识别不到tensorflow库,可能是VSCode和Anaconda没有关联起来,于是我卸载了原来的VSCode,从Anaconda中重新下载,就可以在VSCode中正常编译了。

; 安装tensorflow

1.命令行输入如下命令判断python环境可以下载哪些版本的tensorflow:

conda search --full --name tensorflow

安装过程参考:

①详细:win10+python3.7====安装tensorflow-gpu2.1步骤
②精炼:python3.7安装TensorFlow 2.1.0

2.配置好cuda环境后可以用以下命令查看CUDA是否安装成功:

nvcc -V

安装成功会打印出驱动版本信息:
【Python】【Flask】【字符串索引】计算人民币与美元的相互计算

3.安装tensorflow的时候碰到这个问题
【Python】【Flask】【字符串索引】计算人民币与美元的相互计算
不确定要不要update...选了yes

4.最后按照上文中的测试代码测试一下:

import tensorflow as tf
print('GPU:', tf.test.is_gpu_available())

跑得有点久...

【Python】【Flask】【字符串索引】计算人民币与美元的相互计算
但应该是成功了 开心^^

就知道没有那么简单。。。
用的时候发现下载的tensorflow是1.14.0版本的
【Python】【Flask】【字符串索引】计算人民币与美元的相互计算
1.14要求的cuda10.0,vscode报错:

ImportError: Could not find 'cudart64_100.dll'. TensorFlow requires that this DLL be installed in a directory that is named in your %PATH% environment variable. Download and install CUDA 10.0 from this URL: https://developer.nvidia.com/cuda-90-download-archive

【Python】【Flask】【字符串索引】计算人民币与美元的相互计算
命令行pip报错:

ERROR: tensorflow 1.14.0 requires google-pasta>=0.1.6, which is not installed.

安装google-pasta
【Python】【Flask】【字符串索引】计算人民币与美元的相互计算
奈何命令行愿意用tensorflow1.14,vscode不愿意,决定卸载1.14重新装2.1.0
先用 pip uninstall tensorflow卸载,再用命令 conda install tensorflow==需要的版本号 就能重装

一些可能遇到的问题:
1.报错:ImportError: numpy.core.multiarray failed to import
解决办法:【python】踩坑:ImportError: numpy.core.multiarray failed to import
tensorflow与numpy版本不匹配:最全tensorflow,PyTorch ,numpy和keras 版本匹配汇总
2.可能是由于多次重装,会有一些库不匹配的问题,像这样:
【Python】【Flask】【字符串索引】计算人民币与美元的相互计算
我的解决办法:用命令 pip uninstall ***pip install **==%%% 卸载和安装要求的版本

; 安装opencv-python

指路:Python3.7中安装openCV库
验证指令:

import cv2
cv2.__version__

安装keras

主要是版本要一一对应:
Tensorflow和Keras版本对照表
tensorflow和keras对应版本

其他:
百宝箱

Original: https://blog.csdn.net/Jiawen_/article/details/123791675
Author: 感觉今天有点冷
Title: 我的重装python3.7+tensorflow2.1.0+opencv+keras过程记录