《软件集成开发环境》第二次作业-526互联

第二次作业

[实验目的]

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

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

[实验内容]

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

[实验要求]

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

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

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

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

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

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

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

实验内容：

用HBuilderX和IntelliJ IDEA实现简单登录功能，并使用数据库存储历史记录。

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

登录流程图

注册流程图

二、基本代码

1.login.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>小娜计算器登录页面</title>
            <link rel="stylesheet" type="text/css" href="login.css" />
            <script src="./js/my.js"></script>
        <style>
            body{
                background: url(img/登录页面.jpg) top left;
                    background-size: 100%;
            }
        </style>
        <body>
        <div class="control">
            <div class="item">
                <div class="active" style="margin-left:50px">登录 </div>
            </div>
            <div class="content">
                <div style="display: block;">
                    <p>账号:</p >
                    <input type="text" placeholder="李娜"/>
                    <p>密码:</p >
                    <input type="password" placeholder="123456"/>
                    <br/>
                    <input type="submit" value="登录"/>
                </div>
            </div>
        </div>
        </body>
</html>

2.样式设计代码（login.css）

*{
    margin: 0;
    padding: 0;
}
body{
    background: #f3f3f3;
}
.control{
    width: 340px;
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 5px;
}
.item{
    width: 340px;
    height: 60px;
    background: #eeeeee;
}
.item div{
    width: 170px;
    height: 60px;
    display: inline-block;
    color: black;
    font-size: 18px;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
}
.content{
    width: 100%;
}
.content div{
    margin: 20px 30px;
    display: none;
    text-align: left;
}
p{
    color: #4a4a4a;
    margin-top: 30px;
    margin-bottom: 6px;
    font-size: 15px;
}
.content input[type="text"], .content input[type="password"]{
    width: 100%;
    height: 40px;
    border-radius: 3px;
    border: 1px solid #adadad;
    padding: 0 10px;
    box-sizing: border-box;
}
.content input[type="submit"]{
    margin-top: 400px;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    color: white;
    border: 1px solid #adadad;
    background: #00dd60;
    cursor: pointer;
    letter-spacing: 4px;
    margin-bottom: 40px;
}
.active{
    background: white;
}
.item div:hover{
    background: #f6f6f6;
}

3.index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小娜计算器登录页面</title>
		<script src="js/jquery.min.js" charset="utf-8"></script>
	</head>
	
	<body>
		<h1>欢迎登录！<span id="username"></span></h1>
		
		<script>
			$(function() {
				$.get("http://localhost:8080/user/getLoginUsername", {}, function(response) {
					if(response.code === 200) {
						$("#username").html(response.data);
					} else {
						alert(response.message);
					}
				}, "json");
			
			});
		</script>
	</body>
</html>

4.my.js

三、登录页面显示如下

登录成功后的页面显示如下：

四、用IDEA实现连接

connectionMysql

package com.ln.domian;

import java.sql.ResultSet;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.Statement;

public class connectionMysql {
    //打开数据库连接
    /***
     * 写方法的基本原则：
     * 1：这个方法实现什么功能
     * 2：方法要不要返回值？
     * 返回值的意义【a:调用方法的目的就是为了拿到返回值  b:通过返回值判断一个方法的执行状态】void
     *
     * 3:要不要参数
     *
     *
     */
    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/student?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;
    }


}

五、最终效果展示