发表于: 2017-04-26 23:49:19

2 1258


今天完成的事:

1、设计db将t11页面的数据改成动态的

最终db设计如下

<div class="container padding-bottom">
   <div class="nav-title">首页&gt;职业</div>
   <div class="nav-bar">
       <span class="">方向:</span>
       <a class="nav-bar-a a-selected" href="">全部</a>
       <c:forEach items="${list}" var="vocation_msg">
<a class="nav-bar-a" href="">${vocation_msg.h1}</a>
       </c:forEach>
</div>
   <c:forEach items="${list}" var="vocation_msg">
<h2 hidden>haha</h2>
       <div class="caption">
           <h4>${vocation_msg.h2}</h4>
       </div>
       <div class="row">
           <c:forEach begin="1" step="1" end="3">
<div class="col-md-4 col-sm-6 col-xs-12 top-margin">
                   <div class="warp-border">
                       <div class="clearfix">
                           <div class="icon-people"><img src="imges/687.png"></div>
                           <div class="text">
                               <h4 class="">${vocation_msg.vocation}</h4>
                               <p class="text-present">${vocation_msg.vocation_itrduc}</p>
                           </div>
                       </div>
                       <div class="warp-class2">
                           <div class="warp-class2-text">
                               <div class="iconfont text-padding">门槛<c:forEach begin="1" step="1"end="${vocation_msg.sill}"><img
                                       src="imges/xx.png"></c:forEach></div>
                           </div>
                           <div class="warp-class2-text">
                               <div class="iconfont text-padding text-border-left">难易程度 <c:forEach begin="1"step="1" end="${vocation_msg.sill_liv}"><img
                                       src="imges/xx.png"></c:forEach></div>
                           </div>
                       </div>
                       <div class="warp-class2">
                           <div class="warp-class2-text">
                               <div class="iconfont text-padding">成长周期 <span
                                       class="iconfont-color">${vocation_msg.grow_cyc}</span>
                       </div>
                           </div>
                           <div class="warp-class2-text">
                               <div class="iconfont text-padding text-border-left">稀缺程度 <span
                                       class="iconfont-color">${vocation_msg.rare_liv}</span>家公司需要
                       </div>
                           </div>
                       </div>
                       <div class="warp-class2">
                           <div class="leftWarp">
                               薪资待遇
                           </div>
                           <div class="rightWarp">
                               <div class="rightWarp-class">
                                   <div class="rightWarp-year">${vocation_msg.t1}</div>
                                   <div class="rightWarp-wages">${vocation_msg.k1}/</div>
                               </div>
                               <div class="rightWarp-class">
                                   <div class="rightWarp-year">${vocation_msg.t2}</div>
                                   <div class="rightWarp-wages">${vocation.k2}/</div>
                               </div>
                               <div class="rightWarp-class border-bottom">
                                   <div class="rightWarp-year">${vocation_msg.t3}</div>
                                   <div class="rightWarp-wages">${vocation_msg.k3}/</div>
                               </div>
                           </div>
                       </div>
                       <div class="warp-class2">
                           <b class="text-b">${vocation_msg.study_num}人正在学</b>
                       </div>
                       <div class="warp-class2">
                           <p class="text-p">${vocation_msg.hint_msg}</p>
                       </div>

                       <div class="flip-container">
                           <p class="flip-title">${vocation_msg.vocation}</p>
                           <p class="flip-text">${vocation_msg.vocation_itrduc}</p>
                       </div>
                   </div>
               </div>
           </c:forEach>
</div>
   </c:forEach>
</div>
<!--footer-->

明天计划的事:学习tils框架

遇到的问题:

1、最开始控制器头我是这样写的(Id代表学习类型)

但是到加载jsp页面后发现图片和样式加载不到(控制器给出了如下提示)

(此时我大概知道是路径问题,然后对比昨天的home页面发现配置和静态文件的路径都一样,整了两个小时硬是没搞出来,后求助择楠,择楠通过浏览器对比查看了昨天和今天静态文件的加载地址发现昨天的能正确在指定的目录里加载,今天的加载路径中多了"getvocation/"字段)

思考过后觉发现在静态文件加载路径前加上相对路径“../”能够正确访问到静态文件,但随之而来的新的问题是如果一个复杂的需要加载几百个静态资源我该怎么办?

最终将控制器的头改成这样(虽然不用加../并且也能访问静态资源,但是我还是觉得上面更像rest风格)

2、删掉了大量重复的代码在使用for循环包裹代码后发现,网页底部的边距没有了

经过查找在容器上加上 padding-bottom就好了

收获:在择楠那偷学了一招通过浏览器查看静态文件加载路径;对forEach印象更深了(jsp页面里全是foreach)

总结:本来昨天打算设计的db就两个动态数据今天早上来跟师兄探讨了下,后觉的都表里列出的内容都设计成动态的更合理,更符合实际情况和需求。在设计表的过程中,也在不断的改进,刚开始我的观察范围局限在xx工程师信息的表上,后面敲着jsp发现不对,应该加上所属的类别(前端开发方向,后端开发方向),在表中添加了字段后敲jsp发现又不对,还应该加上选项卡(前端开发,后端开发)字段,经过不断调试最终达到了自己想要的效果(虽然今天干的事情不多,好在有自己的收获,蛮开心!)


返回列表 返回列表
评论

    分享到