CRM项目开发【实操篇----市场活动模块】
前言：本项目来源于B站动力节点视频，CRM项目开发
使用的后端技术栈主要是SSM框架，不涉及boot，老师讲的非常细致，推荐
关于流程图部分，由于是老师创作的，就不在这里贴出了，可以B站搜索动力节点的CRM项目，有下载链接，流程图的分析很到位，非常适合用于巩固SSM框架和熟悉业务流程。
01-项目配置文件
-
最重要的配置文件——
web.xml是
Web项目的核心配置文件，在服务器启动的时候加载，在该文件中导入SSM的配置文件，可以认为是所有其他配置文件的父加载器。 -
Spring配置文件——applicationContext.xml扫描
service包下面的注解，导入MyBatis的配置文件 -
SpringMVC配置文件——applicationContext-mvc.xml扫描
controller包下面的注解，配置视图解析器，DispatcherServlet分发器 -
MyBatis配置文件——applicationContext-datasource.xml扫描
mapper包下面的注解，配置对应的数据源，与数据库连接
web.xml配置applicationContext-mvc.xml和applicationContext.xml``applicationContext.xml
配置applicationContext-datasource.xml`
-
pom.xml配置文件——指定maven想配置的文件。maven默认情况下只会配置src/main/java下的文件，通过配置maven可以指定目录下的配置文件
02-部署过程及目录结构
-
将静态网页放在
webapp下面 -
src\main\java和src\main\resources两个文件夹中的内容在部署时会被idea生成为classes文件放到webapp\WEB-INF下面 -
pom.xml的配置文件会被编译为lib文件夹放到webapp\WEB-INF下面 -
文件目录树
webapps
|–crm（本项目）
|–WEB-INF
|–web.xml（web基础配置文件）
|–classes（项目文件）
|–lib（经由pom.xml编译得到的一些依赖的jar包）
|–pages（同样的也是HTML等页面资源，但是外界不可以直接访问）
|–HTML页面等资源（该目录下的页面外界可以直接访问，存在安全问题，通常存放一些css和img）
|–stucrm（其他的项目）
-
webapps下的内容除了WEB-INF下的内容都是可以直接访问的，因此将一些图片和格式文件直接存放在这个目录下；webapps/WEB-INF下的内容都是要经过controller处理的，所以要经过一定的保护。
03-首页功能分析与设计
开发基本过程：
分析需求
分析与设计
编码实现
测试
-
分析需求
-
分析与设计
controller的创建原则：如果两个页面不在同一个目录，新创建一个新的
Controller一个独立的资源访问目录就代表一个新的
Controller -
编码实现
controller中的方法为什么是public：如果不是最高级别，分发器无法访问。@RequestMapping("/")中的路径在理论上应该写全，但是为了简便统一规定必须省略。实现的时候使用请求转发？因为
WEB-INF中的内容对用户不可见。idea对HTML和JSP的默认网页编码格式是不同的，HTML（ISO8859-1）、JSP（UTF-8），在HTML中要显式地指明。
return的字段是字符串，交给视图解析器处理，视图解析器中已经配置了
/，不需要再带/。<!--将HTML直接转换为JSP文件，要注意将前面的编码格式替换掉--> <!DOCTYPE html> <!--被替换--> <%@ page contentType="text/html;charset=UTF-8" language="java" %>@RequestMapping("/settings/qx/user/toLogin.do") // 路径有/ ,代表当前的项目 public String toLogin(){ // 转发 return "settings/qx/user/login"; // 路径没有/ ,因为视图解析器中有了 } -
测试
-
基本流程图
客户端发起请求，访问默认路径，默认路径要重定向到登陆页面。
先写底层，再写上层，先完成被调用的对象。
04-登录功能分析与设计
-
分析需求
同步请求与异步请求
同步请求：整个页面都刷新
异步请求：局部页面刷新，也可以整个页面都刷新
所以看情况决定是使用同步请求还是异步请求。
局部刷新只能用异步，整个页面的刷新优先用同步。
-
分析与设计
service类和Mappar的创建原则：与上述的
Controller层不同，这两个类的创建原则是根据数据库中的表，如果查的表不同，那么使用的就不一样。前台
Controller看资源访问路径后台
service和Mappar看数据库中的表 -
编码实现
流程：
-
myBatis逆向工程
导入pom.xml的插件
添加配置文件
执行逆向工程
-
根据已经生成的Mapper编写Service层
-
再反写Controller层
想把控制层代码中处理好的数据，发送给页面上显示给用户看，一定考虑作用域。
作用域：
pageContext：一个页面的不同标签之间传递数据，从一个标签中传数据到另一个标签中
request：一个请求中有效（一次请求）
session：一个会话中有效（同一个浏览器窗口中的不同请求之间传递数据）
application：所有的用户都共享的数据，并且频繁使用的
需要注意的是，逆向工程在执行时不能执行多次，针对同一个表仅仅执行一次，逆向工程默认的是覆盖方法，所以之前写的内容会被覆盖掉。
BUG：
The last packet successfully received from the server was x milliseconds ago问题描述：获取到的数据库连接超时
产生原因： 程序启动时，在跟数据库首次交互时，获得了相应的数据库连接资源，从而进行正常的数据库读写操作。但是在下次进行数据库读写时（我的定时任务本身设置的时间间隔是24小时），应用程序认为这个连接是可以正常使用的（程序执行过一次之后没有退出，这个连接从来并没有被释放掉），但实际上，这个连接已经坏掉了，因为Mysql本身已经把这个连接标记为timeout了。于是，应用程序“傻乎乎”的在这个已经坏掉的数据通道上发起对数据库的读写请求，但是Mysql已经对这些请求不买账了。
解决方案：在配置数据库连接的
url后面加上?useUnicode=true&characterEncoding=UTF-8&useSSL=false&autoReconnect=true&failOverReadOnly=false -
-
测试
-
基本流程图
05-记录密码功能实现和安全退出
-
记录密码的实现逻辑
第一次决定记录密码，向浏览器写Cookie；决定不记录密码，将本地Cookie删除
第二次后再访问时，判断有没有Cookie，有的话将Cookie一起传到服务器。
-
安全退出
06-登陆验证
- 路径问题
Controller的方法中，重定向不需要写全路径，这里的重定向借助SpringMVC框架，经过翻译后变成了response.sendRedirect("/crm/")
@RequestMapping("/settings/qx/user/logout.do")
public String logout(HttpServletResponse response, HttpSession session){
// 转发，跳转到登陆首页
Cookie cookie = new Cookie("loginAct", "1");
cookie.setMaxAge(0);
response.addCookie(cookie);
Cookie cookie1 = new Cookie("loginPwd", "1");
cookie1.setMaxAge(0);
response.addCookie(cookie1);
// 销毁session对象
session.invalidate();
return "redirect:/";
}
Interceptor（拦截器）中，重定向路径要写全，这里跟框架没关系了，要自己实现全部内容
public boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o) throws Exception {
HttpSession session = httpServletRequest.getSession();
User user = (User) session.getAttribute(Constant.SESSION_USER);
if (user == null){
httpServletResponse.sendRedirect(httpServletRequest.getContextPath()); // 自己重定向的时候要带上名字
return false;
} else {
return true; // false表示拦截，true表示放行
}
}
- 排除拦截在拦截器中优先级更高，拦截器和排除拦截同时生效的时候，一定是排除拦截优先生效并放行。
07-页面切割技术
-
早期技术：
<frameset>和<frame>进行切割<frameset cols="20%,60%,20%">：用于切割界面，按照列进行切割，左边20%，中间60%，右边20%；行切割使用rows。<frame>：显示页面，<frame src="url">使用url对内容进行填充，显示的是其他页面的内容<frameset cols="20% 60% 20%"> <frame src="null" name="f1"> <frame src="null" name="f2"> <frame src="null" name="f3"> </frameset>每一个
<frame>都是一个独立的浏览器窗口，只不过面积小一点，通过命名name属性，我们可以在其他超链接中指明在哪个浏览器中打开，是一种重量级的标签。<!--指明该超链接打开的窗口--> <a href="url" target="f3">test</a> -
较新技术：
<div>和<iframe><div>：切割页面。<div style="height:10%;width=20%">高度与宽度占据的屏幕比例<iframe>：显示页面。<div style="height:10%;width=20%"> <iframe href="url"> </div>效率高的轻量级标签。
08-市场活动模块----创建市场活动
-
模态窗口：模拟的窗口，时间发生后的弹出的小窗口，能够独立显示网页的一个小窗口。
- 旧技术实现：
window.open("url","_blank")在新窗口中弹出一个以url为内容的小窗口，难点在于两个网页之间的信息交互- 新技术实现：
本质上弹出一个
<div>，通过设置z-index的大小来实现的。初始时，
z-index初始参数是<0的，需要显示的时候，将该值变为大于0的，就实现了显示。（bootstrap实现的）使用新技术实现，模态窗口就是一个
<div>标签，所以整个模态窗口只是大窗口的一个标签，实现信息交互非常简单。-
控制模态窗口的显示与隐藏
-
方法一：通过
data-toggle="modal" data-target="id"实现，id是窗口的id，这个方法是要在标签上加的，所以无法进行一些代码的初始化<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;"> <div class="btn-group" style="position: relative; top: 18%;"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#importActivityModal"><span class="glyphicon glyphicon-plus"></span> 创建</button> </div> </div> -
方法二（常用）：通过
js函数控制，选择器选择标签，使用[标签对象].modal("show")和[标签对象].modal("hide")实现显示和隐藏。这种方法的好处就在于可以进行一些初始化。<script type="text/javascript"> $(function (){ $("#createActivityBtn").click(function (){ // 做一些初始化工作 // 弹出窗口 $("#createActivityModal").modal("show"); }); }); </script> <div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;"> <div class="btn-group" style="position: relative; top: 18%;"> <button type="button" class="btn btn-primary" id="createActivityBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button> </div> </div> -
方式三：只能关闭不能显示，通过标签的属性实现
data-dismiss=""，点击了添加该属性的标签，点击了对象就会使模态窗口关闭。
-
-
创建市场活动
为什么步骤18是个异步请求，因为这是一个局部更新的问题，将列表更新就可以了。
-
用户登录的时候，是一种查询操作，所以查出来看看是不是空，做个比较就可以。
但是当插入修改时，这是一种会变动数据库的操作，所以看看会不会产生什么异常，要考虑
Service层报异常的问题，要使用try-catch。@RequestMapping("/workbench/activity/saveCreateActivity.do") @ResponseBody //异步请求将内容返回 public Object saveCreateActivity(Activity activity, HttpSession session) { User user = (User) session.getAttribute(Constant.SESSION_USER); // 将activity进行二次封装,将一些没有填充的属性加上 activity.setId(UUIDUtils.getUUID()); activity.setCreateTime(DateUtils.formatDateTime(new Date())); activity.setCreateBy(user.getId()); ReturnObject returnObject = new ReturnObject(); try { int i = activityService.saveCreateActivity(activity); if (i > 0){ returnObject.setCode(Constant.RETURN_OBJECT_CODE_SUCCESS); } else { returnObject.setCode(Constant.RETURN_OBJECT_CODE_FAIL); returnObject.setMessage("系统忙，请稍后重试..."); } } catch (Exception e) { // 写数据会产生异常,所以要考虑异常的情况 e.printStackTrace(); returnObject.setCode(Constant.RETURN_OBJECT_CODE_FAIL); returnObject.setMessage("系统忙，请稍后重试..."); } return returnObject; } -
【前端】获取对象
// DOM方式 document.getElementById("#..") // jquery方式 $("#id") -
【前端】日期格式输入
该类东西都有现成的模板，不要浪费时间，如下是一个示例，使用的
bootstrap框架。<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() + request.getContextPath() +"/"; %> <html> <head> <base href="<%=basePath%>"> <!--引入jquery--> <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script> <!--引入框架--> <link rel="stylesheet" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css"> <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script> <!--bootstrap插件,要依赖于框架--> <link rel="stylesheet" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"> <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script> <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script> <title>演示</title> <script type="text/javascript"> $(function (){ // 当容器加载完成，对容器调用工具函数 $("#myDate").datetimepicker({ language:'zh-CN', format:'yyyy-mm-dd', minView:'month', // 可以选择的最小视图 initialDate:new Date(), autoclose:true, // 选择完是否自动关闭 todayBtn:true // 设置是否显示今天的 }); }); </script> </head> <body> <input type="text" id="myDate"> </body> </html>防止用户手动修改日期格式，可以为容器标签加上
readonly='true'<div class="form-group"> <label for="create-startDate" class="col-sm-2 control-label">开始日期</label> <div class="col-sm-10" style="width: 300px;"> <input type="text" class="form-control" id="create-startDate" readonly="true"> </div> <label for="create-endDate" class="col-sm-2 control-label">结束日期</label> <div class="col-sm-10" style="width: 300px;"> <input type="text" class="form-control" id="create-endDate" readonly="true"> </div> </div>加上该
readonly属性，用户没办法手动清空，可以加一个清空按钮，是在jsp语句中配置的。<script type="text/javascript"> $(function (){ // 当容器加载完成，对容器调用工具函数 $("#myDate").datetimepicker({ language:'zh-CN', format:'yyyy-mm-dd', minView:'month', // 可以选择的最小视图 initialDate:new Date(), autoclose:true, // 选择完是否自动关闭 todayBtn:true, // 设置是否显示今天的 clearBtn:true // 显示清空按钮 }); }); </script> -
为多个容器加上工具属性
// 写多个 <head> <script> $(function (){ // 添加日历start $("#create-startDate").datetimepicker({ language:'zh-CN', format:'yyyy-mm-dd', minView:'month', // 可以选择的最小视图 initialDate:new Date(), autoclose:true, // 选择完是否自动关闭 todayBtn:true, // 设置是否显示今天的 clearBtn:true }); // 添加日历end $("#create-endDate").datetimepicker({ language:'zh-CN', format:'yyyy-mm-dd', minView:'month', // 可以选择的最小视图 initialDate:new Date(), autoclose:true, // 选择完是否自动关闭 todayBtn:true, // 设置是否显示今天的 clearBtn:true }); }); </script> </head> // 使用类选择器 <head> <script> $(function (){ // 添加日历start $(".mydate").datetimepicker({ language:'zh-CN', format:'yyyy-mm-dd', minView:'month', // 可以选择的最小视图 initialDate:new Date(), autoclose:true, // 选择完是否自动关闭 todayBtn:true, // 设置是否显示今天的 clearBtn:true }); }); </script> </head> <div class="form-group"> <label for="create-startDate" class="col-sm-2 control-label">开始日期</label> <div class="col-sm-10" style="width: 300px;"> <input type="text" class="form-control mydate" id="create-startDate" readonly="true"> <!--上面我们能看到，加了一个mydate属性,class可以有多个值--> </div> <label for="create-endDate" class="col-sm-2 control-label">结束日期</label> <div class="col-sm-10" style="width: 300px;"> <input type="text" class="form-control mydate" id="create-endDate" readonly="true"> <!--上面我们能看到，加了一个mydate属性,class可以有多个值--> </div> </div> -
附：正则表达式语法大全：https://www.runoob.com/regexp/regexp-tutorial.html
09-市场活动模块----查询市场活动
-
查询市场活动的三个基本大需求，什么时候需要用到查询
分页显示全部结果的查询（刚进入页面的时候，需要进行一个查询）
特定条件检索结果的查询（用户使用特定的检索，进行一次查询）
具有翻页功能结果的查询（翻页功能）
-
分页显示流程图
-
分页查询SQL语句的细节【一个表可以被链接多次，而且每个表之间的连接方式要仔细考虑】
select a.id, b.name as owner, b.name, a.start_date, a.end_date, a.cost, a.description, a.create_time, c.name as create_by, a.edit_time, d.id as edit_by from crm2022.tbl_activity a inner join crm2022.tbl_user b on a.owner = b.id # 注意，使用内外链接都可以 inner join crm2022.tbl_user c on a.create_by = c.id # 注意，连接条件不同了，需要重新链接 left join crm2022.tbl_user d on a.create_by = c.id # 注意，这里是左外连接，左边即便是null也要查询出来 -
返回的不是一个完整页面时，我们需要做什么？
-
返回的对象要使用
@ResponseBody注解对内容进行注释 -
返回的对象有两种选择，一个是封装成为一个Map直接变成JSON字符串，另一个是自己定义一个返回类型。
-
自己定义一个返回类型：
@RequestMapping("/workbench/activity/saveCreateActivity.do") @ResponseBody public Object saveCreateActivity(Activity activity, HttpSession session) { User user = (User) session.getAttribute(Constant.SESSION_USER); // 将activity进行二次封装,将一些没有填充的属性加上 activity.setId(UUIDUtils.getUUID()); activity.setCreateTime(DateUtils.formatDateTime(new Date())); activity.setCreateBy(user.getId()); ReturnObject returnObject = new ReturnObject(); try { int i = activityService.saveCreateActivity(activity); if (i > 0) { returnObject.setCode(Constant.RETURN_OBJECT_CODE_SUCCESS); } else { returnObject.setCode(Constant.RETURN_OBJECT_CODE_FAIL); returnObject.setMessage("系统忙，请稍后重试..."); } } catch (Exception e) { // 写数据会产生异常 e.printStackTrace(); returnObject.setCode(Constant.RETURN_OBJECT_CODE_FAIL); returnObject.setMessage("系统忙，请稍后重试..."); } return returnObject; } // public class ReturnObject { private String code; // 1成功 0 失败 private String message; private Object retData; // 其他数据 public String getCode() { return code; } public void setCode(String code) { this.code = code; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public Object getRetData() { return retData; } public void setRetData(Object retData) { this.retData = retData; } } -
直接封装成一个Map
@RequestMapping("/workbench/activity/queryActivityByConditionForPage.do") @ResponseBody public Object queryActivityByConditionForPage(String name, String owner, String startDate, String endDate, int pageNo, int pageSize) { Map<String, Object> map = new HashMap<>(); map.put("name", name); map.put("owner", owner); map.put("startDate", startDate); map.put("endDate", endDate); map.put("beginNo", (pageNo - 1) * pageSize); map.put("pageSize", pageSize); List<Activity> activities = activityService.queryActivityByConditionForPage(map); int i = activityService.queryCountOfActivityByCondition(map); Map<String, Object> retMap = new HashMap<>(); retMap.put("activityList",activities); retMap.put("totalRows", i); return retMap; }
-
-
简单来说，就是看看有没有已经定义好的实体类满足自己的返回需求，有的话直接用，没有的话就返回一个Map对象，因为它与JSON字符串的格式是一致的。
-
-
JSP中针对返回的对象有两种遍历方式，一种是直接在javascript代码中，一种是jquery方式
遍历jsp对象使用，遍历的是js变量 $.each() 作用域对象：jstl标签，与el标签一起使用 <c:foreach></c:foreach> -
在指定的标签中显示jsp页面片段：
选择器.html(jsp页面片段的字符串);//覆盖显示 选择器.append(jsp页面片段的字符串);//追加显示 选择器.after(jsp页面片段的字符串); 选择器.before(jsp页面片段的字符串); 选择器.text(jsp页面片段的字符串); -
分页插件【类似日历插件】
-
引入开发包
-
创建容器
-
当容器加载完后，对容器调用工具函数
-
10-删除市场活动
-
删除功能流程分析
-
在页面中给元素添加事件的语法【jquery】
-
使用元素的事件属性：在标签上加上onclick属性【不推荐，代码和页面混在一起】
<οnclick="f()"> -
使用jquery对象添加：使用jquery选择器筛出来对应的对象，再调事件函数【推荐，早期版本】
【不足：只能给固有元素添加属性】
【固有元素：当调用事件函数给元素添加事件的时候，如果元素已经生成，则这些元素叫固有元素】
【动态元素：当调用事件函数给元素添加事件的时候，如果元素还没有生成，则这些元素叫动态元素】
【考虑到异步请求，有的元素实际上会成为动态元素】
<script> $("#xxx").onclick(function(){ // js代码 }); </script> -
使用juery对象添加：使用on函数，可以针对动态对象进行绑定【动态静态都可以】
先找父元素：父元素必须是固有元素，可以是直接父元素，也可以是非直接父元素，理论上任意父元素都可以，但是理论上范围越小越好
事件类型：与事件属性和事件函数一一对应。
子选择器：目标元素，自动建立在父选择器的基础上
<script> 父选择器.on("事件类型", 子选择器, function(){ // js代码 }); </script>
-
-
mybatis中的update、insert、delete语句没有定义resultMap属性，写了反而错了。
-
ajax向后台发送请求时，可以通过data提交参数,data的数据格式有三种格式：
-
第一种
data:{ k1:v1, k2:v2, .... }劣势：只能向后台提交一个参数名对应一个参数值的数据，不能向后台提交一个参数名对应多个参数值的数据。只能向后台提交字符串数据。
优势：操作简单
-
第二种
data:k1=v1&k2:v2&....优势：不但能够向后台提交一个参数名对应一个参数值的数据，还能向后台提交一个参数名对应多个参数值的数据。
劣势：操作麻烦，只能向后台提交字符串数据 -
第三种
data:FormData对象优势：不但能提交字符串数据，还能提交二进制数据，主要是上传文件的时候使用的
劣势：操作更复杂-
FormData对象的使用：创建对象，使用append()添加键值对。var formdata = new FormData(); formdata.append("activityFile", actFile); // formdata.append("userName", "张三"); // 发送异步请求 $.ajax({ url:'workbench/activity/importActivity.do', data: formData, type: 'post', dataType:'json', success:function(data){ if (data.code == "1"){ alert("导入成功！")； } } });
-
-
11-修改市场活动和批量导出市场活动、选择导出市场活动
-
修改流程图分析【先查出来】
-
使用jquery获取或者设置指定元素的value属性值：
获取：
选择器.val();设置：
选择器.val(属性值); -
批量导出市场活动分析
-
应用场景：不方便在线查看的场景，都可以使用批量导出的方式
-
分析流程：
- 给“批量导出”按钮添加事件，发送导出请求
- 查询所有的市场活动
- 创建一个excel文件，将所有文件写入一个excel文件中
- 把生成的excel输出到浏览器
-
技术准备：
-
iText插件：收费 -
poi插件：免费，效率不如iText。本项目采用
poi。
-
-
-
使用
poi插件操作文档【插件的基本思想】：将办公文档的所有元素封装成普通的Java类，进而实现操作办公文档的目的。
【类对象】：Excel文件对象（
HSSFWorkbook），工作表对象（HSSFSheet），行对象（HSSFRow），列对象（HSSFCell），样式对象（HSSFCellStyle）【使用】：
- 添加依赖：在
pom.xml文件中添加依赖，3.15版本比较经典，3.17进行了很多的改进。
<dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.15</version> </dependency>- 使用封装类生成excel文件
public class CreateExcelTest { public static void main(String[] args) throws Exception{ // 创建文件对象 HSSFWorkbook sheets = new HSSFWorkbook(); // 创建工作表 HSSFSheet sheet = sheets.createSheet("学生列表"); // 创建一行，行号从0开始 HSSFRow row = sheet.createRow(0);// 行号 // 创建列，列也是从0开始 HSSFCell cell = row.createCell(0); // 写入内容，标题 cell.setCellValue("学号"); // 写入内容，对0的不会失去引用的，内部有一个记录的，再使用cell作为变量名 cell = row.createCell(1); cell.setCellValue("姓名"); cell = row.createCell(2); cell.setCellValue("年龄"); // 创建10个row对象 for (int i = 1; i <= 10; i++){ row = sheet.createRow(i); cell = row.createCell(0); cell.setCellValue(100 + i); cell = row.createCell(1); cell.setCellValue("name" + i); cell = row.createCell(2); cell.setCellValue(20 + i); } // 创建文件流 FileOutputStream fileOutputStream = new FileOutputStream("C:\\Users\\10727\\Desktop\\my.xls"); // 写 sheets.write(fileOutputStream); // 关闭资源 fileOutputStream.close(); sheets.close(); } } - 添加依赖：在
-
用户文件下载功能注意事项
是一个web功能，有前端和后端。
所有文件下载的请求只能是同步请求，不能是异步请求，因为响应信息是个文件。
-
Controller层面的书写SpringMVC不擅长使用返回值返回文件类型，所以我们要自己手动编写。@RequestMapping("workbench/activity/fileDown.do") public void fileDown(HttpServletResponse response) throws Exception { // 文件下载的异常没有必要捕获，直接抛出就可以 // 返回excel文件，设置文件返回信息，指明返回的是一个二进制文件 response.setContentType("application/octet-stream;charset=UTF-8"); // 获取输出流，只能写字符流，写二进制文件不能用这个response.getWriter(); OutputStream outputStream = response.getOutputStream(); // 浏览器接收到相应信息后，默认在浏览器中直接打开，即使浏览器自己打不开，也会调用电脑自带的软件，实在打不开才会激活文件下载窗口 // 可以设置响应头信息，使浏览器接收到响应信息后，直接激活文件下载窗口，即使能打开也不打开 // 设置文件名 response.addHeader("Content-Disposition","attachment;filename=myStudentList.xls"); // 读取excel文件到内存 InputStream fileInputStream = new FileInputStream("C:\\Users\\10727\\Desktop\\my.xls"); // 缓冲区 byte[] buff = new byte[256]; // 写 int len = 0; while ((len = fileInputStream.read(buff)) != -1) { outputStream.write(buff, 0, len); } // 关闭资源，只关闭自己创建的 fileInputStream.close(); // 这个不关闭，使用刷新，outputStream会由Tomcat关闭 outputStream.flush(); } -
批量导出市场活动
-
选择导出功能实现
带信息的同步请求：
window.location.href = "workbench/activity/exportActivityByIds.do" + "?" + ids;
12-文件上传功能和批量导入功能
- SpringMVC对文件上传插件的依赖
<!-- 配置文件上传解析器 id:必须是multipartResolver-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="#{1024*1024*5}"/> <!--最大文件大小-->
<property name="defaultEncoding" value="utf-8"/> <!--编码-->
</bean>
- 文件上传的前端表单
文件上传的表单三个条件：
表单组件标签必须用：
<input type="file">
<input type="text|password|radio|checkbox|hidden|button|submit|reset|file">，<select>，<textarea>等请求方式只能用：post
get：参数通过请求头提交到后台，参数放在URL后边；只能向后台提交文本数据；对参数长度有限制；数据不安全；效率高
post：参数通过请求体提交到后台；既能能提交文件数据，又能够提交二进制数据；理论上对参数长度没有限制；相对安全；效率较低表单的编码格式只能用：multipart/form-data
根据HTTP协议的规定，浏览器每次向后台提交参数，都会对参数进行统一编码；默认采用的编码格式是urlencoded，这种编码格式只能对文本数据进行编码；浏览器每次向后台提交参数，都会首先把所有的参数转换成字符串，然后对这些数据统一进行urlencoded编码；
文件上传的表单编码格式只能用multipart/form-data：enctype=“multipart/form-data”
使用ajax的话有另一种格式。
<form action="url" method="post" enctype="multipart/form-data"> <!--设置上传格式-->
<input type="file" name="myFile"><br>
<input type="submit" value="提交">
</form>
// 另一种使用ajax的格式
$.ajax({
url:'workbench/activity/importActivity.do',
data: formData,
processData: false, // 设置ajax提交参数之前，是否把参数统一转成字符串（默认方法是true）
contentType: false, // 设置ajax向后台提交参数之前，是否按照urlencoded编码
type: 'post',
dataType:'json',
success:function(data){
if (data.code == "1"){
alert("导入成功！");
// 关闭模态窗口
$("#importActivityModal").modal("hide");
queryActivityByConditionForPage(1, $("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
} else {
alert(data.message);
$("#importActivityModal").modal("show");
}
}
});
Controller层面的内容
@RequestMapping("workbench/activity/fileUp.do")
@ResponseBody
public Object fileUp(String userName, MultipartFile myFile) throws Exception{ // 定义一个形参，这是myFile，要与前端的命名一致
System.out.println("userName" + userName);
// 把文件传到服务器上，获取文件名
String originalFilename = myFile.getOriginalFilename();
// 文件名的两种写法，可以两个参数，也可以直接字符串拼接
File file = new File("C:\\Users\\10727\\Desktop\\", originalFilename);// 路径必须手动创建好，文件可以不存在
myFile.transferTo(file);
ReturnObject object = new ReturnObject();
object.setCode(Constant.RETURN_OBJECT_CODE_SUCCESS);
object.setMessage("上传成功");
return object; // 浏览器是不能解析JSON的，这只是一个示例
}
-
导入市场活动的流程分析
-
Mapper层<!--遍历集合，采用list List<Activity> --> <!--遍历数组，采用array Activity[] --> <insert id="insertActivityByList" parameterType="com.powernode.crm.workbench.domain.Activity"> insert into crm2022.tbl_activity (id, owner, name) values <foreach collection="list" item="obj" separator=","> (#{obj.id}, #{obj.owner}, #{obj.name}) </foreach> </insert> -
前台页面（注意ajax发送地方，有额外的字段）
$("#importActivityBtn").click(function (){ // 收集参数，下面这种方法只能获取文件名，不能获取文件对象 // $("#activityFile").val(); // 可以根据文件名做一个表单验证 var FileName = $("#activityFile").val(); // js截取字符串 var type = FileName.substr(FileName.lastIndexOf(".")).toLowerCase(); if (type != "xls"){ alert("请导入.xls格式的文件进行导入！"); return; } var actFile = $("#activityFile")[0].files[0]; if (actFile.size > 5 * 1024 * 1024){ alert("所选的文件过大！请重新上传5M大小以内的数据！") } var formdata = new FormData(); formdata.append("activityFile", actFile); // formdata.append("userName", "张三"); // 发送异步请求 $.ajax({ url:'workbench/activity/importActivity.do', data: formData, processData: false, // 设置ajax提交参数之前，是否把参数统一转成字符串（默认方法是true） contentType: false, // 设置ajax向后台提交参数之前，是否按照urlencoded编码 type: 'post', dataType:'json', success:function(data){ if (data.code == "1"){ alert("导入成功！"); // 关闭模态窗口 $("#importActivityModal").modal("hide"); queryActivityByConditionForPage(1, $("#demo_pag1").bs_pagination('getOption', 'rowsPerPage')); } else { alert(data.message); $("#importActivityModal").modal("show"); } } }); });
13-查看市场活动详细信息
-
流程图分析
-
【前端】在jsp这个页面上显示遍历的内容有两种方式
-
使用jquery
$.each()【适用场景】遍历js变量，不是作用域里面的对象，可以使用它进行遍历
-
使用jstl标签库，el表达式
<c:forEach> </c:forEach>【适用场景】遍历作用域里面的数据
-
-
使用标签保存数据，以便在需要的时候能够获取到这些数据
-
给标签添加属性：
如果是表单组件标签，优先使用value属性，只有value不方便使用时，使用自定义属性;
如果不是表单组件标签，不推荐使用value，推荐使用自定义属性。添加自定义属性——比如下面的
remarkId就是自己设置的<a class="myHref" remarkId="${remark.id}" href="javascript:void(0);"><span class="glyphicon glyphicon-edit" style="font-size: 20px; color: #E6E6E6;"></span></a> -
获取属性值时：【优先考虑id，其次是name属性，这两个属性都不合适，采用自定义】
如果获取表单组件标签的value属性值：dom对象.value，jquery对象.val()
如果自定义的属性，不管是什么标签，只能用：jquery对象.attr(“属性名”);获取自定义属性——
$("#remarkDivList").on("click", "a[name='deleteA']", function (){ // 收集参数 var activityRemarkId = $(this).attr("remarkId"); $.ajax({ url:'workbench/activity/deleteActivityRemarkById.do', data:{ activityRemarkId:activityRemarkId }, type:'post', dataType:'json', success:function (data){ if (data.code == "1"){ // 删除成功 } } }); });
-
14-添加、删除、修改市场活动评论
-
流程分析
-
【前端】获取jquery对象的值和设定值
var myval = $("#id").val(); // 获取值 $("#id").val("myString"); // 设定值【前端】把页面片段动态显示在页面中：
选择器.html(htmlStr)：覆盖显示在标签的内部 选择器.text(htmlStr)：覆盖显示在标签的内部 选择器.append(htmlStr)：追加显示在指定标签的内部的后边 选择器.after(htmlStr):追加显示在指定标签的外部的后面 选择器.before(htmlStr)：追加显示在指定标签的外部的前边 -
删除市场活动备注
-
修改市场活动评论
-
修改的SQL语句，自动返回影响记录的条数，不用使用resultMap和resultType，直接写SQL语句就行了。
扫一扫
2646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
