1. vm模板，可以通过java的模板引擎velocity 来生成html文件
<!DOCTYPE html> <html lang="zh-CN"> <head> #parse("/commons/head.vm") <title>${channel.channel_name} -- 文章列表</title> </head> <body class="bg-light"> #parse("/commons/nav.vm") <div class="section container"> <div class="bg-white px-5 pb-5 pt-3"> <nav aria-label="breadcrumb"> <ol class="breadcrumb bg-white rounded-0 mb-0 pl-0"> <li class="breadcrumb-item"><a href="/hnstpwq-ide/f/frameset.publicIndex.html#/">首页</a></li> <li class="breadcrumb-item active" aria-current="page">${channel.channel_name}</li> </ol> </nav> <div class="channel-title bg-light rounded-top mt-3"> <h3 class="d-inline-block mb-0 rounded-top">${channel.channel_name}</h3> </div> <div class="border px-5 py-4"> <div class="list list_1 list_2"> <ul class="datalist w-100 border-bottom pb-3 mb-4" id="list"></ul> <ul id="pagination" class="pagination"></ul> </div> </div> </div> </div> #parse('/commons/footer.vm') #parse('/commons/script.vm') <script src="${staticPath}/vendor/jq-paginator.min.js"></script> <script> jQuery(function($) { function search(pageIndex, rendered) { var data = { model: 'model:com.chinacreator.cms.article.Article', action: 'QueryPublish', rtype: 'o', data: { pageIndex: pageIndex || 1, pageSize: 10, channel_id: '${article.channel_id}' } } $.ajax({ url: '${contextPath}/model/modelServer', type: 'post', dataType: 'json', data: { datas: JSON.stringify(data) }, success: function(data) { if (data.status === '1') { renderList(data.response.datas); if (!rendered) renderPagination(data.response.totalSize || 0, 10); } else { alert(data.message); } } }); } function renderList(list) { $('#list').empty(); var template = '<li>'; template += '<div class="title text-truncate">'; template += '<a class="text-dark" target="_blank"></a>'; template += '</div>'; template += '<div class="date right-middle text-muted"></div>'; template += '</li>'; _.forEach(list, function(item) { var $dom = $(template); $('.title', $dom).attr('title', item.article_title); $('a', $dom).attr('href', '${htmlPath}' + item.file_address).text(item.article_title); $('.date', $dom).text(item.publish_date); $('#list').append($dom); }); $('<li/>').addClass('line').appendTo($('#list')); } function renderPagination(totalSize, pageSize) { $('#pagination').jqPaginator({ totalCounts: totalSize, pageSize: pageSize, visiblePages: 5, currentPage: 1, first: '<li class="first"><a href="javascript:void(0);">首页</a></li>', prev: '<li class="prev"><a href="javascript:void(0);"><i class="arrow arrow2"></i>上一页</a></li>', next: '<li class="next"><a href="javascript:void(0);">下一页<i class="arrow arrow3"></i></a></li>', last: '<li class="last"><a href="javascript:void(0);">末页</a></li>', page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>', onPageChange: function(num, type) { if (type !== 'init') search(num, true); } }); } search(); }); </script> </body> </html>
生成后的文件
head.vm文件
<meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta http-equiv="Cache-Control" content="no-siteapp"> <meta http-equiv="x-ua-compatible" content="IE=edge"> ## 不使用CDN加速节点样式 ## <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"> <link href="${staticPath}/vendor/bootstrap-4.5.0/css/bootstrap.min.css" rel="stylesheet"> <link href="${staticPath}/vendor/iconfont/iconfont.css" rel="stylesheet"> <link href="${staticPath}/vendor/cmsIcon/iconfont.css" rel="stylesheet"> <link href="${staticPath}/css/main.css" rel="stylesheet"> <link href="${staticPath}/vendor/jquery-confirm/jquery-confirm.min.css" rel="stylesheet">