公交是很多人每天出行必用的交通工具,但是很多时候在不熟悉路况的情况下,很难短时间找到站点和最短乘车路线。今天就使用java和vue技术打造一款自己的公交线路查询系统,结合腾讯地图完美的实现了公交站点的查询。



【资料图】


整个项目实现的功能:

利用该系统实现各种公交线路查询功能与其他功能。

查询功能:通过选择商厦名称进行相应的信息查询;通过选择车号进行相应的信息查询;通过选择站点进行相应的信息查询;通过采用最短路径算法查找任意两个站点之间的最短乘车路线。

其他功能:完成车次和站点添加功能;完成车次和站点更新功能;完成车次和站点删除功能;

实现用户登录验证功能;用户注册信息功能;用户注销功能;

查看用户留言功能;

管理员登录验证功能;管理员注销功能。


用到的技术:

后端java语言,springboot框架,MySql数据库

用户前端uniapp实现h5,管理员前端是电脑端。




部分代码展示

<template><view class="u-p-20"><u-field @click="clickF(1)" :disabled="true" v-model="begin.title" label="出发站" placeholder="请选择出发站"></u-field><u-field :border-bottom="false" @click="clickF(2)" :disabled="true" v-model="end.title" label="目的站" placeholder="请选择到达站"></u-field><u-button type="primary" @click="routePlan">路线规划</u-button><view class="u-p-20 u-m-t-25" v-if="routeList.length > 0"><u-time-line ><view class="u-p-20 u-font-30">总距离:<text class="u-tips-color">{{dis}}米</text>,途经{{routeList.length}}站</view><u-time-line-item nodeTop="2" v-for="(item,index) in routeList" :key="index"><!-- 此处自定义了左边内容,用一个图标替代 --><template v-slot:node><view class="u-node"><!-- 此处为uView的icon组件 --><u-icon name="home-fill" color="#fff" :size="24"></u-icon></view></template><template v-slot:content><view><view class="u-order-title">{{(index+1)+"、"+item.title}}</view><view class="u-order-desc">{{item.area}}</view></view></template></u-time-line-item><u-button @click="showMapModel">查看地图</u-button></u-time-line></view><u-popup :closeable="true" close-icon-color="red" v-model="showMap" mode="center" length="80%" height="80%"><view><map v-if="routeList.length>0" :polyline="polyline" :latitude="routeList[0].addX":longitude="routeList[0].addY" :markers="covers"></map></view></u-popup><u-popup :closeable="true" close-icon-color="red" v-model="showSel" mode="center" length="80%" height="80%"><view class="u-p-20"><view class="u-p-20 u-font-30">站点选择</view><u-search :show-action="false" placeholder="输入站点名搜索" v-model="keyword"></u-search><u-cell-group title="站点名称"><view v-if="item.title.indexOf(keyword) > -1" v-for="(item,index) in stationList" :key="index" class="u-p-30 u-m-10"style="background-color: white;box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);"><view class="u-flex u-row-between u-p-10" @click="selItem(item)"><view class=""><u-icon name="home" color="#2979ff" size="35"></u-icon><text class="u-p-10">{{item.title}}</text></view><view> 点击选择</view></view><view>地址:<text class="u-tips-color">{{item.area}}</text></view></view></u-cell-group></view></u-popup></view></template>

获取代码请关注后私信“20230423”

推荐内容