八、市场活动-创建

   需求分析      

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

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

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

         *所有者和名称不能为空

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

         *成本只能为非负整数

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

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

流程图

 功能实现

一、用插件逆向生成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 {
	@Autowired
	private ActivityMapper activityMapper;
	@Override
	public 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 (可以用来删除空白行)