简介
假设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"""
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里面的。
所以其实你可以这样：
首页你就 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"""
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")
我们获取了数据之后，得到的是计算好的值，还有它计算出来 我们传给它的钱钱类型
值可以直接用，但是钱钱类型
你想一下，我们传给他的是人民币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"""
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】【字符串索引】计算人民币与美元的相互计算
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/611055/
转载文章受原作者版权保护。转载请注明原作者出处！