springboot+easyui+mybatis实现数据库信息增删改
基于springboot框架的前后台数据交互显示
主要实现在前台html页面对数据库进行增删改的操作，通过在前台修改用户的信息，保存到后台数据库，同时，将更新后的信息从数据库进行读取。
今天这篇博客是对我前面的一个信息修改功能进行完善。代码相对前面的一篇博客更加简洁。
项目目录结构图如下所示。
1 前台html页面代码
<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 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;
@Component
public 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 userinfor(@Param("sno") String sno);
//用户表中数据记录数
@Select("select count(*) from stu")
public int gettstunumber( );
//分页展示
@Select("select * from stu limit #{startRecord},#{pageSize}")
public List 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;
@Service
public 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 userinfor(String sno){
return commonmapper.userinfor(sno);
}
public int gettstunumber( ){
return commonmapper.gettstunumber();
}
public List 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