第二次作业
一、 实验名称：计算器软件用户登录系统
二、 实验目的：1.掌握软件开发的基本流程
2.掌握常用的软件开发方式和工具
三、实验内容：设计一个包含登录界面的计算器软件，该软件可以实现第一次作业中的全部功能，同时可以保存用户的历史计算记录，数据使用数据库保存
三、实验项目所用到的技术：采用前后端分离的开发模式
四、前端技术：html
后端技术：python(主要语言），Flask(Web框架），Mysql(存储主要数据)
五、实验步骤
（一）流程图
1、注册流程图
2、登录流程图
（二）用户注册界面
（三）用户登录界面
（四）计算机界面
（五）计算结果界面
（六）数据库连接结果
（七）注册后存入将数据存入数据库
1、注册界面实现
register.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>注册界面</title> <link rel="stylesheet" href="/static/css/layui.css"> </head> <body> <style> .demo-reg-container{width: 320px; margin: 21px auto 0;} .demo-reg-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;} </style> <form class="layui-form"action="/register" method="post"> <div class="demo-reg-container"> <div class="layui-form-item"> <div class="layui-row"> <div class="layui-col-xs7"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-cellphone"></i> </div> <input type="text" name="cellphone" value="" lay-verify="required|phone" placeholder="手机号" lay-reqtext="请填写手机号" autocomplete="off" class="layui-input" id="reg-cellphone"> </div> </div> <div class="layui-col-xs5"> <div style="margin-left: 11px;"> <button type="button" class="layui-btn layui-btn-fluid layui-btn-primary" lay-on="reg-get-vercode">获取验证码</button> </div> </div> </div> </div> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-vercode"></i> </div> <input type="text" name="vercode" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-password"></i> </div> <input type="password" name="password" value="" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye"> </div> </div> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-password"></i> </div> <input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword" placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye"> </div> </div> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-username"></i> </div> <input type="text" name="nickname" value="" lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input" lay-affix="clear"> </div> </div> <div class="layui-form-item"> <input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" title="同意"> <a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;"> <ins>用户协议</ins> </a> </div> <div class="layui-form-item"> <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册</button> </div> <div class="layui-form-item demo-reg-other"> <label>社交账号注册</label> <span style="padding: 0 21px 0 6px;"> <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a> <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a> <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a> </span> <a href="#login">登录已有帐号</a> </div> </div> </form> <script src="/static/layui.js"></script> <script> layui.use(function(){ var $ = layui.$; var form = layui.form; var layer = layui.layer; var util = layui.util; // 自定义验证规则 form.verify({ // 确认密码 confirmPassword: function(value, item){ var passwordValue = $('#reg-password').val(); if(value !== passwordValue){ return '两次密码输入不一致'; } } }); // 提交事件 }); </script> </body> </html>
2、登录界面实现
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器</title> <link rel="stylesheet" href="/static/css/layui.css"> </head> <body> <style> .demo-login-container{width: 320px; margin: 21px auto 0;} .demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;} </style> <form class="layui-form" action="/login" method="post" > <div class="demo-login-container"> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-username"></i> </div> <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear"> </div> </div> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-password"></i> </div> <input type="password" name="password" value="" lay-verify="required" placeholder="密 码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye"> </div> </div> <div class="layui-form-item"> <div class="layui-row"> <div class="layui-col-xs7"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-vercode"></i> </div> <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear"> </div> </div> <div class="layui-col-xs5"> <div style="margin-left: 10px;"> <img src="https://www.oschina.net/action/user/captcha" onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();"> </div> </div> </div> </div> <div class="layui-form-item"> <input type="checkbox" name="remember" lay-skin="primary" title="记住密码"> <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a> </div> <div class="layui-form-item"> <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button> </div> <div class="layui-form-item demo-login-other"> <label>社交账号登录</label> <span style="padding: 0 21px 0 6px;"> <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a> <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a> <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a> </span> 或 <a href="#reg">注册帐号</a> </div> </div> </form> <script src="/static/layui.js"></script> <script> layui.use(function(){ var form = layui.form; var layer = layui.layer; // 提交事件 {# form.on('submit(demo-login)', function(data){ var field = data.field; // 获取表单字段值 // 显示填写结果，仅作演示用 layer.alert(JSON.stringify(field), { title: '恭喜您登录成功' }); //JSON可以发送动态请求 // 此处可执行 Ajax 等操作 // … return false; // 阻止默认 form 跳转 });#} }); </script> <script src="/static/layui.js"></script> </body> </html>
3、计算器实现
jisuanqi.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简易计算器</title> <style type="text/css"> *{ margin: auto; padding: 0px; text-align: center; font-family: "微软雅黑"; } .content{ border-radius: 10%; width: 400px; height: 550px; background-color: antiquewhite; } .clear{ border-radius: 50%; width: 20%; height: 72px; background-color: #FF4500; } #result{ margin-top: 24px; font-size: 16px; width: 60%; height: 72px; text-align: left; border-radius: 20px; background-color: #FFE4C4; } .symbol{ margin-top: 36px; font-size: xx-large; border-radius: 50%; width: 20%; height: 72px; background-color:bisque; } .number{ margin-top: 36px; font-size: xx-large; border-radius: 50%; width: 20%; height: 72px; background-color:beige; } .calculate{ margin-top: 36px; font-size: xx-large; border-radius: 50%; width: 20%; height: 72px; background-color: #FF4500; } .content input:hover{ box-shadow: 5px 5px 5px #888888; } .content input:active{ background-color: #FF0000; } </style> <script type="text/javascript"> function clearValue(){ document.getElementById("result").value=""; } function get(value){ document.getElementById("result").value+=value; } function calculate(){ var result=0; result=document.getElementById("result").value; document.getElementById("result").value=""; document.getElementById("result").value=eval(result); }; </script> </head> <body> <div class="banner"> <h2> 简 易 计 算 器 </h2> </div> <br /> <div class="content"> <input type="button" value="清 除" class="clear" onclick="clearValue()"/> <input type="text" id="result" readonly="readonly" placeholder="运 算 结 果 显 示"/> <br /> <input type="button" value="1" class="number" onclick="get(this.value)"/> <input type="button" value="2" class="number" onclick="get(this.value)"/> <input type="button" value="3" class="number" onclick="get(this.value)"/> <input type="button" value="+" class="symbol" onclick="get(this.value)"/> <br /> <input type="button" value="4" class="number" onclick="get(this.value)"/> <input type="button" value="5" class="number" onclick="get(this.value)"/> <input type="button" value="6" class="number" onclick="get(this.value)"/> <input type="button" value="-" class="symbol" onclick="get(this.value)"/> <br /> <input type="button" value="7" class="number" onclick="get(this.value)"/> <input type="button" value="8" class="number" onclick="get(this.value)"/> <input type="button" value="9" class="number" onclick="get(this.value)"/> <input type="button" value="*" class="symbol" onclick="get(this.value)"/> <br /> <input type="button" value="0" class="number" onclick="get(this.value)"/> <input type="button" value="." class="symbol" onclick="get(this.value)"/> <input type="button" value="/" class="symbol" onclick="get(this.value)"/> <input type="button" value="=" class="calculate" onclick="calculate()"/> </div> <br /> </body> </html>
4、数据库的连接
db.py
import pymysql from app import hello_login pymysql.install_as_MySQLdb() connection = pymysql.connect(host='127.0.0.1', user='root', passwd="123456", db='calculator',charset='utf8') cursor = connection.cursor() data = ('郭龙梅', '12346') sql="insert into user1(name,pwd) values('郭龙梅', '12346');" # 执行插入语句 cursor.execute(sql) cursor.execute("select * from user1") for r in cursor: print(r) # 提交事务 connection.commit() # 关闭游标和连接 cursor.close()
5、Flask框架实现
app.py
from flask import Flask, render_template, request app = Flask(__name__) @app.route('/') def hello_world(): # put application's code here # 返回网页文件 return render_template('register.html') @app.route('/register',methods=['post']) def hello_register(): username = request.form.get('nickname') password = request.form.get('password') # reg-password = request.form.get('password') print(username, password) import pymysql pymysql.install_as_MySQLdb() connection = pymysql.connect(host='127.0.0.1', user='root', passwd="123456", db='calculator', charset='utf8') #创建游标对象 cursor = connection.cursor() sql = "insert into user1(name,pwd) values(%s,%s);" values=(username,password) # 执行插入语句 cursor.execute(sql,values) cursor.execute("select * from user1") for r in cursor: print(r) # 提交事务 connection.commit() # 关闭游标和连接 cursor.close() return render_template('index.html') # '/login', motheds=["POST"] ------> []中应该为'' @app.route('/login',methods=['post']) def hello_login(): username = request.form.get('username') password = request.form.get('password') captcha = request.form.get('captcha') print(username, password,captcha) return render_template('jisuanqi.html') @app.route('/jisuanqi') def hello_jisuanqi(): return render_template('admin.html') if __name__ == '__main__': app.run()
浙公网安备 33010602011771号