A048_CMS_前端首页文章列表展示_页面静态化

XIAOMING820

已于 2022-02-17 21:00:19 修改

阅读量421

点赞数 1

分类专栏：文档文章标签： java js

于 2021-06-20 09:50:33 首次发布

本文链接：https://blog.csdn.net/ffhgjgj6576567/article/details/118066302

版权

文档专栏收录该内容

118 篇文章 6 订阅

订阅专栏

1. 内容介绍

前端首界面新闻列表展示（掌握）
FreeMark API认识（掌握）
FreeMark使用对象产生HTML（掌握）
FreeMark集成项目（掌握）

2. 新闻列表展示

2.1 常量Constant

//技术文章
public static final String TECHNICAL = "technology";
//行业
public static final String INDUSTRY = "industry";
//学科
public static final String SUBJECT = "subject";

2.2 ArticleServiceImpl

@Override
public Map<String, Object> findNews() {
	Map<String, Object> map = new HashMap<>();
	//查询所有技术文章
	map.put("technicalArticles",articleMapper.selectArticlesByTypeCodeTopEight(Constant.TECHNICAL));
	//查询所有行业文章
	map.put("industryArticles",articleMapper.selectArticlesByTypeCodeTopEight(Constant.INDUSTRY));
	//查询所有学科文章
	map.put("subjectArticles",articleMapper.selectArticlesByTypeCode                  
	TopEight(Constant.SUBJECT));
	return map;
}

2.3 ArticleMapper.xml

//把文章列表前8条数据查询出来
<select id="selectArticlesByTypeCodeTopEight" resultType="Article">
	 SELECT t.* FROM  t_article t 
	 JOIN t_article_type tt ON t.typeId=tt.id
	 WHERE  tt.code=#{code} 
	 AND t.enable=1 
	 ORDER BY createDate DESC 
	 LIMIT 8
 </select>

3. 首界面js代码

$.get("/index/findAllNews", function (result) {
	//行业文章
	var industryArticles = result.industryArticles;
	//技术文章
	var technicalArticles = result.technicalArticles;
	//学科文章
	var subjectArticles = result.subjectArticles;
	//清空
	$("#technical").empty();
	$.each(technicalArticles,function(i,o){
		 $("#technical").append('<a target="_blank"
							href="'+o.url+'?id='+o.id+'">' +
							 '<li class="flex-box">' +
							'<div class="ellipsis-line"
						 	 title="'+o.title+'">' +
							'</div>' +
							'<div class="date">'+o.createDate+'</div>' +
								'</li></a>');
	});
	$("#industry").empty();
	$.each(industryArticles, function (i, o) {
		$("#industry").append('<a target="_blank"    href="'+o.url+'">' +
	    '<li class="flex-box">' +
	    '<div class="ellipsis-line" title="'+o.title+'">' +
	    '</div>' +
	    '<div class="date">'+o.createDate+'</div>' +
	    '</li></a>');
	});
	$("#subject").empty();
	   $.each(subjectArticles, function (i, o) {
		$("#subject").append('<a target="_blank"  href="'+o.url+'">' +
	       '<li class="flex-box">' +
	       '<div class="ellipsis-line" title="'+o.title+'">' +
	        '</div>' +
	        '<div class="date">'+o.createDate+'</div>' +
	         '</li></a>');
	   }); 
	});

4. FreeMark

4.1 使用步骤

1.导入jar包
2.创建一个配置对象（传递一个版本）
3.设置模板加载路径
4.设置一个模板编码
5.获取一个模板对象
6.获取一个数据
7.生成文件

4.2 测试代码

//创建模板技术的核心配置对象
Configuration cfg = new Configuration(Configuration.VERSION_2_3_28);
//加载模板的路径位置
cfg.setDirectoryForTemplateLoading(new File("模板路径"));
//设置编码
cfg.setDefaultEncoding("UTF-8");
//准备数据
MyUser user = new MyUser();
user.setTitle("王天霸在此");
user.setMsg("师姐!!");
//获取指定的模板
Template template = cfg.getTemplate("hello.ftl");
//合并模板
template.process(user, new FileWriter(new File("最终文件路径")));

4.3 FreeMark基本语法IF

<#if (age>20 && age<=50)>
	要多奋斗啊。。
<#elseif (age>=0 && age<=20)>	
	你还年亲，可以多玩玩
<#elseif (age>50 && age<=85)>	
	寿比南山
<#else>	
	人生赢家
</#if>

4.4 FreeMark基本语法FOR

<#list strs as s>
	${s}
</#list>
<#list map ? keys as k>
	${k}=====${map["${k}"]}
</#list>

5. FreeMark集成项目

5.1 抽取FreeMark工具类

/**
* 删除模板
* @param article  文章对象
* @param rootPath 根路径
*/
public static void deleteTemplate(Article article,String rootPath){
	if(article.getId() != null){
	File file = new File(rootPath, article.getUrl());
	    if(file.exists()){
	        file.delete();
	    }
	}		
}

public static String createUrl(Article article,HttpServletRequest req){
	Writer out =  null;
	try {
				 //创建模板的核心配置对象
	Configuration cfg = new Configuration(Configuration.VERSION_2_3_28);
		        //设置加载的模板的路径
		     String rootPath=req.getServletContext().getRealPath("/");
		        
		     //如果是修改先删除老模板
		     deleteTemplate(article, rootPath);
		        
		     //加载模板的位置
		cfg.setDirectoryForTemplateLoading(new File(rootPath,"template"));
		      //设置编码
		      cfg.setDefaultEncoding("UTF-8");
		      //获取指定的模板
		      Template template = cfg.getTemplate("article.ftl");
		      //随机产生的名字
		      String url = "/home/news/"+UUID.randomUUID()+".html";
		      File file = new File(rootPath, url);
		      //如果父文件夹不存在，则创建
		      if (!file.getParentFile().exists()) {
		           file.getParentFile().mkdirs();
		       }
	      out = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(file), "UTF-8"));
		      template.process(article, out);
		      return url;
			} catch (Exception e) {
				e.printStackTrace();
			}finally {
				//关闭io流
		        try {
		        	if(out != null){
		        		out.close();
		        	}
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
			return "";
	}

5.2 保存文章代码

@Override
public void save(Article article,HttpServletRequest request) {
	//根绝文章类型查询文章对象
	ArticleType articleType = articleTypeMapper.selectById(article.getTypeId());
	//文章类型
	article.setType(articleType);
	//创建模板，返回模板url	
	String url = TemplateUtil.createUrl(article, request);
	//设置模板对应的url
	article.setUrl(url);
	if(article.getId() == null){
		//保存文章
		articleMapper.save(article);
	}else{
		//保存文章
		articleMapper.update(article);
	}     
}

5.3 删除文章核心代码

@Override
public void remove(Long id,HttpServletRequest request) {
	Article article = articleMapper.selectById(id);
	String rootPath  = request.getServletContext().getRealPath("/");
	//删除模板
	TemplateUtil.deleteTemplate(article, rootPath);
	//删除数据
	articleMapper.removeById(id);
		
}

5.4 查看模板传递参数

$.each(technicalArticles,function(i,o){
	 $("#自定义id").append('<a target="_blank"href="'+o.url+'?id='+o.id+'">' +
	'<li class="flex-box">' +
	'<div class="ellipsis-line" title="'+o.title+'">' +
	'</div>' +
	'<div class="date">'+o.createDate+'</div>' +
	'</li></a>');
});

5.5 模板js代码

var url = location.search; //获取url中"?"符后的字串  
//封装url后面的参数
var param = new Object();  
if (url.indexOf("?") != -1) {  
	var str = url.substr(1);  
	strs = str.split("&");  
	for(var i = 0; i < strs.length; i ++) {
		param[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);  
	}  
}  
//查询点击量，还有上一篇和下一篇文章 
$.get("/index/findArticleDetail",param,function(result){
	//设置点击量 	
	$("#clickCount").html(result.clickCount); 
  				
	//上一篇文章
	var preArticle = result.preArticle;
	//下一篇文章
	var nextArticle = result.nextArticle;
	//是没有上一篇文章和下一篇文章的
	if(!preArticle&&!nextArticle){
	  	$("#prev_n_next").html("");
	}else if(!preArticle && nextArticle){
		//上一篇文章没有下一篇文章是有的
	   $("#prev_n_next").html('<a id="next" class="next ellipsis-line"  title="'+nextArticle.title+'" target="_blank"  href="'+nextArticle.url+'?id='+nextArticle.id+'"></a>');
	  	}else if(preArticle && !nextArticle){
	  		$("#prev_n_next").html('<a id="prev" class="prev ellipsis-line" title="'+preArticle.title+'" target="_blank" href="'+preArticle.url+'?id='+preArticle.id+'"></a>');
	  	}else{
	  		var str = '<a id="prev" class="prev ellipsis-line" title="'+preArticle.title+'" target="_blank" href="'+preArticle.url+'?id='+preArticle.id+'"></a>';
	  		str +='<a id="next" class="next ellipsis-line" title="'+nextArticle.title+'" target="_blank" href="'+nextArticle.url+'?id='+nextArticle.id+'"></a>';
	  		$("#prev_n_next").html(str);
	  	}
});

5.6 后台点击量(掌握),上一篇和下一篇(了解)

@Override
public Map<String, Object> selectArticleDetailById(Long id) {
	//修改点击数
	Article article = articleMapper.selectById(id);
	article.setClickCount(article.getClickCount()+1);
	articleMapper.update(article);
	Map<String,Object> map = new HashMap<>();
	//获取点击数
	map.put("clickCount", article.getClickCount());
	//查询所有的职位类型
	List<Article> articles = articleMapper.selectByTypeId(article.getTypeId());
	//就证明 上一篇和下一篇是没有的
	if(articles.size() == 1){
	    map.put("preArticle", null);
		map.put("nextArticle", null);
		return map;
	}
	for (int i = 0; i < articles.size(); i++) {
	     Article a = articles.get(i);
	     //就证明上一篇是没有的，下一篇是有的
	     if(a.getId().equals(article.getId()) && i == 0){
	    	map.put("preArticle", null);
	        map.put("nextArticle", articles.get(i+1));
	        break;
	    }else if(a.getId().equals(article.getId()) && i == articles.size()-1){
			//是最后一个
    		map.put("preArticle", articles.get(i-1));
    		map.put("nextArticle", null);
    		break;
    	}else if(a.getId().equals(article.getId())){
    		map.put("preArticle", articles.get(i-1));
    		map.put("nextArticle", articles.get(i+1));
    		break;
    	}
	}
	return map;
}

6.课程总结

今日主要是知道进入静态页面，动态填充页面数据，还有就是FreeMark的熟练使用，今日最难知识点主要是在对模板的CRUD

7.重点知识

FreeMark基本用语法
FreeMark动态页面静态化

8.课后练习

今日代码跟着老师节奏完整敲一篇

9.今日面试题

Integer与int的区别

10.每日一练

把所有的单例模式都写一下

XIAOMING820

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
A048_CMS_前端首页文章列表展示_页面静态化

1. 内容介绍前端首界面新闻列表展示（掌握）FreeMark API认识（掌握）FreeMark使用对象产生HTML（掌握）FreeMark集成项目（掌握）2. 新闻列表展示2.1 常量Constant//技术文章public static final String TECHNICAL = "technology";//行业public static final String INDUSTRY = "industry";//学科public static final Stri
复制链接

扫一扫