要实现一个计算器页面，我们需要分别创建前端和后端部分。前端使用 Vue.js 框架，后端使用 Python 的 Flask 框架。
安装依赖
pip install flask
npm install -g vue
npm install -g @vue/cli
vue create calculator-frontend
cd calculator-frontend
npm run serve
在 calculator-frontend 目录下创建一个名为 src 的文件夹，并在其中创建一个名为 Calculator.vue 的文件。将以下代码粘贴到该文件中：
<template>
<div id="app">
<h1>简易计算器</h1>
<input type="text" v-model="expression" />
<button @click="calculate">计算</button>
<p>结果： {{ result }}</p>
</div>
</template>
<script>
export default {
data() {
return {
expression: "",
result: "",
};
},
methods: {
calculate() {
this.$axios.post("http://localhost:5000/calculate", {
expression: this.expression,
}).then((response) => {
this.result = response.data.result;
});
},
},
};
</script>
在项目根目录下创建一个名为 backend.py 的文件，将以下代码粘贴到该文件中：
from flask import Flask, request, jsonify
import ast
import operator
app = Flask(__name__)
@app.route("/calculate", methods=["POST"])
def calculate():
expression = request.json["expression"]
try:
result = eval_expr(expression)
return jsonify({"result": result})
except Exception as e:
return jsonify({"error": str(e)})
def eval_expr(expr):
ops = {ast.Add: operator.add, ast.Sub: operator.sub, ast.Mult: operator.mul, ast.Div: operator.truediv}
node = ast.parse(expr, mode="eval")
def _eval(node):
if isinstance(node, ast.Expression):
return _eval(node.body)
elif isinstance(node, ast.Num):
return node.n
elif isinstance(node, ast.BinOp):
left = _eval(node.left)
right = _eval(node.right)
return ops[type(node.op)](left, right)
else:
raise TypeError(node)
return _eval(node.body)
if __name__ == "__main__":
app.run(debug=True)
运行后端服务器
python backend.py
