基于maven+ssm的增删改查之前后端之间使用json进行交互（显示员工信息）

接上一节。

首先是在EmployeeController.java中，新建一个返回json数据的方法，注销掉原有的getEmps方法。

EmployeeController.java

package com.gong.curd.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.gong.curd.bean.Employee;
import com.gong.curd.service.EmployeeService;
import com.gong.curd.utils.Msg;

@Controller
public class EmployeeController {

    @Autowired
    EmployeeService employeeService;

    @ResponseBody
    @RequestMapping("/emps")
    public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue="1") Integer pn) {
        PageHelper.startPage(pn,5);
        List<Employee> emps = employeeService.getAll();
        PageInfo<Employee> page = new PageInfo<Employee>(emps,5);
        return Msg.success().add("pageInfo",page);
    }

    /*
    @RequestMapping("/emps")
    public String getEmps(@RequestParam(value="pn",defaultValue="1") Integer pn,
            Model model) {
        PageHelper.startPage(pn,5);
        List<Employee> emps = employeeService.getAll();
        PageInfo<Employee> page = new PageInfo<Employee>(emps,5);
        model.addAttribute("pageInfo", page);
        return "list";
    }
    */
}

要返回json格式的数据，需要加上@ResponseBody注解。我们利用一个工具类，将所有信息都包装进Msg对象中。在com.gong.curd.utils下新建一个Msg类。

Msg.java

package com.gong.curd.utils;

import java.util.HashMap;
import java.util.Map;

public class Msg {
    //状态码
    private int code;
    //提示信息
    private String msg;
    //返回的用户信息
    private Map<String,Object> extend = new HashMap<String,Object>();

    public static Msg success() {
        Msg result = new Msg();
        result.setCode(100);
        result.setMsg("处理成功");
        return result;
    }
    public static Msg fail() {
        Msg result = new Msg();
        result.setCode(200);
        result.setMsg("处理失败");
        return result;
    }

    public Msg add(String key,Object value) {
        this.getExtend().put(key, value);
        return this;
    }

    public int getCode() {
        return code;
    }
    public void setCode(int code) {
        this.code = code;
    }
    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    public Map<String, Object> getExtend() {
        return extend;
    }
    public void setExtend(Map<String, Object> extend) {
        this.extend = extend;
    }

}

Msg有状态码、提示信息以及用于添加相关信息的extend属性。

然后在index.jsp同级目录下新建index2.jsp，将原来index.jsp中的数据剪贴过去，然后我们再对index.jsp进行操作。

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工列表</title>
<%
    pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
</head>
<body>
    <div class="container">
        <!-- 标题 -->
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CURD</h1>
            </div>
        </div>
        <!-- 按钮-->
        <div class="row">
            <div class="col-md-4 col-md-offset-10">
                <button class="btn btn-primary">新增</button>
                <button class="btn btn-danger">删除</button>
            </div>
        </div>
        <!-- 表格 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover" id="emps_tables">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>epmName</th>
                            <th>gender</th>
                            <th>email</th>
                            <th>deptName</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6" id="page_info_area">
            </div>
            <div class="col-md-6" id="page_nav_area">
            </div>
        </div>
    </div>
    <script type="text/javascript" src="${APP_PATH}/static/myjs/list.js" ></script>
</body>
</html>

我们将原本list.jsp中的内容复制出来，并去掉原有的提取信息的语句，改为利用ajax请求来解析数据。注意标为橙色的地方，是我们所需要的。

在static下新建一个myjs文件夹，myjs文件夹里新建一个list.js

list.js

var totalRecord,currentNum;
//页面加载完成以后，直接发送ajax请求，要到分页数据
$(function(){
    to_page(1);
});

function to_page(pn){
    $.ajax({
        url:"/curd_ssm/emps",
        data:"pn="+pn,
        type:"GET",
        success:function(result){
            console.log(result);
            build_emps_table(result);
            build_page_info(result);
            build_page_nav(result);
        }
    });
}
//员工信息
function build_emps_table(result){
    $("#emps_tables tbody").empty();
    var emps = result.extend.pageInfo.list;
    $.each(emps,function(index,item){
        //var checkboxTd = $("<td><input type=‘checkbox‘ class=‘check_item‘/></td>");
        var empIdTd = $("<td></td>").append(item.empId);
        var empNameTd = $("<td></td>").append(item.empName);
        var genderTd = $("<td></td>").append(item.gender == "M"?"男":"女");
        var emailTd = $("<td></td>").append(item.email);
        var deptNameTd = $("<td></td>").append(item.dept.deptName);
        var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                                            .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                            .append("编辑");
        //添加一个自定义的属性，表示当前员工id
        //editBtn.attr("edit-id", item.empId)
        var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                                        .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
                                        .append("删除");
        //delBtn.attr("del-id", item.empId)
        var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
        //alert(item.empName);
        $("<tr></tr>")//.append(checkboxTd)
            .append(empIdTd)
            .append(empNameTd)
            .append(genderTd)
            .append(emailTd)
            .append(deptNameTd)
            .append(btnTd)
            .appendTo("#emps_tables tbody");
    });
}

//分页信息
function build_page_info(result){
    $("#page_info_area").empty();
    $("#page_info_area").append("当前"+result.extend.pageInfo.pageNum+"页"+",",
                                "总"+result.extend.pageInfo.pages+"页"+",",
                                "总"+result.extend.pageInfo.total+"条记录");
    totalRecord = result.extend.pageInfo.total;
    currentNum = result.extend.pageInfo.pageNum;
}

//分页栏
function build_page_nav(result){
    $("#page_nav_area").empty();
    var ul = $("<ul></ul>").addClass("pagination");
    var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
    var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
    if(result.extend.pageInfo.hasPreviousPage == false){
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }else{
            firstPageLi.click(function(){
                to_page(1);
            });
            prePageLi.click(function(){
                to_page(result.extend.pageInfo.pageNum-1);
            });

            }
    var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
    var lastPageLi = $("<li></li>").append($("<a></a>").append("尾页").attr("href","#"));
    if(result.extend.pageInfo.hasNextPage == false){
        nextPageLi.addClass("disabled");
        lastPageLi.addClass("disabled");
    }else{
        nextPageLi.click(function(){
            to_page(result.extend.pageInfo.pageNum+1);
            });
        lastPageLi.click(function(){
            to_page(result.extend.pageInfo.pages);
            });
    }
    ul.append(firstPageLi).append(prePageLi);
    $.each(result.extend.pageInfo.navigatepageNums,function(index,item){

        var numLi = $("<li></li>").append($("<a></a>").append(item));
        if(result.extend.pageInfo.pageNum == item){
                numLi.addClass("active");
            }
        numLi.click(function(){
            to_page(item);
         });
        ul.append(numLi)
    });
    ul.append(nextPageLi).append(lastPageLi);
    var navEle = $("<nav></nav>").append(ul);
    navEle.appendTo("#page_nav_area");
}

主要是如何构建出相应的页面以及分页时候的一些逻辑处理，参考前几节所述。

为了避免点击首页或末页时造成的页面不正常，在mybatis-config配置文件中，对PageHelper插件加上：

<property name="reasonable" value="true"/>

最后启动服务器：

同样可以达到之前的效果。下一节将进行增加员工的操作。

原文地址：https://www.cnblogs.com/xiximayou/p/12237524.html

时间： 2024-07-31 09:17:41

基于maven+ssm的增删改查之前后端之间使用json进行交互（显示员工信息）的相关文章

基于maven+ssm的增删改查之批量删除

首先将之前的删除单个的eq(1)改为eq(2),因为我们新增了一个多选项. 然后是在delete.js中加入: //点击全部删除,就批量删除 $("#emp_delete_all_btn").click(function(){ var empNames = ""; var del_idstr = ""; //遍历选中的,获取其姓名和id $.each($(".check_item:checked"),function(){ /

基于maven+ssm的增删改查之spring+springmvc+mybatis环境搭建

接上一节. 1.首先建立如下目录说明: com.gong.curd.bean:用于存放普通javabean. com.gong.curd.dao:用于存放mapper接口 com.gong.curd.controller:用于存放控制器 com.gong.curd.service:用于存放业务层接口 com.gong.curd.serviceImpl:用于存放service接口的实现类 com.gong.curd.utils:用于存放通用的工具类 com.gong.curd.test:用于测试

基于maven+ssm的增删改查之测试相关ssm环境是否成功

接上一节. 1.首先我们在com.gong.curd.controller中新建EmployeeController.java(我们使用分页技术) package com.gong.curd.controller; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import

基于maven+ssm的增删改查之maven环境的搭建

1.Maven插件的设置: Window->Preferences->Maven (1)installations : 指定Maven核心程序的位置.默认是插件自带的Maven程序,可以改为我们自己解压的那个. 点击add: 选择自己解压的maven的位置,点击finish.选择自己刚刚加入的: 点击apply--Apply and Close. (2)user settings : 指定Maven核心程序中 conf/settings.xml 文件的位置,进而获取本地仓库的位置. 选择我们自

基于maven+ssm的增删改查之使用mybatis逆向工程生成相关文件

接上一节. 1.mybatis逆向工程相关文件配置 generatorConfig.xml(8条) (1)使用classPathEntry指定Mysql驱动的位置. (2)去掉生成文件中的注释 (3)数据库连接配置 (4)类型解析 (5)javabean生成的位置.mapper接口的位置.mapper.xml文件的位置 (6)指定数据库中的表以及映射成的javabean的名称 <?xml version="1.0" encoding="UTF-8"?>

基于maven+ssm的增删改查之关于ajax验证用户是否存在存在的问题

接上一节. 虽然基本完成了验证功能,但是,仍然存在一些问题,比如: 虽然用户名可用,但是这是不合法的,这种情况就不行. 我们需要修改两处,一是EmployeeController.java //检查用户名是否可用 @ResponseBody @RequestMapping("/checkuser") public Msg checkUser(String empName) { String regx = "(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\

基于maven+ssm的增删改查之修改员工信息

具体流程:点击编辑按钮,弹出编辑模态框,同时会发送ajax请求获取员工和部门信息并显示在相关位置.在模态框中修改相关信息,发送ajax请求进行保存. 获取部门信息之前已经有了,现在是获取员工信息. EmployeeController.java //查询员工信息 @ResponseBody @RequestMapping(value="/emp/{id}",method=RequestMethod.GET) public Msg getEmp(@PathVariable("i

bootstrap+Ajax+SSM(maven搭建)实现增删改查

https://www.jianshu.com/p/d76316b48e3e 源码: https://github.com/Ching-Lee/crud 功能点: 分页数据校验 ajax Rest风格的URI:使用HTTP协议请求方式的动词,来表示对资源的操作(GET(查询),POST(新增),PUT(修改),DELETE(删除)) 技术点基础框架-ssm 数据库mysql 前端框架-bootstrap 项目依赖 -Maven 分页 -pagehelper 逆向工程-Mybatis Gene

idea+spring4+springmvc+mybatis+maven实现简单增删改查CRUD

在学习spring4+springmvc+mybatis的ssm框架,idea整合简单实现增删改查功能,在这里记录一下. 原文在这里:https://my.oschina.net/finchxu/blog/3007984 工作环境: Windows 10 jdk8(1.8) IntelliJ IDEA spring 4 和 springMVC MySQL 5.7 maven 3.3 mybatis 3.4 DBCP Tomcat 8.5 项目上传到了Github方便查看:https://gith