526互联

《软件集成开发》第二次作业

发布时间 2023-12-04 13:14:32作者: 爱吃番茄的西红柿

[实验目的]

1.掌握软件开发的基本流程

2.掌握常用的软件开发方式和工具。

[实验内容]

1.设计一个包含登录界面的计算器软件，该软件可以实现第一次作业中的全部功能，同时可以保存用户的历史计算记录（保存数据最好使用数据库）。

 

[实验要求]

1.完成软件的UI设计、使用Visio设计软件中所涉及的所有流程图。

2.选择合适的集成开发环境和工具完成计算器软件的开发

3.将开发好软件进行测试并截图

4.将本次实验过程写成实验报告提交在本次作业的链接中

5.关键代码部分以代码块格式粘贴在实验报告正文中

6.软件架构以及开发技术不限

7.本次作业为个人作业，发现雷同作业一律按0分处理。

 

实验内容：用HBuilderX和IntelliJ IDEA实现简单登录功能，用Visio设计流程图，并使用数据库存储历史记录

一、用Visio设计登录界面的流程图

 二、页面登录代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请登录</title>
    <style>
        * {margin: 0;padding: 0;}
                    body{
                        background: url(../img/shajiawei.jpg) top left;
                            background-size: 100%;
                    }
        html {height: 100%;}

        body { height: 100%;}
        

        .container {
            height: 100%;
           
        }

        .login-wrapper {
            background-color: #fbf1f1;
            width: 400px;
            height: 388px;
            border-radius: 50px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .header {
            font-size: 60px;
            font-weight: 900;
            text-align: center;
            line-height: 120px;
        }

        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }

            .input-item:placeholder {
                text-transform: uppercase;
            }

        .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
            color: #fff;
        }

        .msg {
            text-align: center;
            line-height: 88px;
        }

        a {
            text-decoration-line: none;
            color: #abc1ee;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="login-wrapper">
            <div class="header">登录</div>
            <div class="form-wrapper">
                <input type="text" name="输入用户名" placeholder="账号" class="input-item">
                <input type="password" name="输入密码" placeholder="密码" class="input-item">
                <div class="btn">登录</div>
            </div>
            <div class="msg">
              <a href="#">注册</a>
            </div>
        </div>
    </div>
</body>
</html>

用户登录界面

三、连接登录界面与计算器

<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
</head>
<body>
    <h1>Login Page</h1>
    <form action="calculator.html">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username"><br><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password"><br><br>
        <input type="submit" value="Login">
    </form>
</body>
</html>

登录失败界面显示

 登录成功则直接跳转到计算器

  四、计算机显示代码

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Calculator</title>
    </head>
    <style>
    *{ font-size:36px;}
    table{
        background-color: thistle;
    }
    
                        body{
                            background: url(../img/v2-6fab134c3621df30c3d5b032ebf883ba_r.jpg) top left;
                                background-size: 100%;
                        }
                    
    #t{ 
        width:480px;
         height:80px;
         text-align: right;
         font-size: 48px;
         background-color: snow;
         }
    .number{
        width:120px; 
        height:80px;
        background-color:aquamarine;
        border-radius: 40%;
        margin: 0;
        display: block;
        }
    .signs{
        width:120px; 
        height:80px;
        border-radius: 40%;
        background-color:  rgb(170, 255, 255);
        margin: 0;
        display: block;
 
    }
    .shaw{ 
        width:120px; 
        height:80px;
        border-radius: 40%;
        background-color:  rgb(170, 255, 255);
        margin: 0;
        display: block;
 
        }
    .equal{ 
        width:120px; 
        height:80px;
        border-radius: 40%;
        background-color:  rgb(170, 255, 255);
        margin: 0;
        display: block;
        }
    .kuohao{
        width: 60px;
        height: 80px;
        float: left;
        align-self: 0;
        border-radius: 40%;
        background-color:  rgb(170, 255, 255);
        }
    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>

计算器显示

 计算器实现11*2=22

 计算器实现11+25=36

 

 计算器实现2.025+32.258=34.283

 计算器实现96/3=32

 计算器实现145-258=-113

 计算器实现（12+13）*2-36+28=42

 五、数据库连接

 

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();      // 调用连接数据库的方法

    }

}