【七侠传】冲刺阶段--Day2
团队成员
20181221曾宇涛 20181202李祎铭 20181209沙桐 20181215薛胜瀚
20181216杨越麒 20181223何家豪 20181232冶廷瑞
时间：11月24日
本日任务：前端开发
达成进度：
- 完善前端网页，结合Bootstrap优化页面显示
- 设置加密和文件处理功能
- 完善了文件上传下载模块
- 配合以上功能修改后端程序
一、基于Bootstrap的前端开发
1.登陆界面：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="generator" content="Jekyll v3.8.5"> <title>【七侠传】登录-电子公文系统</title> <!-- <link rel="canonical" href="https://getbootstrap.com/docs/4.2/examples/pricing/"> --> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <link href="css/signin.css" rel="stylesheet"> <style> .bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; } @media (min- 768px) { .bd-placeholder-img-lg { font-size: 3.5rem; } } </style> <!-- Custom styles for this template --> <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm"> <h5 class="my-0 mr-md-auto font-weight-normal">电子公文系统</h5> <nav class="nav-fixed-top my-2 my-md-0 mr-md-3"> <a class="p-2 text-dark" href="#">了解我们</a> <a class="p-2 text-dark" href="#">制作过程</a> </nav> <a class="btn btn-outline-primary" href="register.html">注册</a> </div> </head> <body> <form class="form-signin text-center" action="myfile.html"> <img class="mb-4" src="image/logo.jpg" alt width="72" height="72"> <h1 class="h3 mb-4 font-weight-normal">登录</h1> <input type="Username" id="inputUsername" class="form-control" placeholder="请输入您的用户名" required autofocus> <input type="password" id="inputPassword" class="form-control" placeholder="请输入您的密码" required> <input type="repassword" id="code_input" class="form-control" placeholder="请输入验证码" required> <div id="v_container" ></div> <button id="my_button" class="btn btn-lg btn-primary btn-block" type="submit">登录</button> <p class="mt-5 mb-3 text-muted">© 本项目由七侠传小组制作</p> </form> </body> <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="js/gVerify.js"></script> <script> var verifyCode = new GVerify("v_container"); document.getElementById("my_button").onclick = function(){ var res = verifyCode.validate(document.getElementById("code_input").value); if(res){ alert("验证正确"); }else{ alert("验证码错误"); } } </script> </html>
（以下界面将不再贴代码，详情请见https://gitee.com/MisakaYuii/system）
此为登陆界面样式：
2.注册界面：
3.主界面：
4.发送界面：
5.接受界面：
分析：主要使用bootstrap框架来编写，使用官方的模板进行编写，主要实现简洁大方的视觉效果和实际有效的界面功能。