[深圳|结业弟子]JAVA-张庆东|2017年10月02日的日报-技能树.IT修真院

发表于： 2017-10-02 20:56:36

1 853

今天完成的事情：

1.完成了任务四t11页面的动态化

项目配置：

表结构（长度有待优化）

mybatis配置

<select id="selectPositionByType" parameterType="int" resultMap="PositionMap">
    SELECT * FROM position WHERE type = #{type}
</select>

<resultMap id="PositionMap" type="cn.summerwaves.model.Position">
    <result property="picture" column="picture"/>
    <result property="positionName" column="position_name"/>
    <result property="introduction" column="introduction"/>
    <result property="type" column="type"/>
    <result property="barrier" column="barrier"/>
    <result property="difficulty" column="difficulty"/>
    <result property="growthCycle" column="growth_cycle"/>
    <result property="scarcity" column="scarcity"/>
    <result property="experience1" column="experience1"/>
    <result property="experience2" column="experience2"/>
    <result property="experience3" column="experience3"/>
    <result property="salary1" column="salary1"/>
    <result property="salary2" column="salary2"/>
    <result property="salary3" column="salary3"/>
    <result property="studying" column="studying"/>
    <result property="skill" column="skill"/>
    <result property="detail" column="detail"/>
</resultMap>

控制器

@RequestMapping(value = "/t11")
public ModelAndView toT11() {
    ModelAndView mv = new ModelAndView("t11");
    List<Position> positions = positionService.selectPositionByType(1);
    mv.addObject("date",new Date().getTime());
    mv.addObject("positions", positions);
    return mv;
}

动态化jsp部分

<c:forEach var="list" items="${positions}">
<div class="row">
    <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="${ctx}/${list.picture}"></div>
                <div class="text">
                    <h4 class="">${list.positionName}</h4>
                    <p class="text-present">${list.introduction}</p>
                </div>
            </div>

            <div class="warp-class2">
                <div class="warp-class2-text">
                    <div class="iconfont text-padding">门槛 <c:forEach begin="1" end="${list.barrier}">
                        <img src="${ctx}/static/png/xx.png">
                    </c:forEach></div>
                </div>
                <div class="warp-class2-text">
                    <div class="iconfont text-padding text-border-left">难易程度 <c:forEach begin="1" end="${list.difficulty}">
                        <img src="${ctx}/static/png/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">${list.growthCycle}</span>年</div>
                </div>
                <div class="warp-class2-text">
                    <div class="iconfont text-padding text-border-left">稀缺程度 <span class="iconfont-color">${list.scarcity}</span>家公司需要</div>
                </div>
            </div>

            <div class="warp-class2">
                <div class="leftWarp">
                    薪资待遇
                </div>
                <div class="rightWarp">
                    <div class="rightWarp-class">
                        <div class="rightWarp-year">${list.experience1}</div>
                        <div class="rightWarp-wages">${list.salary1}</div>
                    </div>
                    <div class="rightWarp-class">
                        <div class="rightWarp-year">${list.experience2}</div>
                        <div class="rightWarp-wages">${list.salary2}</div>
                    </div>
                    <div class="rightWarp-class border-bottom">
                        <div class="rightWarp-year">${list.experience3}</div>
                        <div class="rightWarp-wages">${list.salary3}</div>
                    </div>
                </div>
            </div>

            <div class="warp-class2">
                <b class="text-b">有${list.studying}人正在学</b>
            </div>
            <div class="warp-class2">
                <p class="text-p">提示:在你学习之前你应该已经掌握${list.skill}等语言基础</p>
            </div>

            <div class="flip-container">
                <p class="flip-title">${list.positionName}</p>
                <p class="flip-text">${list.detail}</p>
            </div>
        </div>
    </div>
    </c:forEach>
    <!-- 标记 -->
</div>

注：数据库type相同的对应一个分类（前端、后端），数据库每一条信息代表一个大分类下的一个职业

效果

详见：www.summerwaves.cn/t11

2.使用tag标签将long类型时间转换成date类型时间

mytag.tld

<taglib xmlns="http://java.sun.com/xml/ns/javaee"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd"
        version="2.1">

    <tlib-version>1.0</tlib-version>
    <short-name>ext</short-name>
    <uri>/WEB-INF/mytag.tld</uri>
    <!-- Invoke 'Generate' action to add tags or functions -->
    <tag>
        <name>formatdate</name>
        <tag-class>cn.summerwaves.util.Long2DateTag</tag-class>
        <body-content>empty</body-content>
        <attribute>
            <name>time</name>
            <required>true</required>
            <rtexprvalue>true</rtexprvalue>
        </attribute>
    </tag>
    <!-- Invoke 'Generate' action to add tags or functions -->

</taglib>

Long2DateTag.class

public class Long2DateTag extends SimpleTagSupport {
    private Long time;

    public void setTime(Long time){
        this.time = time;
    }

    @Override
    public void doTag() throws JspException , IOException {
        JspWriter out = getJspContext().getOut();
        out.println(new SimpleDateFormat("yyyy-MM-dd  HH:mm:ss").format(time));
    }

}

web.xml

<!-- 自定义TAG标签 -->
<jsp-config>
  <taglib>
    <taglib-uri>/extendTags</taglib-uri>
    <taglib-location>/WEB-INF/datetag.tld</taglib-location>
  </taglib>
  <taglib>
    <taglib-uri>/WEB-INF/mytag.tld</taglib-uri>
    <taglib-location>/WEB-INF/mytag.tld</taglib-location>
  </taglib>
</jsp-config>

jsp获取数据并转换

<%@ taglib uri="/WEB-INF/mytag.tld" prefix="ext"%>

header>
    <div class="top container">
        <p class="hidden-xs">客服热线：010-594-78634</p>
        <ext:formatdate time="${date}" />
        ${date}
        <img src="${ctx}/static/png/12321.gif">
    </div>

效果:

详见：www.summerwaves.cn/t11 头部

3.验收标准：tiles分出头部，左边栏，右边栏和底部

本想是搜下代码写一个网页布局，但是仔细想想那是前端的工作，如果要复用的话我只要将前端切分就行了，组件部分符合验收标准就好了

组件：

<definition name="base" template="/WEB-INF/jsp/layout/layout.jsp">
    <put-attribute name="footer" value="/WEB-INF/jsp/layout/foot.jsp"/>
    <put-attribute name="header" value="/WEB-INF/jsp/layout/head.jsp"/>
    <put-attribute name="menuLeft" value="/WEB-INF/jsp/layout/menuLeft.jsp"/>
    <put-attribute name="menuRight" value="/WEB-INF/jsp/layout/menuRight.jsp"/>
    <put-attribute name="body" value=""/>
</definition>
<definition name="myView" extends="base">
<put-attribute name="body" value="/WEB-INF/jsp/layout/index.jsp"/>

布局页

<html>
<head>
    <title>Title</title>
</head>
<body>
<div id="header">
    <tiles:insertAttribute name="header" />
</div>
<div id="body">
    <tiles:insertAttribute name="body" />
</div>
<div id="menuLeft">
    <tiles:insertAttribute name="menuLeft" />
</div>
<div id="menuRight">
    <tiles:insertAttribute name="menuRight" />
</div>
<div id="footer">
    <tiles:insertAttribute name="footer"/>
</div>
</body>
</html>