地铁查询系统（web前端）

使用vue完成了地铁查询系统的前端

<script>

export default {
  name: "IndexOne",
  data() {
    return {
      activeMenu: '1',
      lineNumber: '',
      stationName: '',
      startStation: '',
      endStation: '',
      lineResults: [],
      stationResults: [],
      routeResults: [],
      Lines: [],
      form:{
        id1: '',
        id2: '',
      },
      ids:[],
      num:'',
    };
  },
  methods: {
    handleMenuSelect(index) {
      this.activeMenu = index;
    },
    searchLine(lineNumber) {
      this.$axios.get('http://localhost:8090/station-line/query?Lid='+lineNumber).then(res => res.data).then(res => {
        console.log(res);
        this.$axios.post('http://localhost:8090/stations/query',res).then(res => res.data).then(res => {
          console.log(res);
          this.lineResults=res;
        }).catch(error => {
          console.error(error);
          alert("查询失败")
        });
      }).catch(error => {
        console.error(error);
        alert("查询失败")
      });
      // 线路查询逻辑
    },
    searchStation() {
      this.$axios.get('http://localhost:8090/stations/query1?name='+this.stationName).then(res => res.data).then(res => {
        console.log(res);
        this.$axios.get('http://localhost:8090/station-line/query1?id='+res).then(res => res.data).then(res => {
          console.log(res);
          this.$axios.post('http://localhost:8090/lines/query',res).then(res => res.data).then(res => {
            console.log(res);
            this.stationResults=res;
          }).catch(error => {
            console.error(error);
            alert("查询失败3")
          });
        }).catch(error => {
          console.error(error);
          alert("查询失败2")
        });
      }).catch(error=>
      {
        console.error(error);
        alert("查询失败1")
      });
      // 站点查询逻辑
    },
    searchRoute() {
      this.$axios.get('http://localhost:8090/stations/query1?name='+this.startStation).then(res => res.data).then(res => {
        console.log(res);
        this.form.id1=res;
        this.$axios.get('http://localhost:8090/stations/query1?name='+this.endStation).then(res => res.data).then(res => {
          console.log(res);
          this.form.id2=res;
          this.$axios.post('http://localhost:8090/adjacency-list/list',this.form).then(res => res.data).then(res => {
            console.log(res);
            this.ids=res.ids;
            this.num=res.num;
            this.Lines=res.lid;
            this.$axios.post('http://localhost:8090/stations/query2', { ids: this.ids })
                .then(res => {
                   let new_lst=[]
                   let new_lst1=[]
                  for (var i = 1; i < this.Lines.length; i++) {
                    if (i === 1|| this.Lines[i] !== this.Lines[i - 1]) {
                      new_lst.push(this.Lines[i]);
                    } else {
                      new_lst.push(null);
                    }
                  }
                  new_lst[0]=null
                  for(var t=0;t<=new_lst.length;t++)
                  {
                    if(new_lst[t]!==null&&t!=new_lst.length)
                    {
                      new_lst1.push(res.data[t]+" （ 换乘"+new_lst[t]+"号线"+"）")
                    }
                    else{
                      new_lst1.push(res.data[t])
                    }
                  }
                  this.routeResults =[this.num].concat(new_lst1)
                })
                .catch(error => {
                  console.error(error);
                  alert("查询失败4");
                });
          }).catch(error => {
            console.error(error);
            alert("查询失败3")
          });
        }).catch(error => {
          console.error(error);
          alert("查询失败2")
        });
      }).catch(error => {
        console.error(error);
        alert("查询失败1")
      });

      // 起点终点查询逻辑
    }
  }
}
</script>

<template>
  <title>地铁查询系统</title>
  <div class="subway-search">
    <h1 class="title">地铁查询系统</h1>
    <el-row justify="center">
      <el-col :span="6">
        <div class="menu-section">
          <el-menu default-active="1" class="subway-menu" @select="handleMenuSelect">
            <el-menu-item index="1">线路查询</el-menu-item>
            <el-menu-item index="2">站点查询</el-menu-item>
            <el-menu-item index="3">起点终点查询</el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <el-col :span="18">
        <div v-if="activeMenu === '1'" class="search-section">
          <el-input v-model="lineNumber" placeholder="请输入线路号"></el-input>
          <el-button type="primary" @click="searchLine(lineNumber)">查询</el-button>
          <div v-if="lineResults.length > 0">
            <h3>线路查询结果：</h3>
            <ul>
              <li v-for="(result, index) in lineResults" :key="index">{{ result }}</li>
            </ul>
          </div>
        </div>
        <div v-else-if="activeMenu === '2'" class="search-section">
          <el-input v-model="stationName" placeholder="请输入站点名称"></el-input>
          <el-button type="primary" @click="searchStation">查询</el-button>
          <div v-if="stationResults.length > 0">
            <h3>站点查询结果：</h3>
            <ul>
              <li v-for="(result, index) in stationResults" :key="index">{{ result }}</li>
            </ul>
          </div>
        </div>
        <div v-else-if="activeMenu === '3'" class="search-section">
          <el-input v-model="startStation" placeholder="请输入起点站名称"></el-input>
          <el-input v-model="endStation" placeholder="请输入终点站名称"></el-input>
          <el-button type="primary" @click="searchRoute">查询</el-button>
          <div v-if="routeResults.length > 0">
            <h3>起点终点查询结果：</h3>
            <ul>
              <li v-for="(result, index) in routeResults" :key="index">{{ result }}</li>
            </ul>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>


<style scoped>
.subway-search {
  padding: 20px;
  background-image: url('b2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.menu-section {
  margin-right: 20px;
  background-color: #f0f2f5;
  border: 1px solid #ebeef5;
  border-radius: 5px;
}

.subway-menu {
  background-color: #f0f2f5;
  border: none;
}

.search-section {
  padding: 20px;
  background-color: #f0f2f5;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
body {
  color: white;
}
h3 {
  margin-top: 20px;
  color: #333;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 5px;
}
.title {
  text-align: center;
  color: #080909;
  margin-top: 20px;
}
</style>