SSM框架下实现简单的统计点击数功能

先贴上效果图

怎么做这个小功能

1，控制器

EduController.java

package com.infopublic.controller;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Properties;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.shiro.session.Session;
import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.infopublic.entity.TbEducation;
import com.infopublic.entity.Users;

import com.infopublic.service.LogManager;
import com.infopublic.service.UsersManager;
import com.infopublic.service.EduManager;

import com.infopublic.util.Const;
import com.infopublic.util.DateUtil;
import com.infopublic.util.FileDownload;
import com.infopublic.util.FileInputread;
import com.infopublic.util.Jurisdiction;
import com.infopublic.util.PageData;
import com.infopublic.util.Tools;

/**
* 在线学习
* @author zc
*
*/

@Controller
@RequestMapping(value="/edu")
public class EduController extends BaseController {

@Resource(name="usersService")
private UsersManager usersService;
@Resource(name="EduService")
private EduManager EduService;
@Resource(name="logService")
private LogManager logService;

private String path="";

/**
* 在线学习
* @return
* @throws Exception
* @author zc
*/
@RequestMapping(value="/showalledu")
public ModelAndView showalledu() throws Exception{
ModelAndView mv = this.getModelAndView();
PageData pd = new PageData();
pd = this.getPageData();
pd.put("SYSNAME", Tools.readTxtFile(Const.SYSNAME)); // 读取系统名称
pd.put("begin", 0);
pd.put("length", Integer.parseInt(Tools.GetValueByKey(Const.ALLPAGE,"edufirstshow"))); // 实时政事首次展示条数
List<TbEducation> edu = EduService.getEdu(pd);
this.getdataandcon(edu);
mv.addObject("firstfeednum", Tools.firstnum(edu));
mv.addObject("edu", edu);
mv.setViewName("edu/showalledu");
mv.addObject("pd", pd);
return mv;
}

/**
* 下拉加载
* @return
* @throws Exception
*/

@RequestMapping(value="/showedumore")
@ResponseBody
public Object showedumore() throws Exception{
Map<String,String> map=new HashMap<String, String>();
PageData pd = new PageData();
pd = this.getPageData();
int length=Integer.parseInt(pd.getString("length"));  //原始条数
int tip=Integer.parseInt(pd.getString("tip")); //每次下拉  多展示2条     limit tip*length,2
pd.put("begin",((tip-1)*2+length));
pd.put("length",2);
List<TbEducation> edu=EduService.getEdu(pd);
this.getdataandcon(edu);

if(edu.isEmpty()){//数据为空
map.put("stop", "stop");
}else{
for(int i=1;i<=edu.size();i++){
if(edu.get(i-1)!=null){
map.put("eid"+i, edu.get(i-1).getEid()+"");
map.put("courtit"+i, edu.get(i-1).getCourtit());
map.put("adddate"+i, edu.get(i-1).getAdddate());
map
4000
.put("courass"+i, edu.get(i-1).getCourass());
map.put("courread"+i, edu.get(i-1).getCourread());
map.put("coursum"+i, edu.get(i-1).getCoursum()+"");
if(i==edu.size()){
map.put("success",i+"");  //集合数据都不为空
}
}else{
map.put("success",(i-1)+"");  //集合有几个不为NULL的数据
break;
}
}

}
return map;
}

private void getdataandcon(List<TbEducation> edu) {
// TODO Auto-generated method stub

}

/**
* 展示具体内容
* @return
* @throws Exception
*/
@RequestMapping(value="/showeducontent")
public ModelAndView showeducontent() throws Exception{
ModelAndView mv = this.getModelAndView();
PageData pd = new PageData();
pd=this.getPageData();

pd.put("SYSNAME", Tools.readTxtFile(Const.SYSNAME)); //读取系统名称

TbEducation edu=EduService.getEduFromeid(pd);
//      调用业务方法查询所有表单字段
edu.setAdddate(edu.getAdddate().substring(0, 19));
Integer readnum=Integer.parseInt(edu.getCourread())+1;
//      取点击量的值强制转换int型再存入readnum变量
pd.put("courread", readnum);
//      将readnum的值传给数据库的courread字段
EduService.setEduCourread(pd);
//      最后调用业务方法

List<String> url=FileInputread.getURL(edu.getAdddate());
mv.addObject("url",url);
pd.put("urlnum", url.size());
mv.addObject("pd",pd);
mv.addObject("edu",edu);
mv.setViewName("edu/showeducontent");

return mv;
}
/**
* 图片展示
* @return
* @throws IOException
*/
@RequestMapping(value="/showeduimage")
public void showeduimage(HttpServletRequest request,HttpServletResponse response) throws Exception{
String url=request.getParameter("url");
if(!"".equals(url) && url!=null){
url = url.substring(1, url.length()-1);   //注意：这里要去掉前后的   ' 号
FileInputread.Imageshow(response,url);    //输出图片
}
}
}

2，实体类

TbEducation.java

package com.infopublic.entity;

import java.util.Date;

public class TbEducation {
private Integer eid;

private String courtit;

private String coursum;

private String courass;

private String adddate;

private String uid;

private String uname;

private String courread;

private String courpic;

private Short remark;

public Integer getEid() {
return eid;
}

public void setEid(Integer eid) {
this.eid = eid;
}

public String getCourtit() {
return courtit;
}

public void setCourtit(String courtit) {
this.courtit = courtit == null ? null : courtit.trim();
}

public String getCoursum() {
return coursum;
}

public void setCoursum(String coursum) {
this.coursum = coursum == null ? null : coursum.trim();
}

public String getCourass() {
return courass;
}

public void setCourass(String courass) {
this.courass = courass == null ? null : courass.trim();
}

public String getAdddate() {
return adddate;
}

public void setAdddate(String adddate) {
this.adddate = adddate;
}

public String getUid() {
return uid;
}

public void setUid(String uid) {
this.uid = uid == null ? null : uid.trim();
}

public String getUname() {
return uname;
}

public void setUname(String uname) {
this.uname = uname == null ? null : uname.trim();
}

public String getCourread() {
return courread;
}

public void setCourread(String courread) {
this.courread = courread;
}

public String getCourpic() {
return courpic;
}

public void setCourpic(String courpic) {
this.courpic = courpic == null ? null : courpic.trim();
}

public Short getRemark() {
return remark;
}

public void setRemark(Short remark) {
this.remark = remark;
}
}

3，业务接口

EduManager.java

package com.infopublic.service;

import java.util.List;

import com.infopublic.entity.TbEducation;
import com.infopublic.util.PageData;

/**
* 在线学习接口类
* @author zc
*
*/
public interface EduManager {

/**
* 展示学习内容
* @param pd
* @return
* @throws Exception
*/
public List<TbEducation> getEdu(PageData pd)throws Exception;

/**
* 根据eid展示
* @param pd
* @return
* @throws Exception
*/
public TbEducation getEduFromeid(PageData pd)throws Exception;

/**
* 新增courread点击量
* @param pd
* @return
* @throws Exception
*/
public TbEducation setEduCourread(PageData pd)throws Exception;

}

4，业务逻辑

EduService.java

package com.infopublic.service.impl;

import java.util.List;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import com.infopublic.dao.DaoSupport;
import com.infopublic.entity.TbEducation;
import com.infopublic.service.EduManager;
import com.infopublic.util.PageData;

@Service("EduService")
public class EduService implements EduManager{
@Resource(name = "daoSupport")
private DaoSupport dao;

@SuppressWarnings("unchecked")
@Override
public List<TbEducation> getEdu(PageData pd) throws Exception {
return (List<TbEducation>)dao.findForList("TbEduMapping.getEdu", pd);
}
@Override
public TbEducation getEduFromeid(PageData pd) throws Exception {
return (TbEducation)dao.findForObject("TbEduMapping.getEduFromeid", pd);
}
@Override
public TbEducation setEduCourread(PageData pd) throws Exception {
return (TbEducation)dao.findForObject("TbEduMapping.setEduCourread", pd);
}

}

5，Mabatis数据库管理

TbEduMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="TbEduMapping">
<!--表名 -->
<sql id="edutable">
tb_education
</sql>

<sql id="edu">
eid,courtit,coursum,courass,adddate,uid,uname,courread,courpic,remark
</sql>

<!--查询edu信息-->
<select id="getEdu" parameterType="pd" resultType="TbEducation">
select
eid,courtit,coursum,courass,adddate,uid,uname,courread,courpic,remark
from <include refid="edutable"></include>
order by adddate desc
limit ${begin},${length}
</select>

<!--根据eid查询实时信息-->
<select id="getEduFromeid" parameterType="pd" resultType="TbEducation">
select
eid,courtit,coursum,courass,adddate,uid,uname,courread,courpic,remark
from <include refid="edutable"></include>
where eid=#{eid}
</select>

<!--增加用户点击量-->
<update id="setEduCourread" parameterType="pd" >
<!--注意只有查询才有resultType -->
update <include refid="edutable"></include>  set courread=#{courread}
where eid=#{eid}
</update>

</mapper>

6，JSP页面 展示所有条目的页面

showalledu.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html style="font-size:23.4375px;">
<head>
<meta charset="utf-8"/>
<title>${pd.SYSNAME}</title>
<base href="<%=basePath%>">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">

<link rel="stylesheet" type="text/css" href="static/new/css/base.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">

</head>
<body>

<form action="" method="post" name="registerForm"  id="registerForm"></form>

<header class="header" id="header" style="background-color:#e64340;position:relative;z-index:100">
<a href="<%=basePath%>mainindex" target=_self class="back">返回</a>
<h1>在线学习</h1>
</header>

<c:choose>
<c:when test="${not empty edu}">
<c:forEach items="${edu}" var="edu" varStatus="vs">

<article class="weui-article">

<div class="weui-panel"  style="margin-top:0px;" onclick="showeid('${edu.eid}')" >

<img alt="" src="static/login/images/center-bg.jpg" style="height:142px;width:345px" >

<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">${edu.courtit}</h4>
<ul class="weui-media-box__info">
<li class="weui-media-box__info__meta">上传时间：${edu.adddate} </li>
<li class="weui-media-box__info__meta">阅读量：${edu.courread} </li>
</ul>
</div>
</a>
</div>

</article>

</c:forEach>
</c:when>
<c:otherwise>
<div><h2 style="color:#008080;text-align:center;">暂无</h2></div>
</c:otherwise>
</c:choose>

<div class="list"></div>
<div class="weui-loadmore">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在加载</span>
</div>

<div id="more" style="display:none;text-align:center;">
<span style="color:#808080;">没有更多内容了</span>
</div>

<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>

<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js"></script>

<script>
function showeid(eid){
window.location.href="<%=basePath%>edu/showeducontent?eid="+eid;
}
</script>

<script type="text/javascript">

$(document).ready(function(){
var firstfeednum=${firstfeednum};
if(firstfeednum<innerHeight/120){//隐藏加载
$(".weui-loadmore").hide();
}else{//出现加载
}
});
var loading = false;  //状态标记
var length=${pd.length}+"";
var tip=1;

$(document.body).infinite().on("infinite", function() {
if(loading) return;
loading = true;
$.ajax({
type: "POST",
url: "<%=basePath%>edu/showedumore.do",
data:  "tip="+tip+"&length="+length,
dataType:'json',
cache: false,
success: function(d){
if(d.stop=="stop"){
$(document.body).destroyInfinite();
$("#more").css("display","block");
$(".weui-loadmore").hide();
}
else if(d.success=="1"){
$(".list").append("<article class=\"weui-article\"><img alt=\"\" src=\"static/login/images/center-bg.jpg\" style=\"height:142px;width:345px\" ><div class=\"weui-panel\"  style=\"margin-top:0px;\" onclick=\"showeid('"+d.eid1+"')\" ><a href=\"javascript:void(0);\" class=\"weui-media-box weui-media-box_appmsg\"><div class=\"weui-media-box__bd\"><h4 class=\"weui-media-box__title\">"+d.courtit1+"</h4><ul class=\"weui-media-box__info\"><li class=\"weui-media-box__info__meta\">上传时间："+d.adddate1+"</li><li class=\"weui-media-box__info__meta\">阅读量："+d.courread1+"</li></ul></div></a></div></article>");

loading = false;
tip++;
}
else if(d.success=="2"){   //共有二个数据
$(".list").append("<article class=\"weui-article\"><img alt=\"\" src=\"static/login/images/center-bg.jpg\" style=\"height:142px;width:345px\" ><div class=\"weui-panel\" style=\"margin-top:0px;\" onclick=\"showeid('"+d.eid1+"')\" ><a href=\"javascript:void(0);\" class=\"weui-media-box weui-media-box_appmsg\"><div class=\"weui-media-box__bd\"><h4 class=\"weui-media-box__title\">"+d.courtit1+"</h4><ul class=\"weui-media-box__info\"><li class=\"weui-media-box__info__meta\">上传时间："+d.adddate1+"</li><li class=\"weui-media-box__info__meta\">阅读量："+d.courread1+"</li></ul></div></a></div></article>");
$(".list").append("<article class=\"weui-article\"><img alt=\"\" src=\"static/login/images/center-bg.jpg\" style=\"height:142px;width:345px\" ><div class=\"weui-panel\"  style=\"margin-top:0px;\" onclick=\"showeid('"+d.eid2+"')\" ><a href=\"javascript:void(0);\" class=\"weui-media-box weui-media-box_appmsg\"><div class=\"weui-media-box__bd\"><h4 class=\"weui-media-box__title\">"+d.courtit2+"</h4><ul class=\"weui-media-box__info\"><li class=\"weui-media-box__info__meta\">上传时间："+d.adddate2+"</li><li class=\"weui-media-box__info__meta\">阅读量："+d.courread2+"</li></ul></div></a></div></article>");

loading = false;
//              window.location.reload();
tip++;
}
else{$.toast("出现错误", "cancel");}
}
});
});

</script>

</body>
</html>

7，JSP页面 点击任意条目进入条目详情页

showeducontent.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html style="font-size:23.4375px;">
<head>
<title>${pd.SYSNAME}</title>
<base href="<%=basePath%>">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">

<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
<link rel="stylesheet" type="text/css" href="static/new/css/base.css">
<link rel="stylesheet" type="text/css" href="static/new/css/video-js.css">

<script src="static/new/videojs/video.min.js"></script>

</head>

<body ontouchstart>

<header class="header" id="header" style="background-color:#e64340;position: static;">
<a href="javascript:history.back(-1)" target=_self class="back">返回</a>
</header>

<article class="weui-article">
<h1 class="demos-title">${edu.courtit}</h1>
<section>
<ur class="weui-media-box__info">
<li class="weui-media-box__info__meta">${edu.uname}</li>
<li class="weui-media-box__info__meta">${edu.adddate}</li>
</ur>
</article>

<article class="weui-article">
<section>

<p>
${edu.coursum}
</p>

<video id="video1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="264" poster=" " data-setup="{}">
<source src="static/mp4/testmp5.mp4" type='video/mp4' />
</video>
</section>
</section>
</article>

<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<script src="static/jqweui/swiper.js" charset='utf-8'></script>
</body>
</html>