TripGenie：畅游济南旅行规划助手：个人工作纪实(二十一）

     这次，我新增了一个济南公交线路的展示界面，济南的公交线路多，且经过的站点覆盖范围广，价格实惠，是出行旅游交通工具的不二之选，我基于此现实情况，觉得做一个新的页面全面展示济南交通。

   我选择把这个页面的进入按钮放到左侧的工具栏中，保存和已有工具栏文字相同的css设置。

        我进行对页面的设计，首先观察我前期爬取的济南公交信息，发现有线路名、起终点、首班车时间、末班车时间、票价等信息，我基于此，计划制作一个表格形式的页面，同时涵盖搜索公交的功能。

     同时，我计划数据从后端传入前端进行渲染，我写了一个新的路由路径，按列提取对应的信息。

      在js方面，首先我设置点击后触发式跳转到交通页面

     注意，我发现数据中所有线路都是展示了两次，只是起终点不一样，我考虑减少冗余数据，将起终点合并为一个字段，用“起点⇄终点”表示，同时在后端输入数据时候，做了一步过滤。

    展示效果如下：

    为了更详细的展示站点信息，我选择在最后一栏加了一个详情，用户点击每一个路线的站点详细图表之后，会在右侧弹出一个站点信息的弹窗，展示每一个路线的详细站点信息，包含站点名称、站点详细位置信息，帮助用户更清晰的知道那个公交线路更符合自己的行程规划。

     这里我设置了一个新的文件夹“bus_stations”用来存放所有路线对应的站点信息文件。

     为了页面的协调，更突出站点名称，我设置站点名称的字体加粗大字号，同时当鼠标挪到每一个站点信息框的时候，会在底部显示绿色的阴影，增加色彩感。

    前面提到，我们是对同一条线路的起终点进行了合并，在站点信息展示方面，我们设计了一个反转字样，点击反转后，对应站点信息会倒序展示，即展示了相反方向的站点信息。