[实验目的]
1.掌握软件开发的基本流程
2.掌握常用的软件开发方式和工具。
[实验内容]
1.设计一个包含登录界面的计算器软件,该软件可以实现第一次作业中的全部功能,同时可以保存用户的历史计算记录(保存数据最好使用数据库)。
[实验要求]
1.完成软件的UI设计、使用Visio设计软件中所涉及的所有流程图。
2.选择合适的集成开发环境和工具完成计算器软件的开发
3.将开发好软件进行测试并截图
4.将本次实验过程写成实验报告提交在本次作业的链接中
5.关键代码部分以代码块格式粘贴在实验报告正文中
一、登录流程图
二、注册流程图
三、登录操作
1、login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>login</title> <style> * { margin: 0; padding: 0; } body{ background: url(img/mmdddtdtsu.webp) top left; background-size: 100%; } html { height: 100%; width: 100%; overflow: hidden; margin: 0; padding: 0; background: url(images/background.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: 20%; display: flex; justify-content: center; align-items: center; height: 300px; background-color: rgba(246, 250, 250, 0.6); box-shadow: 7px 7px 17px rgba(246, 250, 250, 0.4); border-radius: 300px; } #loginDiv:hover{ filter: grayscale(60%); } input{ text-align: center; border:none; background-color: rgba(239, 248, 250, 0.1); border-bottom:1px solid rgb(80, 196, 241); width: 200px; } #L_login { border-color: cornsilk; background-color: rgba(59, 194, 248, 0.8); color: aliceblue; border-style: hidden; border-radius: 5px; width: 100px; height: 31px; font-size: 16px; } #L_register { border-color: cornsilk; background-color: rgba(59, 194, 248, 0.8); color: aliceblue; border-style: hidden; border-radius: 5px; width: 100px; height: 31px; font-size: 16px; } </style> </head> <body> <div id="loginDiv"> <form action="" id="form"> <table> <h2 style="text-align: center; color: rgb(59, 194, 248);">立即登录</h2></br> <tr><td style="text-align: center; color: gray;">邮箱</td></tr> <tr><td><input class="line" type="text" id="L_email"></td></tr> <tr><td style="text-align: center; color: gray;">密码</td></tr> <tr><td > <input class="line" type="password" placeholder="密码长度至少为6位" id="L_pwd"></td></tr> </table> </br> <p style="text-align: center;color: rgb(59, 194, 248);">忘记密码?</p > <div style="text-align: center;margin-top: 15px;"> <input type="button" id="L_login" value="登录" onclick=javascrtpt:jump1()> <input type="button" id="L_register" value="注册" onclick=javascrtpt:jump2()> </div> </form> </div> <script> L_email.onchange = function(){ var L_email = this.value; var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; if(!reg.test(L_email)){ alert("邮箱格式不正确,请重新输入!"); return false; } } L_pwd.onchange = function(){ var L_pwd = this.value; var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/; if(!reg.test(L_pwd)){ alert("密码长度要大于6位,由数字和字母组成,请重新输入!"); return false; } } var email=localStorage.getItem("email"); var password=localStorage.getItem("password"); console.log("email:"+email); console.log("pwd:"+password); function jump1(){ console.log(document.getElementById("L_email").value); console.log(+document.getElementById("L_pwd").value); var Email = document.getElementById("L_email"); var Password = document.getElementById("L_pwd"); if(email==document.getElementById("L_email").value && password==document.getElementById("L_pwd").value){ alert("登录成功,点击确定进入计算器!"); window.location.href="My_Album.html"; } else if(Email.value == "" || Password.value =="") { alert("邮箱或密码不能为空!"); return false; } else{ alert("邮箱或密码错误!"); return false; } } function jump2(){ window.location.href="register.html"; } </script> </body> </html>
登录界面操作
显示错误则用户不存在
二、注册操作
2、register.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>register</title> <style> html{ height: 100%; width: 100%; overflow: hidden; margin: 0; padding: 0; background: url(images/background.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%; } input{ text-align: center; border:none; background-color: rgba(239, 248, 250, 0.1); border-bottom:1px solid rgb(80, 196, 241); width: 260px; } p{ text-align: center; color: rgb(116, 114, 114); } .R_register{ margin-top: 30px; width: 600px; justify-content: center; align-items: center; text-align: center; height: 600px; background-color: rgba(246, 250, 250, 0.7); box-shadow: 7px 7px 17px rgba(246, 250, 250, 0.4); } .R_login{ margin-top: 30px; width: 300px; justify-content: center; align-items: center; height: 600px; background-color: rgba(167, 150, 150,0.6); box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.3); } #R_registerbtn { border-color: cornsilk; background-color: rgba(59, 194, 248, 0.6); color: aliceblue; border-style: hidden; border-radius: 15px; width: 190px; height: 31px; font-size: 16px; } #R_loginbtn{ border: 20px solid white; background-color: rgba(71, 196, 245, 0.6); border-radius: 50%; color: aliceblue; border-style: hidden; border-radius: 15px; width: 100px; height: 31px; font-size: 16px; } .title{ color: white; text-align: center; } body{ background: url(img/mmdddtdtsu.webp) top left; background-size: 100%; } </style> </head> <div class="R_register"> <h3 style="color: rgb(122, 211, 247);">立即注册</h3> <p>邮箱</p > <p><input type="text" id="R_email"></p > <p >用户名</p > <p><input type="text" placeholder="用户名长度不能超过5位" id="R_user"></p > <p> 性别</p > <p> <span>男</span> <span><input style="width: auto;" type="radio" name="sex" value="男" checked="checked" ></span> <span>女</span> <span><input style="width: auto;" type="radio" name="sex" value="女" ></span> </p > <p >头像</p > <p><input type="file" id="toux"></p > <p >密码</p > <p><input type="password" placeholder="密码长度至少为6位且为数字和字母的组合" id="R_pwd"></p > <p >确认密码</p > <p><input type="password" placeholder="两次密码需一致" id="R_repwd" onkeyup="checkpassword()"></p > <span id="tishi"></span></input> <p><button id="R_registerbtn" onclick=javascrtpt:jump()>注册</button></p > </div> <div class="R_login"> <br><br> <h3 class="title">已有账号?</h3> <p style="color: white;">已有账号就登录吧,好久不见!</p > <br><br><br><br><br><br><br><br><br><br><br><br><br> <p><button id="R_loginbtn" onclick=javascrtpt:jump3()>登录</button></p > </div> <script> R_email.onchange = function(){ var R_email = this.value; var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; if(!reg.test(R_email)){ alert("邮箱格式不正确,请重新输入!"); return false; } } R_user.onchange = function(){ var R_user= this.value; var reg = /^\S{1,5}$/; if(!reg.test( R_user)){ alert("用户名长度不能超过5位!"); return false; } } R_pwd.onchange = function(){ var R_pwd = this.value; var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/; if(!reg.test(R_pwd)){ alert("密码长度要大于6位,由数字和字母组成,请重新输入!"); return false; } } function checkpassword() { var password = document.getElementById("R_pwd").value; var repassword = document.getElementById("R_repwd").value; if(password == repassword) { document.getElementById("tishi").innerHTML="<font color='green'>两次密码输入一致</font>"; }else { document.getElementById("tishi").innerHTML="<font color='red'>两次输入密码不一致!</font>"; } } function jump(){ localStorage.setItem("username",document.getElementById("R_user").value); localStorage.setItem("password",document.getElementById("R_pwd").value); localStorage.setItem("email",document.getElementById("R_email").value); var Email = document.getElementById("R_email"); var User = document.getElementById("R_user"); var Toux = document.getElementById("toux"); var Password = document.getElementById("R_pwd"); var Repassword = document.getElementById("R_repwd"); if(Email.value == "" || User.value ==""|| Toux.value ==""|| Password.value =="") { alert("邮箱、用户名、头像或密码不能为空!"); return false; } else if(Password.value == Repassword.value) { alert("注册成功,欢迎进入登录界面!"); window.location.href="login.html"; } else{ alert("注册信息有误!"); } } function jump3(){ window.location.href="login.html"; } </script> </body> </html>
界面显示
注册格式错误
注册成功
继续登录
三、计算器
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>A Simple Calculator</title> <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> <style> * { font-family: 'Inconsolata', monospace; color: #555; } body { background-color: #ffffff; } .container { width: 320px; background-color: white; margin: 120px auto; } table { width: 100%; border-color: #000000; } td { width: 25%; } button { width: 100%; height: 70px; font-size: 24px; background-color: white; border: none; } #inputLabel { height: 120px; font-size: 40px; vertical-align: bottom; text-align: right; padding-right: 16px; background-color: #ffffff; } </style> </head> <body> <div class="container"> <table border="1" cellspacing="0"> <tr> <td colspan="4" id="inputLabel">0</td> </tr> <tr> <td colspan="3"><button onclick="pushBtn(this);">AC</button></td> <td><button onclick="pushBtn(this);">/</button></td> </tr> <tr> <td><button onclick="pushBtn(this);">7</button></td> <td><button onclick="pushBtn(this);">8</button></td> <td><button onclick="pushBtn(this);">9</button></td> <td><button onclick="pushBtn(this);">*</button></td> </tr> <tr> <td><button onclick="pushBtn(this);">4</button></td> <td><button onclick="pushBtn(this);">5</button></td> <td><button onclick="pushBtn(this);">6</button></td> <td><button onclick="pushBtn(this);">-</button></td> </tr> <tr> <td><button onclick="pushBtn(this);">1</button></td> <td><button onclick="pushBtn(this);">2</button></td> <td><button onclick="pushBtn(this);">3</button></td> <td><button onclick="pushBtn(this);">+</button></td> </tr> <tr> <td colspan="2"><button onclick="pushBtn(this);">0</button></td> <td><button onclick="pushBtn(this);">.</button></td> <td><button onclick="pushBtn(this);">=</button></td> </tr> </table> </div> <script> var inputLabel = document.getElementById('inputLabel'); function pushBtn(obj) { var pushed = obj.innerHTML; if (pushed == '=') { // Calculate inputLabel.innerHTML = eval(inputLabel.innerHTML); } else if (pushed == 'AC') { // All Clear inputLabel.innerHTML = '0'; } else { if (inputLabel.innerHTML == '0') { inputLabel.innerHTML = pushed; } else { inputLabel.innerHTML += pushed; } } } </script> </body> </html>
运算
四、PHP连接数据库
代码
<?php // 连接到数据库 $servername = "localhost"; $serverusername = "kk"; $serverpostbox = "2531026604@qq.com" $serverpassword = "12345a"; $dbname = "kkzs"; // 创建连接 $conn = new mysqli($servername, $serverusername, $serverpassword, $dbname); // 检测连接 // if ($conn->connect_error) { // die("连接失败: " . $conn->connect_error); // } else { // echo "连接成功"; // } // 验证表单 登录信息 //判断用户名(邮箱)和密码是否为空 $fusername = isset($_POST['fusername']) ? $_POST['fusername'] : ""; $fuserpassword = isset($_POST['fuserpassword']) ? $_POST['fuserpassword'] : ""; $remember = isset($_POST['remember']) ? $_POST['remember'] : ""; // $fusername = $_POST["fusername"]; // $fuserpassword = $_POST["fuserpassword"]; // echo $fusername, $fuserpassword; if (!empty($fusername) && !empty($fuserpassword)) { //建立连接 $sql = "SELECT username,userpassword FROM `users` WHERE username = '$fusername' and userpassword = '$fuserpassword'"; $result = $conn->query($sql); $row = mysqli_fetch_array($result); //判断用户名(邮箱)或密码是否正确 if ($fusername == $row['username'] && $fuserpassword == $row['userpassword']) { // 创建cookie $expire = time() + 60 * 60 * 24 * 30; setcookie("fusername1", $fusername, $expire); setcookie("fuserpassword1", $fuserpassword, $expire); //关闭数据库,可进行页面跳转 这里为了方便 仅显示为登录成功 // header("Location:personcenter.html"); echo "登录成功!"; mysqli_close($conn); } else { //用户名或密码错误,赋值err为1 echo "<script>alert('用户名或密码错误,请重新输入!');location.href='denglu.html';</script>"; } } else { //用户名或密码为空,赋值err为2 echo "<script>alert('用户名或密码不能为空,请重新输入!');location.href='denglu.html'</script>"; }
五、最终运行