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

简介
Python Code
HTML Code
- 问题分析
  - 分析：获取下拉列表框的选中值
  - 分析：将计算后的数据显示出来
Some bugs
更新后的代码

简介

假设1美元等于7.0183人民币，1人民币等于0.1424美元，设计与编写解决"人民币与美元相互兑换"这-问题的程序。( 美元或者人民币采用输入的方式，输入的值为自己学号
后三位，必须在运行截图中体现出来!也可设计一一个界面，界面不做要求)
提交要求:
(1)共两个文件;
(2)第一个文件为.py文件;
(3)第二个文件学号+姓名+货币兑换word; .
(4)其中word文件中包含:程序代码截图、程序运行输入与结果截图

【本文要点】

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

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

本文的关键在于

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"]) 设置首页就可以了。

前端代码我们会在后面分析的。

@app.route("/",methods=["GET"])
def main():
    return r"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form onclick="return false">
    <h2>汇率计算</h2>
    <label for="number">待计算金额</label>
    <input type="number" id="number">
    <label>
        <select id="select_type">
            <option>CNY</option>
            <option>USD</option>
        </select>
    </label>
    <input type="submit" value="计算" onclick="calc()">
    <p id="result"></p>
    <script>
        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("获取返回数据失败")
                }
            }

        }
    </script>
</form>
</body>
</html>    """

你可能会好奇为什么我设置了跨域，但是页面却不是分来的。

扫描二维码关注公众号，回复： 14542029 查看本文章

实际上我调试的时候，前端是单独的页面，而不是写在Python里面的。

所以其实你可以这样：

首页你就 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”这样的。当然，如果你不是这个格式，也可以，分析数据的时候改动一下就可以了。

就以我的格式为例，数据+单位的格式

我们得到的是一整个字符串，就要拆分数据和单位，就可以通过单位判断是美元转人民币还是人民币转美元。

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

1，2，3 步长为1

2，4，6步长为2

这你懂步长的意思了吧

再通过.upper()的方式将单位转为大写方便判断(考虑的是用户输入的可能是大写，有可能是小写)

这些都是Python基础，就在这里简单提一下。

问题0：设置请求方式

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

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

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

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

‍

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

错误：状态码500

原因：无法识别前端传来的数据

解决方案：前端传来数据时声明数据类型。例如

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

这是我在写的过程中遇到的问题，要强调的是“前端传数据过来时，一定要在头部声明数据类型”

Python Flask接受参数的方法有很多，你可以参考这篇文章：

Flask 1.1.2：request中存储参数的属性(form、args、data、json、files、values)使用简介_mola tutu的博客-CSDN博客_request.values

另外，要进行金额换算，换算什么的，加减乘除啊，都是数值在相互加减乘除，而我们拿到的是字符串

所以要将字符串转型。如果你前端不去限制数值类型，传过来的不是个数字，字符串转为数值类型的时候就会发生错误，所以要使用异常处理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"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form onclick="return false">
    <h2>汇率计算</h2>
    <label for="number">待计算金额</label>
    <input type="number" id="number">
    <label>
        <select id="select_type">
            <option>CNY</option>
            <option>USD</option>
        </select>
    </label>
    <input type="submit" value="计算" onclick="calc()">
    <p id="result"></p>
    <script>
        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("获取返回数据失败")
                }
            }

        }
    </script>
</form>
</body>
</html>    """


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

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form onclick="return false">
    <h2>汇率计算</h2>
    <label for="number">待计算金额</label>
    <input type="number" id="number">
    <label>
        <select id="select_type">
            <option>CNY</option>
            <option>USD</option>
        </select>
    </label>
    <input type="submit" value="计算" onclick="calc()">
    <p id="result"></p>
    <script>
        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("获取返回数据失败")
                }
            }

        }
    </script>
</form>
</body>
</html>

问题分析

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

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")

我们获取了数据之后，得到的是计算好的值，还有它计算出来我们传给它的钱钱类型

值可以直接用，但是钱钱类型

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

所以我们获得CNY，就要转为USD；获得USD，就转为CNY

这里运用了三目运算符的写法

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

Some bugs

因为只是个作业，代码写的比较水。有几个地方可以继续优化一下

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"""
     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form onclick="return false">
    <h2>汇率计算</h2>
    <label for="number">待计算金额</label>
    <input type="number" id="number">
    <label>
        <select id="select_type">
            <option>CNY</option>
            <option>USD</option>
        </select>
    </label>
    <input type="submit" value="计算" onclick="calc()">
    <p id="result"></p>
    <script>
        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("获取返回数据失败")
                }
            }

        }
    </script>
</form>
</body>
</html>

    """


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