【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()

posted @ 2022-09-26 16:21 萌狼蓝天阅读(143) 评论(0) 编辑收藏举报

刷新页面返回顶部

萌狼工作室

萌狼蓝天伴姬一生

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

简介

Python Code

导包

设置首页

计算的接口

问题0：设置请求方式

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

问题2：返回结果

启动

完整代码

HTML Code

问题分析

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

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

Some bugs

更新后的代码

公告

萌狼工作室

萌狼蓝天 伴姬一生

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

简介

Python Code

导包

设置首页

计算的接口

问题0：设置请求方式

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

问题2：返回结果

启动

完整代码

HTML Code

问题分析

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

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

Some bugs

更新后的代码

公告

萌狼蓝天伴姬一生