需求分析      

        用户在市场活动主页面,点击"创建"按钮,弹出创建市场活动的模态窗口;

         用户在创建市场活动的模态窗口填写表单,点击"保存"按钮,完成创建市场活动的功能.

         *所有者是动态的(//在现实市场活动主页面时，就从数据库中查询出所有用户并且显示在创建的模态窗口中)

         *所有者和名称不能为空

         *如果开始日期和结束日期都不为空,则结束日期不能比开始日期小

         *成本只能为非负整数

         *创建成功之后,关闭模态窗口,刷新市场活动列，显示第一页数据，保持每页显示条数不变

         *创建失败,提示信息创建失败,模态窗口不关闭,市场活动列表也不刷新

流程图

 功能实现

一、用插件逆向生成tbl_activity的mapper接口和映射文件以及实体类

二、ActivityMapper

1.在ActivityMapper接口中，定义方法

   /* 创建市场活动*/int insertActivity(Activity activity);

在ActivityMapper映射文件写sql语句。增加市场活动的时候，没有eidt_time和edit_by删去。

    <!--int insertActivity(Activity activity);--><insert id="insertActivity" parameterType="com.wzl.crm.workbench.domain.Activity">insert into tbl_activity (id, owner, name, start_date,end_date, cost, description,create_time, create_by)values (#{id,jdbcType=CHAR}, #{owner,jdbcType=CHAR}, #{name,jdbcType=VARCHAR}, #{startDate,jdbcType=CHAR},#{endDate,jdbcType=CHAR}, #{cost,jdbcType=VARCHAR}, #{description,jdbcType=VARCHAR},#{createTime,jdbcType=CHAR}, #{createBy,jdbcType=VARCHAR})</insert>

2.在applicationContext-datasource配置mapper扫描器

 三、在ActivityService

1.ActivityService接口添加方法

public interface ActivityService {/* 保存市场活动*/public int saveCreateActivity(Activity activity);
}

2.ActivityServiceImpl实现类实现这个接口。

要调用mapper的方法，所以要实现注入

@Service("activityService")
public class ActivityServiceImpl implements ActivityService {@Autowiredprivate ActivityMapper activityMapper;@Overridepublic int saveCreateActivity(Activity activity) {return activityMapper.insertActivity(activity);}
}

3.在Spring配置文件applicationContext添加扫描

 四、ActivityController

1.封装参数

通过形参Activity activity实现对参数的封装

@RequestMapping("/workbench/activity/saveCreateActivity.do")public @ResponseBody Object saveCreateActivity(Activity activity, HttpSession session){// 封装参数--下面3个需要自己输入activity.setId(UUIDUtils.getUUID());User user = (User) session.getAttribute(Contants.SESSION_USER);activity.setCreateBy(user.getId());activity.setCreateTime(DateUtils.formateDateTime(new Date()));
}

id,createby,createtime需要手动赋值

• ①id采用UUID，所以定义一个工具类UUIDUtils

public class UUIDUtils {public static String getUUID(){return UUID.randomUUID().toString().replaceAll("-","");}
}

• ②createtime:通过DateUtils工具类获得yyyy-MM-dd HH:mm:ss
• ③createby：通过 HttpSession session来获取登录用户的id 

2.调用service方法，因为增删改要捕获异常try-catch

ReturnObject returnObject = new ReturnObject();try {int ret = activityService.saveCreateActivity(activity);if (ret>0){returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);}else {returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);returnObject.setMessage("系统忙，请稍后再试...");}} catch (Exception e) {e.printStackTrace();returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);returnObject.setMessage("系统忙，请稍后再试...");}return returnObject;

3.返回响应信息

因为是ajax发起的异步请求，返回的是一个json所以方法名要使用@ResponseBody注解

五、客户端

1.给创建按钮增加单击事件，然后弹出创建的模态窗口

      //创建按钮单击事件$("#createActivityBtn").click(function () {// 初始化工作，加载一些js代码// 弹出创建市场模态窗口$("#createActivityModal").modal("show");});

 2.点击保存按钮

①收集参数进行表单验证

 // 保存按钮$("#SaveCreateActivityBtn").click(function () {// 一、发请求--1.收集参数(表单验证)--2.发送请求//1.收集表单参数var owner = $("#create-marketActivityOwner").val();var name = $.trim($("#create-marketActivityName").val());var startDate = $("#edit-startTime").val();var endDate = $("#edit-endTime").val();var cost = $.trim($("#create-cost").val());var description = $.trim($("#edit-describe").val());//1.表单验证if (owner == "") {alert("请输入所有者");return;}if (name == "") {alert("请输入名称");return;}if (startDate == "") {alert("请输入开始日期");return;}if (endDate == "") {alert("请输入结束日期");return;}if (startDate > endDate) {alert("结束日期不能比开始日期小");return;}if (cost == "") {alert("请输入成本");return;}var regExp = /^(([1-9]\\d*)|0)$/;if (!regExp.test(cost)) {alert("成本不能为负数");return;}
}

②通过ajax发送请求

• url请求的路径
• data封装的参数
• type请求方式
• dataType:响应结果的类型

                $.ajax({url:'workbench/activity/saveCreateActivity.do',data:{owner:owner,name:name,startDate:startDate,endDate:endDate,cost:cost,description:description},type:'post',dataType:'json',

③对响应进行处理

• data.code结果是1，说明添加成功，关闭模态窗口
• 否则弹出提示信息

   //2.1 处理响应success:function (data) {if (data.code == "1"){// 成功//1.关闭模态窗口$("#createActivityModal").modal("hide");//2. 刷新未做}else {//提示alert(data.message);$("#createActivityModal").modal("show");}}});

④创建完成后，清空表单

            //创建按钮单击事件$("#createActivityBtn").click(function () {// 初始化工作，加载一些js代码// 重置form$("#createActivityForm").get(0).reset();// 弹出创建市场模态窗口$("#createActivityModal").modal("show");});

【补充】：正则表达式

一、正则表达式

1.语法:定义字符串的匹配模式，判断指定的字符串是否符合字符串的匹配模式

2.规则：

①//表示定义一个正则表达式 var regExp=/...../

②[ ]表示指定字符集的一位字符。var refExp=/[abc]/ 匹配的是a或b或c

③^表示字符串的开头位置

   $表示字符串的结尾位置

var refExp=/^[A-Za-z0-9]$/输入a-z或A-Z或0-9的字符

④{ }匹配次数 var refExp=/^[A-Za-z0-9]{5}$/ 有5位组成

{min,max}

{min,}

⑤特殊符号

\\d:匹配1位数字 等价 [0-9]

\\D:匹配非数字 

\\w：匹配所有字符，包括字母数字下划线

\\W:匹配非字符

*：匹配0次或者多次 {0,}

+：匹配1次或者多次 {1,}

?:   匹配0次或者1次{0,1}

一、校验数字的表达式

1、数字：^[0-9]*$

2、n位的数字：^\\d{n}$

3、至少n位的数字：^\\d{n,}$

4、m-n位的数字：^\\d{m,n}$

5、零和非零开头的数字：^(0|[1-9][0-9]*)$

6、非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(\\.[0-9]{1,2})?$

7、带1-2位小数的正数或负数：^(\\-)?\\d+(\\.\\d{1,2})$

8、正数、负数、和小数：^(\\-|\\+)?\\d+(\\.\\d+)?$

9、有两位小数的正实数：^[0-9]+(\\.[0-9]{2})?$

10、有1~3位小数的正实数：^[0-9]+(\\.[0-9]{1,3})?$

11、非零的正整数：^[1-9]\\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\\+?[1-9][0-9]*$

12、非零的负整数：^\\-[1-9][]0-9"*$ 或 ^-[1-9]\\d*$

13、非负整数：^\\d+$ 或 ^[1-9]\\d*|0$

14、非正整数：^-[1-9]\\d*|0$ 或 ^((-\\d+)|(0+))$

二、校验字符的表达式

1、汉字：^[\\u4e00-\\u9fa5]{0,}$

2、英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$

3、长度为3-20的所有字符：^.{3,20}$

4、由26个英文字母组成的字符串：^[A-Za-z]+$

5、由26个大写英文字母组成的字符串：^[A-Z]+$

6、由26个小写英文字母组成的字符串：^[a-z]+$

7、由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$

8、由数字、26个英文字母或者下划线组成的字符串：^\\w+$ 或 ^\\w{3,20}$

9、中文、英文、数字包括下划线：^[\\u4E00-\\u9FA5A-Za-z0-9_]+$

10、中文、英文、数字但不包括下划线等符号：^[\\u4E00-\\u9FA5A-Za-z0-9]+$ 或 ^[\\u4E00-\\u9FA5A-Za-z0-9]{2,20}$

11、可以输入含有^%&',;=?$\\"等字符：[^%&',;=?$\\x22]+

12、禁止输入含有~的字符：[^~\\x22]+

三、特殊需求表达式

1、Email地址：^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$

2、域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\\.?

3、InternetURL：[a-zA-z]+://[^\\s]* 或 ^http://([\\w-]+\\.)+[\\w-]+(/[\\w-./?%&=]*)?$

4、手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$

5、电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^(\\(\\d{3,4}-)|\\d{3.4}-)?\\d{7,8}$

6、国内电话号码(0511-4405222、021-87888822)：\\d{3}-\\d{8}|\\d{4}-\\d{7}

7、电话号码正则表达式（支持手机号码，3-4位区号，7-8位直播号码，1－4位分机号）: ((\\d{11})|^((\\d{7,8})|(\\d{4}|\\d{3})-(\\d{7,8})|(\\d{4}|\\d{3})-(\\d{7,8})-(\\d{4}|\\d{3}|\\d{2}|\\d{1})|(\\d{7,8})-(\\d{4}|\\d{3}|\\d{2}|\\d{1}))$)

8、身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X：(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)

9、帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$

10、密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\\w{5,17}$

11、强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)：^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$

12、强密码(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)：^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

13、日期格式：^\\d{4}-\\d{1,2}-\\d{1,2}

14、一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$

15、一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$

16、xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\\\.[x|X][m|M][l|L]$

17、腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)

18、中国邮政编码：[1-9]\\d{5}(?!\\d) (中国邮政编码为6位数字)

19、IPv4地址：((2(5[0-5]|[0-4]\\d))|[0-1]?\\d{1,2})(\\.((2(5[0-5]|[0-4]\\d))|[0-1]?\\d{1,2})){3}

20、空白行的正则表达式：\\n\\s*\\r (可以用来删除空白行)