SSM整合篇】六. SSM整合增删改 基于【SSM整合篇】五

【SSM整合篇】六. SSM整合增删改 基于【SSM整合篇】五

github源码(day58-ssm-crud) https://github.com/1196557363/ideaMavenProject

项目准备
  1. 本项目基于 【SSM整合篇】五
    SSM整合篇】五. SSM整合+layui分页 基于【SSM整合篇】四 https://blog.csdn.net/TheNew_One/article/details/103904387

1. 增加

1.1 添加jqeury.js

1.2 在empPage.html上添加 连接跳转到 添加页面

<a href="emp/addEmpHtml">添加员工</a>

1.3 创建AddEmp.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base th:href="${#request.getContextPath()+'/'}">
</head>
<body>

    <form action="emp/addEmp" method="post">
        <table>
            <tr>
                <td>empName</td>
                <td><input type="text" name="empName" value="测试账号"/></td>
            </tr>
            <tr>
                <td>job</td>
                <td><input type="text" name="job" value="测试职业"/></td>
            </tr>
            <tr>
                <td>hireDate</td>
                <td><input type="text" name="hireDate" value="2020-1-10"/></td>
            </tr>
            <tr>
                <td>super</td>
                <td>
                    <input type="text" name="superName" id="superName"/>
                    <input type="hidden" name="superId" id="superId" value="" />
                </td>
            </tr>
            <tr>
                <td>deptNo</td>
                <td>
                    <select name="deptNo">
                        <option value="0">---请选择---</option>
                        <option th:each="dept:${deptList}" th:value="${dept.deptId}" th:text="${dept.deptName}"></option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" value="提交">
                </td>
            </tr>
        </table>
    </form>

    <script src="js/jquery-1.8.0.min.js"></script>
    <script>
        // 页面加载的时候调用
        $(function(){
            // 动态给领导的输入框绑定一个失去焦点事件
            $("#superName").blur(function(){
                // 1.先获取用户输入的领导id
                var superId = $("#superName").val();
                if(superId != ''){
  $.get("emp/getEmpBySuperId/"+superId,"",function(data){
                        console.log(data);
                        $("#superName").val(data.empName);
                        $("#superId").val(data.empId)
                    },"JSON");
                }
            })
        })
    </script>
</body>
</html>

1.4 写dao,mapper,service及其impl

1.4.1 Empdao
	/**
     * 添加Emp
     * @param emp
     */
    void addEmp(Emp emp);

    /**
     * 根据领导的Id编号查询Emp
     * @param superId
     * @return
     */
    Emp getEmpBySuperId(Integer superId);
1.4.2 mapper
<sql id="emp_column">
	(emp_name,
	job,
	hire_date,
	super_id,
	dept_no)
</sql>

<insert id="addEmp">
	INSERT INTO emp
		<include refid="emp_column" />
	VALUES
		(#{empName},#{job},#{hireDate},#{superId},#{deptNo})
</insert>

<select id="getEmpBySuperId" resultMap="empMap">
	SELECT * FROM emp WHERE emp_id = #{superId}
</select>
1.4.3 service
    /**
     * 添加Emp
     * @param emp
     */
    void addEmp(Emp emp);

    /**
     * 根据领导的Id编号查询Emp
     * @param superId
     * @return
     */
    Emp getEmpBySuperId(Integer superId);
1.4.4 serivceImpl
 	@Autowired
    private IDeptService iDeptService;

    public void addEmp(Emp emp) {
        iEmpDao.addEmp(emp);
    }
    public Emp getEmpBySuperId(Integer superId) {
        return iEmpDao.getEmpBySuperId(superId);
    }

1.5 写controller

 @RequestMapping("/addEmpHtml")
    public String addEmp(ModelMap map){
        List<Dept> deptList = iDeptService.getAllDept();
        map.put("deptList", deptList);
        return "addEmp";
    }
    
    @RequestMapping(value = "/addEmp", method = RequestMethod.POST)
    public String addEmp(Emp emp){
        System.out.println("------------------------" + emp);
        iEmpService.addEmp(emp);
        return "redirect:getEmpPage";
    }
    
    @RequestMapping(value = "/getEmpBySuperId/{superId}")
    @ResponseBody
    public String getEmpBySuperId(@PathVariable Integer superId){
        System.out.println(iEmpService.getEmpBySuperId(superId));
        return new Gson().toJson(iEmpService.getEmpBySuperId(superId));
}
添加功能完成。。。。。

2. 修改

2.1 给EmpPage.html的编辑添加事件

2.2 新建EditEmp.html

2.3 写controller(顺序没关系根据提示往下新建方法)

2.3 写service及其impl,dao,mapper

编辑功能完成

3. 删除

3.1 给EmpPage.html的删除添加事件

2.2 提示是否删除

2.3 写controller(顺序没关系根据提示往下新建方法)

2.3 写service及其impl,dao,mapper

删除功能完成
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SpringBoot是一款以简化开发的方式来构建Java应用程序的框架,它提供了许多开箱即用的特性和便捷的配置方式。Thymeleaf是一个用于处理服务器端渲染的模板引擎,可以将动态数据注入到HTML模板中。SSM是指Spring+SpringMVC+MyBatis的组合,是一套经典的Java Web开发框架。Vue.js是一款用于构建用户界面的渐进式框架,可以实现前端的组件化开发和数据驱动视图更新。 要实现简单的增删查功能,可以按照以下步骤进行: 1. 首先,使用SpringBoot创建一个新的项目,并引入Thymeleaf、SSM和Vue.js相关的依赖。 2. 创建一个数据库表,用于存储需要进行增删查操作的数据。可以使用MySQL等关系型数据库。 3. 在SpringBoot的配置文件中配置数据库连接信息,并创建对应的数据源和事务管理器。 4. 创建实体类,在实体类中定义需要操作的属性和对应的数据字段。 5. 创建MyBatis的Mapper接口和对应的XML文件,用于定义数据库操作的SQL语句。 6. 在SpringBoot的配置类中配置MyBatis相关的扫描和注入。 7. 创建控制器类,处理前端请求。 8. 在控制器类中定义增删查的方法,并调用对应的Mapper接口执行数据库操作。 9. 创建前端页面,使用Vue.js来实现数据的展示和交互。 10. 在前端页面中绑定相应的事件和请求,通过HTTP请求调用后端控制器的方法。 11. 在页面中显示查询的数据,并提供相应的操作按钮,通过绑定事件来实现增删的功能。 12. 启动项目,通过浏览器访问前端页面,即可进行增删查的操作。 以上是一个基本的步骤,具体的实现会涉及到很多细节,需要根据具体的需求和技术选型来进行调整和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值