一、实验背景
实验目的：
① 掌握软件开发的基本流程。
② 掌握常用的软件开发方式和工具。
实验内容：
① 设计并实现一个包含登录界面的计算器软件。
② 软件需具备历史记录功能，能保存用户计算记录。
二、实验要求
1.完成软件的UI设计、使用Visio设计软件中所涉及的所有流程图。
2.选择合适的集成开发环境和工具完成计算器软件的开发
3.将开发好软件进行测试并截图
4.将本次实验过程写成实验报告提交在本次作业的链接中
5.关键代码部分以代码块格式粘贴在实验报告正文中
6.软件架构以及开发技术不限
三、实验设计与实现
UI设计：
登录界面设计
使用了HTML语言做出了一个简单的网页版登陆界面
界面如下：
实现网页版登录入口的源代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.bg {
background-image: url("C:\Users\30131\Downloads\爱上紫禁城.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
.container {
background-color: rgba(255, 255, 255, 0.8);
width: 300px;
padding: 40px;
border-radius: 4px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
margin: 100px auto;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="bg">
<div class="container">
<div class="form-group">
<label for="uname">用户名</label>
<input type="text" id="uname" placeholder="请输入用户名" required>
</div>
<div class="form-group">
<label for="psw">密码</label>
<input type="password" id="psw" placeholder="请输入密码" required>
</div>
<button type="submit">登录</button>
</div>
</div>
</body>
</html>
主界面设计
使用HTML语言仿写了一个简单的网页版主界面
界面如下：
源代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主界面</title>
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.bg {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
.navbar {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
.navbar a {
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}
.main-content {
padding: 50px;
margin: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 4px;
}
.sidebar {
padding: 20px;
margin: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 4px;
}
.sidebar a {
display: block;
padding: 10px 15px;
color: #4CAF50;
text-decoration: none;
}
</style>
</head>
<body>
<div class="bg">
<div class="navbar">
<a href="#home">主页</a>
<a href="#news">新闻</a>
<a href="#contact">联系我们</a>
<a href="#about">关于我们</a>
</div>
<div class="main-content">
<h2>欢迎来到主界面</h2>
<p>在这里你可以找到最新的信息和资源。</p>
</div>
<div class="sidebar">
<h3>热门标签</h3>
<a href="#">首页</a>
<a href="#">产品</a>
<a href="#">服务</a>
<a href="#">新闻</a>
</div>
</div>
</body>
</html>
计算界面设计
使用python语言重新编写了一个简易计算器，包含登录界面但是似乎不能使用。
计算器界面如下：
简单的登录界面如下：
实现该功能的代码如下：
import tkinter as tk
from tkinter import simpledialog
import json
import math
# 登录界面代码如下
def login():
username = simpledialog.askstring("登录", "请输入用户名：")
password = simpledialog.askstring("登录", "请输入密码：")
# 这里只是一个简单的检查，实际应用中请使用安全的验证方式
if username == "admin" and password == "123456":
return True
else:
return False
# 保存历史记录
def save_history(history):
with open("/mnt/data/calculator_history.json", "w", encoding="utf-8") as f:
json.dump(history, f)
# 读取历史记录
def load_history():
try:
with open("/mnt/data/calculator_history.json", "r", encoding="utf-8") as f:
return json.load(f)
except FileNotFoundError:
return []
# 计算器功能代码如下
def calculator():
# 登录
if not login():
return
# 保存历史记录
history = load_history()
history.append({
"expression": entry.get(),
"result": result.get()
})
save_history(history)
# 清空输入
entry.delete(0, tk.END)
result.delete(0, tk.END)
# 计算表达式
try:
expression = entry.get()
if expression.isalnum() or expression in ["+", "-", "*", "/", "^", "sin", "cos", "tan"]:
result.set(eval(expression))
else:
result.set("错误：无效的表达式")
except Exception as e:
result.set("错误：计算出错")
# 构建 GUI
root = tk.Tk()
root.title("计算器软件")
frame = tk.Frame(root)
frame.pack(padx=10, pady=10)
entry = tk.Entry(frame, width=30)
entry.grid(row=0, column=0, columnspan=4)
result = tk.Entry(frame, width=20, state="readonly")
result.grid(row=1, column=0, columnspan=4)
button_0 = tk.Button(frame, text="0", command=lambda: entry.insert(tk.END, "0"))
button_0.grid(row=2, column=0)
button_1 = tk.Button(frame, text="1", command=lambda: entry.insert(tk.END, "1"))
button_1.grid(row=2, column=1)
button_2 = tk.Button(frame, text="2", command=lambda: entry.insert(tk.END, "2"))
button_2.grid(row=2, column=2)
button_3 = tk.Button(frame, text="3", command=lambda: entry.insert(tk.END, "3"))
button_3.grid(row=2, column=3)
button_4 = tk.Button(frame, text="4", command=lambda: entry.insert(tk.END, "4"))
button_4.grid(row=3, column=0)
button_5 = tk.Button(frame, text="5", command=lambda: entry.insert(tk.END, "5"))
button_5.grid(row=3, column=1)
button_6 = tk.Button(frame, text="6", command=lambda: entry.insert(tk.END, "6"))
button_6.grid(row=3, column=2)
button_7 = tk.Button(frame, text="7", command=lambda: entry.insert(tk.END, "7"))
button_7.grid(row=3, column=3)
button_8 = tk.Button(frame, text="8", command=lambda: entry.insert(tk.END, "8"))
button_8.grid(row=4, column=0)
button_9 = tk.Button(frame, text="9", command=lambda: entry.insert(tk.END, "9"))
button_9.grid(row=4, column=1)
button_dot = tk.Button(frame, text=".", command=lambda: entry.insert(tk.END, "."))
button_dot.grid(row=4, column=2)
button_equal = tk.Button(frame, text="=", command=calculator)
button_equal.grid(row=4, column=3)
button_plus = tk.Button(frame, text="+", command=lambda: entry.insert(tk.END, "+"))
button_plus.grid(row=5, column=0)
button_minus = tk.Button(frame, text="-", command=lambda: entry.insert(tk.END, "-"))
button_minus.grid(row=5, column=1)
button_multiply = tk.Button(frame, text="*", command=lambda: entry.insert(tk.END, "*"))
button_multiply.grid(row=5, column=2)
button_divide = tk.Button(frame, text="/", command=lambda: entry.insert(tk.END, "/"))
button_divide.grid(row=5, column=3)
button_power = tk.Button(frame, text="^", command=lambda: entry.insert(tk.END, "^"))
button_power.grid(row=6, column=1)
button_sin = tk.Button(frame, text="sin", command=lambda: entry.insert(tk.END, "sin"))
button_sin.grid(row=6, column=2)
button_cos = tk.Button(frame, text="cos", command=lambda: entry.insert(tk.END, "cos"))
button_cos.grid(row=6, column=3)
button_tan = tk.Button(frame, text="tan", command=lambda: entry.insert(tk.END, "tan"))
button_tan.grid(row=6, column=0)
button_clear = tk.Button(frame, text="C", command=lambda: entry.delete(0, tk.END))
button_clear.grid(row=7, column=1)
button_percent = tk.Button(frame, text="%", command=lambda: entry.insert(tk.END, "%"))
button_percent.grid(row=7, column=2)
button_pi = tk.Button(frame, text="π", command=lambda: entry.insert(tk.END, "π"))
button_pi.grid(row=7, column=3)
button_sqrt = tk.Button(frame, text="√", command=lambda: entry.insert(tk.END, "√"))
button_sqrt.grid(row=7, column=0)
root.mainloop()
流程图设计：
登录流程图
计算流程图
历史记录查询流程图
软件开发：
选择的开发语言：
开发语言使用了HTML语言和python，用以实现登录和注册功能并且同时实现计算功能。
四、实验总结
分析实验过程中的问题和改进方向
在进行使用python语言编些计算器时会发现计算器的页面设计不如使用HTML语言设计的精美，但是使用HTML语言有时候没法实现用python实现的相关功能。 另外，掌握了Python基本语法和操作，为以后的学习和实践奠定了基础；学会了面向对象编程思想，提高了代码质量和可维护性；培养了动手实践能力，提高了解决实际问题的能力。
