基於web公交查詢系統----管理員公交站點管理頁面實現

 

主要用到內容:vue,coreui bootstrap框架,Ajax,springmvc搭建的接口,css之類的都是順手拈來的簡單的界面設計

 

網頁代碼

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <base href="./">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
    <meta name="author" content="Łukasz Holeczek">
    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">

    <link href="vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
    <link href="vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
    <link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
    <!-- Main styles for this application-->
    <link href="css/style.css" rel="stylesheet">
    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
    <title>bus station admin (bus 站點信息管理頁面)</title>
</head>
<body>
Wellcome 管理員:

<!--菜單欄目-->
<header class="app-header navbar">

    <ul class="nav navbar-nav d-md-down-none">
        <li class="nav-item px-3">
            <a class="nav-link" href="busAdmin.html">管理員首頁</a>
        </li>
        <li class="nav-item px-3">
            <a class="nav-link" href="bususerAdmin.html">用戶信息管理</a>
        </li>
        <li class="nav-item px-3">
            <a class="nav-link" href="buslineAdmin.html">公交線路管理</a>
        </li>
        <li class="nav-item px-3">
            <a class="nav-link" href="busstationAdmin.html">站點信息管理</a>
        </li>
        <li class="nav-item px-3">
            <a class="nav-link" href="buscarAdmin.html">車輛信息管理</a>
        </li>

        <!--item頭像-->
        <li class="nav-item dropdown">
            <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                <img class="img-avatar" src="img/avatars/6.jpg" alt="[email protected]">
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <div class="dropdown-header text-center">
                    <strong>用戶</strong>
                </div>

                <a class="dropdown-item" href="#">
                    <i class="fa fa-envelope-o"></i> 用戶名
                </a>
                <a class="dropdown-item" href="#">
                    <i class="fa fa-tasks"></i> 個性簽名
                </a>

                <div class="dropdown-header text-center">
                    <strong>Settings</strong>
                </div>
                <a class="dropdown-item" href="#">
                    <i class="fa fa-lock"></i> Logout</a>
            </div>
        </li>
    </ul>

</header>

<main class="main">
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-align-justify"></i> 車站點信息
                    <small>功能管理</small>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-4">
                            <div class="list-group" id="list-tab" role="tablist">


                                <a class="list-group-item list-group-item-action active show" id="list-messages-list" data-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages" aria-selected="true">添加站點</a>
                                <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile" aria-selected="false">搜索站點</a>
                                <a class="list-group-item list-group-item-action" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="list-home" aria-selected="false">所有站點</a>
                            </div>
                        </div>
                        <div class="col-8">
                            <div class="tab-content" id="nav-tabContent">
                                <div class="tab-pane fade" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
                                    <!--所有站點-->
                                    <div class="card-body">
                                        <table class="table table-responsive-sm table-bordered" id="usersTable">
                                            <thead>
                                            <tr>
                                                <th>車站點名</th>
                                                <th>車站點信息</th>
                                                <th>車站點出發時間</th>
                                                <th>車站點結束時間</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="(item, index) in items">

                                                <td>{{item.busstationname}}</td>
                                                <td>{{item.businfo}}</td>
                                                <td>{{item.stationstarttime}}</td>
                                                <td>{{item.stationendtime}}</td>


                                                <td>
                                                    <button class="btn  btn-primary" type="button" data-toggle="modal"
                                                            data-target="#primaryModal" v-bind:data-rowindex="index"
                                                            aria-pressed="true"><i class="fa fa-edit"></i>&nbsp;編輯站點信息
                                                    </button>
                                                    &nbsp;
                                                    <button class="btn  btn-danger" type="button" data-toggle="modal"
                                                            data-target="#dangerModal" v-bind:data-rowindex="index" aria-pressed="true">
                                                        <i class="fa fa-close"></i>&nbsp;刪除
                                                    </button>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>

                                    </div>



                                     </div>
                                <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">


                                    <p>請輸入你要查找的站點名字(查找到對應的站點也可以對應編輯信息處理):</p>

                                        <input class="form-control" type="text"  id="findwhatstation" placeholder="請輸入你要查找的站點名字:">
                                       <button class="btn btn-outline-primary btn-lg btn-block" type="button"   data-toggle="modal" data-target="#findstationModal" aria-pressed="true">點擊查詢</button>
                                </div>


                                <div class="tab-pane fade active show" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
                                    <div class="col-sm-5 col-md-12">
                                        <div class="card card-accent-warning">
                                            <div class="card-header">添加站點信息編輯</div>
                                            <div class="card-body">

                                                <form class="form-horizontal" action="" method="post">
                                                    <div class="form-group row">
                                                        <label class="col-md-3 col-form-label" for="newstationname">車站點名字</label>
                                                        <div class="col-md-9">
                                                            <input class="form-control" id="newstationname" type="text" name="newstationname" placeholder="車站點名字..">
                                                            <span class="help-block">Please enter your 你想添加的車站點名</span>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label class="col-md-3 col-form-label" for="newbusinfo">車站點詳情(例子:下站通往某某大道,某某醫院,某某街道)</label>
                                                        <div class="col-md-9">
                                                            <input class="form-control" id="newbusinfo" type="text" name="newbusinfo" placeholder="車站點詳情..">
                                                            <span class="help-block">Please enter your 車站點詳情</span>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label class="col-md-3 col-form-label" for="newstationstarttime">車站點出發時間(例子:6:00或者21:00)</label>
                                                        <div class="col-md-9">
                                                            <input class="form-control" id="newstationstarttime" type="text" name="newstationstarttime" placeholder="車站點詳情..">
                                                            <span class="help-block">Please enter your 車站點開始時間</span>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label class="col-md-3 col-form-label" for="newstationendtime">車站點結束時間</label>
                                                        <div class="col-md-9">
                                                            <input class="form-control" id="newstationendtime" type="text" name="newstationendtime" placeholder="車站點結束時間">
                                                            <span class="help-block">Please enter your 車站點結束時間(例子:6:00或者21:00)</span>
                                                        </div>
                                                    </div>
                                                    <button class="btn btn-primary btn-lg btn-block" type="button" onclick="addnewstatio()">確認添加一個新站點</button>
                                                </form>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">

        <div class="col-md-8">
        </div>
        <!--時鐘 參考https://www.jb51.net/article/88600.htm-->
        <div class="col-md-4">


        </div>
    </div> <!-- 說明:每row行共12列,分個2div,第1個div佔4列,第2個div則佔8列,即4列+8列=12列 -->

    <!-- Breadcrumb-->



</main>
<div class="modal fade show" id="primaryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-primary" role="document">
        <div class="modal-content">
            <form id="modalForm" class="needs-validation" action="" method="post">
                <div class="modal-header">
                    <h4 class="modal-title">編輯</h4>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="busstationname">車站點名</label>
                        <input class="form-control" id="busstationname" type="text" name="busstationname" placeholder="輸入修改車站點名.."
                               required>
                        <!--<span class="help-block">用戶名</span>-->
                        <div class="invalid-feedback">
                            修改名不能爲空!
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="businfo">站點信息</label>
                        <input class="form-control" id="businfo" type="text" name="businfo"
                               placeholder="站點信息..">
                        <!--<span class="help-block">註冊時間</span>-->
                    </div>
                    <div class="form-group">
                        <label for="stationstarttime">開始時間</label>
                        <input class="form-control" id="stationstarttime" type="text" name="stationstarttime" placeholder="開始時間..">
                        <!--<span class="help-block">角色</span>-->
                    </div>
                    <div class="form-group">
                        <label for="stationendtime">開始時間</label>
                        <input class="form-control" id="stationendtime" type="text" name="stationendtime" placeholder="結束時間..">
                        <!--<span class="help-block">角色</span>-->
                    </div>

                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                    <button class="btn btn-primary" type="button" name="" onclick="save();">保存</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content-->
    </div>
    <!-- /.modal-dialog-->
</div>

<div class="modal fade show" id="dangerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-danger" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">刪除</h4>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                刪除後無法恢復,確認刪除該記錄麼?
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                <button class="btn btn-primary" type="button" onclick="deleteUser();">確定</button>
            </div>
        </div>
        <!-- /.modal-content-->
    </div>
    <!-- /.modal-dialog-->
</div>

<div class="modal fade show" id="findstationModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-primary" role="document">
        <div class="modal-content">
            <form id="myfindstation" class="needs-validation" action="" method="post">
                <div class="modal-header">
                    <h4 class="modal-title">查找到的信息:</h4>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">

                        <label class="bg-warning theme-color w-60 rounded mb-2">(請不要隨意刪除站點,站點會影響線路)</label>
                        <label for="findstationinformation">查詢的站點信息如下:</label>
                        <div class="col-md-8 mb-5">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active show" data-toggle="tab" href="#home3" role="tab" aria-controls="home" aria-selected="true">
                                        <i class="icon-calculator"></i> 查詢到的信息</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#profile3" role="tab" aria-controls="profile" aria-selected="false">
                                        <i class="icon-basket-loaded"></i> 修改該站點信息</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active show" id="home3" role="tabpanel"> <textarea class="form-control" id="findstationinformation" name="textarea-input" rows="6" placeholder="Content.." disabled></textarea>
                                </div>
                                <div class="tab-pane" id="profile3" role="tabpanel">
                                    站點名: <input class="form-control" id="findbusstationname" type="text" name="findstationname" placeholder="輸入修改車站點名.." required="">
                                    站點信息:<input class="form-control" id="findbusinfo" type="text" name="findstationinfo" placeholder="輸入修改車站站點信息.." required="">
                                    站點出發時間:<input class="form-control" id="findstarttime" type="text" name="findstarttime" placeholder="輸入修改車站開始時間.." required="">
                                    站點結束使時間: <input class="form-control" id="findendtime" type="text" name="findendtime" placeholder="輸入修改車站結束時間.." required="">



                                </div>
                                   </div>

                        <!--<input class="form-control" id="findstationinformation" type="text" name="findstationinformation" disabled>-->
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">返回</button>
                    <button class="btn btn-danger" type="button" onclick="deletfindstation()">刪除該站點</button>
                    <button class="btn btn-primary" type="button" name="" onclick="savefindstation();">修改保存</button>
                </div></div>
            </form>
        </div>
        <!-- /.modal-content-->
    </div>
    <!-- /.modal-dialog-->
</div>


<script src="vendors/jquery/js/jquery.min.js"></script>
<script src="vendors/popper.js/js/popper.min.js"></script>
<script src="vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/pace-progress/js/pace.min.js"></script>
<script src="vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
<script src="vendors/@coreui/coreui/js/coreui.min.js"></script>
<script src="vendors/chart.js/js/Chart.min.js"></script>
<script src="vendors/@coreui/coreui-plugin-chartjs-custom-tooltips/js/custom-tooltips.min.js"></script>
<script src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    var users = [ ];//獲取到的bus所有站點信息
    var rowIndex = -1;
    var findstationid=0;
    $.ajax({
        url: "/busstations",
        type:"GET",
        success: function(response){
            users = response;

            console.log(users)
            //查看到獲取信息成功
            var example1 = new Vue({
                el: '#usersTable',
                data: {
                    items: users
                }
            });
            return;
        }
    });





    $('#primaryModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        rowIndex = button.data('rowindex') // Extract info from data-* attributes
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var user = users[rowIndex];
        var modal = $(this);
        // modal.find('.modal-title').text('New message to ' + recipient)
        modal.find('.modal-body #busstationname').val(user.busstationname);
        modal.find('.modal-body #businfo').val(user.businfo);
        modal.find('.modal-body #stationstarttime').val(user.stationstarttime);
        modal.find('.modal-body #stationendtime').val(user.stationendtime);

    });

    $('#findstationModal').on('show.bs.modal', function (event) {
        var findwhatstation= $('#findwhatstation').val();
        var i=0;
        var modal = $(this);
        for(i=0;i<users.length;i++)
        {
            if(findwhatstation===users[i].busstationname)//找到busstation了
            {
                modal.find('.modal-body #findstationinformation').val("站點名:"+users[i].busstationname+"\n"+"站點信息:"+users[i].businfo+"\n"+"開始時間:"+users[i].stationstarttime+"\n"+"結束時間:"+users[i].stationendtime);
                modal.find('.modal-body #findbusstationname').val(users[i].busstationname);
                modal.find('.modal-body #findbusinfo').val(users[i].businfo);
                modal.find('.modal-body #findstarttime').val(users[i].stationstarttime);
                modal.find('.modal-body #findendtime').val(users[i].stationendtime);
                findstationid=users[i].id;
                break;
            }
            else{
                modal.find('.modal-body #findstationinformation').val("很抱歉,sorry,沒找到你想要找的站點信息!!!");
            }
        }


    });






    $('#dangerModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        rowIndex = button.data('rowindex') // Extract info from data-* attributes
        return;
    });


    function addnewstatio() {
        var newstationname = $('#newstationname').val();
        var newbusinfo = $('#newbusinfo').val();
        var newstationstarttime = $('#newstationstarttime').val();
        var newstationendtime = $('#newstationendtime').val();
        var needid=users.length+1;
        alert(needid);
        console.log("站點信息:"+newbusinfo+"站點名字:"+newstationname+"站點開始時間:"+newstationstarttime+"站點結束時間:"+newstationendtime);
        $.ajax({
            url: "/busstations/create",
            type:"POST",
            contentType: "application/json; charset=utf-8",
            data : JSON.stringify({id:needid,busstationname:newstationname,businfo:newbusinfo,stationstarttime:newstationstarttime,stationendtime:newstationendtime}),
            dataType: "json",

            success: function (res) {
                alert("成功");

            },
            error: function (message) {
                // alert(message);
            }
        });
    }

    function deletfindstation(){
      var ids=findstationid;
        $.ajax({
            type: "POST",
            url: "/busstations/delete",
            contentType: 'application/json',
            data: JSON.stringify(ids),
            dataType: "json",
            success: function (data) {
                users.splice(rowIndex, 1);
                $('#findstationModal').modal('hide');//隱藏模態框
            },
            error: function (msg) {
                alert(ids);
            }
        });


    }
    function savefindstation(){
        var id=findstationid;
        var findstationname=$('#findbusstationname').val();
        var findbusinfo=$('#findbusinfo').val();
        var findendtime=$('#findendtime').val();
        var findstarttime=$('#findstarttime').val();
        console.log(findstationname+findstationid);



        $.ajax({
            type: "POST",
            url: "/busstations/delete",
            contentType: 'application/json',
            data: JSON.stringify(id),
            dataType: "json",
            success: function (data) {

                $.ajax({
                    url: "/busstations/create",
                    type:"POST",
                    contentType: "application/json; charset=utf-8",
                    data : JSON.stringify({id:id,busstationname:findstationname,businfo:findbusinfo,stationstarttime:findstarttime,stationendtime:findendtime}),
                    dataType: "json",

                    success: function (res) {
                        // alert(res);

                    },
                    error: function (message) {
                        // alert(message);
                    }
                });

            }
        });

        $('#findstationModal').modal('hide');//隱藏模態框

    }
    function save() {

        //驗證表單
        var form = document.getElementById('modalForm');
        if (form.checkValidity() === true) {
            // modal.find('.modal-title').text('New message to ' + recipient)
            var busstationname = $('#busstationname').val();
            var businfo = $('#businfo').val();
            var stationstarttime = $('#stationstarttime').val();
            var stationendtime = $('#stationendtime').val();


            users[rowIndex].busstationname = busstationname;
            users[rowIndex].businfo = businfo;
            users[rowIndex].stationstarttime = stationstarttime;
            users[rowIndex].stationendtime = stationendtime;


            var ids = users[rowIndex].id;

            $('#primaryModal').modal('hide');//隱藏模態框
            $.ajax({
                type: "POST",
                url: "/busstations/delete",
                contentType: 'application/json',
                data: JSON.stringify(ids),
                dataType: "json",
                success: function (data) {

                    $.ajax({
                        url: "/busstations/create",
                        type:"POST",
                        contentType: "application/json; charset=utf-8",
                        data : JSON.stringify({id:ids,busstationname:busstationname,businfo:businfo,stationstarttime:stationstarttime,stationendtime:stationendtime}),
                        dataType: "json",

                        success: function (res) {
                            // alert(res);

                        },
                        error: function (message) {
                            // alert(message);
                        }
                    });

                }
            });



        }

        form.classList.add('was-validated');
        $('#primaryModal').modal('hide');//隱藏模態框

    }


    function deleteUser() {
        var ids = users[rowIndex].id;

        $.ajax({
            type: "POST",
            url: "/busstations/delete",
            contentType: 'application/json',
            data: JSON.stringify(ids),
            dataType: "json",
            success: function (data) {
                users.splice(rowIndex, 1);
                $('#dangerModal').modal('hide');//隱藏模態框
            },
            error: function (msg) {
                alert(ids);
            }
        });

    };

</script>

</body>
</html>
View Code

 

添加新的站點:

 

控制檯提示:

 

 查看數據庫就肯定會多一條數據了。

查詢功能也實現

 

 所有站點信息:

 

 

 

 

 (下一任務安排實現車輛信息管理功能,線路比較複雜先擱到下下任務)

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章