springboot框架用户信息的增删改

来源:互联网 发布:qq飞车b车 大黄蜂数据 编辑:程序博客网 时间:2024/06/05 11:48

       基于springboot框架的前后台数据交互显示

       主要实现在前台html页面对数据库进行增删改的操作,通过在前台修改用户的信息,保存到后台数据库,同时,将更新后的信息从数据库进行读取。
       今天这篇博客是对我前面的一个信息修改功能进行完善。代码相对前面的一篇博客更加简洁。

       项目目录结构图如下所示。

目录结构

1 前台html页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns:th="http://www.thymeleaf.org"      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" xmlns:float="http://www.w3.org/1999/xhtml"><head>    <meta charset="UTF-8"/>    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>    <link rel="stylesheet" type="text/css" href="easyui/demo/demo.css"/>    <script type="text/javascript" src="easyui/jquery.min.js"></script>    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>    <script type="text/javascript" src="easyui/easyui-lang-zh_CN.js"></script>    <script type="text/javascript" src="js1/manageruser.js"></script></head><body><div class="easyui-layout" data-options="fit:true">    <div data-options="region:'north'" style="width: 100%;height: 9%">    </div>    <div data-options="region:'center',title:'用户列表'">        <table id="datagrid"  class="easyui-datagrid" style="width:100%;height:100%"               url="/stuinforlist"               toolbar="#dgtoolbar" pagination="true"               pageSize="25"    pageList="[25,15,10]"               rownumbers="false" fitColumns="true" singleSelect="true" >            <thead>            <tr>                <th data-options="field:'sno',align:'center',width:'9%'">工号</th>                <th data-options="field:'sname',align:'center',width:'9%'">姓名</th>                <th data-options="field:'password',align:'center',width:'9%'">密码</th>                <th data-options="field:'tno',align:'center',width:'11%'">课程号</th>                <th data-options="field:'tname',align:'center',width:'9%'">课程名</th>                <th data-options="field:'tgrade',align:'center',width:'9%'">成绩</th>            </tr>            </thead>        </table>        <div id="dgtoolbar">            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUsers()">添加用户</a>            <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="removeUsers()">删除用户</a>            <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="editUsers()">修改信息</a>        </div>    </div></div><!--</div>--><div id="modifydg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"     closed="true" buttons="#modifydg-buttons">    <div class="ftitle">用户信息</div>    <form id="fim" method="post" >        <div class="fitem">            <label>学号:</label>            <input name="sno" class="easyui-validatebox" required="true" />        </div>        <div class="fitem">            <label>姓名:</label>            <input name="sname" class="easyui-validatebox" required="true" />        </div>        <div class="fitem">            <label>密码:</label>            <input name="password" class="easyui-validatebox" required="true" />        </div>        <div class="fitem">            <label>课程号:</label>            <input name="tno" class="easyui-validatebox" required="true" />        </div>        <div class="fitem">            <label>课程名:</label>            <input name="tname" class="easyui-validatebox" required="true" />        </div>        <div class="fitem">            <label>课程成绩:</label>            <input name="tgrade" class="easyui-validatebox" required="true" />        </div>    </form></div><div id="modifydg-buttons">            <a href="#" class="easyui-linkbutton"  onclick="saveUsers()">保存</a>            <a href="#" class="easyui-linkbutton"  onclick="javascript:$('#modifydg').dialog('close')">取消</a></div><div id="adddg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"     closed="true" buttons="#adddg-buttons">    <div class="ftitle">用户信息</div>    <form id="fam" method="post" >        <div class="fitem">            <label>学号:</label>            <input name="sno" class="easyui-validatebox" required="true" />        </div>        <div class="fitem">            <label>姓名:</label>            <input name="sname" class="easyui-validatebox" required="true" />        </div>        <div class="fitem">            <label>密码:</label>            <input name="password" class="easyui-validatebox" required="true" />        </div>        <div class="fitem">            <label>课程号:</label>            <input name="tno" class="easyui-validatebox" required="true" />        </div>        <div class="fitem">            <label>课程名:</label>            <input name="tname" class="easyui-validatebox" required="true" />        </div>        <div class="fitem">            <label>课程成绩:</label>            <input name="tgrade" class="easyui-validatebox" required="true" />        </div>    </form></div><div id="adddg-buttons">    <a href="#" class="easyui-linkbutton"  onclick="addUsers()">添加</a>    <a href="#" class="easyui-linkbutton"  onclick="javascript:$('#adddg').dialog('close')">取消</a></div></body></html>

2 mapper层代码

       首先你要保证数据库能够连接成功。在建立实体类的时候,默认的构造方法不能够省略,因为省略报错了。

package test.mapper;import org.apache.ibatis.annotations.*;import org.springframework.stereotype.Component;import test.entity.Stu;import java.util.List;@Componentpublic interface Common {    //登陆成功后查询用户的学号    @Select("select sno from stu where sno=#{sno} and password=#{password}")    public String getsno(@Param("sno") String sno,@Param("password") String password);    //登陆成功后查询用户的姓名    @Select("select sname from stu where sno=#{sno} and password=#{password}")    public String login(@Param("sno") String sno,@Param("password") String password);    //登陆成功后查询用户的所有信息    @Select("select id,sno,sname from stu where sno=#{sno}")    public List<Stu> userinfor(@Param("sno") String sno);    //用户表中数据记录数    @Select("select count(*) from stu")    public int gettstunumber( );    //分页展示    @Select("select * from stu limit #{startRecord},#{pageSize}")    public List<Stu> stuinfo(@Param("startRecord")int startRecord,@Param("pageSize")int pageSize);    @Insert("insert into stu (sno,sname,password,tno,tname,tgrade) values(#{sno},#{sname},#{password},#{tno},#{tname},#{tgrade})")    public void addusers(@Param("sno") String sno,@Param("sname") String sname,@Param("password") String password,@Param("tno") String tno,@Param("tname") String tname,@Param("tgrade") String tgrade);    @Update("update stu set sno=#{sno},sname=#{sname},password=#{password},tno=#{tno},tname=#{tname},tgrade=#{tgrade} where id=#{id}")    public void updateusers(@Param("id") Integer id,@Param("sno") String sno,@Param("sname") String sname,@Param("password") String password,@Param("tno") String tno,@Param("tname") String tname,@Param("tgrade") String tgrade);    @Delete("DELETE FROM stu WHERE id = #{id}")    public void removeUsers(@Param("id") Integer id);}

3 Service层代码

package test.service;import org.apache.ibatis.annotations.Param;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import test.entity.Stu;import test.mapper.Common;import java.util.List;@Servicepublic class CommonService {    @Autowired    public Common commonmapper;    public String getsno(String sno,String password){        return commonmapper.getsno(sno, password);    }    public String login(String sno, String password){        return commonmapper.login(sno, password);    }    public List<Stu> userinfor(String sno){        return commonmapper.userinfor(sno);    }    public int gettstunumber( ){        return commonmapper.gettstunumber();    }    public List<Stu> stuinfo(int startRecord,int pageSize){        return commonmapper.stuinfo(startRecord, pageSize);    }    public void addusers(String sno,String sname,String password,String tno,String tname,String tgrade){        commonmapper.addusers(sno, sname, password, tno, tname, tgrade);    }    public void updateusers(Integer id,String sno,String sname,String password,String tno,String tname,String tgrade){        commonmapper.updateusers(id,sno, sname, password, tno, tname, tgrade);    }    public void removeUsers(Integer id){        commonmapper.removeUsers(id);    }}

4 Controller层代码

/*       用户信息列表    */    @PostMapping(value = "/stuinforlist")    @ResponseBody    public Map getStuinforList(HttpServletRequest request){        int page=Integer.parseInt(request.getParameter("page"));        int pageSzie=Integer.parseInt(request.getParameter("rows"));//pageSzie        int startRecord=(page-1)*pageSzie+1;        int total=commonservice.gettstunumber();        List<Stu>  stuinforlist=commonservice.stuinfo(startRecord,pageSzie);        Map resultMap=new HashMap();        resultMap.put("total",total-1);        resultMap.put("rows",stuinforlist);        return resultMap;    }    /*    进入用户信息界面    */    @GetMapping(value="/info")    public String stuinfor(){        return "/common/information";    }    @PostMapping(value="/save_users")//保存新增用户和修改的用户信息    @ResponseBody    public Map<String,String> saveUsers(@RequestParam(value="id",required = false, defaultValue = "0") Integer id,                                        @RequestParam("sno") String sno,                                        @RequestParam("sname") String sname,                                        @RequestParam("password") String password,                                        @RequestParam("tno") String tno,                                        @RequestParam("tname") String tname,                                        @RequestParam("tgrade") String tgrade,HttpSession session){        Map<String,String> map=new HashMap<>();        //前面登陆用户信息的时候进行了id的session的绑定        if(session.getAttribute("id").equals(id)){            map.put("msg","违法操作!不能修改自己的信息!");            return map;        }        try{            if(id==0){                commonservice.addusers(sno,sname,password,tno,tname,tgrade);            }else{                commonservice.updateusers(id,sno,sname,password,tno,tname,tgrade);            }            map.put("success","true");        }catch (Exception e){            e.printStackTrace();            map.put("msg","请核对信息确保登录名唯一");        }        return map;    }    @PostMapping(value = "/remove_users")//删除用户    @ResponseBody    public Map<String,String> removeUsers(@RequestParam("id") Integer id,HttpSession session){        Map<String,String> result = new HashMap<>();        if(session.getAttribute("id").equals(id)){            result.put("msg","违法操作!不能删除自己!");            return result;        }        try{            commonservice.removeUsers(id);            result.put("success","true");            System.out.println("删除Id: "+id);        }catch(Exception e) {            e.printStackTrace();            result.put("msg","Some errors occured.");        }        return result;    }

5 js文件代码

//添加新用户function newUsers(){    //添加用户对话框    $('#adddg').dialog('open').dialog('setTitle','添加用户');    //数据清空    $('#fam').form('clear');}//用户信息修改function editUsers(){    //选中某一行    var row = $('#datagrid').datagrid('getSelected');    if (row){        $('#modifydg').dialog('open').dialog('setTitle','修改信息');        //显示未修改前的用户信息        $('#fim').form('load',row);    }}//信息保存按钮事件function saveUsers(){    var row = $('#datagrid').datagrid('getSelected');    var add;    if(row==null){        add="/save_users?id=0";    } else{        add="/save_users?id="+row.id;    }    $('#fim').form('submit',{        url: add,        onSubmit: function(){            return $(this).form('validate');        },        success: function(result){            var result = eval('('+result+')');            if (result.success){                $('#modifydg').dialog('close');        // close the dialog                $('#datagrid').datagrid('reload'); // reload the user data                $.messager.show({                    title: 'Success',                    msg: '保存成功'                });            } else {                $.messager.show({                    title: 'Error',                    msg: result.msg                });            }        }    });}//用户信息添加按钮事件function addUsers(){    var add="/save_users?id=0";    $('#fam').form('submit',{        url: add,        onSubmit: function(){            return $(this).form('validate');        },        success: function(result){            var result = eval('('+result+')');            if (result.success){                $('#adddg').dialog('close');       // close the dialog                $('#datagrid').datagrid('reload'); // reload the user data                $.messager.show({                    title: 'Success',                    msg: '添加成功'                });            } else {                $.messager.show({                    title: 'Error',                    msg: result.msg                });            }        }    });}//用户删除按钮事件function removeUsers(){    var row = $('#datagrid').datagrid('getSelected');    if (row){        $.messager.confirm('Confirm','确定要删除该用户?',function(r){            if (r){                $.post('remove_users',{id:row.id},function(result){                    if (result.success){                        $('#datagrid').datagrid('reload'); // reload the user data                        $.messager.show({                            title: 'Success',                            msg: '删除成功'                        });                    } else {                        $.messager.show({  // show error message                            title: 'Error',                            msg: result.msg                        });                    }                },'json');            }        });    }}

6 测试截图

       没添加177用户前数据库中有以下29条数据,添加177用户后共30条数据。用户信息修改前后截图如下:

插入177用户信息前截图:
这里写图片描述

插入177用户信息后截图:

这里写图片描述

       用户信息插入成功与否,右下角会显示一个插入成功与失败的dialog。

       177用户信息修改后如下图所示:

这里写图片描述

       177用户信息删除后如下图所示:

这里写图片描述

完整代码码云地址链接:https://gitee.com/AssasinLong/First

最后谢谢以下两位git的操作使用,弄了半天才把代码放到码云上
https://www.cnblogs.com/leaf930814/p/6664706.html

http://blog.csdn.net/u014040650/article/details/52176600

原创粉丝点击