SpringBoot+MyBatis+Easyui+Ajax+mysql实现CURD

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wu6cfp38/article/details/79958246

前言:前面有写过SpringBoot+MyBatis实现增删改查不加页面的博客,这次结合前段easyui和异步请求ajax实现一个完成的curd.

项目源码带数据库:   https://download.csdn.net/download/wu6cfp38/10351853

1.整合就不细说了,这里主要描述easyui+ajax请求----Controller控制器------返回视图的步骤。

知识点  1:@RestController=@Controller+@ResponseBody

所以在@Controller在头部时:返回的是视图的位置 ---DispatcherServlet是前置控制器是会用到

@RestController返回的是json数据---不会访问DispatcherServlet

         2. @RequestMapping("/getalluser")  对应请求的uri 

        3.   Map resultMap=new HashMap();   实现键值对---对应json数据

       4.String username = request.getParameter("username");   获取前端的请求数据


2.看不到webapp  解决

手动配置Maven项目是,src/main/webapp的文件不全,我们需要在,项目的Properties中点->Project Facets ->Dynamic Web  Moudle 点击下面出现的,后选择src/main/webapp  后应用

3.导入easyu用的文件:


4.配置前段视图的位置和后缀   


5.info.jsp页面的主要代码:

<link rel="stylesheet" type="text/css" href="../static/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/icon.css" />

<script type="text/javascript" src="../static/easyui/jquery.min.js"></script>

<script type="text/javascript" src="../static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../static/easyui/locale/easyui-lang-zh_CN.js" ></script>
<script type="text/javascript" src="../static/js/admin.js" ></script>

其中admin .js是我的js操作文件,增删改查都在这里面实现的。

<table id="box">
</table>
<div id="tb" style="padding:5px;">
   <div style="margin-bottom:5px;">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="obj.add();">添加</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="obj.edit();">修改</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="obj.remove();">删除</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" style="display:none;" id="save" onclick="obj.save();">保存</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-redo" plain="true" style="display:none;" id="redo" onclick="obj.redo();">取消编辑</a>	
   </div>

6.下面看admin.js的内容   使用datagrid   实现表格显示和分页。

详细看我上面给的链接有源码,我就不贴代码了太多,可以补补easyui的datagrid   

其中有通过ajax请求的   增加和修改,删除

$.ajax({
				type : 'POST',
				datatype:"JSON",
				url : url,
				data : rowData,
				beforeSend : function () {
					$('#box').datagrid('loading');
				},	
				  success: function(result){
			            if (result.data){
					    $('#box').datagrid('loaded');
						$('#box').datagrid('load');
						$('#box').datagrid('unselectAll');
						$.messager.show({
							title : '提示',
							width:300,
							height:300,
							msg :  '1个用户被' + info + '成功!',
						});
						obj.editRow = undefined;
					}
					else{
					   $('#box').datagrid('loaded');
						$('#box').datagrid('load');
						$('#box').datagrid('unselectAll');
						$.messager.show({
					
							title : '提示',
							width:300,
							msg : '上个操作未有修改的数据',
						});
								obj.editRow = undefined;
					}
				},
			});

7.前端请求-----到spring根据uri信息-自动查找controller---

贴一个实现所有的用户带分页操作的业务代码,得到前端的page 和rows json返回页面total rows,这是easyui的datagrid必要的回值。

@RequestMapping("/getalluser")
	@ResponseBody
	public Map getalluser(HttpServletRequest request){
    	int page =Integer.parseInt(request.getParameter("page"));
		int pagesize=Integer.parseInt(request.getParameter("rows"));
		System.out.println("1"+page);
		System.out.println("2"+pagesize);
		int startRecord=(page-1)*pagesize+1;
		int total =userservice.getstunumber();
		List<Users> userList=userservice.stuinfo(startRecord,pagesize);
		 Map resultMap=new HashMap();
		 resultMap.put("total", total-1);
		 resultMap.put("rows",userList);
	     return resultMap;
	}

在贴一个实现批量删除的业务代码:

@RequestMapping("deleteuser")
	@ResponseBody
	public Map deleteuser(HttpServletRequest request, HttpServletResponse response) throws Exception{
		String ids = request.getParameter("ids");
		Map resultMap=new HashMap();
		System.out.println(ids);
		  List<Integer>list=new ArrayList<>();
	     String params[] = ids.split(",");//参数jie()
	for (int i = 0; i < params.length; i++) {
	             list.add(Integer.valueOf(params[i]));
	}
	            if(list.size()>0){
	            userservice.deleteByMPrimaryKey(list);
	       	          resultMap.put("data", "true");
				}
	
				else{
					 resultMap.put("data", "false");
				}
				     return resultMap;
	        }

通过传来的ids  值,将分解和组成List,使用sql语句的in  一起删除。返回结果为true 和 false,用于判断是够删除成功。

总结---------------------主要是弄明白怎么在页面和controller层通过json交互信息。



项目源码带数据库:   https://download.csdn.net/download/wu6cfp38/10351853


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页