基于maven+ssm的增删改查之添加员工实现

西西嘛呦

发布于 2020-08-26 14:37:25

5010

发布于 2020-08-26 14:37:25

文章被收录于专栏：数据分析与挖掘数据分析与挖掘

接上一节。

具体流程：我们在index.jsp在中，点击新增按钮，弹出添加员工信息模态框，同时，我们发送ajax请求从数据库中获取部门信息，新增时可以选择部门。输入完毕信息后，在发送请求完成保存操作。

首先是添加了模态框和add.js之后的index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工列表</title>
<%
    pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
</head>
<body>
    <!-- 模态框 -->
    <div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">员工添加</h4>
          </div>
          <div class="modal-body">
              <!-- 新增表单 -->
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">empName</label>
                    <div class="col-sm-10">
                      <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName"/>
                      <span class="help-block"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">email</label>
                    <div class="col-sm-10">
                      <input type="text" name="email" class="form-control" id="email_add_input" placeholder="123@qq.com">
                      <span class="help-block"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">gender</label>
                      <div class="col-sm-10">
                          <label class="radio-inline">
                            <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
                        </label>
                        <label class="radio-inline">
                              <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
                        </label>
                     </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">deptName</label>
                    <div class="col-sm-4">
                      <select name="dId" class="form-control" id="dept_add_select"></select>
                    </div>
                </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="emp_save">保存</button>
          </div>
        </div>
      </div>
    </div>
    
    <div class="container">
        <!-- 标题 -->
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CURD</h1>
            </div>
        </div>
        <!-- 按钮-->
        <div class="row">
            <div class="col-md-4 col-md-offset-10">
                <button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
                <button class="btn btn-danger">删除</button>
            </div>
        </div>
        <!-- 表格 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover" id="emps_tables">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>epmName</th>
                            <th>gender</th>
                            <th>email</th>
                            <th>deptName</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6" id="page_info_area">
            </div>
            <div class="col-md-6" id="page_nav_area">
            </div>    
        </div>
    </div>
    <script type="text/javascript" src="${APP_PATH}/static/myjs/list.js" ></script>
    <script type="text/javascript" src="${APP_PATH}/static/myjs/add.js" ></script>
</body>
</html>

add.js用于发送ajax请求。

然后是add.js中：

//点击新增弹出模态框
$("#emp_add_modal_btn").click(function(){
        //发送ajax请求，查出部门信息显示下拉列表
        //reset_form("#empAddModal form");
        getDepts("#empAddModal select");
        $("#empAddModal").modal({
            backdrop:"static"
        });
    });
//查询所有部门信息
function getDepts(ele){
        $(ele).empty();
        $.ajax({
            url:"/curd_ssm/depts",
            type:"GET",
            success:function(result){
                //console.log(result);
                $.each(result.extend.depts,function(){
                    var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                    optionEle.appendTo(ele);
                });
                
            }        
        });
    }

$("#emp_save").click(function(){
    alert($("#empAddModal form").serialize());    
    $.ajax({
        url:"/curd_ssm/emp",
        type:"POST",
        data:$("#empAddModal form").serialize(),
        success:function(result){        
            //关闭模态框，转到最后一页
            $("#empAddModal").modal('hide');
            to_page(totalRecord);
            //alert(result.msg);
        }
    });
    
});

还要新建DeparmentController.java、DepartmentService、DepartmentServiceImpl用于获取部门信息，相关文件如下：

DepartmentController.java

package com.gong.curd.controller;


import java.util.List;

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 com.gong.curd.bean.Department;
import com.gong.curd.service.DepartmentService;
import com.gong.curd.utils.Msg;

@Controller
public class DepartmentController {
    @Autowired
    private DepartmentService departmentService;
    
    @ResponseBody
    @RequestMapping("/depts")
    public Msg getDepts() {
        List<Department> list = departmentService.getAllDepts();
        return Msg.success().add("depts", list);
    }  
}

DepartmentService.java

package com.gong.curd.service;

import java.util.List;

import com.gong.curd.bean.Department;

public interface DepartmentService {

    public List<Department> getAllDepts();

}

DepartmentServiceImpl.java

package com.gong.curd.serviceImpl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.gong.curd.bean.Department;
import com.gong.curd.dao.DepartmentMapper;
import com.gong.curd.service.DepartmentService;

@Service
public class DepartmentServiceImpl implements DepartmentService{
    
    @Autowired
    private DepartmentMapper departmentMapper;

    public List<Department> getAllDepts() {
        return departmentMapper.selectByExample(null);
    }


}

最后我们需要修改EmployeeController.java

    @ResponseBody
    @RequestMapping(value="/emp",method=RequestMethod.POST)
    public Msg saveEmp(Employee employee) {
        employeeService.save(employee);
        return Msg.success();
    }

EmployeeService.java

public void save(Employee employee);

EmployeeServiceImpl.java

    @Override
    public void save(Employee employee) {
        employeeMapper.insertSelective(employee);
    }

启动服务器：点击新增按钮

输入相关信息：

点击保存：

相关信息成功被添加。下一节进行添加信息的相关验证。

天天呆在家，好无聊啊。。。。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-01-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

java

ajax

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

javascript

java

ajax

登录后参与评论

0 条评论

热度

基于maven+ssm的增删改查之添加员工实现

基于maven+ssm的增删改查之添加员工实现

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐