【七侠传】冲刺阶段--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框架来编写，使用官方的模板进行编写，主要实现简洁大方的视觉效果和实际有效的界面功能。

二、团队合照

【七侠传】冲刺阶段--Day2的更多相关文章

  1. 【Alpha版本】冲刺阶段——Day2

    [Alpha版本]冲刺阶段--Day2 阅读目录 今日进展 问题困难 明日任务 今日贡献量 站立式会议 TODOlist [今日进展] 密码算法方面: 存储密码的步骤 使用CSPRNG生成一个长度足够 ...

  2. 《团队作业第三、四周》五阿哥小组Scrum 冲刺阶段---Day2

    <团队作业第三.四周>五阿哥小组Scrum 冲刺阶段---Day2 一.项目燃尽图 二.项目进展 20182310周烔今日进展: 主要任务一览:完成总博客的提交,制定接下来的计划,编写博客 ...

  3. 冲刺阶段 day2

    day2 项目进展 今天本组五位同学聚在一起将项目启动,首先我们对项目进行了规划,分工,明确指出每个人负责哪些项目.由负责第一部分的组员开始编程,在已经搭建好的窗体内,对系部设置进行了编写,本校共六个 ...

  4. 【Alpha版本】冲刺阶段 - Day2 - 漂流

    今日进展 袁逸灏:实现车辆的子弹发射(3.5h) 启动类,子弹类(修改类),游戏画面类(修改类) 刘伟康:继续借鉴其他 alpha 冲刺博客,初步了解墨刀.leangoo等工具(2h) 刘先润:解决了 ...

  5. 冲刺阶段——Day2

    [今日进展] 完成黄金点游戏的算法与代码架构. 使用文字界面完成任务 码云链接:https://gitee.com/jxxydwt1999/20175215-java/blob/master/Gold ...

  6. Beta阶段敏捷冲刺报告-DAY2

    Beta阶段敏捷冲刺报告-DAY2 Scrum Meeting 敏捷开发日期 2017.11.3 会议时间 13:00 会议地点 微信群 参会人员 项目组全体成员 会议内容 打包问题修复, 爬虫优化, ...

  7. 【Alpha版本】冲刺阶段 - Day7 - 靠泊

    Alpha:指集成了主要功能的第一个试用版本.在这个版本中有些小功能并未实现.事实上很多软件的 Alpha 版本只是在内部使用.给外部用户使用的 Alpha 版本会起一个比较美妙的名字,例如,技术预览 ...

  8. 《团队作业第三、第四周》五小福团队作业--Scrum 冲刺阶段--Day7

    <团队作业第三.第四周>五小福团队作业--Scrum 冲刺阶段--Day7 一.项目燃尽图 二.项目进展 [20172301郭恺第七天的进展] 第七天完成的任务: 代码整合,界面调整为相对 ...

  9. 【Alpha版本】冲刺阶段——Day7

    [Alpha版本]冲刺阶段--Day7 阅读目录 今日进展 今日贡献量 贡献量汇总 TODOList 及项目燃尽图 [今日进展] 将项目源文件打成jar包,并运行测试 完成答辩ppt 项目运行情况 主 ...

  10. 绝不划水队Alpha冲刺阶段博客目录

    绝不划水队Alpha冲刺阶段博客目录 一.Scrum Meeting 第六周会议记录 第七周会议记录 二.测试报告 alpha阶段测试报告 三.习得的软工原理/方法/技能? 李浩杰: (1)一开始分工 ...

随机推荐

  1. Windows 11安装etcd

    一.从官方网站找到Windows版的安装包下载 https://etcd.io/ 把etcd的压缩包解压到D:/soft/etcd文件夹下,首先运行etcd.exe,这是启动etcd服务的,接着就可以 ...

  2. （1028） 权限，chmod、chgrp、chown详解

    https://www.cnblogs.com/Berryxiong/p/6193866.html 例1: $ chgrp - R book /opt/local /book 改变/opt/local ...

  3. （0724） 格雷码 verilog

    https://blog.csdn.net/gordon_77/article/details/79489548 assign gray_value = (binary_value >> ...

  4. hadoop集群搭建之测试集群，配置历史服务器，日志聚集，时间同步

    hadoop集群搭建之测试集群,配置历史服务器,日志聚集,时间同步前期概要:我们完全分布式集群已经搭建完毕,并且还写了群启/群关的脚本, 接下来有必要来测试一遍集群,我们可以使用官方的案例,用它们在集 ...

  5. 用telnet远程连接linux系统

    环境,centos7.6 通过telnet进行远程登录的方法如下: 1.安装telnet,telnet-server,xinetd 检测是否安装telnet rpm -qa | grep telnet ...

  6. delphi get post

    procedure GetDemo;var IdHttp : TIdHTTP; Url : string;//请求地址 ResponseStream : TStringStream; //返回信息 R ...

  7. gitee下载项目

    PS:如果直接在gitee仓库中选择下载zip,在本地打开项目后是不会与gitee远程库绑定的.如果要与远程库同步,需要选择克隆,同样的,本地需要先搭建好git环境. 1.在本地新建文件夹 2.在文件 ...

  8. 使用MVC编程模型通过flask蓝图实现前端后台新闻发布系统

    相关知识点: flask:是Python开发轻量级框架,也能很好的开发动态网站. 蓝图:flask中蓝图能很好的实现代码分割管理,从而不使代码全部放在app.py杂乱无章,蓝图就像动物管理员一样,把猫 ...

  9. sql offset 优化

    // let groupSql = ` select id,jd_gcj02ll, wd_gcj02ll from ${tablename_qiye} where id between ${size ...

  10. Office常见问题及解决方法

    1.OneNote粘贴的图片比较模糊 问题原因:Microsoft为了使OneNote排版美观,在粘贴一些尺寸较大的图片时,会将图片进行缩放. 解决方法:右键->还原为原始尺寸