前后端分离计算器
这个作业属于哪个课程 | https://bbs.csdn.net/forums/ssynkqtd-05?typeId=5171427 |
---|---|
这个作业要求在那里 | https://bbs.csdn.net/topics/617377308 |
课程目标 | 实现前后端分离计算器 |
其他参考文献 | https://kaifa.baidu.com/searchPage?wd=CSS%E5%AD%A6%E4%B9%A0%E6%95%99%E7%A8%8B&hmsr=aladdin |
git仓库链接和代码规范链接
gitcode
PSP表格
PSP | Personal Software Process Stages | 预估耗时(分钟) | 实际耗时(分钟) |
---|---|---|---|
•Planning | •计划 | 30 | 40 |
• Estimate | • 估计这个任务需要多少时间 | 300 | 400 |
Development | 开发 | 70 | 70 |
• Analysis | • 需求分析 (包括学习新技术) | 100 | 200 |
• Design Spec | • 生成设计文档 | 20 | 20 |
• Design Review | • 设计复审 | 10 | 10 |
• Coding Standard | • 代码规范 (为目前的开发制定合适的规范) | 10 | 10 |
• Design | • 具体设计 | 20 | 30 |
• Coding | • 具体编码 | 100 | 200 |
• Code Review | • 代码复审 | 10 | 5 |
• Test | • 测试(自我测试,修改代码,提交修改) | 50 | 60 |
Reporting | 报告 | 60 | 60 |
• Test Repor | • 测试报告 | 30 | 20 |
• Size Measurement | • 计算工作量 | 10 | 10 |
• Postmortem & Process Improvement Plan | • 事后总结, 并提出过程改进计划 | 20 | 30 |
合计 | 840 | 1165 |
成品展示
基本运算
科学运算
清零回退
查看历史记录
数据库
利息计算
设计实现过程
设计思想
因为上次作业没怎么准备,没有任何基础,做的不怎么样,这次就重写了所有部分,参照百度计算器做的ui和功能,主要就是通过原型设计完成,先把ui完成,然后再一步一步的完成各个功能
前端
前端就是参照百度计算器ui,使用html+css+javascript做的,因为在数据采集课上用的框架就是flask和XMLHttpRequest通信,所以前端基本就是这么做的。
后端
使用flask搭起一个框架,主要实现了连接数据库,存储历史记录,查找历史记录
数据库存储
数据库存储是使用mysl存储,用navicate可视化数据库。与接口是pymysql进行增删改查。
关键代码
前后端通信处理处理
@app.route("/")
def ui():
return flask.render_template("cal.html")
@app.route('/save_history', methods=['POST'])
def save_history():
data = request.get_json()
expression = data['expression']
result = data['result']
time= datetime.now()
# 插入数据
cursor.execute("INSERT INTO calculator (time,expression, result) VALUES (%s, %s, %s)",
(time,expression, result))
mydb.commit()
return 'success'
@app.route('/get_calculator_data')
def get_calculator_data():
cursor.execute("SELECT expression,result FROM calculator")
results = cursor.fetchall()
calculations = []
for row in results:
calculations.append(list(row))
return jsonify({'data': calculations})
@app.route('/clear_table', methods=['POST'])
def clear_table():
cursor.execute("DELETE FROM calculator")
mydb.commit()
return 'success'
存储数据处理
app = Flask(__name__,template_folder=r"D:\python代码\pythonProject\spider\selenium\templates")
CORS(app, supports_credentials=True)
# 连接MySQL数据库
mydb = pymysql.connect(
host="127.0.0.1",
port=3306,
user="root",
password="123456",
database="crawl"
)
cursor = mydb.cursor()
cursor.execute('''CREATE TABLE IF NOT EXISTS calculator
(time VARCHAR(255),
expression VARCHAR(255),
result VARCHAR(255),
created_at TIMESTAMP
)''')
mydb.commit()
数据存储指令
cursor.execute("INSERT INTO calculator (time,expression, result) VALUES (%s, %s, %s)",
(time,expression, result))
mydb.commit()
前端几个比较好看的ui细节设计
格子对角灰暗对比
.calculator .op {
background-image: linear-gradient(135deg, #D9DCE8, rgb(255 255 255 / 30%));
box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, 0.8),
inset -1px -1px 1px 0px rgba(40, 49, 85, 0.3),
1px 1px 3px 0px rgba(40, 49, 85, 0.1);
}
鼠标悬停时加个颜色
.buttons button:hover {
background-color: grey;
}
按等于号后Ans上移动,input展示result
document.getElementById('result_show').value="Ans="+tempt_expr;
document.getElementById('input_show').value = expr;
心路历程和收获
这次一个人完成前后端开发,学到了很多,知道了前后端通信接口一定要交流好,不然数据传输就可能出点问题,基本基础开始学习的,学到了很多前端html和css以及js。还需努力,继续学习