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

标签: MVC EasyUi Ajax
11人阅读 评论(0) 收藏 举报
分类:

前言:前面有写过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


查看评论

SpringBoot

让你快速掌握SpringBoot框架核心知识点!
  • 2018年04月12日 22:12

springboot ajax请求数据

springboot ajax请求数据
  • qq_37531990
  • qq_37531990
  • 2017-11-20 17:51:28
  • 202

springboot + mybatis +easyUI整合案例

springboot推荐使用的是JPA,但是因为JPA比较复杂,如果业务场景复杂,例如企业应用中的统计等需求,使用JPA不如mybatis理想,原始sql调优会比较简单方便,所以我们的项目中还是使用的...
  • findhappy117
  • findhappy117
  • 2018-02-14 11:00:23
  • 152

springboot+easyui+mybatis实现数据库信息增删改

基于springboot框架的前后台数据交互显示        主要实现在前台html页面对数据库进行增删改的操作,通过在前台修改用户的信息,保存到后台数据库,同时,将更新后的信息从数据库进行读取。...
  • wilson_m
  • wilson_m
  • 2017-12-15 17:38:11
  • 466

springboot+mybatis+easyui 整合管理系统后台

  • 2017年09月03日 21:00
  • 8.66MB
  • 下载

SpringBoot+MyBatis+Mysql+Easyui+Ajax实现CURD实例

  • 2018年04月16日 11:18
  • 1.46MB
  • 下载

springboot+mybatis+easyui 前台实现数据库信息的增删改操作

前台展示详细信息的增删改操作         本次的内容承接上次博客的后续。前驱博客链接: http://blog.csdn.net/wilson_m/article/details/788645...
  • wilson_m
  • wilson_m
  • 2017-12-25 17:01:25
  • 203

[一站式服务]Spring MVC实现简单CURD项目

前言 一个简单的网页CURD系统,用上了从来没用多的Spring MVC框架,一路走来,收获了很多,在这里记录下来分享给大家!...
  • jptiancai
  • jptiancai
  • 2014-04-28 15:21:23
  • 3255

mongodb的CURD操作简单整理

最近有机会接触了mongodb这个NoSQL数据库,这里简单整理一下mongodb的增删改查 1. insert方法1.1 insertOnedb.users.insertOne({ { ...
  • sevenlater
  • sevenlater
  • 2016-08-09 16:25:57
  • 822

SpringMVC Restful风格的CURD

什么是RestfulRestful风格的API是一种软件架构风格,设计风格而不是标准,只是提供了一组设计原则和约束条件。它主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次...
  • sunming709424
  • sunming709424
  • 2017-04-03 17:51:00
  • 1051
    个人资料
    等级:
    访问量: 185
    积分: 92
    排名: 142万+
    文章存档