入门客AI创业平台(我带你入门，你带我飞行)
博文笔记

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

创建时间：2018-01-27 投稿人： 浏览次数：507

先贴上效果图

这里写图片描述

怎么做这个小功能

我这里先贴上我的代码，具体的解释以后有空加上
实现很容易，
就是前端页面用 js 的 onclick 事件
记录点击，
每点击一次
在控制器中向后台数据库update相关字段+1
就可以了

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.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>

嗯，把实现整个页面的所有相关代码已经贴上了。
等有时间再写一个详细的解释吧。

声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
未上传头像

热门文章
转载:stm32 数据类型的定义...
最新文章
SSM框架下实现简单的统计点...
copyright © 2008-2019 入门客AI创业平台 版权所有 备案号：湘ICP备2023012770号