一、实验目的
1.掌握软件开发的基本流程
2.掌握常用的软件开发方式和工具。
二、实验内容
设计一个包含登录界面的计算器软件，该软件可以实现第一次作业中的全部功能，同时使用数据库可以保存用户的历史计算记录和时间。
三、项目流程和功能
1.登录网页版计算器，登录不成功时，弹出报错信息；登录成功时，转入自己设计的计算器页面，并且能够成功的计算表达式。
2.未注册则需要先注册，同时在数据库中就会增加一项用户信息。
3.进行加减乘除开方运算并用数据库对这些数据进行精确地时间性保存。
四、项目所需要的工具与环境
1.visio绘图工具
2.2021~2023版Idea
3.MySQL编写数据库
4.Navicat来连接MySQL
5.JDK.8.0_121
6.略微掌握HTML、CSS、javaScript，等前端代码
7.利用JDBC连接java代码（计算器功能实现）和mysql（数据储存）部分
五、流程图
1.注册流程图
2.登录流程图
六、界面展示与代码部分
1.登录界面
2.登录报错
代码部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-image: url("1.jpg");
background-size: cover;
font-family: Arial, sans-serif;
}
.login-box {
width: 300px;
height: 200px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px;
}
.login-box h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
.login-box input {
display: block;
width: 80%;
height: 30px;
margin: 0 auto 10px;
border: 1px solid #ccc;
outline: none;
padding: 5px;
}
.login-box button {
display: block;
width: 80%;
height: 40px;
margin: 0 auto;
border: none;
background-color: #333;
color: #fff;
cursor: pointer;
}
.error {
color: red;
text-align: center;
margin-top: 10px;
}
.success {
color: green;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="login-box">
<h1>登录</h1>
<input type="text" id="username" placeholder="请输入用户名">
<input type="password" id="password" placeholder="请输入密码">
<button id="login">登录</button>
<p id="message"></p>
</div>
<script>
// 获取元素
var username = document.getElementById("username");
var password = document.getElementById("password");
var login = document.getElementById("login");
var message = document.getElementById("message");
// 定义一个模拟的用户名和密码
var mockUsername = "admin";
var mockPassword = "123456";
// 给登录按钮添加点击事件
login.addEventListener("click", function() {
// 获取用户输入的用户名和密码
var user = username.value;
var pass = password.value;
// 判断用户名和密码是否正确
if (user === mockUsername && pass === mockPassword) {
// 如果正确，显示登录成功的信息
message.innerHTML = "登录成功！";
message.className = "success";
} else {
// 如果错误，显示登录失败的信息
message.innerHTML = "用户名或密码错误，请重新输入！";
message.className = "error";
}
});
</script>
</body>
</html>
- 注册相关
代码部分：
<html>
<head>
<style>
body {
background-image: url("1.jpg");
background-size: cover;
}
.container {
width: 400px;
margin: 50px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px gray;
background-color: white;
}
.input {
display: block;
width: 80%;
margin: 0 auto;
padding: 10px;
border: 1px solid black;
border-radius: 5px;
}
.button {
display: block;
width: 80%;
margin: 20px auto;
padding: 10px;
border: none;
border-radius: 5px;
background-color: green;
color: white;
font-weight: bold;
}
.error {
color: red;
text-align: center;
display: none;
}
.success {
color: green;
text-align: center;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align: center;">注册页面</h1>
<form id="form">
<input type="text" id="username" class="input" placeholder="请输入用户名" required>
<input type="password" id="password" class="input" placeholder="请输入密码" required>
<input type="submit" value="注册" class="button">
</form>
<p id="error" class="error">用户名或密码错误，请重新输入</p>
<p id="success" class="success">注册成功，欢迎你</p>
</div>
<script>
// 获取表单元素
var form = document.getElementById("form");
var username = document.getElementById("username");
var password = document.getElementById("password");
var error = document.getElementById("error");
var success = document.getElementById("success");
// 定义正确的用户名和密码
var correctUsername = "123456";
var correctPassword = "abcdefg";
// 给表单添加提交事件
form.addEventListener("submit", function(event) {
// 阻止表单的默认提交行为
event.preventDefault();
// 获取用户输入的用户名和密码
var inputUsername = username.value;
var inputPassword = password.value;
// 判断输入是否正确
if (inputUsername === correctUsername && inputPassword === correctPassword) {
// 如果正确，隐藏错误信息，显示成功信息
error.style.display = "none";
success.style.display = "block";
} else {
// 如果错误，显示错误信息，隐藏成功信息
error.style.display = "block";
success.style.display = "none";
}
});
</script>
</body>
</html>
4.登入效果
5.用户数据存入数据库
代码部分：
package cn.tkr.jdbc;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.Statement;
public class JDBCDemo {
public static void main(String[] args) throws Exception { Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/sys", "root", "123456789");
String sql = "update Student set score = 99 where id = '10003' ";
Statement stat = con.createStatement();
int count = stat.executeUpdate(sql);
System.out.println(count);
stat.close();
con.close();
}
}
- 数据导入效果
七，总结:
经过本次实验，对集成软件开发环境在软件开发过程中的作用有更深入的了解。