今日共同报告-09-WEB端系统基本完善

今日共同报告-09

今天完善了WEB端的地铁查询系统，这部分主要由我完成，我的搭档主要在负责安卓端页面的开发。

基本页面和功能已经完全实现。

今天的合作照片:

页面效果展示：

 部分代码：

Sub.java

package dao;

import com.BaseBean;
import com.DB;
import com.SubwayBean;

import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

public class Sub {

    public ArrayList<SubwayBean> ArrayTransferStation(String station1, String station2){

        ArrayList<SubwayBean> resultArray = new ArrayList<>();
        DB db = new DB();
        PreparedStatement preparedStatement=null;
        ResultSet rs = null;
        int i=0;

        try {
            String sql ="WITH RECURSIVE transfer (start_station, stop_station, stops, path) AS (\n" +
                    "    SELECT station_name, next_station, 1, CAST(CONCAT(line_name,' ',station_name , '--->', line_name,' ',next_station) AS CHAR(1000))\n" +
                    "    FROM station_table WHERE station_name = ?\n" +
                    "    UNION ALL\n" +
                    "    SELECT p.start_station, e.next_station, stops + 1, CONCAT(p.path, '--->', e.line_name, ' ',e.next_station)\n" +
                    "    FROM transfer p\n" +
                    "             JOIN station_table e\n" +
                    "                  ON p.stop_station = e.station_name AND (INSTR(p.path, e.next_station) = 0)\n" +
                    ")\n" +
                    "SELECT * FROM transfer WHERE stop_station =?;\n";

            preparedStatement=db.conn.prepareStatement(sql);
            preparedStatement.setString(1,station1);
            preparedStatement.setString(2,station2);
            rs = preparedStatement.executeQuery();

            while (rs.next())
            {
                i++;
                SubwayBean subwayBean = new SubwayBean();
                subwayBean._StartStation = (String) rs.getObject(1);
                subwayBean._EndStation = (String) rs.getObject(2);
                subwayBean._Number = rs.getObject(3);
                subwayBean._Path = (String) rs.getObject(4);
                resultArray.add(subwayBean);

            }
            if(i==0)
            {
                String result = "未查询到有关信息，输入不正确或输入为空，请输入有效信息";
            }

        } catch (SQLException e) {
            e.printStackTrace();
        } finally{
            db.close();
        }
        return resultArray;
    }
    public BaseBean getStationByNum(int num){

        DB db = new DB();
        BaseBean base = new BaseBean();

        try {
            String sql = "SELECT * FROM basictable WHERE num = " + num ;
            db.rs =db.stmt.executeQuery(sql);

            if (db.rs.next()){

                base.base_id=db.rs.getString("id");
                base.base_line=db.rs.getString("line");
                base.base_num=db.rs.getInt("num");
                base.base_name=db.rs.getString("nam");

            }

        } catch (SQLException e) {
            e.printStackTrace();
        } finally{

        }
        db.close();
        return base;
    }

    public int getStationNum(String name){

        DB db = new DB();
        BaseBean base = new BaseBean();

        String na = "'" + name + "'";
        try {
            String selectQuery = "SELECT * FROM basictable WHERE nam="+na;
            db.rs =db.stmt.executeQuery(selectQuery);

            if (db.rs.next()){

                base.base_id=db.rs.getString("id");
                base.base_line=db.rs.getString("line");
                base.base_num=db.rs.getInt("num");
                base.base_name=db.rs.getString("nam");

            }

        } catch (SQLException e) {
            e.printStackTrace();
        } finally{

        }
        db.close();
        return base.base_num;
    }
    public String StationLine(String lin){

        DB db = new DB();
        String stat = "";
        String li = "'" + lin + "'";
        try {
            String selectQuery = "SELECT * FROM station_table WHERE line_name="+li;
            db.rs =db.stmt.executeQuery(selectQuery);

            while (db.rs.next()){

                String base_name=db.rs.getString("station_name");
                stat +="->";
                stat = stat + base_name;
                stat+=" ";
                stat+="<br><br>";

            }

        } catch (SQLException e) {
            e.printStackTrace();
        } finally{

        }
        db.close();
        return stat;
    }
    public String LineStation(String name){

        DB db = new DB();
        String na = "'" + name + "'";
        String line = "地铁";
        try {
            String selectQuery = "SELECT * FROM station_table WHERE station_name="+na;
            db.rs =db.stmt.executeQuery(selectQuery);

            if (db.rs.next()){
                String base_name=db.rs.getString("line_name");
                line += base_name;
            }

        } catch (SQLException e) {
            e.printStackTrace();
        } finally{

        }
        db.close();
        return line;
    }

}

SubwayMain.java

package main;

import com.BaseBean;
import com.DB;
import com.SubwayBean;
import dao.Sub;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

/**
 *
 * **/
@WebServlet("/SubwayMain")
public class SubwayMain extends HttpServlet {
    @Override
    public void init() throws ServletException {
    }
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter out = resp.getWriter();
      
        String start = new String(req.getParameter("start_station").getBytes("ISO8859-1"),"UTF-8");
        String end = new String(req.getParameter("end_station").getBytes("ISO8859-1"),"UTF-8");

        try {
            Sub sub = new Sub();
            ArrayList<SubwayBean> arr = sub.ArrayTransferStation(start,end);
            req.setAttribute("routeMain", arr);
            req.getRequestDispatcher("/bestresult.jsp").forward(req, resp);
        }catch (Exception e){
            e.printStackTrace();
        }finally {

        }

    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
    @Override
    public void destroy() {

    }
}

css

@charset "UTF-8";
body{
    background-image: url(../images/p_background.jpg);
    background-size: cover;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.btn{

    width:200px;

    height:50px;

    border-radius: 25px;
}
a {
    color: #fFF;
    margin-top: 0px;
    text-decoration: none;
    font-size: 18px;
    display: block;

}

a:hover {
    color: #fff;
    text-decoration: underline;
    font-size: 18px;
}

a:visited {
    color: #fff;
    font-size: 18px;
}
/*整个tab层居中，宽度为600px*/
#tabDiv {
    width: 600px;
    margin: 1em auto;
    padding-bottom: 10px;
    border-right:     #1E90FF 1px solid;
    border-top:     #1E90FF 1px solid;
    border-left:     #1E90FF 1px solid;
    border-bottom:     #1E90FF 1px solid;
    background-color: #ffffff;
    border-radius: 22px;
    opacity:0.8;
}
/*tab头的样式*/
#tabsHead {
    padding-left: 0px;
    height: 40px;
    background-color: #1E90FF;
    font-size: 1em;
    margin: 0px 0px 0px;
    color:     #1E90FF;
    line-height: 26px;
    border-radius: 20px;
}
/*已选tab头（超链接）的样式*/
.curtab {
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    border-right: #b2c9d3 1px solid;
    font-weight: bold;
    float: left;
    cursor: pointer;
    background:    #4169E1;
    line-height: 40px;
    border-radius: 20px;
}
/*未选tab头（超链接）的样式*/
.tabs {
    border-right: #c1d8e0 1px solid;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    font-weight: normal;
    float: left;
    cursor: pointer;
    background: #1E90FF;
    border-radius: 20px;
}
p {
    font-size: 12pt;
    font-family: 华文楷体;

}
li {
    border-bottom-style: solid;
    border-bottom-color: #EEE;
    border-bottom-width: thin;
    height: 25px;
    font-family: "宋体";
    font-size: 12pt;

}

index.jsp

<%@ page language= "java" contentType= "text/html; charset=UTF-8"
         pageEncoding= "UTF-8" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<%@page import="java.sql.*" %>
<head>
  <title>石家庄铁道大学北京地铁查询系统</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="css/mysub_style.css">
  <script type="text/jscript">
        //图片定时转换
        var curIndex=0;
        var timeInterval=2000;
        var arr=new Array();
        arr[0]="./images/p_14.jpg";
        arr[1]="./images/p__15.jpg";
        arr[2]="./images/p_16.jpg";
        setInterval("changeImg()",timeInterval);
        function changeImg(){
            var obj=document.getElementById("obj");
            if(curIndex==arr.length-1){
                curIndex=0;
            }else{
                curIndex+=1;
            }
            obj.src=arr[curIndex];
        }

        //显示当前时间
        function showLocale(objD) {
            var str, colorhead, colorfoot;
            var yy = objD.getYear();
            if (yy < 1900)
                yy = yy + 1900;
            var MM = objD.getMonth() + 1;
            if (MM < 10)
                MM = '0' + MM;
            var dd = objD.getDate();
            if (dd < 10)
                dd = '0' + dd;
            var hh = objD.getHours();
            if (hh < 10)
                hh = '0' + hh;
            var mm = objD.getMinutes();
            if (mm < 10)
                mm = '0' + mm;
            var ss = objD.getSeconds();
            if (ss < 10)
                ss = '0' + ss;
            var ww = objD.getDay();
            colorhead = "<font color=\"#000000\">";
            if (ww == 0)
                ww = "星期日";
            if (ww == 1)
                ww = "星期一";
            if (ww == 2)
                ww = "星期二";
            if (ww == 3)
                ww = "星期三";
            if (ww == 4)
                ww = "星期四";
            if (ww == 5)
                ww = "星期五";
            if (ww == 6)
                ww = "星期六";
            colorfoot = "</font>"
            str = colorhead + yy + "-" + MM + "-" + dd + " " + hh + ":" + mm
                    + ":" + ss + "  " + ww + colorfoot;
            return (str);
        }

        function tick() {
            var today;
            today = new Date();
            document.getElementById("localtime").innerHTML = showLocale(today);
            window.setTimeout("tick()", 1000);
        }
        window.onload = function() {
            tick();
        }
    
        function showTab(tabHeadId,tabContentId)
        {
           
            var tabDiv = document.getElementById("tabDiv");
        
           document.getElementById('tabContent1').style.display='none';
            document.getElementById('tabContent2').style.display='none';
            document.getElementById('tabContent3').style.display='none';
            document.getElementById('tabContent4').style.display='none'
      
            document.getElementById(tabContentId).style.display = 'block';
          
            var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a');
            for(i=0; i<tabHeads.length; i++)
            {
              
                tabHeads[i].className='tabs';
            }
           
            document.getElementById(tabHeadId).className='curtab';
            document.getElementById(tabHeadId).blur();
        }

</script>
</head>

<body>

<div style="width: 100%; font-family: 微软雅黑; text-align: center; font-size: 20pt; ">石家庄铁道大学北京地铁查询系统</div><br/>
<div id="localtime" style="text-align: center;"></div>
<div id="tabDiv" style="width: 1000px;">

  <div id="tabsHead" >
    <a id="tabs1" class="curtab" style="height:40px;width:229px;"  href="javascript:showTab('tabs1','tabContent1')">线路查询</a>
    <a id="tabs2" class="tabs" style="height:40px;width:229px;" href="javascript:showTab('tabs2','tabContent2')">站点查询</a>
    <a id="tabs3" class="tabs" style="height:40px;width:229px;" href="javascript:showTab('tabs3','tabContent3')">起点-终点查询</a>
    <a id="tabs4" class="tabs" style="height:40px;width:229px;" href="javascript:showTab('tabs4','tabContent4')">地铁线路</a>
  </div>

  <div id="tabContent1" style="display: block">
    <form action="SubwayLine">
      <table style="border-width: 0; width: 100%">
        <tr>

          <table border="1" style="border-left-color:     #B0C4DE; border-bottom-color:     #B0C4DE; width: 100%;border-top-style: solid; border-top-color:     #B0C4DE; border-right-style: solid; border-left-style: solid; height: 250px; border-right-color:     #B0C4DE; border-bottom-style: hidden">
            <tr align="center"><td align="center" colspan="2">石家庄铁道大学北京地铁线路查询</td></tr>
            <tr><td  style="width: 30%" align="center">线路名称：</td><td style="width: 70%" align="center"> <select name="line" style="height:40px;width:300px;">
              <option value="1号线">1号线</option>
              <option value="2号线">2号线</option>
              <option value="4号线">4号线</option>
              <option value="5号线">5号线</option>
              <option value="6号线">6号线</option>
              <option value="7号线">7号线</option>
              <option value="8号线">8号线</option>
              <option value="9号线">9号线</option>
              <option value="10号线">10号线</option>
              <option value="13号线">13号线</option>
              <option value="14号线">14号线</option>
              <option value="15号线">15号线</option>
              <option value="房山线">房山线</option>
              <option value="昌平线">昌平线</option>
              <option value="亦庄线">亦庄线</option>
              <option value="机场线">机场线</option>
            </select></td></tr>
            <tr>  <td  style="width: 50%" align="center" colspan="2"><input   type="submit"  style="height:40px;width:300px;" value="查询"/><!--提交  value内的内容是按键内内容--></td>
            </tr>

          </table>
          </td>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
      </table>
    </form>
  </div>

  <div id="tabContent2" style="display: none">
    <form action="SubwayStation">
      <table border="1" style="border-left-color:     #B0C4DE; border-bottom-color:     #B0C4DE; width: 100%;border-top-style: solid; border-top-color:     #B0C4DE; border-right-style: solid; border-left-style: solid; height: 250px; border-right-color:     #B0C4DE; border-bottom-style: hidden">
        <tr align="center"><td align="center" colspan="2">石家庄铁道大学北京地铁站点查询</td></tr>
        <tr><td style="width: 30%" align="center">站点名称：</td><td align="center"> <input type="text" style="height:40px;width:300px;" placeholder="请输入站点名称" name="name"/></td></tr>
        <tr>  <td style="width: 70%" align="center" colspan="2"><input   type="submit"  style="height:40px;width:300px;" value="查询"/><!--提交  value内的内容是按键内内容--></td>
        </tr>

      </table>
    </form>
  </div>



  <div id="tabContent3" style="display: none;text-align:center">

    <form action="SubwayMain2" method="POST">
    <table border="1" style="border-left-color: #B0C4DE; border-bottom-color: #B0C4DE; width: 100%;border-top-style: solid; border-top-color: #B0C4DE; border-right-style: solid; border-left-style: solid; height: 250px; border-right-color: #B0C4DE; border-bottom-style: hidden">
      <tr align="center"><td align="center" colspan="2">石家庄铁道大学北京地铁起点-终点查询</td></tr>
      <tr><td style="width: 30%" align="center" >起点名称：</td><td> <input type="text" style="height:40px;width:300px;" placeholder="请输入起点站点名称" name="start_station"/></td></tr>
       <tr><td style="width: 30%" align="center">终点名称：</td><td> <input type="text" style="height:40px;width:300px;" placeholder="请输入终点站点名称" name="end_station"/></td></tr>
      <tr>  <td style="width: 50%" align="center" colspan="2"><input   type="submit" style="height:40px;width:300px;"  value="查询"/><!--提交  value内的内容是按键内内容--></td>
      </tr>

    </table>
    </form>

  </div>


  <div id="tabContent4" style="display: none;text-align:center;">
    <img id="obj" src="./images/p_14.jpg" height="800" width="1000" border="1" style="margin-top:10px;" />
  </div>
</div>
<hr />
<div style="text-align: center; width: 100%; font-size: 12px; color: #333;">&copy;版权所有：石家庄铁道大学信息科学与技术学院</div>
</body>
</html>

bestresult.jsp

<%@ page import="java.util.ArrayList" %>
<%@ page import="com.SubwayBean" %>
<%@ page language= "java" contentType= "text/html; charset=UTF-8"
         pageEncoding= "UTF-8" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
  <title>石家庄铁道大学北京地铁查询系统</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="css/mysub_style.css">
  <script type="text/jscript">
        //图片定时转换
        var curIndex=0;
        var timeInterval=2000;
        var arr=new Array();
        arr[0]="./images/p_14.jpg";
        arr[1]="./images/p__15.jpg";
        arr[2]="./images/p_16.jpg";
        setInterval("changeImg()",timeInterval);
        function changeImg(){
            var obj=document.getElementById("obj");
            if(curIndex==arr.length-1){
                curIndex=0;
            }else{
                curIndex+=1;
            }
            obj.src=arr[curIndex];
        }

        //显示当前时间
        function showLocale(objD) {
            var str, colorhead, colorfoot;
            var yy = objD.getYear();
            if (yy < 1900)
                yy = yy + 1900;
            var MM = objD.getMonth() + 1;
            if (MM < 10)
                MM = '0' + MM;
            var dd = objD.getDate();
            if (dd < 10)
                dd = '0' + dd;
            var hh = objD.getHours();
            if (hh < 10)
                hh = '0' + hh;
            var mm = objD.getMinutes();
            if (mm < 10)
                mm = '0' + mm;
            var ss = objD.getSeconds();
            if (ss < 10)
                ss = '0' + ss;
            var ww = objD.getDay();
            colorhead = "<font color=\"#000000\">";
            if (ww == 0)
                ww = "星期日";
            if (ww == 1)
                ww = "星期一";
            if (ww == 2)
                ww = "星期二";
            if (ww == 3)
                ww = "星期三";
            if (ww == 4)
                ww = "星期四";
            if (ww == 5)
                ww = "星期五";
            if (ww == 6)
                ww = "星期六";
            colorfoot = "</font>"
            str = colorhead + yy + "-" + MM + "-" + dd + " " + hh + ":" + mm
                    + ":" + ss + "  " + ww + colorfoot;
            return (str);
        }

        function tick() {
            var today;
            today = new Date();
            document.getElementById("localtime").innerHTML = showLocale(today);
            window.setTimeout("tick()", 1000);
        }
        window.onload = function() {
            tick();
        }
      
        function showTab(tabHeadId,tabContentId)
        {
        
            var tabDiv = document.getElementById("tabDiv");
   
           document.getElementById('tabContent1').style.display='none';
            document.getElementById('tabContent2').style.display='none';
            document.getElementById('tabContent3').style.display='none';
            document.getElementById('tabContent4').style.display='none'
           
            document.getElementById(tabContentId).style.display = 'block';
           
            var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a');
            for(i=0; i<tabHeads.length; i++)
            {
               
                tabHeads[i].className='tabs';
            }
           
            document.getElementById(tabHeadId).className='curtab';
            document.getElementById(tabHeadId).blur();
        }

</script>
</head>

<body>

<div style="width: 100%; font-family: 微软雅黑; text-align: center; font-size: 20pt; ">石家庄铁道大学北京地铁查询系统</div><br/>
<div id="localtime" style="text-align: center;"></div>
<div id="tabDiv" style="width: 1000px">

  <div id="tabsHead">
    <a id="tabs1" class="curtab" href="javascript:showTab('tabs1','tabContent1')">线路规划查询结果</a>

  </div>

  <div id="tabContent1" style="display:block ">
    <form action="lineresult.jsp">
      <table style="border-width: 0; width: 100%; padding: 5px; ">
        <tr>

          <table border="1" cellpadding="10" style=" border-left-color: #B0C4DE; border-bottom-color: #B0C4DE; width: 100%;border-top-style: solid; border-top-color: #B0C4DE; border-right-style: solid; border-left-style: solid; height: 250px; border-right-color: #B0C4DE; border-bottom-style: solid">
            <h2 align="center">北京地铁最优路线换乘查询结果</h2>
            <h4 align="center">我们为您列出了所有可能的路线，第一条为最优路线，请您视情况选择最佳路线</h4>
            <tr>
              <th align="center" bgcolor="#F0FFFF" ><%="起始站"%></th>
              <th align="center" bgcolor="#F0FFFF" ><%="终点站"%></th>
              <th align="center" bgcolor="#F0FFFF" ><%="经过站数"%></th>
              <th align="center" bgcolor="#F0FFFF" ><%="具体路线"%></th>
            </tr>
                <%
                response.setContentType("text/html;charset=UTF-8");

                ArrayList<SubwayBean> arr = (ArrayList<SubwayBean>) request.getAttribute("routeMain");

                  SubwayBean subwayBean1 = new SubwayBean();
                  subwayBean1._StartStation = arr.get(0)._StartStation;
                  subwayBean1._EndStation   = arr.get(0)._EndStation;
                  subwayBean1._Number       = arr.get(0)._Number;
                  subwayBean1._Path         = arr.get(0)._Path;
                %>

            <tr>
              <td align="center" bgcolor="#f5f5dc"><%=subwayBean1._StartStation%></td>

              <td align="center" bgcolor="#f5f5dc"><%=subwayBean1._EndStation%></td>

              <td align="center" bgcolor="#f5f5dc"><%=subwayBean1._Number%></td>

              <td align="center" bgcolor="#f5f5dc"><%=subwayBean1._Path%></td>

            </tr>
                <%
                for (int i = 1; i < arr.size(); i++) {

                  SubwayBean subwayBean = new SubwayBean();
                  subwayBean._StartStation = arr.get(i)._StartStation;
                  subwayBean._EndStation   = arr.get(i)._EndStation;
                  subwayBean._Number       = arr.get(i)._Number;
                  subwayBean._Path         = arr.get(i)._Path;
                %>

            <tr>
              <td align="center" bgcolor="#F5F5F5"><%=subwayBean._StartStation%></td>

              <td align="center" bgcolor="#F5F5F5"><%=subwayBean._EndStation%></td>

              <td align="center" bgcolor="#F5F5F5"><%=subwayBean._Number%></td>

              <td align="center" bgcolor="#F5F5F5"><%=subwayBean._Path%></td>

            </tr>


                <%
                }
                %>

              </td>
            </tr>

          </table>
          </td>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
      </table>
    </form>
  </div>
</div>
<hr />
<div style="text-align: center; width: 100%; font-size: 12px; color: #333;">&copy;版权所有：石家庄铁道大学信息科学与技术学院</div>
</body>
</html>