springboot整合jsp,實(shí)現(xiàn)公交車(chē)站路線圖

更新時(shí)間：2021年01月03日 12:27:12 作者：程序幫

這篇文章主要介紹了springboot整合jsp,實(shí)現(xiàn)公交車(chē)站路線圖的步驟，幫助大家更好的理解和使用springboot框架，感興趣的朋友可以了解下

開(kāi)發(fā)環(huán)境：

jdk 8
intellij idea
tomcat 8
mysql 5.7
maven 3.6

所用技術(shù)：

springboot
jsp
數(shù)據(jù)靜態(tài)初始化

項(xiàng)目介紹

使用springboot整合jsp，在后端寫(xiě)入公交路線名稱(chēng)和詳細(xì)站點(diǎn)，前端頁(yè)面可條件查詢具體的內(nèi)容，如公交路線，公交名稱(chēng)，車(chē)倆信息等。

運(yùn)行效果

前臺(tái)用戶端：

路線選擇

路線詳情

數(shù)據(jù)準(zhǔn)備:

BusData.txt

準(zhǔn)備工作:

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數(shù)據(jù)初始化

@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 數(shù)據(jù)
    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){        //隨機(jī)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);    //添加車(chē)站
      }
    }
  }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); //沒(méi)有搜索默認(rèn)顯示所有路線
       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); //模糊搜索出來(lái)的路線列表
         return "way";
       }else{
         return "noView"; //沒(méi)有所選路線
       }
     }
  } catch (Exception e) {
    e.printStackTrace();
  }
  return "way";
}

公交車(chē)路線站展示

@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";//沒(méi)有對(duì)應(yīng)公交車(chē)站
}
//前端頁(yè)面數(shù)據(jù)渲染
<div class="pageContent" style="background: #eeeeee;">
  <div class="pageFormContent" layoutH="55">
    <div class="timeText">${firstBus}<----->${lastBus}
      <span>（ 首/末班車(chē)時(shí)間：<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>

項(xiàng)目總結(jié)

項(xiàng)目存放路徑最好不要帶中文路徑，否則可能存在靜態(tài)busData資源初始化失敗
頁(yè)面時(shí)間車(chē)站路線所采用時(shí)間軸方式展示，長(zhǎng)度動(dòng)態(tài)計(jì)算，部分瀏覽器顯示可能有點(diǎn)錯(cuò)位
其他后續(xù)迭代功能后續(xù)開(kāi)發(fā)，敬請(qǐng)關(guān)注

以上就是springboot整合jsp,實(shí)現(xiàn)公交車(chē)站路線圖的詳細(xì)內(nèi)容，更多關(guān)于springboot整合jsp的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: