基于Bootstrap开发的前端12307票务网站

数据库 2023-12-27 17:10:19 阅读次数: 0

一、12307在线票务网站设计的问题描述

内容及功能要求

该在线票务网站要实现至少包括以下页面：主页、酒店信息页、机票信息页、火车票信息页等。

具体包括：

主页要有导航菜单栏、搜索栏、酒店、机票、火车票等信息。

酒店信息页要有对酒店信息的介绍。

机票信息页要有机票信息介绍。

火车票信息页要有火车票信息的介绍。

二、Bootstrap的相关使用

入门模板

请确保使用最新的页面设计和开发标准来设置页面。也就是说，使用 HTML5 文档类型（doctype）、并包含一个设置 viewport（视口）的 <meta> 标签以实现正确的响应式布局行为。这些要求组合在一起之后，你的页面应当如下所示：

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>

    <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL+GlRQEKIpYR04" crossorigin="anonymous"></script>
    -->
  </body>
</html>

三、12307在线票务网站设计与实现

1.网站规划

整体是通过Bootsrap框架搭载实现的，每个页面均待有导航栏，主页可以通过div内的form表单来实现快速跳转需要购买的火车票或者机票，结合轮播图，并且图文结合来展示优惠折扣的旅行计划，使用超链接链接到新页去，并且通过框架里面表格结合超链接来展示官方的公告，底部通过框架来实现备案和版权的布局。

部分代码展示：

 <nav class="navbar navbar-expand-lg navbar-light bg-light"><span class="border border-info">
        <a class="navbar-brand" href="index.html">12307在线购票</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button></span>
      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto"><span class="border border-info">
            <li class="nav-item active">
              <a class="nav-link" href="train.html">火车票 <span class="sr-only">(current)</span></a>
            </li></span><span class="border border-info">
            <li class="nav-item">
              <a class="nav-link" href="aeroplane.html">机票</a>
            </li></span><span class="border border-info">
            <li class="nav-item">
              <a class="nav-link" href="groggery.html">酒店服务</a>
            </li></span><span class="border border-info">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                账号设置
              </a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="login.html">登录</a>
                <a class="dropdown-item" href="zuce.html">注册</a>
            </li></span>
            
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search for require" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
          </form>
        </div>
      </nav>

      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="image/lunbo-1.png" class="d-block w-100" alt="..." width="100%" height="500px">
          </div>
          <div class="carousel-item">
            <img src="image/lunbo-2.png" class="d-block w-100" alt="..." width="100%" height="500px">
          </div>
          <div class="carousel-item">
            <img src="image/lunbo-3.png" class="d-block w-100" alt="..." width="100%" height="500px">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </button>
      </div>

2.购买火车票网页的设计与实现

带有主页的导航栏，其次用form表单来进行数据的获取，再通过检索后台数据(暂未实现)在通过下面的表格中的span标签展示出火车票数据，用户来选择购买。

部分代码展示：

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">顺序</th>
      <th scope="col">车次</th>
      <th scope="col">出发时间-到站时间</th>
      <th scope="col">出发站-终点站</th>
      <th scope="col">是否有座位</th>
      <th scope="col">备注</th>
      <th scope="col">购票</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>K1406</td>
      <td>2023/6/30 8:20-2023/6/32 9:20</td>
      <td>长春西站-成都东站</td>
      <td>硬座*6</td>
      <td></td>
      <td><button style="background-color: aquamarine;">购买</button></td>
    </tr
  </tbody>
</table>
</div><br><br>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

3.购买飞机票网页的设计与实现

带有主页的导航栏，其次用from表单来进行数据的获取，再通过检索后台数据在通过下面的表格中的span标签展示出飞机票数据，用户来选择购买，同时再做了一个表格来图文结合展示优惠的旅行机票。

部分代码展示：

<nav class="navbar navbar-expand-lg navbar-light bg-light"><span class="border border-info">
      <a class="navbar-brand" href="index.html">12307在线购票</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button></span>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto"><span class="border border-info">
          <li class="nav-item active">
            <a class="nav-link" href="train.html">火车票<span class="sr-only">(current)</span></a>
          </li></span><span class="border border-info">
          <li class="nav-item">
            <a class="nav-link" href="aeroplane.html">机票</a>
          </li></span><span class="border border-info">
          <li class="nav-item">
            <a class="nav-link" href="groggery.html">酒店服务</a>
          </li></span><span class="border border-info">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
              账号设置
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="login.html">登录</a>
              <a class="dropdown-item" href="zuce.html">注册</a>
          </li></span>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search for require" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
      </div>
    </nav>


    <br><br> 
    <center>
  <div style="height: 100px;width: 90%;border:solid #aeaeae;background-color: #b5edff;">
  <div style="height: 100px;width: 100px; position:absolute;left: 110px;"><br>
  <input type="radio" name="piao">单程<br><input type="radio" name="piao">往返
  </div>
  <div style="height: 100px;width: 1100px; position:absolute;left: 210px;top: 120px; font-size: 16px;color: #737373;">
  <br>出发地&nbsp;&nbsp;<input type="text" style="border: none;" value="长春">&nbsp;&nbsp;&nbsp;&nbsp;
  目的地&nbsp;&nbsp;<input type="text" style="border: none;">&nbsp;&nbsp;&nbsp;&nbsp;
  出发日期&nbsp;<input type="date" style="border: none;">&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" name="x1">学生<input type="radio" name="x1">成人&nbsp;&nbsp;&nbsp;&nbsp;
    起飞时间<input type="time">&nbsp;&nbsp;
    <input type="button" onclick="f()" value="查询票务" style="width: 80px; height: 30px; background-color: rgb(29, 195, 255);border: none;border-radius: 5px;">
  </div>
  </div>
  </center>
  <br>
  
  
  
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">顺序</th>
        <th scope="col">航班</th>
        <th scope="col">出发时间-到站时间</th>
        <th scope="col">出发站-终点站</th>
        <th scope="col">是否有座位</th>
        <th scope="col">备注</th>
        <th scope="col">购票</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>川551406</td>
        <td>2023/6/30 8:20-2023/6/32 9:20</td>
        <td>长春龙嘉国际机场-成都双流国际机场</td>
        <td>商务舱*6</td>
        <td></td>
        <td><button style="background-color: aquamarine;">购买</button></td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>川504502</td>
        <td>2023/6/30 8:20-2023/6/32 9:14</td>
        <td>广州白云机场-成都双流国际机场</td>
        <td>候补</td>
        <td></td>
        <td><button style="background-color: rgb(127, 246, 255);">候补</button></td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>川969117</td>
        <td>2023/6/30 7:40-2023/6/32 9:14</td>
        <td>达州河市机场-长春龙嘉国际机场</td>
        <td>候补</td>
        <td></td>
        <td><button style="background-color: rgb(127, 246, 255);">候补</button></td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>南航85436</td>
        <td>2023/6/29 8:20-2023/6/31 6:14</td>
        <td>成都龙泉机场-上海国际机场</td>
        <td>经济舱*3</td>
        <td></td>
        <td><button style="background-color: aquamarine;">购买</button></td>
      </tr>
      <tr>
        <th scope="row">5</th>
        <td>南航854402</td>
        <td>2023/7/1 16:10-2023/7/1 19:48</td>
        <td>长春龙嘉国际机场-杭州国际机场</td>
        <td>无票</td>
        <td></td>
        <td><button>购买</button></td>
      </tr>
      <tr>
        <th scope="row">6</th>
        <td>川852502</td>
        <td>2023/6/30 8:40-2023/6/32 9:52</td>
        <td>深圳国际机场-成都双流机场</td>
        <td>经济舱*14</td>
        <td></td>
        <td><button style="background-color: aquamarine;">购买</button></td>
      </tr>
      <tr>
        <th scope="row">7</th>
        <td>京895342</td>
        <td>2023/6/29 8:01-2023/6/30 19:6</td>
        <td>北京国际机场-成都双流国际机场</td>
        <td>经济舱*16</td>
        <td></td>
        <td><button style="background-color: aquamarine;">购买</button></td>
      </tr>
    </tbody>
  </table>
  </div>

<br><br>
<center>
<table >
<tr >
  <td class="table-active"width="500px"height="60px" colspan="2" align="center"><p style="color: #5c5c5c;">周末省心游</p></td>
</tr>
<tr>
  <td class="table-primary"width="500px"height="40px">航班</td>
  <td class="table-primary"width="500px"height="40px">费用</td>
</tr>
<tr>
  <td class="table-secondary"width="500px"height="40px"><img src="image/air-1.jpg" width="150px">长春->南宁</td>
  <td class="table-secondary"width="500px"height="40px">¥540起</td>
</tr>
  <tr>
  <td class="table-success"width="500px"height="40px"><img src="image/air-2.jpg" width="150px">长春->深圳</td>
  <td class="table-success"width="500px"height="40px">¥580起</td>
</tr>
<tr>
  <td class="table-danger"width="500px"height="40px"><img src="image/air-3.jpg" width="150px">长春->上海</td>
  <td class="table-danger"width="500px"height="40px">¥640起</td>
</tr>
<tr>
  <td class="table-warning"width="500px"height="40px"><img src="image/air-4.jpg" width="150px">长春->杭州</td>
  <td class="table-warning"width="500px"height="40px">¥440起</td>
</tr>
<tr>
  <td class="table-info"width="500px"height="40px"><img src="image/air-5.jpg" width="150px">长春->呼和浩特</td>
  <td class="table-info"width="500px"height="40px">¥520起</td>
</tr>
<tr>
  <td class="table-light"width="500px"height="40px"><img src="image/air-6.jpg" width="150px">长春->成都</td>
  <td class="table-light"width="500px"height="40px">¥520起</td>
</tr>
<tr>
  <td class="table-dark"width="500px"height="40px"><img src="image/air-7.jpg" width="150px">长春->北京</td>
  <td class="table-dark"width="500px"height="40px">¥550起</td>
</tr>
</table>
</center>


  <br><br>
  <div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

4.酒店信息以及酒店预订页面的设计与实现

带有主页的导航栏，同时结合伪类选择器来实现酒店展示页面的图片放缩。还写了一个表单来获取用户对于预订酒店的信息提交，数据直接传输给选择的酒店。再结合轮播图进行酒店的展示。

部分代码展示：

<div>
  <form action="jd-cg.html">
    <table class="table table-hover">
      <thead>
        <tr>
          <th colspan="2">入住申请表单</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">酒店名称(全称)*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">申请酒店位置(精确至区县)*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">入住者姓名*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">入住者身份证类型*</th>
          <td><select>
            <option value="0">中国大陆居民身份证</option>
            <option value="1">中华人民共和国护照</option>
            <option value="2">香港特别行政区护照</option>
            <option value="3">澳门特别行政区护照</option>
          </select></td>
        </tr>
        <tr>
          <th scope="row">入住者身份证号码*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">联系方式*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">入住时间*</th>
          <td><input type="date">&nbsp;&nbsp;&nbsp;<input type="time"></td>
        </tr>
        <tr>
          <th scope="row">入住时长*(居住市场大于8天请与客服联系)</th>
          <td>
            <select>
              <option value="0">1</option>
              <option value="1">2</option>
              <option value="2">3</option>
              <option value="3">4</option>
              <option value="0">5</option>
              <option value="1">6</option>
              <option value="2">7</option>
              <option value="3">8</option>
            </select>天
          </td>
        </tr>
        <tr>
          <th scope="row">邮箱(非必填项)</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <center>
          <td colspan="2"><input type="submit" value="提交" style="border: solid rgb(94, 94, 94); border-radius: 3px;width: 100px;height: 40px;"></td>
        </center>
        </tr>
      </tbody>
    </table>
  </form>
</div>


<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image/jdl-1.jpg" class="d-block w-100" alt="..." width="100%" height="500px">
      <div class="carousel-caption d-none d-md-block">
        <h5>成都人民公园朵唯酒店</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="image/jdl-2.jpg" class="d-block w-100" alt="..."  width="100%" height="500px">
      <div class="carousel-caption d-none d-md-block">
        <h5>长春伴这有山附属酒店</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="image/jdl-3.jpg" class="d-block w-100" alt="..."  width="100%" height="500px">
      <div class="carousel-caption d-none d-md-block">
        <h5>成都大学附属酒店</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>

5.登录以及注册页面的设计与实现

带有主页的导航栏，通过css来实现样式的调整，结合JavaScript内的技术来对注册信息进行校验。

部分代码展示：

<script>
      function validateForm() {
  // 获取表单元素的值
  var username = document.getElementById(username).value;
  var password = document.getElementById(username).value;

  // 校验用户名：长度为 3 至 20 个字符
  if (username.length < 3 || username.length > 20) {
    alert("用户名必须在3到20个字符之间");
    return false;
  }

  // 校验密码：长度至少为 8 个字符
  if (password.length < 8) {
    alert("密码长度必须至少为8个字符");
    return false;
  }


  // 所有校验均通过，可以提交表单
  return true;
}
    </script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light"><span class="border border-info">
      <a class="navbar-brand" href="index.html">12307在线购票</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button></span>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto"><span class="border border-info">
          <li class="nav-item active">
            <a class="nav-link" href="train.html">火车票<span class="sr-only">(current)</span></a>
          </li></span><span class="border border-info">
          <li class="nav-item">
            <a class="nav-link" href="aeroplane.html">机票</a>
          </li></span><span class="border border-info">
          <li class="nav-item">
            <a class="nav-link" href="groggery.html">酒店服务</a>
          </li></span><span class="border border-info">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
              账号设置
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="login.html">登录</a>
              <a class="dropdown-item" href="zuce.html">注册</a>
          </li></span>
          
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search for require" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
      </div>
    </nav>

<div class="y--2">
    <!-- <div class="anniu"> -->
      <br><br><br><br>
      <center>
      <div class="bai">
      <div class="qq1">
      <div class="qq2">&nbsp;&nbsp;&nbsp;中铁12307</div>
      </div>
      <form action="login-cg.html" method="post" onsubmit="return validateForm()">
    <h1>登录</h1><br>
    请输入账号：<br>
    <input type="text" id="username" size="37px" maxlength="12"><br>
    请输入密码：<br>
    <input type="password" id="password" size="37px" maxlength="20"><br>
    <input type="checkbox" name="a1">记住密码？
    <br>
   <!-- <input type="submit" value="注册" id="f1">&nbsp;&nbsp;&nbsp; -->
      <input type="submit" value="登录" id="f2">
      </form>
      </div>	
      </center>
  <!-- </div> -->

6.网站的其他网页

四、心得及感受

由于制作时间匆忙，在线购票网站能够基本实现用户的要求，并且在指导书的要求之上增添了登录跟注册的页面，同时通过JavaScript对于注册表单能够实现校验功能。

猜你喜欢

转载自blog.csdn.net/qq_74140417/article/details/134262565
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022