项目实训——数据渲染数据引擎

今天的任务就是要做出每个版块的页面。板块页面最重要就是数据的渲染。为了样式的统一，我继续使用layui，在这里用的是模板引擎laytpl。

数据渲染

layui卡片布局

为了美观，我使用了卡片式布局。将数据引擎和卡片布局结合起来，可以同时实现对美观和实用的要求。

<div class="layui-card">
	<div class="layui-card-header">卡片面板</div>
  	<div class="layui-card-body">
       卡片式面板面板通常用于非白色背景色的主体内
        <br>
	从而映衬出边框投影
	</div>
</div>

layui分页

layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。

<script>
	layui.use('laypage', function(){
   
		var laypage = layui.laypage;
		//执行一个laypage实例  
		laypage.render({
   
			elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
			,count: 50 //数据总数，从服务端得到  
		});
	});
</script>

layui数据引擎

laytpl 是 JavScript 模板引擎，在字符解析上有着比较出色的表现，欠缺之处在于异常调试上。与一般的字符拼接不同的是，laytpl 的模板可与数据分离，集中把逻辑处理放在 View 层，提升代码可维护性，尤其是针对大量模板渲染的情况。
第一步，编写模版。我们可以使用一个script标签存放模板。以showoffer.html为例：

<script id="imgCardScript" type="text/html">
    <ul>
        {
   {
   #  layui.each(d, function(index, item){
   
                var url = "jobdetails?jobid="+ item.job_ID;//这里是岗位的具体链接
        }}
        <li>
            <div class="layui-card showcard" style="margin-bottom: 20px;" >
                <div class="layui-card-header"  style="padding:5px 0 45px 20px;font-size: 22px;">
                    <div style="width: 80%;">
                        <!-- 点击进入岗位具体页面-->
                        <a title={
   {
   item.title}} style="color: #009688;" href={
   {
   url}}>{
   {
   item.title}}</a>
                    </div>
                    <span style="float: right;margin-right: 50px;font-size:18px;color:#4d2eb3;display: inline-block;margin-top: -40px ">{
   {
   item.company_name}}</span>
                </div>
                <div class="layui-card-body">
                    <p><span class="subtitle">截止日期：</span>