【七侠传】冲刺阶段--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. Java中创建线程的方式和线程中常用方法？

    Java中如何创建线程? 继承Thread类 实现Rnnable接口 实现Callable接口 通过线程池创建线程 线程中常用方法 线程等待:wait() 进入等待状态,只有等其他线程唤醒或中断才能运 ...

  2. DPU02是一个高度集成的USB转UART的桥接控制器

    DPU02是一个高度集成的USB转UART的桥接控制器,该产品提供了一个简单的解决方案,可将RS-232设计更新为USB设计,并简化PCB组件空间.该DPU02包括了一个USB 2.0全速功能控制器. ...

  3. SQL_TIP_JOIN_x

    没有条件的JOIN会导致数据数量变为两表的数据量的乘积结果. 用ON来在这些结果里进行筛选 on T1.A = T2.A的时候,如果T1的A是不重复的,则实际上是在对T2现有数据做筛选,结果数据量&l ...

  4. Linux的stat命令结果说明

    There are 3 kind of "timestamps": Access - the last time the file was read Modify - the la ...

  5. Entity Framework生成的SQL语句

    var Query= database.Table1.Find(cond, f => f.Table2, f => f.Table3, f => f.Table4, f => ...

  6. wpf TreeView 数据绑定

    <Window x:Class="TsyCreateProjectContent.Window1" xmlns="http://schemas.microsoft. ...

  7. [CQOI2006]凸多边形 /【模板】半平面交

    洛谷 题意:逆时针给出\(n(n<=10)\)个凸多边形的顶点坐标,求它们交的面积. 学长博客,计算几何知识全面 半平面交问题详细讲解 其他模板题推荐 [ICPC2020 WF] Domes [ ...

  8. 从create-react-app 学点东西1：web-vitals

    导言 市场中流行的框架有很多地方是值得我们深入的去探究或学习的,<从create-react-app学点东西>这系列文章从create-react-app创建的项目中找出一些重要或者容易忽 ...

  9. python监控文件变化

    网址: https://blog.csdn.net/qq_40223983/article/details/102889329 起步在python中文件监控主要有两个库,一个是pyinotify,一个 ...

  10. 1.EditPlus

    EditPlus软件使用 1.新建 XML 文件 2.编辑器设置 在文件保存时选择编码格式