【七侠传】冲刺阶段--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-width: 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="data: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">&copy; 本项目由七侠传小组制作</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框架来编写，使用官方的模板进行编写，主要实现简洁大方的视觉效果和实际有效的界面功能。

二、团队合照

最新文章

  1. 【译】Getting Physical With Memory
  2. mysql更新密码
  3. Mongodb数据导出工具mongoexport和导入工具mongoimport介绍
  4. Force.com微信开发系列（六）客服接口
  5. C语言 数组做函数参数不传数组个数的遍历方法
  6. linux namespace note
  7. [AngualrJS] Using Angular-Cache for caching http request
  8. Mybatis第二天（其他）
  9. iOS开发 socket, 全局socket
  10. leetCode in Java (一)
  11. Spring_boot入门（1）
  12. [Swift]LeetCode47. 全排列 II | Permutations II
  13. iOS开发 -------- AFNetworking使用中遇到的小问题
  14. NTFS(Windows)、ext4(RHEL6)和xfs(RHEL7)文件系统的误删除恢复和备份
  15. shell正常运行，加入定时任务执行失败
  16. EZ 2017 01 07 t
  17. np.random.choice方法
  18. google中guava类库:AsyncEventBus
  19. c语言数组放在main函数里面和外面的区别
  20. Win7 开启显示快速启动工具栏，发送到快速启动右键菜单

热门文章

  1. HIVE 调优思路和实践
  2. vue3 门户网站搭建7-eslint
  3. 004. html篇之《标签分类和嵌套规则》
  4. windows10本地联调zk环境报异常SASL config status: Will not attempt to authenticate using SASL (unknown error)
  5. IaaS--区域和可用区（何恺铎《深入浅出云计算》笔记整理）
  6. MySQL连接提示 public key retrieval is not allowed
  7. Kotlin源码分析 - 元编程（使用自身语言编写生成自身代码）
  8. linux 复合页( Compound Page )的介绍
  9. 微信小程序-自定义tabbar配置及注意事项
  10. windows 10 使用Ghost 恢复系统，安装bcd修复引导