CRM-实现保存模态框用户输入的数据

素心如月桠

已于 2022-05-26 17:34:41 修改

阅读量422

点赞数 1

分类专栏： CRM 文章标签： mvc

于 2022-05-22 22:54:38 首次发布

本文链接：https://blog.csdn.net/m0_47010003/article/details/124916764

版权

CRM 专栏收录该内容

19 篇文章 5 订阅

订阅专栏

接上一篇：CRM-设计市场活动主页面以及页面后台

1. 要实现的页面如下

在这里插入图片描述
分析：为创建市场活动的模态框中的标签都添加id，通过$(“#btn”).val()获取用户输入的值，点击保存按钮，通过jquery集成ajax，把数据传给controller，controller调用service层方法，service层调用mapper层方法把数据存入数据库

2. 代码实现

2.1 Mapper层

2.1.1 Mybatis逆向工程

同样使用mybatis-generator搭建
tbl_user表的：搭建Mybatis逆向工程
在这里插入图片描述

改实体类、xml、dao的存放路径和需要的表格名称，如图框出来的位置
双击Plugins下的mybatis-generator运行

在这里插入图片描述

2.1.2 自动生成代码

在这里插入图片描述

我们在mapper层要实现插入数据，插入的是封装的一个Activity类对象
所以在ActivityMapper接口中定义一个insertActivity()方法，返回值为int类型，参数为Activity类型
在ActivityMapper.xml映射文件中加入select标签，id为刚刚写的方法名，parameterType为Activity类的包路径

在这里插入图片描述

从自动生成的代码里面找同样的sql语句，复制到新建的select标签里

2.2 Service层

在这里插入图片描述

2.2.1 ActivityService接口

package com.lyx.workbench.service;
import com.lyx.workbench.domain.Activity;

public interface ActivityService {
    int saveActivity(Activity activity);
}

2.2.2 ActivityServiceImpl

implements 实现各个定义的ActivityService接口
类上添加@Service注解，name值为实现的接口类名的首字母小写activityService
添加ActivityMapper属性，在属性上添加注解@Autowired

@Service("activityService")
public class ActivityServiceImpl implements ActivityService {
    @Autowired
    private ActivityMapper activityMapper;
    @Override
    public int saveActivity(Activity activity) {
        return activityMapper.insertActivity(activity);
    }
}

2.3 Controller层

2.3.1 ActivityController类上添加save()方法

前面要跳转到市场活动主页面时已经添加了toindex()方法
现在写save()方法
在这里插入图片描述

实体收参，参数为Activity类型

@RequestMapping("/workbench/activity/save.do")
public @ResponseBody Object save(Activity activity, HttpSession session){
		
}

返回值为Object类型，并解析为json字符串添加@ResponseBody注解
jsp页面传参如下6个，保存在activity这个参数里面

在这里插入图片描述
4. tbl_activity表需要的数据还有id，创建者，创建时间（修改者修改时间现在先不写）

在这里插入图片描述

jsp传来的activity参数里这3个值是空的，我们要用get和set方法为其赋值，如下：
activity_id是自动生成的，我们用uuid，写个UUIDUtils通用类

package com.lyx.commons.utils;
import java.util.UUID;

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

activity_create_by是登录系统的当前用户，数据已经保存在session作用域中了
activity_create_time是当前时间，我们要转成string类型
写个DateUtils通用类

package com.lyx.commons.utils;
import java.text.SimpleDateFormat;
import java.util.Date;

public class DateUtils {
    public static String getDate(){
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        return simpleDateFormat.format(new Date());
    }
}

调用Service层代码
添加属性ActivityService，添加注解@Autowired

 @Autowired
    private ActivityService activityService;

activityService.saveActivity(activity);插入数据
返回结果封装为ReturnObject类里面，实现登录验证时已经写过，该类里面有code属性和message属性
插入成功，即返回值为int i = 1；，把ReturnObject对象的code设置为1
如果有异常或者插入失败，把ReturnObject对象的code设置为0，message=“系统忙，请稍后重试…”
返回ReturnObject类型的对象

2.3.2 save()方法完整代码

package com.lyx.workbench.web.controller;

import com.lyx.commons.contants.Contants;
import com.lyx.commons.domain.ReturnObject;
import com.lyx.commons.utils.DateUtils;
import com.lyx.commons.utils.UUIDUtils;
import com.lyx.settings.domain.User;
import com.lyx.settings.service.UserService;
import com.lyx.workbench.domain.Activity;
import com.lyx.workbench.service.ActivityService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.List;

@Controller
public class ActivityController {

    @Autowired
    private UserService userService;
    @Autowired
    private ActivityService activityService;

    @RequestMapping("/workbench/activity/toIndex.do")
    public String toIndex(HttpServletRequest request) {
        List<User> users = userService.queryAllUsers();
        request.setAttribute("users", users);
        return "workbench/activity/index";
    }

    @RequestMapping("/workbench/activity/save.do")
    public @ResponseBody Object save(Activity activity, HttpSession session) {
        User user = (User) session.getAttribute(Contants.SESSION_USER);
        activity.setActivityId(UUIDUtils.getUUID());
        activity.setActivityCreateBy(user.getUserId());
        activity.setActivityCreateTime(DateUtils.getDate());
        int i = 0;
        ReturnObject returnObject = new ReturnObject();
        try {
            i = activityService.saveActivity(activity);
            if(i==1){
                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;
    }
}

2.4 市场活动主页面index.jsp

2.4.1 为创建市场活动的模态框中的都标签添加id属性

在这里插入图片描述

2.4.2 清除模态框上次填写的数据

2.4.2.1 弹出模态框功能存在问题

代码中存在的问题
点击创建按钮

在这里插入图片描述

弹出模态框的功能是通过在创建按钮button标签添加data-toggle属性和data-target属性

data-toggle="modal" data-target="#edit-ActivityModel"

这种方法存在问题，点击就弹出，我们无法在模态框弹出前对其进行其他操作，就比如我上一次创建的信息，点击保存以后，模态框关闭了，再次点击创建按钮弹出模态框，里面还保存上次填写的数据
换一种方法实现点击创建按钮弹出模态框的效果

在这里插入图片描述

创建按钮绑定点击事件，通过选择器.modal(“show”)，打开模态框
通过这种方法，我们可以在弹出模态框之前通过选择器.get(0).reset()；来清除上次填写的数据
删除创建按钮的data-toggle、data-target属性

2.4.3 保存按钮添加单击事件

重点就是对用户输入数据清除空格的$.tirm()
正则表达式判断用户输入数据是否为正整数
为创建市场活动的模态窗口中的保存按钮添加单击事件

$("#saveBtn").click(function (){
	//保存数据
});

选择器.val() 获取上面添加id属性的创建市场活动的模态框的所有标签，获取的值赋值给自定义的变量

$("#saveBtn").click(function (){
	var owner = $("#create_activityOwner").val();//该id加在select标签上
	var name = $.trim($("#create_activityNmae").val());//id在input标签上
	var startDate = $("#create_activityStartDate").val();//日期待会的input标签要定义为只读，添加日期插件
	var endDate = $("#create-activityEndDate").val();
	var cost = $.trim($("#create-activityCost").val());
	var description = $.trim($("#create-activityDescription").val());
	//判断是否为空
	
});

判断用户填写的数据是否为空

if (owner == "") {
	alert("所有者不能为空");
	return;
}
if (name == "") {
	alert("名称不能为空");
	return;
}
if (startDate != "" && endDate != "") {
	if (endDate < startDate) {
		alert("结束日期不能比开始日期小");
		return;
	}
}

判断成本是否为非负整数，使用正则表达式，网上找，非负整数的正则表达式为/^(([1-9]\d*)|0)$/

var regExp = /^(([1-9]\d*)|0)$/;

if (!regExp.test(cost)) {
	alert("成本只能为非负整数");
	return;
}

ajax

$.ajax({
	url:"",
	data:{
		name:name,
		owner:owner
	...
	} 
})

在data里把用户输入的数据（合法），传给controller的save()方法
data里面key值与save方法的形参一致，value值为上面自定义的变量

$.ajax({
	url:"/workbench/activity/save.do",
	data:{
		activityOwner: owner,
		activityName: name,
		activityStartDate: startDate,
		activityEndDate: endDate,
		activityCost: cost,
		activityDescription: description
	},
	type:"post",
	success: function (ret) {
		//ret为返回值：ReturnObject类型
		if(ret.code==1){
			alert("保存成功");
			$("#create-ActivityModel").modal("hide");
		}else{
			alert(ret.message);
			$("#create-ActivityModel").modal("show");
		}
	}
});

素心如月桠

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CRM-实现保存模态框用户输入的数据

1. 要实现的页面如下分析：为创建市场活动的模态框中的标签都添加id，通过$(“#btn”).varl()获取用户输入的值，点击保存按钮，通过jquery集成ajax，把数据传给controller，controller调用service层方法，service层调用mapper层方法把数据存入数据库2. 代码实现2.1 Mapper层2.1.1 Mybatis逆向工程同样使用mybatis-generator搭建tbl_user表的：搭建Mybatis逆向工程改实体类、xml、dao的存
复制链接

扫一扫