SSM整合篇】八. SSM权限管理系统+权限认证 第三章 增删改操作

其他 2020-01-25 17:12:34 阅读次数: 0

SSM权限管理系统+权限认证 第二章 页面搭建和分页加载所有User

SSM权限管理系统+权限认证 第三章

小目录

  1. 修改userList.html中按钮文字和按钮路径
  2. 在spring-mvc中配置路径映射
  3. 在application/user下创建addUser.html
  4. 在bean中定义返回数据的实体类ResultEntity
  5. controller写addUser方法

1. 完成添加用户

  1. 修改userList.html中按钮文字

  2. 修改userList.html中按钮路径
    在这里插入图片描述

  3. 在spring-mvc中配置路径映射，防止因当前路径导致css，js路径错误。其实就是在controller写一个方法返回页面一样。

    	<!--  指定跳转的页面的页面 path:请求的地址  view-name:跳转的视图名称 	 -->
    <mvc:view-controller path="user/toAddUser" view-name="user/addUser"/>

  4. 引入自己写的一个提交表单的js，放在js下 form-utils

    // 提交表单
function submitForm(url,formId){
    // 1.获取表单参数(对象)
    var param = formToObjct(formId);
    // 2.发送请求
    sendRequest(url,param);
}
/**
 * 给服务端发送请求
 * @param url
 */
function sendRequest(url,param){

    // 3.异步把对象发送给后台
    $.post(url,param,function(data){
        responseClient(data);
    });
}
/**
 * 响应客户
 * @param data
 */
function responseClient(data){
    if(data.status == "ok"){
        layer.msg(data.msg, {
            icon: 1,
            time: 1000 //2秒关闭（如果不配置，默认是3秒）
        }, function(){ // 提示框关闭后调用
            // 关闭对话框
            var index = parent.layer.getFrameIndex(window.name); // 获取框的索引
            parent.layer.close(index); // 关闭框
        });
    }else{
        layer.msg(data.msg, {
            icon: 2,
            time: 1000 //2秒关闭（如果不配置，默认是3秒）
        }, function(){ // 提示框关闭后调用
            // 关闭对话框
//                        var index = parent.layer.getFrameIndex(window.name); // 获取框的索引
//                        parent.layer.close(index); // 关闭框
        });
    }
}
// 把表单对象中的数据封装到一个对象中
function formToObjct(formId){
    // 1.创建一个对象
    var param = new Object();
    // 2.获取到表单的数组对象
    var array = $("#"+formId).serializeArray();
    // 3.遍历数组获取对象中的内容
    for(var i =0;i<array.length;i++){
        var formObj = array[i];
        // 把formObj对象中的属性和value赋值param
        param[formObj.name] = formObj.value;
    }
    // 4.返回对象
    return param;
}

  5. 在application/user下创建addUser.html，将admin2中admin-add.html内容复制进去

  6. 引入thymeleaf.org和写<base>
    在这里插入图片描述

  7. 写添加用户表单提交的函数

    <!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath()+'/'}">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <script type="text/javascript" src="lib/PIE_IE678.js"></script>
    <![endif]-->
    <link href="css/H-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="css/H-ui.admin.css" rel="stylesheet" type="text/css" />
    <link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
    <link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>添加管理员</title>
</head>
<body>
<div class="pd-20">
    <form action="#" method="post" class="form form-horizontal" id="form-user-add">
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>姓名：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value="admin" placeholder="" id="username" name="username"  errormsg="用户名只能为2~16位" datatype="*2-16" nullmsg="用户名不能为空">
            </div>
            <div class="col-4"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>密码：</label>
            <div class="formControls col-5">
                <input type="password" placeholder="密码"  name="password"  id="password" autocomplete="off" value="123456" class="input-text" datatype="*6-20" nullmsg="密码不能为空">
            </div>
            <div class="col-4"> </div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>确认密码：</label>
            <div class="formControls col-5">
                <input type="password" placeholder="密码" name="repassword" id="repassword" recheck="password" autocomplete="off" value="123456" class="input-text" datatype="*6-20" nullmsg="密码不能为空">
            </div>
            <div class="col-4"> </div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>性别：</label>
            <div class="formControls col-5 skin-minimal">
                <div class="radio-box">
                    <input type="radio" value="1" id="sex-1" checked="checked" name="sex" datatype="*" nullmsg="请选择性别！">
                    <label for="sex-1">男</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="sex-2" value="0" name="sex">
                    <label for="sex-2">女</label>
                </div>
            </div>
            <div class="col-4"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>年龄：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value="18" placeholder="" id="age" name="age"  datatype="n1-2" nullmsg="年龄不能为空">
            </div>
            <div class="col-4"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>邮箱：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value="[email protected]" placeholder="@" name="email" id="email" datatype="e" nullmsg="请输入邮箱！">
            </div>
            <div class="col-4"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>生日：</label>
            <div class="formControls col-5">
                <input type="text" value="2020-01-10" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'birthday\')||\'%y-%M-%d\'}'})" name="birthday" id="birthday" class="input-text Wdate" style="width:120px;">
            </div>
            <div class="col-4"> </div>
        </div>

        <div class="row cl">
            <div class="col-9 col-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script>

<!-- 表单校验-->
<script type="text/javascript" src="lib/Validform/5.3.2/Validform.min.js"></script>
<!-- 时间插件-->
<script type="text/javascript" src="/lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script>
<script type="text/javascript" src="js/H-ui.admin.js"></script>
<script type="text/javascript" src="js/form_utils.js"></script>
<script type="text/javascript" >
    $(function(){
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });
        $("#form-user-add").Validform({
            tiptype:2,
            callback:function(form){ // 表单校验通过后调用这个函数
//			debugger
                submitForm("user/addUser","form-user-add")
                // 如果callback里明确return false，则表单不会提交，如果return true或没有return，则会提交表单
                return false;
            }
        });
    });
</script>
</body>
</html>

  8. 在bean写一个返回数据的实体类ResultEntity，以后Controller所有的返回信息都可以封装进去

    package com.wpj.bean;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class ResultEntity<T> {
    private static final String STATUS_SUC = "ok"; // 成功;
    private static final String STATUS_FAIL = "error";// 失败

    private static final String NO_MSG = null;// 失败
    private static final String SUC_MSG  = "操作成功";// 失败
    private static final String FIAL_MSG  = "操作失败";// 失败

    private static final String NO_DATA = null;// 没有数据

    private String status; // 返回处理的结果的一个状态
    private String msg; // 提示信息
    private  T data; // 服务端返回客户端的数据

    /**
     * 成功时调用
     * @return
     */
    public static ResultEntity success(){
        return new ResultEntity(STATUS_SUC,SUC_MSG,NO_DATA);
    }
    /**
     * 失败时调用
     */
    public static  ResultEntity fial(){
        return new ResultEntity(STATUS_FAIL,FIAL_MSG,NO_DATA);
    }
}

  9. controller写addUser方法

    @RequestMapping(value = "/addUser")
@ResponseBody
public ResultEntity addUser(User user) {
	System.out.println("user = [" + user + "]");
	int add = iUserService.add(user);
	
	if (add > 0) {
		return ResultEntity.success();
	} else {
		return ResultEntity.fial();
	}
}

  10. 提交表单

    注意：

    1. 如果直接提交的话会报400请求错误，原因为springmvc默认时间格式为 2020/1/13 记得实体类中Date属性添加 @DateTimeFormat(pattern = “yyyy-MM-dd”)
    2. 如果在提交就会报 org.springframework.http.converter.HttpMessageNotWritableException: No converter found for return value of type: class com.wpj.bean.ResultEntity，这时候需要在spring-mvc中配一个转换器，在配转换器之前需要导依赖。
      <dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-core</artifactId>
	<version>2.9.4</version>
</dependency>
<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-databind</artifactId>
	<version>2.9.4</version>
</dependency>
<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-annotations</artifactId>
	<version>2.9.4</version>
</dependency>

      <bean id="mappingJackson2HttpMessageConverter" class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
        <property name="supportedMediaTypes">
            <list>
                <value>text/html;charset=UTF-8</value>
            </list>
        </property>
</bean>

  11. 添加功能完毕。。。

2. 编辑User

  1. 修改userList.html（去掉停用，修改编辑的title和路径）
    在这里插入图片描述

    <td class="td-manage">
	<a title="编辑" href="javascript:;"  th:onclick="|admin_edit('用户编辑','user/getUserById/${user.id}','1','800','500')|" class="ml-5" style="text-decoration:none">
		<i class="Hui-iconfont">&#xe6df;</i>
	</a>
	<a title="删除" href="javascript:;" onclick="admin_del(this,'1')" class="ml-5" style="text-decoration:none">
		<i class="Hui-iconfont">&#xe6e2;</i>
	</a>
</td>

  2. 写controller（用于数据显示在表单中）

    @RequestMapping("/getUserById/{id}")
public String getUserById(@PathVariable Integer id, ModelMap map) {
	User user = iUserService.getById(id);
	map.put("user", user);
	return "user/updateUser";
}

  3. 从addUser复制创建一个updateUser,修改一下，将写死的值动态生成

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath()+'/'}">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <script type="text/javascript" src="lib/PIE_IE678.js"></script>
    <![endif]-->
    <link href="css/H-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="css/H-ui.admin.css" rel="stylesheet" type="text/css" />
    <link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
    <link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>添加管理员</title>
</head>
<body>
<div class="pd-20">
    <form action="abc" method="post" class="form form-horizontal" id="form-user-update">
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>姓名：</label>
            <div class="formControls col-5">
                <input type="hidden" name="id" th:value="${user.id}">
                <input type="text" class="input-text" th:value="${user.username}" placeholder="" id="username" name="username"  errormsg="用户名只能为2~16位" datatype="*2-16" nullmsg="用户名不能为空">
            </div>
            <div class="col-4"> </div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>性别：</label>
            <div class="formControls col-5 skin-minimal">
                <div class="radio-box">
                    <input type="radio" value="1" id="sex-1" th:checked="${user.sex == 0?true:false}" name="sex" datatype="*" nullmsg="请选择性别！">
                    <label for="sex-1">男</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="sex-2" th:checked="${user.sex == 1?true:false}" value="0" name="sex">
                    <label for="sex-2">女</label>
                </div>
            </div>
            <div class="col-4"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>年龄：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" th:value="${user.age}" placeholder="" id="age" name="age"  datatype="n1-2" nullmsg="年龄不能为空">
            </div>
            <div class="col-4"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>邮箱：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" th:value="${user.email}" placeholder="@" name="email" id="email" datatype="e" nullmsg="请输入邮箱！">
            </div>
            <div class="col-4"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>生日：</label>
            <div class="formControls col-5">
                <input type="text" th:value="${#dates.format(user.birthday,'yyyy-MM-dd')}" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'birthday\')||\'%y-%M-%d\'}'})" name="birthday" id="birthday" class="input-text Wdate" style="width:120px;">
            </div>
            <div class="col-4"> </div>
        </div>

        <div class="row cl">
            <div class="col-9 col-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script>

<!-- 表单校验-->
<script type="text/javascript" src="lib/Validform/5.3.2/Validform.min.js"></script>
<!-- 时间插件-->
<script type="text/javascript" src="/lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script>
<script type="text/javascript" src="js/H-ui.admin.js"></script>
<script type="text/javascript" src="js/form_utils.js"></script>
<script type="text/javascript">
    $(function(){
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        $("#form-user-update").Validform({
            tiptype:2,
            callback:function(form){ // 表单校验通过后调用这个函数

                submitForm("user/updateUser","form-user-update")
//			debugger

                return false;
            }
        });
    });
</script>
</body>
</html>
  1. 在写controller（用于修改数据）
@RequestMapping("/updateUser")
    @ResponseBody
    public ResultEntity updateUser(User user){
        int update = iUserService.update(user);
        if(update > 0){
            return ResultEntity.success();
        }else{
            return ResultEntity.fial();
        }
    }
  1. 在H-ui.admin.js中修改layer_show()函数（修改公共资源记得清理缓存）
    在这里插入图片描述

3. 删除用户

  1. 修改userList的<a> 标签和下方的js，导form-util.js
    <a title="删除" href="javascript:;" th:onclick="|admin_del(${user.id})|"  class="ml-5" style="text-decoration:none">
	<i class="Hui-iconfont">&#xe6e2;</i>
</a>

    //管理员-删除
function admin_del(id){
	layer.confirm('确认要删除吗？',function(index){
		submitForm("user/deleteUserById/"+id, null);
	});
}
  2. 写controller
    @RequestMapping("/deleteUserById/{id}")
@ResponseBody
public ResultEntity deleteUserById(@PathVariable Integer id){
    System.out.println(id);
    int delete = iUserService.delete(id);
    if(delete > 0){
            return ResultEntity.success();
    }else{
        return ResultEntity.fial();
    }
}
  3. 删除功能完成。
杰KaMi
发布了42 篇原创文章 · 获赞 8 · 访问量 2429
私信 关注

猜你喜欢

转载自blog.csdn.net/TheNew_One/article/details/103954393
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022