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

简介

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

【本文要点】

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

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

image

本文的关键在于

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里面的。

image

所以其实你可以这样:

首页你就 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()

猜你喜欢

转载自blog.csdn.net/ks2686/article/details/127057624