基于Layui+vue.js+ajax的地铁查询系统二

2022/3/31 23:21:09

编程Tag： js vue layui element function data var display site

本文主要是介绍基于Layui+vue.js+ajax的地铁查询系统二，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前端页面，采用layui+vue.js+ajax进行表格渲染

 

完整代码如下

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>北京市地铁管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script src="js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<style>
    #Ai{
        display: none;
    }
    #Bi
    {
        display: none;
    }
    #Ci{

        display: none;
    }
</style>
<body>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>地铁查询</legend>
</fieldset>

<div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
        <li class="layui-this">线路查询</li>
        <li>站点查询</li>
        <li>起点-终点查询</li>
    </ul>
    <div class="layui-tab-content" style="height: 30px;">
        <div class="layui-tab-item layui-show">
            <div class="layui-form-item">
                <label class="layui-form-label">线路查询</label>
                <div class="layui-input-inline">
                    <input id ="Xid" type="text" required  lay-verify="required" placeholder="请输入线路名称" autocomplete="off" class="layui-input">
                </div>
                <button type="button" class="layui-btn" onclick="Information()">查询</button>
            </div>
        </div>
        <div class="layui-tab-item">
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <label class="layui-form-label">站点查询</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" id="Zname" required  lay-verify="required" placeholder="请输入站点名称" autocomplete="off" class="layui-input">

                    </div>
                    <button type="button" class="layui-btn" onclick="ZInformation()">查询</button>
                </div>
            </div>
        </div>
        <div class="layui-tab-item">
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <label class="layui-form-label">起点</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" id ="start" required  lay-verify="required" placeholder="请输入起点名称" autocomplete="off" class="layui-input">

                    </div>
                    <label class="layui-form-label">终点</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username"   id ="end"required  lay-verify="required" placeholder="请输入终点名称" autocomplete="off" class="layui-input">

                    </div>
                    <button type="button" class="layui-btn"onclick="SInformation()">查询</button>
                </div>

            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>Information</legend>
        </fieldset>
        <div  class="layui-form" id="Ai">
            <table class="layui-table" id="information">
                <colgroup>
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                </colgroup>
                <thead>
                <tr >
                    <th>线路ID</th>
                    <th>线路名称</th>
                    <th>车站ID</th>
                    <th>车站名称</th>
                    <th>下一站名称</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="site in itemss">
                    <td> {{ site.xid }}</td>
                    <td> {{ site.xname }}</td>
                    <td> {{ site.cid }}</td>
                    <td> {{ site.zname}}</td>
                    <td> {{ site.next }}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div  class="layui-form" id="Bi">
            <table class="layui-table" id="Zinformation">
                <colgroup>
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                </colgroup>
                <thead>
                <tr >
                    <th>线路ID</th>
                    <th>线路名称</th>
                    <th>车站ID</th>
                    <th>车站名称</th>
                    <th>下一站名称</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="site in itemss">
                    <td> {{ site.xid }}</td>
                    <td> {{ site.xname }}</td>
                    <td> {{ site.cid }}</td>
                    <td> {{ site.zname}}</td>
                    <td> {{ site.next }}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div  class="layui-form" id="Ci">
            <table class="layui-table" id="Sinformation">
                <colgroup>
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                </colgroup>
                <thead>
                <tr >
                    <th>线路名称</th>
                    <th>车站名称</th>
                    <th>下一站名称</th>
                    <th>换乘线路</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="site in itemss">
                    <td> {{ site.xname }}</td>
                    <td> {{ site.zname}}</td>
                    <td> {{ site.next }}</td>
                    <td> {{ site.changestop }}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <script>
            function   SInformation(){
                var start=$("#start").val();
                var end=$("#end").val();
                var tableVue = new Vue({
                    el:"#Sinformation",
                    data:{
                        itemss:[]
                    }
                });

                $.ajax({
                    url: "ServletStart?now=" + new Date().getTime(),
                    type: "GET",
                    data: {"start":start,"end":end},
                    success: function (data) {
                        //var data = JSON.parse( jsonObj );//解析json对象
                        tableVue.itemss=data;
                    },//响应成功后的回调函数
                    error: function () {
                        alert("出错啦...")
                    },//表示如果请求响应出现错误，会执行的回调函数
                    dataType: "json"//设置接受到的响应数据的格式
                });
                document.getElementById("Bi").style.display="none";
                document.getElementById("Ai").style.display="none";
                document.getElementById("Ci").style.display="block";
            }
        </script>
        <script>
            function   Information(){
                var Xid = $("#Xid").val();
                var tableVue = new Vue({
                    el:"#information",
                    data:{
                        itemss:[]
                    }
                });

                $.ajax({
                    url: "ServletXian",
                    type: "GET",
                    data: {"Xid":Xid},
                    success: function (data) {
                        //var data = JSON.parse( jsonObj );//解析json对象
                        tableVue.itemss=data;
                    },//响应成功后的回调函数
                    error: function () {
                        alert("出错啦...")
                    },//表示如果请求响应出现错误，会执行的回调函数
                    dataType: "json"//设置接受到的响应数据的格式
                });
                document.getElementById("Bi").style.display="none";
                document.getElementById("Ai").style.display="block";
            }
        </script>
        <script>
            function   ZInformation(){
                var Zname = $("#Zname").val();
                var tableVue = new Vue({
                    el:"#Zinformation",
                    data:{
                        itemss:[]
                    }
                });

                $.ajax({
                    url: "ServletZhan",
                    type: "GET",
                    data: {"Zname":Zname},
                    success: function (data) {
                        //var data = JSON.parse( jsonObj );//解析json对象
                        tableVue.itemss=data;
                    },//响应成功后的回调函数
                    error: function () {
                        alert("出错啦...")
                    },//表示如果请求响应出现错误，会执行的回调函数
                    dataType: "json"//设置接受到的响应数据的格式
                });
                document.getElementById("Ai").style.display="none";
                document.getElementById("Bi").style.display="block";
            }

        </script>

        <script src="layui/layui.js" charset="utf-8"></script>
        <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
        <script>
            layui.use('element', function(){
                var $ = layui.jquery
                    ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

                //触发事件
                var active = {
                    tabAdd: function(){
                        //新增一个Tab项
                        element.tabAdd('demo', {
                            title: '新选项'+ (Math.random()*1000|0) //用于演示
                            ,content: '内容'+ (Math.random()*1000|0)
                            ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                        })
                    }
                    ,tabDelete: function(othis){
                        //删除指定Tab项
                        element.tabDelete('demo', '44'); //删除：“商品管理”


                        othis.addClass('layui-btn-disabled');
                    }
                    ,tabChange: function(){
                        //切换到指定Tab项
                        element.tabChange('demo', '22'); //切换到：用户管理
                    }
                };

                $('.site-demo-active').on('click', function(){
                    var othis = $(this), type = othis.data('type');
                    active[type] ? active[type].call(this, othis) : '';
                });

                //Hash地址的定位
                var layid = location.hash.replace(/^#test=/, '');
                element.tabChange('test', layid);

                element.on('tab(test)', function(elem){
                    location.hash = 'test='+ $(this).attr('lay-id');
                });

            });
        </script>
</body>
</html>


这篇关于基于Layui+vue.js+ajax的地铁查询系统二的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程