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
阅读全文
0 0
- springboot框架用户信息的增删改
- springBoot+swagger+mybatis 常用的增删改
- springboot对于redis的增删改查
- 基于springboot的框架搭建(2)统一配置mybatis的增删改方法
- AngularJS实现对用户信息的增删改查
- AngularJS实现对用户信息的增删改查
- AngularJS实现对用户信息的增删改查
- angular简单用户信息表的增删改查部分功能
- springboot增删改查 IDEA
- Springboot 之 JPA对Mysql数据库的增删改查
- Springboot基础篇(二) 简单的增删改查
- SpringBoot整合Mybatis实现增删改查的功能
- YII框架数据库的增删改查
- 框架集成hibernate的增删改查
- Yii框架的增删改查
- 基于easyui框架的增删改查
- YII框架数据库的增删改查
- YII框架数据库的增删改查
- 单例模式与工厂方法模式
- 游戏人生
- 白话C++系列(const再现江湖)
- 数据结构实验之排序一:一趟快排
- java网络图片抓取及其引发的相关问题
- springboot框架用户信息的增删改
- Android RecyclerView的使用(三)——瀑布流的实现
- Unity3D
- poi导出EXCEL经典实现()
- Javaweb中最简单的文件上传
- 创建制定表空间和有空间大小的表
- CSS样式之overflow属性
- 问题:Tomcat环境配置好后,在命令行内运行 startup 显示 不是内部命令
- Tim