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

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

实际上我调试的时候，前端是单独的页面，而不是写在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()