《软件集成开发环境》第二次作业
第二次作业
[实验目的]
1.掌握软件开发的基本流程
2.掌握常用的软件开发方式和工具。
[实验内容]
1.设计一个包含登录界面的计算器软件，该软件可以实现第一次作业中的全部功能，同时可以保存用户的历史计算记录（保存数据最好使用数据库）。
[实验要求]
1.完成软件的UI设计、使用Visio设计软件中所涉及的所有流程图。
2.选择合适的集成开发环境和工具完成计算器软件的开发
3.将开发好软件进行测试并截图
4.将本次实验过程写成实验报告提交在本次作业的链接中
5.关键代码部分以代码块格式粘贴在实验报告正文中
6.软件架构以及开发技术不限
7.本次作业为个人作业，发现雷同作业一律按0分处理。
实验内容：
用HBuilderX和IntelliJ IDEA实现简单登录功能，并使用数据库存储历史记录。
一、使用Visio设计登录界面的流程图
登录流程图
注册流程图
二、基本代码
1.login.html
<body>
<div id="loginDiv">
<form action="" id="form">
<h1 class="s">立即登录</h1>
<style>
body{
background: url(img/登录页面.jpg) top left;
background-size: 100%;
}
</style>
<p>姓名:<input id="姓名" type="text"><label id="name_trip"></label></p>
<p>密码:<input id="password" type="password"><label id="password_trip"></label></p>
<div style="text-align: center;margin-top: 30px;">
<a href="#" id="a">忘记密码？</a><br>
<button onclick="denglu()">登录</button><button id="b2"onclick="click()">注册</button>
</div>
</form>
</div>
</body>
2.样式设计代码（login.css）
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background: url(1.jpg) no-repeat 0px 0px;
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#loginDiv {
width: 37%;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: rgba(75, 81, 95, 0.3);
box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
border-radius: 50%;
}
#name_trip {
margin-left: 50px;
color: red;
}
#pass-trip{
margin-left: 50px;
color: red;
}
p {
margin-top: 30px;
margin-left: 20px;
color: azure;
}
input {
margin-left: 15px;
border-radius: 5px;
border-style: hidden;
height: 30px;
width: 140px;
background-color: rgba(216, 191, 216, 0.5);
outline: none;
color: #f0edf3;
padding-left: 10px;
}
.button {
border-color: cornsilk;
background-color: rgba(100, 149, 237, .7);
color: aliceblue;
border-style: hidden;
border-radius: 5px;
width: 100px;
height: 31px;
font-size: 16px;
}
a {
font-size: 17px;
color:rgb(207, 48, 48);
}
.s{
text-align:center;
color:aliceblue;
}</style>
3.js部分
<script language="javascript" type="text/javascript">
document.getElementById("b1").onclick = function click()
{
window.location.href="注册.html";
}
document.getElementById("a").onclick = function click()
{
window.location.href="注册.html";
}
name.onchange = function()
{
var name = this.value;
if(reg.test(name)){
alert("姓名格式正确");
}else{
alert("姓名格式不正确");
}
}
password.onchange = function()
{
var password = this.value;
var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
if(reg.test(password)){
}else{
alert("密码格式不正确");
}
}
function denglu() {
var p = document.getElementById("password").value;
var e = document.getElementById("name").value;
var p2=localStorage.getItem("password");
var e2=localStorage.getItem("name");
if(p==p2&&e==e2)
window.location.href="照片墙.html";
else
alert("账号或密码不正确");
}
</script>
三、登录页面显示如下
四、计算器代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
</head>
<style>
body{
background: url(img/登录图片.jpg) top left;
background-size: 100%;
}
</style>
<style>
*{ font-size:36px;}
table{
background-color: thistle;
}
#t{
width:480px;
height:80px;
text-align: right;
font-size: 48px;
background-color: white;
}
.number{
width:120px;
height:80px;
background-color:pink;
border-radius: 40%;
margin: 0;
display: block;
}
.signs{
width:120px;
height:80px;
border-radius: 40%;
background-color: rgb(235, 199, 235);
margin: 0;
display: block;
}
.shaw{
width:120px;
height:80px;
border-radius: 40%;
background-color: rgb(235, 199, 235);
margin: 0;
display: block;
}
.equal{
width:120px;
height:80px;
border-radius: 40%;
background-color: rgb(235, 199, 235);
margin: 0;
display: block;
}
.kuohao{
width: 60px;
height: 80px;
float: left;
align-self: 0;
border-radius: 40%;
background-color: rgb(235, 199, 235);
}
table td,table th{
border: none ;
}
</style>
<script>
//设置标志，用于没有输入时显示0，以及有显示时清空
var flag=true;
function func(str){
var t=document.getElementById("t");
if(flag){
//清除没有输入时的0
t.value="";
}
//改变状态，不再清空内容
flag=false;
//将之前的内容和输入的内容相加，重新显示
t.value=t.value+str;
}
//回退一个数，相当于撤销
function backspace(){
var t=document.getElementById("t");
t.value=t.value.substr(0,t.value.length-1);
}
//清空显示内容
function AC(){
var t=document.getElementById("t");
//显示0
t.value="0";
//让下次输入可以清空0
flag=true;
}
//计算结果
function equals(){
var t=document.getElementById("t");
//将字符串转换为逻辑运算
t.value=eval(t.value);
}
</script>
<body>
<!-- 内边距 外边距 边框 居中-->
<table cellpadding="0" cellspacing="0" border="2px" align="center" >
<tr>
<td colspan="4">
<input type="text" value="0" id="t" />
</td>
</tr>
<tr>
<td><input type="button" class="number" value="7" onClick="func('7')"/></td>
<td><input type="button" class="number" value="8" onClick="func('8')"/></td>
<td><input type="button" class="number" value="9" onClick="func('9')"/></td>
<td><input type="button" class="signs" value="/" onClick="func('/')"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="4" onClick="func('4')"/></td>
<td><input type="button" class="number" value="5" onClick="func('5')"/></td>
<td><input type="button" class="number" value="6" onClick="func('6')"/></td>
<td><input type="button" class="signs" value="*" onClick="func('*')"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="1" onClick="func('1')"/></td>
<td><input type="button" class="number" value="2" onClick="func('2')"/></td>
<td><input type="button" class="number" value="3" onClick="func('3')"/></td>
<td><input type="button" class="signs" value="-" onClick="func('-')"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="0" onClick="func('0')"/></td>
<td><input type="button" class="shaw" value="." onClick="func('.')"/></td>
<td><input type="button" class="number" value="00" onClick="func('00')"/></td>
<td><input type="button" class="signs" value="+" onClick="func('+')"/></td>
</tr>
<tr>
<td>
<input type="button" class="kuohao" value="(" onClick="func('(')"/>
<input type="button" class="kuohao" value=")" onClick="func(')')"/>
</td>
<td><input type="button" class="shaw" value="后退" style="float:top" onClick="backspace()"/></td>
<td>
<input type="button" class="shaw" value="清除" onClick="AC()"/>
</td>
<td rowspan="2"><input type="button" value="=" class="equal" onClick="equals()"/></td>
</tr>
</table>
</body>
</html>
五、连接数据库
package com.ln.domian;
import java.sql.ResultSet;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.Statement;
public class connectionMysql {
Connection con = null;
ResultSet res = null;
public Connection openMysql() {
try {
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://127.0.0.1:3306/users?characterEncoding=UTF-8";
String uname = "root";
String upass = "123456";
con = DriverManager.getConnection(url, uname, upass);
} catch (Exception e) {
e.printStackTrace();
}
return con;
}
//增删改
public int update(String sql) {
//保存返回值
int re = 0;
try {
//创建执行对象
Statement sta = con.createStatement();
re = sta.executeUpdate(sql);
} catch (Exception e) {
e.printStackTrace();
}
return re;
}
//查询
public ResultSet select(String sql) {
try {
//创建执行对象
Statement sta = con.createStatement();
res = sta.executeQuery(sql);
} catch (Exception e) {
e.printStackTrace();
}
return res;
}
}
六、登录计算器并计算
1.计算7*3+100=121
2.计算800*9+1500=8700
浙公网安备 33010602011771号