今日总结（页面，算法实现） - 椰糖

公告

昵称：椰糖
园龄： 2年8个月
粉丝： 0
关注： 0

+加关注

随笔档案

阅读排行榜

推荐排行榜

1. 今日总结（页面，算法实现）(1)

今日总结（页面，算法实现）

画前台页面
进行两个检索的算法的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 1080px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']"

            >
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>导航一</template>
                    <el-menu-item-group>

                        <el-menu-item index="1-1" >线路查询</el-menu-item>
                        <el-menu-item index="1-2">起点终点查询</el-menu-item>
                        <el-menu-item index="1-3"></el-menu-item>

                    </el-menu-item-group>


                </el-submenu>

            </el-menu>
        </el-aside>

        <el-container>

            <el-main>
                <el-form :inline="true" :model="user" class="demo-form-inline">
                    <el-form-item label="线路">
                        <el-input v-model="user" placeholder="请输入要查询的线路"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" >查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="tableData" align="left">
                    <el-table-column prop="name" label="地铁站名" width="300" align="center">
                    </el-table-column>

                </el-table>
            </el-main>
        </el-container>
    </el-container>


</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: "#app",

        mounted(){


        },

        methods: {

            onSubmit() {
                var _this=this;
                axios(
                    {
                        method: "post",
                        url: "http://localhost:8080/Subwaytest/SelectBYRouteServlet",
                        data:this.user
                    }
                ).then(function (resp) {

                    _this.tableData=resp.data;
                    // console.log(resp.data)
                })
            }

        },
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }
            return {
                tableData: [],//Array(20).fill(item)
                user:'',
                site:{
                    id:0,
                    change:'',
                    route1:'',
                    route2:'',
                    name:''
                }

            }
        }
    })

</script>
</body>
</html>