1.导出市场活动：
1)给”批量导出”按钮添加单击事件，发送导出请求
2)查询所有的市场活动
3)创建一个excel文件，并且把市场活动写到excel文件中
4)把生成的excel文件输出到浏览器(文件下载)

技术准备：
1)使用java生成excel文件：iText,apache-poi

  1.      关于办公文档插件使用的基本思想：把办公文档的所有元素封装成普通的Java类，<br />                                     程序员通过操作这些类达到操作办公文档目的。<br />     文件---------HSSFWorkbook<br />     页-----------HSSFSheet<br />     行-----------HSSFRow<br />         列-----------HSSFCell<br />     样式---------HSSFCellStyle
  3.  使用apache-poi生成excel：<br />         a)添加依赖：<br />                <dependency><br />              <groupId>org.apache.poi</groupId><br />              <artifactId>poi</artifactId><br />              <version>3.15</version><br />            </dependency><br />         b)使用封装类生成excel文件：<br />           <br />       2.文件下载：<br />         filedownloadtest.jsp<br />     ActivityController<br />         |->fileDownload()
  5.  *所有文件下载的请求只能发送同步请求。

一、导出市场活动流程图

导出市场活动.png

1.mapper层

image.png

  1.   /**
  2.      * 查询所有的市场活动
  3.      * @return
  4.      */
  5.     List<Activity> selectAllActivitys();
  1. <select id="selectAllActivitys" resultMap="BaseResultMap">
  2.   select a.id,u1.name as owner,a.name,a.start_date,a.end_date,a.cost,a.description,a.create_time,
  3.          u2.name as create_by,a.edit_time,u3.name as edit_by
  4.   from tbl_activity a
  5.          join tbl_user u1 on a.owner=u1.id
  6.          join tbl_user u2 on a.create_by=u2.id
  7.          left join tbl_user u3 on a.edit_by=u3.id
  8.   order by a.create_time desc
  9. </select>

2.service层

image.png

  1. List<Activity> queryAllActivitys();
  1.   public List<Activity> queryAllActivitys() {
  2.       return    activityMapper.selectAllActivitys();
  3.     }

3.controller层

  2.     @RequestMapping("/workbench/activity/exportAllActivitys.do")
  3.     public void exportAllActivitys(HttpServletResponse response) throws Exception{
  4.         //调用service层方法，查询所有的市场活动
  5.         List<Activity> activityList=activityService.queryAllActivitys();
  6.         //创建exel文件，并且把activityList写入到excel文件中
  7.         HSSFWorkbook wb=new HSSFWorkbook();
  8.         HSSFSheet sheet=wb.createSheet("市场活动列表");
  9.         HSSFRow row=sheet.createRow(0);
  10.         HSSFCell cell=row.createCell(0);
  11.         cell.setCellValue("ID");
  12.         cell=row.createCell(1);
  13.         cell.setCellValue("所有者");
  14.         cell=row.createCell(2);
  15.         cell.setCellValue("名称");
  16.         cell=row.createCell(3);
  17.         cell.setCellValue("开始日期");
  18.         cell=row.createCell(4);
  19.         cell.setCellValue("结束日期");
  20.         cell=row.createCell(5);
  21.         cell.setCellValue("成本");
  22.         cell=row.createCell(6);
  23.         cell.setCellValue("描述");
  24.         cell=row.createCell(7);
  25.         cell.setCellValue("创建时间");
  26.         cell=row.createCell(8);
  27.         cell.setCellValue("创建者");
  28.         cell=row.createCell(9);
  29.         cell.setCellValue("修改时间");
  30.         cell=row.createCell(10);
  31.         cell.setCellValue("修改者");
  33.         //遍历activityList，创建HSSFRow对象，生成所有的数据行
  34.         if(activityList!=null && activityList.size()>0){
  35.             Activity activity=null;
  36.             for(int i=0;i<activityList.size();i++){
  37.                 activity=activityList.get(i);
  39.                 //每遍历出一个activity，生成一行
  40.                 row=sheet.createRow(i+1);
  41.                 //每一行创建11列，每一列的数据从activity中获取
  42.                 cell=row.createCell(0);
  43.                 cell.setCellValue(activity.getId());
  44.                 cell=row.createCell(1);
  45.                 cell.setCellValue(activity.getOwner());
  46.                 cell=row.createCell(2);
  47.                 cell.setCellValue(activity.getName());
  48.                 cell=row.createCell(3);
  49.                 cell.setCellValue(activity.getStartDate());
  50.                 cell=row.createCell(4);
  51.                 cell.setCellValue(activity.getEndDate());
  52.                 cell=row.createCell(5);
  53.                 cell.setCellValue(activity.getCost());
  54.                 cell=row.createCell(6);
  55.                 cell.setCellValue(activity.getDescription());
  56.                 cell=row.createCell(7);
  57.                 cell.setCellValue(activity.getCreateTime());
  58.                 cell=row.createCell(8);
  59.                 cell.setCellValue(activity.getCreateBy());
  60.                 cell=row.createCell(9);
  61.                 cell.setCellValue(activity.getEditTime());
  62.                 cell=row.createCell(10);
  63.                 cell.setCellValue(activity.getEditBy());
  64.             }
  65.         }
  66.         //根据wb对象生成excel文件
  67.        /* OutputStream os=new FileOutputStream("D:\\course\\18-CRM\\阶段资料\\serverDir\\activityList.xls");
  68.         wb.write(os);*/
  69.         //关闭资源
  70.         /*os.close();
  71.         wb.close();*/
  73.         //把生成的excel文件下载到客户端
  74.         response.setContentType("application/octet-stream;charset=UTF-8");
  75.         response.addHeader("Content-Disposition","attachment;filename=activityList.xls");
  76.         OutputStream out=response.getOutputStream();
  77.         /*InputStream is=new FileInputStream("D:\\course\\18-CRM\\阶段资料\\serverDir\\activityList.xls");
  78.         byte[] buff=new byte[256];
  79.         int len=0;
  80.         while((len=is.read(buff))!=-1){
  81.             out.write(buff,0,len);
  82.         }
  83.         is.close();*/
  85.         wb.write(out);
  87.         wb.close();
  88.         out.flush();
  89.     }

4.前端页面

image.png

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3. <%
  4. String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
  5. %>
  6. <html>
  7. <head>
  8.     <base href="<%=basePath%>">
  9. <meta charset="UTF-8">
  11. <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
  12. <link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
  13. <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
  15. <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
  16. <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
  17. <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
  18. <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
  19. <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
  20. <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
  21. <script type="text/javascript">
  23.     $(function(){
  24.         //给"创建"按钮添加单击事件
  25.         $("#createActivityBtn").click(function () {
  26.             //初始化工作
  27.             //重置表单
  28.             $("#createActivityForm").get(0).reset();
  30.             //弹出创建市场活动的模态窗口
  31.             $("#createActivityModal").modal("show");
  32.         });
  34.         //给"保存"按钮添加单击事件
  35.         $("#saveCreateActivityBtn").click(function () {
  36.             //收集参数
  37.             var owner=$("#create-marketActivityOwner").val();
  38.             var name=$.trim($("#create-marketActivityName").val());
  39.             var startDate=$("#create-startDate").val();
  40.             var endDate=$("#create-endDate").val();
  41.             var cost=$.trim($("#create-cost").val());
  42.             var description=$.trim($("#create-description").val());
  43.             //表单验证
  44.             if(owner==""){
  45.                 alert("所有者不能为空");
  46.                 return;
  47.             }
  48.             if(name==""){
  49.                 alert("名称不能为空");
  50.                 return;
  51.             }
  52.             if(startDate!=""&&endDate!=""){
  53.                 //使用字符串的大小代替日期的大小
  54.                 if(endDate<startDate){
  55.                     alert("结束日期不能比开始日期小");
  56.                     return;
  57.                 }
  58.             }
  59.             /*
  60.               正则表达式：
  61.                  1，语言，语法：定义字符串的匹配模式，可以用来判断指定的具体字符串是否符合匹配模式。
  62.                  2,语法通则：
  63.                    1)//:在js中定义一个正则表达式.  var regExp=/...../;
  64.                    2)^：匹配字符串的开头位置
  65.                      $: 匹配字符串的结尾
  66.                    3)[]:匹配指定字符集中的一位字符。 var regExp=/^[abc]$/;
  67.                                                 var regExp=/^[a-z0-9]$/;
  68.                    4){}:匹配次数.var regExp=/^[abc]{5}$/;
  69.                         {m}:匹配m此
  70.                         {m,n}：匹配m次到n次
  71.                         {m,}：匹配m次或者更多次
  72.                    5)特殊符号：
  73.                      \d:匹配一位数字，相当于[0-9]
  74.                      \D:匹配一位非数字
  75.                      \w：匹配所有字符，包括字母、数字、下划线。
  76.                      \W:匹配非字符，除了字母、数字、下划线之外的字符。
  78.                      *:匹配0次或者多次，相当于{0,}
  79.                      +:匹配1次或者多次，相当于{1,}
  80.                      ?:匹配0次或者1次，相当于{0,1}
  81.              */
  82.             var regExp=/^(([1-9]\d*)|0)$/;
  83.             if(!regExp.test(cost)){
  84.                 alert("成本只能为非负整数");
  85.                 return;
  86.             }
  87.             //发送请求
  88.             $.ajax({
  89.                 url:'workbench/activity/saveCreateActivity.do',
  90.                 data:{
  91.                     owner:owner,
  92.                     name:name,
  93.                     startDate:startDate,
  94.                     endDate:endDate,
  95.                     cost:cost,
  96.                     description:description
  97.                 },
  98.                 type:'post',
  99.                 dataType:'json',
  100.                 success:function (data) {
  101.                     if(data.code=="1"){
  102.                         //关闭模态窗口
  103.                         $("#createActivityModal").modal("hide");
  104.                         //刷新市场活动列，显示第一页数据，保持每页显示条数不变
  105.                         queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
  106.                     }else{
  107.                         //提示信息
  108.                         alert(data.message);
  109.                         //模态窗口不关闭
  110.                         $("#createActivityModal").modal("show");//可以不写。
  111.                     }
  112.                 }
  113.             });
  114.         });
  116.         //当容器加载完成之后，对容器调用工具函数
  117.         //$("input[name='mydate']").datetimepicker({
  118.         $(".mydate").datetimepicker({
  119.             language:'zh-CN', //语言
  120.             format:'yyyy-mm-dd',//日期的格式
  121.             minView:'month', //可以选择的最小视图
  122.             initialDate:new Date(),//初始化显示的日期
  123.             autoclose:true,//设置选择完日期或者时间之后，日否自动关闭日历
  124.             todayBtn:true,//设置是否显示"今天"按钮,默认是false
  125.             clearBtn:true//设置是否显示"清空"按钮，默认是false
  126.         });
  128.         //当市场活动主页面加载完成，查询所有数据的第一页以及所有数据的总条数,默认每页显示10条
  129.         queryActivityByConditionForPage(1,10);
  131.         //给"查询"按钮添加单击事件
  132.         $("#queryActivityBtn").click(function () {
  133.             //查询所有符合条件数据的第一页以及所有符合条件数据的总条数;
  134.             queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
  135.         });
  137.         //给"全选"按钮添加单击事件
  138.         $("#chckAll").click(function () {
  139.             //如果"全选"按钮是选中状态，则列表中所有checkbox都选中
  140.             /*if(this.checked==true){
  141.                 $("#tBody input[type='checkbox']").prop("checked",true);
  142.             }else{
  143.                 $("#tBody input[type='checkbox']").prop("checked",false);
  144.             }*/
  146.             $("#tBody input[type='checkbox']").prop("checked",this.checked);
  147.         });
  149.         /*$("#tBody input[type='checkbox']").click(function () {
  150.             //如果列表中的所有checkbox都选中，则"全选"按钮也选中
  151.             if($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
  152.                 $("#chckAll").prop("checked",true);
  153.             }else{//如果列表中的所有checkbox至少有一个没选中，则"全选"按钮也取消
  154.                 $("#chckAll").prop("checked",false);
  155.             }
  156.         });*/
  157.         $("#tBody").on("click","input[type='checkbox']",function () {
  158.             //如果列表中的所有checkbox都选中，则"全选"按钮也选中
  159.             if($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
  160.                 $("#chckAll").prop("checked",true);
  161.             }else{//如果列表中的所有checkbox至少有一个没选中，则"全选"按钮也取消
  162.                 $("#chckAll").prop("checked",false);
  163.             }
  164.         });
  166.         //给"删除"按钮添加单击事件
  167.         $("#deleteActivityBtn").click(function () {
  168.             //收集参数
  169.             //获取列表中所有被选中的checkbox
  170.             var chekkedIds=$("#tBody input[type='checkbox']:checked");
  171.             if(chekkedIds.size()==0){
  172.                 alert("请选择要删除的市场活动");
  173.                 return;
  174.             }
  176.             if(window.confirm("确定删除吗？")){
  177.                 var ids="";
  178.                 $.each(chekkedIds,function () {//id=xxxx&id=xxx&.....&id=xxx&
  179.                     ids+="id="+this.value+"&";
  180.                 });
  181.                 ids=ids.substr(0,ids.length-1);//id=xxxx&id=xxx&.....&id=xxx
  183.                 //发送请求
  184.                 $.ajax({
  185.                     url:'workbench/activity/deleteActivityIds.do',
  186.                     data:ids,
  187.                     type:'post',
  188.                     dataType:'json',
  189.                     success:function (data) {
  190.                         if(data.code=="1"){
  191.                             //刷新市场活动列表,显示第一页数据,保持每页显示条数不变
  192.                             queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
  193.                         }else{
  194.                             //提示信息
  195.                             alert(data.message);
  196.                         }
  197.                     }
  198.                 });
  199.             }
  200.         });
  202.         //给"修改"按钮添加单击事件
  203.         $("#editActivityBtn").click(function () {
  204.             //收集参数
  205.             //获取列表中被选中的checkbox
  206.             var chkedIds=$("#tBody input[type='checkbox']:checked");
  207.             if(chkedIds.size()==0){
  208.                 alert("请选择要修改的市场活动");
  209.                 return;
  210.             }
  211.             if(chkedIds.size()>1){
  212.                 alert("每次只能修改一条市场活动");
  213.                 return;
  214.             }
  215.             //var id=chkedIds.val();
  216.             //var id=chkedIds.get(0).value;
  217.             var id=chkedIds[0].value;
  218.             //发送请求
  219.             $.ajax({
  220.                 url:'workbench/activity/queryActivityById.do',
  221.                 data:{
  222.                     id:id
  223.                 },
  224.                 type:'post',
  225.                 dataType:'json',
  226.                 success:function (data) {
  227.                     //把市场活动的信息显示在修改的模态窗口上
  228.                     $("#edit-id").val(data.id);
  229.                     $("#edit-marketActivityOwner").val(data.owner);
  230.                     $("#edit-marketActivityName").val(data.name);
  231.                     $("#edit-startTime").val(data.startDate);
  232.                     $("#edit-endTime").val(data.endDate);
  233.                     $("#edit-cost").val(data.cost);
  234.                     $("#edit-description").val(data.description);
  235.                     //弹出模态窗口
  236.                     $("#editActivityModal").modal("show");
  237.                 }
  238.             });
  239.         });
  241.         //给"更新"按钮添加单击事件
  242.         $("#saveEditActivityBtn").click(function () {
  243.             //收集参数
  244.             var id=$("#edit-id").val();
  245.             var owner=$("#edit-marketActivityOwner").val();
  246.             var name=$.trim($("#edit-marketActivityName").val());
  247.             var startDate=$("#edit-startTime").val();
  248.             var endDate=$("#edit-endTime").val();
  249.             var cost=$.trim($("#edit-cost").val());
  250.             var description=$.trim($("#edit-description").val());
  251.             //表单验证(作业)
  253.             //发送请求
  254.             $.ajax({
  255.                 url:'workbench/activity/saveEditActivity.do',
  256.                 data:{
  257.                     id:id,
  258.                     owner:owner,
  259.                     name:name,
  260.                     startDate:startDate,
  261.                     endDate:endDate,
  262.                     cost:cost,
  263.                     description:description
  264.                 },
  265.                 type:'post',
  266.                 dataType:'json',
  267.                 success:function (data) {
  268.                     if(data.code=="1"){
  269.                         //关闭模态窗口
  270.                         $("#editActivityModal").modal("hide");
  271.                         //刷新市场活动列表,保持页号和每页显示条数都不变
  272.                         queryActivityByConditionForPage($("#demo_pag1").bs_pagination('getOption', 'currentPage'),$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
  273.                     }else{
  274.                         //提示信息
  275.                         alert(data.message);
  276.                         //模态窗口不关闭
  277.                         $("#editActivityModal").modal("show");
  278.                     }
  279.                 }
  280.             });
  281.         });
  283.         //给"批量导出"按钮添加单击事件
  284.         $("#exportActivityAllBtn").click(function () {
  285.             //发送同步请求
  286.             window.location.href="workbench/activity/exportAllActivitys.do";
  287.         });
  289.         //给"导入"按钮添加单击事件
  290.         $("#importActivityBtn").click(function () {
  291.             //收集参数
  292.             var activityFileName=$("#activityFile").val();
  293.             var suffix=activityFileName.substr(activityFileName.lastIndexOf(".")+1).toLocaleLowerCase();//xls,XLS,Xls,xLs,....
  294.             if(suffix!="xls"){
  295.                 alert("只支持xls文件");
  296.                 return;
  297.             }
  298.             var activityFile=$("#activityFile")[0].files[0];
  299.             if(activityFile.size>5*1024*1024){
  300.                 alert("文件大小不超过5MB");
  301.                 return;
  302.             }
  304.             //FormData是ajax提供的接口,可以模拟键值对向后台提交参数;
  305.             //FormData最大的优势是不但能提交文本数据，还能提交二进制数据
  306.             var formData=new FormData();
  307.             formData.append("activityFile",activityFile);
  308.             formData.append("userName","张三");
  310.             //发送请求
  311.             $.ajax({
  312.                 url:'workbench/activity/importActivity.do',
  313.                 data:formData,
  314.                 processData:false,//设置ajax向后台提交参数之前，是否把参数统一转换成字符串：true--是,false--不是,默认是true
  315.                 contentType:false,//设置ajax向后台提交参数之前，是否把所有的参数统一按urlencoded编码：true--是,false--不是，默认是true
  316.                 type:'post',
  317.                 dataType:'json',
  318.                 success:function (data) {
  319.                     if(data.code=="1"){
  320.                         //提示成功导入记录条数
  321.                         alert("成功导入"+data.retData+"条记录");
  322.                         //关闭模态窗口
  323.                         $("#importActivityModal").modal("hide");
  324.                         //刷新市场活动列表,显示第一页数据,保持每页显示条数不变
  325.                         queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
  326.                     }else{
  327.                         //提示信息
  328.                         alert(data.message);
  329.                         //模态窗口不关闭
  330.                         $("#importActivityModal").modal("show");
  331.                     }
  332.                 }
  333.             });
  334.         });
  335.     });
  337.     function queryActivityByConditionForPage(pageNo,pageSize) {
  338.         //收集参数
  339.         var name=$("#query-name").val();
  340.         var owner=$("#query-owner").val();
  341.         var startDate=$("#query-startDate").val();
  342.         var endDate=$("#query-endDate").val();
  343.         //var pageNo=1;
  344.         //var pageSize=10;
  345.         //发送请求
  346.         $.ajax({
  347.             url:'workbench/activity/queryActivityByConditionForPage.do',
  348.             data:{
  349.                 name:name,
  350.                 owner:owner,
  351.                 startDate:startDate,
  352.                 endDate:endDate,
  353.                 pageNo:pageNo,
  354.                 pageSize:pageSize
  355.             },
  356.             type:'post',
  357.             dataType:'json',
  358.             success:function (data) {
  359.                 //显示总条数
  360.                 //$("#totalRowsB").text(data.totalRows);
  361.                 //显示市场活动的列表
  362.                 //遍历activityList，拼接所有行数据
  363.                 var htmlStr="";
  364.                 $.each(data.activityList,function (index,obj) {
  365.                     htmlStr+="<tr class=\"active\">";
  366.                     htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>";
  367.                     htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">"+obj.name+"</a></td>";
  368.                     htmlStr+="<td>"+obj.owner+"</td>";
  369.                     htmlStr+="<td>"+obj.startDate+"</td>";
  370.                     htmlStr+="<td>"+obj.endDate+"</td>";
  371.                     htmlStr+="</tr>";
  372.                 });
  373.                 $("#tBody").html(htmlStr);
  375.                 //取消"全选"按钮
  376.                 $("#chckAll").prop("checked",false);
  378.                 //计算总页数
  379.                 var totalPages=1;
  380.                 if(data.totalRows%pageSize==0){
  381.                     totalPages=data.totalRows/pageSize;
  382.                 }else{
  383.                     totalPages=parseInt(data.totalRows/pageSize)+1;
  384.                 }
  386.                 //对容器调用bs_pagination工具函数，显示翻页信息
  387.                 $("#demo_pag1").bs_pagination({
  388.                     currentPage:pageNo,//当前页号,相当于pageNo
  390.                     rowsPerPage:pageSize,//每页显示条数,相当于pageSize
  391.                     totalRows:data.totalRows,//总条数
  392.                     totalPages: totalPages,  //总页数,必填参数.
  394.                     visiblePageLinks:5,//最多可以显示的卡片数
  396.                     showGoToPage:true,//是否显示"跳转到"部分,默认true--显示
  397.                     showRowsPerPage:true,//是否显示"每页显示条数"部分。默认true--显示
  398.                     showRowsInfo:true,//是否显示记录的信息，默认true--显示
  400.                     //用户每次切换页号，都自动触发本函数;
  401.                     //每次返回切换页号之后的pageNo和pageSize
  402.                     onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked
  403.                         //js代码
  404.                         //alert(pageObj.currentPage);
  405.                         //alert(pageObj.rowsPerPage);
  406.                         queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
  407.                     }
  408.                 });
  409.             }
  410.         });
  411.     }
  412. </script>
  413. </head>
  414. <body>
  416.     <!-- 创建市场活动的模态窗口 -->
  417.     <div class="modal fade" id="createActivityModal" role="dialog">
  418.         <div class="modal-dialog" role="document" style="width: 85%;">
  419.             <div class="modal-content">
  420.                 <div class="modal-header">
  421.                     <button type="button" class="close" data-dismiss="modal">
  422.                         <span aria-hidden="true">×</span>
  423.                     </button>
  424.                     <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
  425.                 </div>
  426.                 <div class="modal-body">
  428.                     <form id="createActivityForm" class="form-horizontal" role="form">
  430.                         <div class="form-group">
  431.                             <label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
  432.                             <div class="col-sm-10" style="width: 300px;">
  433.                                 <select class="form-control" id="create-marketActivityOwner">
  434.                                   <c:forEach items="${userList}" var="u">
  435.                                        <option value="${u.id}">${u.name}</option>
  436.                                   </c:forEach>
  437.                                 </select>
  438.                             </div>
  439.                             <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
  440.                             <div class="col-sm-10" style="width: 300px;">
  441.                                 <input type="text" class="form-control" id="create-marketActivityName">
  442.                             </div>
  443.                         </div>
  445.                         <div class="form-group">
  446.                             <label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
  447.                             <div class="col-sm-10" style="width: 300px;">
  448.                                 <input type="text" class="form-control mydate" name="mydate" id="create-startDate" readonly>
  449.                             </div>
  450.                             <label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
  451.                             <div class="col-sm-10" style="width: 300px;">
  452.                                 <input type="text" class="form-control mydate" name="mydate" id="create-endDate" readonly>
  453.                             </div>
  454.                         </div>
  455.                         <div class="form-group">
  457.                             <label for="create-cost" class="col-sm-2 control-label">成本</label>
  458.                             <div class="col-sm-10" style="width: 300px;">
  459.                                 <input type="text" class="form-control" id="create-cost">
  460.                             </div>
  461.                         </div>
  462.                         <div class="form-group">
  463.                             <label for="create-description" class="col-sm-2 control-label">描述</label>
  464.                             <div class="col-sm-10" style="width: 81%;">
  465.                                 <textarea class="form-control" rows="3" id="create-description"></textarea>
  466.                             </div>
  467.                         </div>
  469.                     </form>
  471.                 </div>
  472.                 <div class="modal-footer">
  473.                     <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  474.                     <button type="button" class="btn btn-primary" id="saveCreateActivityBtn">保存</button>
  475.                 </div>
  476.             </div>
  477.         </div>
  478.     </div>
  480.     <!-- 修改市场活动的模态窗口 -->
  481.     <div class="modal fade" id="editActivityModal" role="dialog">
  482.         <div class="modal-dialog" role="document" style="width: 85%;">
  483.             <div class="modal-content">
  484.                 <div class="modal-header">
  485.                     <button type="button" class="close" data-dismiss="modal">
  486.                         <span aria-hidden="true">×</span>
  487.                     </button>
  488.                     <h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
  489.                 </div>
  490.                 <div class="modal-body">
  492.                     <form class="form-horizontal" role="form">
  493.                         <input type="hidden" id="edit-id">
  494.                         <div class="form-group">
  495.                             <label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
  496.                             <div class="col-sm-10" style="width: 300px;">
  497.                                 <select class="form-control" id="edit-marketActivityOwner">
  498.                                     <c:forEach items="${userList}" var="u">
  499.                                         <option value="${u.id}">${u.name}</option>
  500.                                     </c:forEach>
  501.                                 </select>
  502.                             </div>
  503.                             <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
  504.                             <div class="col-sm-10" style="width: 300px;">
  505.                                 <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
  506.                             </div>
  507.                         </div>
  509.                         <div class="form-group">
  510.                             <label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
  511.                             <div class="col-sm-10" style="width: 300px;">
  512.                                 <input type="text" class="form-control" id="edit-startTime" value="2020-10-10">
  513.                             </div>
  514.                             <label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
  515.                             <div class="col-sm-10" style="width: 300px;">
  516.                                 <input type="text" class="form-control" id="edit-endTime" value="2020-10-20">
  517.                             </div>
  518.                         </div>
  520.                         <div class="form-group">
  521.                             <label for="edit-cost" class="col-sm-2 control-label">成本</label>
  522.                             <div class="col-sm-10" style="width: 300px;">
  523.                                 <input type="text" class="form-control" id="edit-cost" value="5,000">
  524.                             </div>
  525.                         </div>
  527.                         <div class="form-group">
  528.                             <label for="edit-description" class="col-sm-2 control-label">描述</label>
  529.                             <div class="col-sm-10" style="width: 81%;">
  530.                                 <textarea class="form-control" rows="3" id="edit-description">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
  531.                             </div>
  532.                         </div>
  534.                     </form>
  536.                 </div>
  537.                 <div class="modal-footer">
  538.                     <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  539.                     <button type="button" class="btn btn-primary" id="saveEditActivityBtn">更新</button>
  540.                 </div>
  541.             </div>
  542.         </div>
  543.     </div>
  545.     <!-- 导入市场活动的模态窗口 -->
  546.     <div class="modal fade" id="importActivityModal" role="dialog">
  547.         <div class="modal-dialog" role="document" style="width: 85%;">
  548.             <div class="modal-content">
  549.                 <div class="modal-header">
  550.                     <button type="button" class="close" data-dismiss="modal">
  551.                         <span aria-hidden="true">×</span>
  552.                     </button>
  553.                     <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
  554.                 </div>
  555.                 <div class="modal-body" style="height: 350px;">
  556.                     <div style="position: relative;top: 20px; left: 50px;">
  557.                         请选择要上传的文件：<small style="color: gray;">[仅支持.xls]</small>
  558.                     </div>
  559.                     <div style="position: relative;top: 40px; left: 50px;">
  560.                         <input type="file" id="activityFile">
  561.                     </div>
  562.                     <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
  563.                         <h3>重要提示</h3>
  564.                         <ul>
  565.                             <li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li>
  566.                             <li>给定文件的第一行将视为字段名。</li>
  567.                             <li>请确认您的文件大小不超过5MB。</li>
  568.                             <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
  569.                             <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
  570.                             <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
  571.                             <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
  572.                         </ul>
  573.                     </div>
  574.                 </div>
  575.                 <div class="modal-footer">
  576.                     <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  577.                     <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
  578.                 </div>
  579.             </div>
  580.         </div>
  581.     </div>
  584.     <div>
  585.         <div style="position: relative; left: 10px; top: -10px;">
  586.             <div class="page-header">
  587.                 <h3>市场活动列表</h3>
  588.             </div>
  589.         </div>
  590.     </div>
  591.     <div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
  592.         <div style="width: 100%; position: absolute;top: 5px; left: 10px;">
  594.             <div class="btn-toolbar" role="toolbar" style="height: 80px;">
  595.                 <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
  597.                   <div class="form-group">
  598.                     <div class="input-group">
  599.                       <div class="input-group-addon">名称</div>
  600.                       <input class="form-control" type="text" id="query-name">
  601.                     </div>
  602.                   </div>
  604.                   <div class="form-group">
  605.                     <div class="input-group">
  606.                       <div class="input-group-addon">所有者</div>
  607.                       <input class="form-control" type="text" id="query-owner">
  608.                     </div>
  609.                   </div>
  612.                   <div class="form-group">
  613.                     <div class="input-group">
  614.                       <div class="input-group-addon">开始日期</div>
  615.                       <input class="form-control" type="text" id="query-startDate" />
  616.                     </div>
  617.                   </div>
  618.                   <div class="form-group">
  619.                     <div class="input-group">
  620.                       <div class="input-group-addon">结束日期</div>
  621.                       <input class="form-control" type="text" id="query-endDate">
  622.                     </div>
  623.                   </div>
  625.                   <button type="button" class="btn btn-default" id="queryActivityBtn">查询</button>
  627.                 </form>
  628.             </div>
  629.             <div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
  630.                 <div class="btn-group" style="position: relative; top: 18%;">
  631.                   <button type="button" class="btn btn-primary" id="createActivityBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
  632.                   <button type="button" class="btn btn-default" id="editActivityBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
  633.                   <button type="button" class="btn btn-danger" id="deleteActivityBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
  634.                 </div>
  635.                 <div class="btn-group" style="position: relative; top: 18%;">
  636.                     <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal" ><span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）</button>
  637.                     <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）</button>
  638.                     <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）</button>
  639.                 </div>
  640.             </div>
  641.             <div style="position: relative;top: 10px;">
  642.                 <table class="table table-hover">
  643.                     <thead>
  644.                         <tr style="color: #B3B3B3;">
  645.                             <td><input type="checkbox" id="chckAll"/></td>
  646.                             <td>名称</td>
  647.                             <td>所有者</td>
  648.                             <td>开始日期</td>
  649.                             <td>结束日期</td>
  650.                         </tr>
  651.                     </thead>
  652.                     <tbody id="tBody">
  653.                         <%--<tr class="active">
  654.                             <td><input type="checkbox" /></td>
  655.                             <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</a></td>
  656.                             <td>zhangsan</td>
  657.                             <td>2020-10-10</td>
  658.                             <td>2020-10-20</td>
  659.                         </tr>
  660.                         <tr class="active">
  661.                             <td><input type="checkbox" /></td>
  662.                             <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</a></td>
  663.                             <td>zhangsan</td>
  664.                             <td>2020-10-10</td>
  665.                             <td>2020-10-20</td>
  666.                         </tr>--%>
  667.                     </tbody>
  668.                 </table>
  669.                 <div id="demo_pag1"></div>
  670.             </div>
  672.             <%--<div style="height: 50px; position: relative;top: 30px;">
  673.                 <div>
  674.                     <button type="button" class="btn btn-default" style="cursor: default;">共<b id="totalRowsB">50</b>条记录</button>
  675.                 </div>
  676.                 <div class="btn-group" style="position: relative;top: -34px; left: 110px;">
  677.                     <button type="button" class="btn btn-default" style="cursor: default;">显示</button>
  678.                     <div class="btn-group">
  679.                         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  680.                             10
  681.                             <span class="caret"></span>
  682.                         </button>
  683.                         <ul class="dropdown-menu" role="menu">
  684.                             <li><a href="#">20</a></li>
  685.                             <li><a href="#">30</a></li>
  686.                         </ul>
  687.                     </div>
  688.                     <button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
  689.                 </div>
  690.                 <div style="position: relative;top: -88px; left: 285px;">
  691.                     <nav>
  692.                         <ul class="pagination">
  693.                             <li class="disabled"><a href="#">首页</a></li>
  694.                             <li class="disabled"><a href="#">上一页</a></li>
  695.                             <li class="active"><a href="#">1</a></li>
  696.                             <li><a href="#">2</a></li>
  697.                             <li><a href="#">3</a></li>
  698.                             <li><a href="#">4</a></li>
  699.                             <li><a href="#">5</a></li>
  700.                             <li><a href="#">下一页</a></li>
  701.                             <li class="disabled"><a href="#">末页</a></li>
  702.                         </ul>
  703.                     </nav>
  704.                 </div>
  705.             </div>--%>
  707.         </div>
  709.     </div>
  710. </body>
  711. </html>

image.png

二、导入市场活动

1.文件上传演示

1,导入市场活动：

1)把用户计算机上的excel文件上传到服务器(文件上传)
2)使用java解析excel文件，获取excel文件中的数据
3)把解析出来的数据添加数据库中
4)返回响应信息

技术准备：
1)文件上传：
fileuploadtest.jsp
ActivityController
|->fileUpload()
2)使用java解析excel文件：iText,apache-poi

关于办公文档插件使用的基本思想：把办公文档的所有元素封装成普通的Java类，
程序员通过操作这些类达到操作办公文档目的。
文件————-HSSFWorkbook
页—————-HSSFSheet
行—————-HSSFRow
列—————-HSSFCell

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <%
  3.     String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
  4. %>
  5. <html>
  6. <head>
  7.     <base href="<%=basePath%>">
  8.     <title>演示文件上传</title>
  9. </head>
  10. <body>
  11. <!--
  12.     文件上传的表单三个条件：
  13.     1.表单组件标签必须用：<input type="file">
  14.       <input type="text|password|radio|checkbox|hidden|button|submit|reset|file">
  15.                       <select>,<textarea>等
  16.     2.请求方式只能用：post
  17.       get：参数通过请求头提交到后台，参数放在URL后边；只能向后台提交文本数据；对参数长度有限制；数据不安全；效率高
  18.       post：参数通过请求体提交到后台；既能能提交文件数据，又能够提交二进制数据；理论上对参数长度没有限制；相对安全；效率相对较低
  19.     3.表单的编码格式只能用：multipart/form-data
  20.       根据HTTP协议的规定，浏览器每次向后台提交参数，都会对参数进行统一编码；默认采用的编码格式是urlencoded，这种编码格式只能对文本数据进行编码；
  21.       浏览器每次向后台提交参数，都会首先把所有的参数转换成字符串，然后对这些数据统一进行urlencoded编码；
  22.       文件上传的表单编码格式只能用multipart/form-data：enctype="multipart/form-data"
  23. -->
  24. <form action="workbench/activity/fileUpload.do" method="post" enctype="multipart/form-data">
  25.     <input type="file" name="myFile"><br>
  26.     <input type="text" name="userName"><br>
  27.     <input type="submit" value="提交">
  28. </form>
  29. </body>
  30. </html>
  1. /**
  2. * 配置springmvc的文件上传解析器
  3. *
  4. */
  5. @RequestMapping("/workbench/activity/fileUpload.do")
  6.     public @ResponseBody Object fileUpload(String userName, MultipartFile myFile) throws Exception{
  7.     //把文本数据打印到控制台
  8.     System.out.println("userName="+userName);
  9.     //把文件在服务指定的目录中生成一个同样的文件
  10.     String originalFilename=myFile.getOriginalFilename();
  11.     File file=new File("D:\\course\\18-CRM\\阶段资料\\serverDir\\",originalFilename);//路径必须手动创建好，文件如果不存在，会自动创建
  12.     myFile.transferTo(file);
  14.     //返回响应信息
  15.     ReturnObject returnObject=new ReturnObject();
  16.     returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
  17.     returnObject.setMessage("上传成功");
  18.     return returnObject;
  19. }
  2.     <!-- 配置文件上传解析器 id:必须是multipartResolver-->
  3.     <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  4.         <property name="maxUploadSize" value="#{1024*1024*5}"/>
  5.         <property name="defaultEncoding" value="utf-8"/>
  6.     </bean>