第二次作业
一、实验目的：
1.掌握软件开发的基本流程
2.掌握常用的软件开发方式和工具。
二、实验内容：
设计一个包含登录界面的计算器软件，该软件可以实现第一次作业中的全部功能，同时可以保存用户的历史计算记录（保存数据最好使用数据库）。
三、实验环境：
1.Visio绘制流程图
2.DW编写前端网页
3.IDEA、JDBC连接mysql数据库
4.Navicat管理数据库
四、流程图：
五、UI展示：
1.登陆页面
2.登录成功提示 点击确定后进去计算器页面
3.信息输入错误提示
4.注册页面
5.注册信息输入提示
6.登录成功后跳转到计算器页面
7.计算器功能展示
六、添加数据库内用户信息
七、代码展示：
idea连接数据库：
package com.xxx.test;
import com.mysql.cj.jdbc.DatabaseMetaData;
import java.sql.*;
public class Tests {
private DatabaseMetaData JdbcUtils;
public static void main(String[] args) throws ClassNotFoundException, SQLException {
Class.forName("com.mysql.jdbc.Driver");
// 使用我自己的数据库 test
String url = "jdbc:mysql://localhost:3306/java_test";
// 数据库的用户名和密码
String username = "root";
String password = "123456";
Connection connection = DriverManager.getConnection(url, username, password);
System.out.println("成功");
Statement statement = connection.createStatement();
// SQL语句，使用我自己的test数据库下的 tb_user 表
String sql = "SELECT * FROM tb_user";
ResultSet resultSet = statement.executeQuery(sql);
// 需要与自己的数据库里的表结构相对应
while (resultSet.next()){
System.out.println("id = " + resultSet.getObject("id"));
System.out.println("name = " + resultSet.getObject("name"));
System.out.println("password = " + resultSet.getObject("password"));
}
// 将计算历史记录插入到数据库中
res = con.prepareStatement(saveRes);
res.setDouble(result);
res.executeUpdate();
}
//登陆界面用户名密码的匹配
public void login(String userName, String userPwd) {
Connection con = null;
Statement stmt = null;
ResultSet rs = null;
try {
con = JdbcUtils.getConnection();
stmt = con.createStatement();
String sql = "SELECT * FROM user WHERE " +
"username='" + userName +
"' and password='" + userPwd + "'";
rs = stmt.executeQuery(sql);
if(rs.next()) {
System.out.println("登陆成功！");
}
else if (rs == null){
System.out.println("用户名或密码不能为空！");
}
else {
System.out.println("用户名或密码输入错误！");
}
} catch (Exception e) {
throw new RuntimeException(e);
} finally {
JdbcUtils.close(con, stmt, rs);
}
}
}
登陆页面html：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<!-- 引入css <img src="img/1.jpg" alt="" width="50" height="50">-->
<link rel="stylesheet" href="style.css">
<style type="text/css">
body,td,th {
color: #FFFFFF;
}
</style>
</head>
<body>
<div class=".bigbox">
<from action="" class="login">
<h1>Login</h1>
<p><strong>用户：</strong>
<input type="text" placeholder="请输入用户名" id="username"><br>
<strong> 密码：</strong>
<input type="password" placeholder="请输入密码" id="password">
<p></p><br>
<input type="button" class="btn" value="登录" onclick="javascript:get_value()">
<input type="button" class="btn" value="注册" onclick="javascrtpt:jump()">
</p>
</from>
</div>
</body>
<script>
function get_value(){
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
if (username == 'admin' && password == '123456'){
alert("登录成功！")
window.location.href ='src/calculator.html';
}
else if (username == '' || password == ''){
alert("用户名和密码不能为空！")
}
else{
alert("用户名或密码输入错误！")
}
}
</script>
<script>
function jump(){
window.location.href="register.html";
}
</script>
</html>
登陆页面css：
/* CSS Document */
*{
user-select: none
/*无法选中，整体感更强 */
}
body{
/*设置登陆背景*/
background-image: url("3.jpg");
/*平铺*/
background-repeat: no-repeat;
/*按照屏幕大小计算尺寸*/
background-size: cover;
/*fixed*/
background-attachment: fixed;
}
.login{
/* 绝对定位*/
position: absolute;
/*设置位置 距离顶部50% 外边框-200px 距离左边50%*/
top: 50%;
margin-top: -200px;
left: 50%;
/*form表单宽度400px 这里回200px*/
margin-left: -200px;
width: 400px;
height: 400px;
/*边框锐度*/
border-radius: 25px;
background-color: rgba(255,255,255,0.50);
/*居中*/
text-align: center;
padding: 5px 40px;
/*标准盒子*/
box-sizing: border-box;
/*阴影*/
box-shadow: 5px 5px 5px black;
}
.login h1{
/*引入字体*/
font-family: "微软雅黑";
color: white;
}
.login p{
font-size: 18px;
}
input{
/*设置背景颜色*/
background-color: rgba(255,255,255,0.00);
width: 80%;
height: 48px;
/*设置底部距离*/
margin-bottom: 10px;
/*边框设置为零 然后给底部边框设置宽度和颜色*/
border: 0px;
border-bottom: 2px solid rgba(192,192,192,1.00);
/*点击白色的去除*/
outline: none;
/*字体大小和颜色改变*/
font-size: 22px;
color: white;
}
form img{
/*设置大小然后定位*/
width: 32px;
/*相对定位*/
position: relative;
top: 5px;
}
.btn{
/*设置宽度 边框锐度*/
/*去除下边框的白色*/
border: 0px;
width: px;
background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
border-radius: 25px;
}
/*当按钮被鼠标触发时*/
.btn:hover{
background-image: linear-gradient(to right,#b4731d 0%, #f16943 100%);
}
注册页面html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册</title>
</head>
<link rel="stylesheet" href="register.css">
<style>
body {
width: 100%;
height: 100%;
background-image: url("../登录/3.jpg");
background-repeat: no-repeat;
background-size: cover;
}
</style>
<body>
<div class="header">
<h2>Register</h2>
<label for="username"><span><strong>用户名：</strong></span>
<input type="text" id="username"></label>
<br>
<label for="password"><span><strong>密码:</strong></span>
<input type="password" id="pwd"></label>
<br>
<label for="password"><span><strong>确认密码:</strong> </span>
<input type="password" id="pwd2"> </label>
<br>
<div>
<button onclick="judge()">注册</button>
<button><a href="index.html">去登录</a></button>
</div>
</div>
</body>
<script>
function judge(){
var username=document.getElementById("username").value;
var pwd=document.getElementById("pwd").value;
var pwd2=document.getElementById("pwd2").value;
if (pwd!=pwd2){
alert("两次密码输入不一致，请重新输入！")
document.getElementById("pwd").value= "";
document.getElementById("pwd2").value= "";
}
else if (username == 'admin'){
alert("用户名已存在！")
}
else{
var uname=document.getElementById("username").value;
var pword=document.getElementById("pwd").value;
alert("注册成功！请去登录！")
window.location.href ='index.html';
}
}
</script>
</html>
注册页面css：
/* CSS Document */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #fff;
font-size: 20px;
}
.header {
/* 绝对定位*/
position: absolute;
/*设置位置 距离顶部50% 外边框-200px 距离左边50%*/
top: 50%;
margin-top: -200px;
left: 50%;
/*form表单宽度400px 这里回200px*/
margin-left: -200px;
width: 400px;
height: 400px;
/*边框锐度*/
border-radius: 25px;
background-color: rgba(255,255,255,0.50);
/*居中*/
text-align: center;
padding: 5px 40px;
/*标准盒子*/
box-sizing: border-box;
/*阴影*/
box-shadow: 5px 5px 5px black;
}
.header h2 {
font-size: 30px;
margin-top: 15px;
color: rgba(255, 255, 255, 0.7);
}
.header > label {
margin-top: 20px;
width: 350px;
display: flex;
align-items: center;
justify-content: space-between;
}
.header > label span {
font-family: "微软雅黑";
font-size: 22px;
color: #fff;
margin-left: -10px;
}
.header > label input {
border-radius: 15px;
border: 1px solid #ccc;
padding: 0 20px;
background-color: rgba(255, 255, 255, 0.5);
box-sizing: border-box;
outline: none;
width: 260px;
height: 40px;
font-size: 18px;
}
.header > div {
margin-top: 25px;
display: flex;
justify-content: space-around;
width: 350px;
}
.header > div button {
width: 150px;
height: 40px;
background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
border-radius: 25px;
border: none;
font-size: 20px;
color: #fff;
}
.header > div button:hover{
background-image: linear-gradient(to right,#b4731d 0%, #f16943 100%);
}
计算器功能实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算器</title>
<style>
/* 设置顶部标题栏样式 */
#top {
width: 450px;
height: 50px;
margin: auto;
background-color:#7ecbff;
border-radius: 10px 10px 0px 0px;
}
/* 设置标题样式 */
#calc-title {
width: 450px;
height: 50px;
font-size: 40px;
color: white;
text-align: center;
}
/* 设置结果显示样式 */
#result {
width: 445px;
height: 60px;
margin: auto;
text-align: right;
font-size: 40px;
background-color: white;
border: solid 3px #4278bb;
}
/* 设置按钮样式 */
#button {
color: white;
width: 450px;
height: 422px;
background-color: #4278bb;
margin: auto;
}
#button div {
width: 108px;
height: 80px;
float: left;
background-color: #7ecbff;
margin: 2px;
line-height: 80px;
text-align: center;
font-size: 26px;
}
#button div:hover {
background-color: rgb(48, 149, 203);
}
</style>
</head>
<body background="bb.jpg"
style="background-repeat:no-repeat;
background-attachment:fixed;
background-size:100% 100%; ">
<div id="top">
<div id="calc-title">计算器</div>
</div>
<div id="result">
</div>
<div id="button" >
<div onclick="clearresult()">AC</div>
<div onclick="clickOperator('/')">÷</div>
<div onclick="clickOperator('*')">*</div>
<div onclick="del()">删除</div>
<div onclick="clickNumber(7)">7</div>
<div onclick="clickNumber(8)">8</div>
<div onclick="clickNumber(9)">9</div>
<div onclick="clickOperator('/')">/</div>
<div onclick="clickNumber(4)">4</div>
<div onclick="clickNumber(5)">5</div>
<div onclick="clickNumber(6)">6</div>
<div onclick="clickOperator('-')">-</div>
<div onclick="clickNumber(1)">1</div>
<div onclick="clickNumber(2)">2</div>
<div onclick="clickNumber(3)">3</div>
<div onclick="clickOperator('+')">+</div>
<div onClick="clickOperator('√')">√</div>
<div onclick="clickNumber(0)">0</div>
<div onclick="clickPonit()">.</div>
<div onclick="doCalc()">=</div>
</div>
<script type="text/javascript">
// 传递输入的数字
function clickNumber(number) {
var result = document.getElementById("result");
result.innerHTML = result.innerHTML + number;
}
//传递输入运算符
function clickOperator(operator) {
var result = document.getElementById("result");
var string = result.innerHTML;
var len = string.length;
var last = string.charAt(len - 1);
if (last == "+" || last == "-" || last == "*" || last == "/" || last == "%") {
var temp = string.substr(0, len - 1) + operator;
result.innerHTML = temp;
} else {
result.innerHTML += operator;
}
}
// 输入小数点
function clickPonit() {
var result = document.getElementById("result");
var string = result.innerHTML;
var len = string.length;
var last = string.charAt(len - 1);
if (last !== ".") {
result.innerHTML = result.innerHTML + ".";
} else {
result.innerHTML = result.innerHTML;
}
}
// 清空输入
function clearresult() {
var result = document.getElementById("result");
result.innerHTML = "";
}
// 删除操作
function del() {
var result = document.getElementById("result");
var string = result.innerHTML;
if (string.length > 0) {
result.innerHTML = string.slice(0, -1);
}
}
// 计算结果eval参数
function doCalc() {
var result = document.getElementById("result");
var expression = result.innerHTML;
result.innerHTML = eval(expression);
}
function clickOperator(operator) {
var result = document.getElementById("result");
var string = result.innerHTML;
var len = string.length;
var last = string.charAt(len - 1);
if (last == "+" || last == "-" || last == "*" || last == "/" || last == "%") {
var temp = string.substr(0, len - 1) + operator;
result.innerHTML = temp;
} else {
result.innerHTML += operator;
}
}
</script>
</body>
</html>
