springboot整合jsp,完成公交車站路線圖

時間 2021-01-13

標籤 javascript 前端 java mysql spring sql apache 後端瀏覽器 tomcat 欄目 Spring 简体版

原文原文鏈接

點贊再看，養成習慣javascript

開發環境：

jdk 8
intellij idea
tomcat 8
mysql 5.7
maven 3.6

所用技術：

springboot
jsp
數據靜態初始化

項目介紹

使用springboot整合jsp，在後端寫入公交路線名稱和詳細站點，前端頁面可條件查詢具體的內容，如公交路線，公交名稱，車倆信息等。前端

運行效果

前臺用戶端：java

路線選擇

路線詳情

數據準備:

BusData.txt

準備工做:

pom.xml加入jsp模板引擎支持：

<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<scope>provided</scope>
</dependency>

springboot配置jsp

spring.mvc.view.prefix=/
spring.mvc.view.suffix=.jsp

重要代碼:

bus數據初始化

@PostConstruct
private void initBusData(){
try{
    File file = new File(BusMap.getClass().getResource("/").getPath());
    FileReader fileReader = new FileReader(file.getPath()+"/static/BusData.txt","GBK"); //初始化BusData.txt 數據
    List<String> readLines = fileReader.readLines();
    for(String str:readLines){
        if(!"".equals(str)){
            String[] data=str.split("#");
            String way=data[0];         //幾路線
            String location=data[1];/   /地名
            String[] locations=location.split(",");
            List<Bus> list=new ArrayList<>();
            for(int i=0;i<locations.length;i++){
                int busnum=0;
                if(i%4==0){             //隨機busnum
                    busnum=1;
                }if(i%5==0){
                    busnum=2;
                }
                Bus bus=new Bus(locations[i],busnum);
                list.add(bus);
            }
            WayList.add(way);           //添加路線
            BusMap.put(way,list);       //添加車站
        }
    }
}catch (Exception e){
    e.printStackTrace();
}
}

路線查詢

@RequestMapping("/way")
public String search(HttpServletRequest request,String way) {
try {
     if(null==way||"".equalsIgnoreCase(way)){
         request.setAttribute("list", BusMap.WayList); //沒有搜索默認顯示全部路線
         return "way";
     }else{
         List<String> wayList=new ArrayList<>();
         //模糊查詢路線
         for(String str:BusMap.WayList){
             if(str.indexOf(way)>-1){
                 wayList.add(str);
             }
         }
         if(wayList.size()>0){
             request.setAttribute("list", wayList); //模糊搜索出來的路線列表
             return "way";
         }else{
             return "noView"; //沒有所選路線
         }
     }
} catch (Exception e) {
    e.printStackTrace();
}
return "way";
}

3. 公交車路線站展現
```diff
@RequestMapping("/view")
public String view(HttpServletRequest request,String way) {
    try {
        List<Bus> list= BusMap.getBusMap(way);
        if(list.size()>0){
            request.setAttribute("list",list ); //獲取總路線
            request.setAttribute("firstBus", list.get(0).getLocation());            //第一站
            request.setAttribute("lastBus", list.get(list.size()-1).getLocation()); //最後一站
            int size = list.size();
            size =(size-1)*99;
            request.setAttribute("size",size);
            return "view";
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
    return "noView";//沒有對應公交車站
}
//前端頁面數據渲染
<div class="pageContent" style="background: #eeeeee;">
    <div class="pageFormContent" layoutH="55">
        <div class="timeText">${firstBus}<----->${lastBus}
            <span>（ 首/末班車時間：<span style="color: red">6:00 / 23:00</span>）</span>
        </div>
        <div class="timezone" style="margin-top: 20px">
            <c:forEach var="list" items="${list}" varStatus="s">
                <div class="time" <c:if test="${s.index!=0}"> style="top: ${s.index*100+25}px;" a="1" </c:if> ><a onclick="javascript:alert(1);">${s.index+1}</a>
                    <h2>${list.location}</h2>
                    <c:if test="${list.busNum>0}">
                        <span class="timezone3"></span>
                        <div>
                            <p><span style="padding-left: 30px;">${list.busNum}輛公交</span></p>
                        </div>
                    </c:if>
                </div>
            </c:forEach>
        </div>
    </div>
    <div class="formBar"></div>
</div>