【七侠传】冲刺阶段--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. 12组-Beta冲刺-5/5

    一.基本情况 队名:字节不跳动 组长博客:https://www.cnblogs.com/147258369k/p/15609352.html Github链接:https://github.com/ ...

  2. Java pom阿里云插件

    <pluginRepositories> <pluginRepository> <id>alimaven spring plugin</id> < ...

  3. 2017GPLT

    PTA天梯赛2017GPLT 7-6 整除光棍 给定一个不以5结尾的奇数\(x\),求出数字\(n\)使得\(n*x=11...111\),输出数字n和1的位数 题解:模拟竖式除法 我们一开始发现n只 ...

  4. springcloud(六) - 配置中心

    功能介绍 设置和业务代码获取配置 功能实现 <!-- 添加configjar --> <dependency> <groupId>org.springframewo ...

  5. chia P图安装

    https://techtellectual.com/chia-plotting-guide-installing-plotman-and-mad-max-in-linux/ Chia 绘图指南:在 ...

  6. mysql常用语句操作

    概述: 1.通过表结构介绍.来操作mysql常用的语法&语句: 2.现在学习下几个基本的sql语句,万变不离其宗,把基础弄扎实了其它的就很容易了 一.表结构&建表: 1.学生基础信息表 ...

  7. Kotlin源码分析 - 元编程（使用自身语言编写生成自身代码）

    Kotlin源码分析 Kotlin模块FIR分析发现,在生成fir tree的时候,kotlin使用了元编程的技术,以前看到这个技术还是在JastAdd上,使用jastadd语法去写代码,生成Java ...

  8. iOS 过滤字符串

    //表示去掉字符串中的/符号 sysdate:[[self Gettime:strbegindate] stringByReplacingOccurrencesOfString:@"/&qu ...

  9. 【git】2.5远程仓库的使用

    资料来源 (1) https://git-scm.com/book/zh/v2/Git-%E5%9F%BA%E7%A1%80-%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93% ...

  10. 新年快乐！体验Windows7黄金版，祝你2023财源广进！

    新年快乐!体验Windows7黄金版,祝你2023财源广进! 首先,开机画面表示出它的土豪,并说明,它并不来自Microsoft. 然后: 它是2016年出现的. 改成64位的. 然后许可: 自定义: ...