实验目的
1.掌握软件开发的基本流程。
2.掌握常用的软件开发方式和工具。
实验内容
设计一个包含登录界面的计算器软件，该软件可以实现第一次作业中的全部功能，同时可以保存用户的历史计算记录（保存数据最好使用数据库）。
实验步骤及结果
一、计算器登录界面
登录流程图
具体代码
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatuble" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>登录界面</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="frame">
<div class="biaoti">
<h1>登录界面</h1>
</div>
<input type="text" placeholder=" 请输入--用户名/email/手机" id="username"/>
<input type="password" placeholder=" 请输入--密码" id="password"/>
<div class="dianji">
<a href="#"><P>登录</P></a>
</div>
</div>
</body>
</html>
CSS：
*{/*初始值*/
padding: 0;
margin: 0;
}
body{
width: 100vw;/*设置视图宽度*/
height: 100vh;/*设置视图高度*/
background-image: url(../img/bjt1.jpg);/*导入背景图*/
display: flex;/*弹性布局*/
align-items: center;/*设置水平+垂直居中*/
justify-content: center;/*设置弹性布局居中*/
}
.frame{
position: relative;/*设置相对布局*/
width: 520px;/*设置宽度*/
height: 520px;/*设置高度*/
background: rgba(255, 255, 255, 0.5);/*设置背景颜色及透明度*/
display: flex;/*弹性布局*/
flex-direction: column;/*使元素纵向排列*/
align-items: center;/*设置水平+垂直居中*/
border-radius: 50%;/*设置边缘弧度*/
box-shadow: 0px 10px 40px 15px rgba(0, 0, 0, 0.8);/*设置盒子边缘阴影(rgba的a表示颜色透明度)*/
line-height: 100px;
background: linear-gradient(to bottom,transparent 30%,rgb(71, 5, 65));;/*设置颜色从下到上为透明渐变*/
}
.biaoti{
margin-top: 100px;/*设置距离顶部位置*/
font-size: 25px;/*设置字体大小*/
font-family:'隶书';/*设置字体*/
color: rgb(0, 0, 0); /*设置颜色*/
}
/*输入账号部分*/
#username{
height: 40px;/*设置高度*/
width: 300px;/*设置宽度*/
border-radius: 20px;/*设置边缘弧度*/
border: 2px solid rgb(255, 255, 255);/*设置边缘线条粗细及颜色*/
background: rgba(255, 255, 255, 0);/*设置透明度*/
margin-top: 20px;/*设置距离顶部位置*/
}
/*输入密码部分*/
#password{
height: 40px;/*设置高度*/
width: 300px;/*设置宽度*/
border-radius: 20px;/*设置边缘弧度*/
border: 2px solid rgb(255, 255, 255);/*设置边缘线条粗细及颜色*/
background: rgba(255, 255, 255, 0);/*设置透明度*/
margin-top: 20px;/*设置距离顶部位置*/
}
/*点击登录部分*/
.dianji{
text-align: center;/*字体居中*/
width: 100px;/*设置宽度*/
border: 2px solid #fff;/*设置边缘线条粗细及颜色*/
border-radius: 50%;/*设置边缘弧度*/
background: rgba(0, 0, 0, 0.1);/*设置透明度*/
box-shadow: 0px 10px 40px 15px rgba(255, 255, 255, 0.3);/*设置盒子边缘阴影(rgba的a表示颜色透明度)*/
margin-top: 70px;/*设置距离顶部位置*/
}
.dianji a{
text-decoration: none;/*取消下滑线*/
}
.dianji p{
font-size: 25px;/*设置字体大小*/
font-family: '隶书';/*设置字体*/
color: azure;/*设置颜色*/
}
/*设置鼠标触碰到登录时背景颜色变换*/
.dianji:hover{
background-color: rgb(0, 0, 0);/*设置背景变换颜色*/
transition: 1.2s;/*变换速度*/
}
使用的背景图片
效果图
二、计算器功能的实现
简易UI图
基础布局代码
<!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, user-scalable=no">
<title>王zz计算器</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="page-wrapper">
<div class="calc-container">
<!-- 头部操作按钮 -->
<div class="header">
<div class="header-left">
<div class="window-action close"></div>
<div class="window-action min"></div>
<div class="window-action max"></div>
</div>
<div class="header-right">
<div class="window-action theme"></div>
<div class="window-action history"></div>
<div class="window-action info"></div>
</div>
</div>
<!-- 计算区域 -->
<div class="calc-area">
<!-- 计算行 -->
<div class="calc-line">10</div>
<!-- 当前数字显示行 -->
<div class="current-number">1</div>
</div>
<!-- 数字键盘块 -->
<div class="keyboard-container">
<ul>
<li class="keyboard-line">
<div class="keycode">CE</div>
<div class="keycode">-</div>
<div class="keycode">%</div>
<div class="keycode">÷</div>
</li>
<li class="keyboard-line">
<div class="keycode">7</div>
<div class="keycode">9</div>
<div class="keycode">9</div>
<div class="keycode">×</div>
</li>
<li class="keyboard-line">
<div class="keycode">4</div>
<div class="keycode">5</div>
<div class="keycode">6</div>
<div class="keycode">-</div>
</li>
<li class="keyboard-line">
<div class="keycode">1</div>
<div class="keycode">2</div>
<div class="keycode">3</div>
<div class="keycode">+</div>
</li>
<li class="keyboard-line">
<div class="keycode">0</div>
<div class="keycode">清除</div>
<div class="keycode">·</div>
<div class="keycode">=</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
基础样式
line-height: 64px
}
.keyboard-line {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center
}
.keyboard-line .keycode {
width: 25vw;
height: 25vw;
border: 1px solid #999;
background-color: #d6d6d6;
text-align: center;
font-weight: 600;
font-size: 28px;
line-height: 25vw;
box-sizing: border-box;
}
.keyboard-line .keycode:last-child {
background-color: #f5923e;
color: #fff
}
<!-- 数字键盘块 -->
<div class="keyboard-container" id="inputBlock">
<ul>
<li class="keyboard-line">
<div class="keycode" data-action="clear">C</div>
<div class="keycode" data-action="minusSign">±</div>
<div class="keycode" data-action="point">%</div>
<div class="keycode" data-action="divide">÷</div>
</li>
<li class="keyboard-line">
<div class="keycode number" data-action="7">7</div>
<div class="keycode number" data-action="8">8</div>
<div class="keycode number" data-action="9">9</div>
<div class="keycode" data-action="multiplication">×</div>
</li>
<li class="keyboard-line">
<div class="keycode number" data-action="4">4</div>
<div class="keycode number" data-action="5">5</div>
<div class="keycode number" data-action="6">6</div>
<div class="keycode" data-action="subtraction">-</div>
</li>
<li class="keyboard-line">
<div class="keycode number" data-action="1">1</div>
<div class="keycode number" data-action="2">2</div>
<div class="keycode number" data-action="3">3</div>
<div class="keycode" data-action="addition">+</div>
</li>
<li class="keyboard-line">
<div class="keycode number" style="width: 50vw" data-action="0">0</div>
<div class="keycode" data-action="dot">·</div>
<div class="keycode" data-action="equal">=</div>
</li>
</ul>
</div>
开始我们的逻辑，首先定好各个操作的操作符及操作标识：
// 每个操作标识符对应的实际操作符号
var actionMap = {
clear: ['clear'],
minusSign: ['minusSign'],
point: ['%', '%'],
divide: ['÷', '/'],
multiplication: ['×', '*'],
subtraction: ['-', '-'],
addition: ['+', '+'],
dot: ['.'],
equal: ['=', '=']
}
* 重置
*/
function reset() {
current = []
calcLineText = []
setCalcLine()
setCurrentNumber()
// 重置清除标识
needRest = false
isDoEqual = false
}
/**
* 点击事件实际处理
* @param {MouseEvent} e
*/
function itemClickHandler(e) {
const target = e.target
const action = target.getAttribute('data-action')
switch (action) {
// 处理清除
case 'clear':
reset()
break
// 处理负号
case 'minusSign':
if (isDoEqual) {
reset()
}
var _action = actionMap[action]
// 字符时，已经存在时
if (current[0] === _action[0]) {
current.shift()
} else if (current[0] < 0) {
current[0] = Math.abs(current[0])
} else {
current.unshift(_action[0])
}
break
// 处理百分号
case 'point':
current.push(actionMap[action][0])
break
// 处理四则运算
case 'divide':
case 'multiplication':
case 'subtraction':
case 'addition':
var item = actionMap[action]
computedCalc(item[0], isDoEqual)
break
// 处理小数点
case 'dot':
if (current[current.length - 1] === actionMap['dot'][0] || current.includes(actionMap['dot'][0])) {
break
}
if (!current.length) {
current.push('0')
}
current.push(actionMap['dot'][0])
break
// 处理等于
case 'equal':
calcFinal()
break
// 处理数字输入
default:
if (needRest) {
reset()
}
if (action === '0' && current[0] === '0') {
break
}
current.push(action)
isDoEqual = false
}
setCurrentNumber()
}
initEvent()
})(window)
三、数据库连接
1．DriverManager类
DriverManager类是JDBC的管理层，被用来管理数据库中的驱动程序。在使用Java操作数据库之前，须使用Class类的静态方法forName(String className)加载能够连接数据库的驱动程序。加载完连接数据库的驱动程序后，Java会自动将驱动程序的实例注册到DriverManager类中，这时即可通过DriverManager类的getConnection()方法与指定数据库建立连接。
要访问数据库，首先要加载数据库的驱动程序（只需要在第一次访问数据库时加载一次），然后每次访问数据时创建一个Connection对象，接着执行操作数据库的SQL语句，最后在完成数据库操作后销毁前面创建的Connection对象，释放与数据库的连接。
在项目中创建类Conn，并创建getConnection()方法，获取与MySQL数据库的连接，在主方法中调用getConnection()方法连接MySQL数据库，代码如下：
import java.sql.*; //导入java.sql包
public class Conn { // 创建类Conn
Connection con; // 声明Connection对象
public Connection getConnection() { // 建立返回值为Connection的方法
try { // 加载数据库驱动类
Class.forName("com.mysql.jdbc.Driver");
System.out.println("数据库驱动加载成功");
}
catch (ClassNotFoundException e) {
e.printStackTrace();
}
try { // 通过访问数据库的URL获取数据库连接对象
con = DriverManager.getConnection("jdbc:mysql:"
+ "//127.0.0.1:3306/test", "root", "root");
System.out.println("数据库连接成功");
}
catch (SQLException e) {
e.printStackTrace();
}
return con; // 按方法要求返回一个Connection对象
}
public static void main(String[] args) { // 主方法
Conn c = new Conn(); // 创建本类对象
c.getConnection(); // 调用连接数据库的方法
}
}
运行结果如图所示
加载数据库驱动程序之前，首先需要确定数据库驱动类是否成功加载到程序中，如果没有加载，可以按以下步骤加载，此处以加载MySQL数据库的驱动包为例介绍：
①将MySQL数据库的驱动包mysql_connector_java_5.1.36_bin.jar拷贝到当前项目下。
②选中当前项目，单击右键，选择“Build Path”/“Configure Build Path…”菜单项，在弹出的对话框中左侧选中“Java Build Path”，然后在右侧选中Libraries选项卡，单击“Add External JARs…”按钮，在弹出的对话框中选择要加载的数据库驱动包，即可在中间区域显示选择的JAR包，最后单击Apply按钮即可。
步骤如图所示
