智能供销系统_2

时间 2019-11-29

标签智能供销系统繁體版

原文原文链接

今日目标:javascript

完成表单的增删改

# 一.删除功能

    1.拿到要删除的是哪条数据(没有选择，给出提示)
    2.若是有选择,给出肯定选择(真的要删除嘛)
    3.传id到后台进行删除
        删除成功 -> 刷新页面
        删除失败 -> 给出提示
    后台回了一个：JsonResult(boolean success,String msg)css

del(){
            //1.获取到选中的那一行数据
            let row = employeeGrid.datagrid("getSelected");
            //2.若是没有选中，给出提示，后面的代码就再也不执行了
            if(!row){
                $.messager.alert('警告','没选中，删个鬼啊！',"warning");
                return ;
            }
            //3.若是选中,肯定是否要执行删除
            $.messager.confirm('确认','您确认想要删除记录吗？',function(r){
                if (r){
                    //4.若是肯定删除,把id传到后台,后台删除数据
                    $.get("/employee/delete",{id:row.id},function (result) {
                        //5.后台会返回 {success:true/false,msg:xxx}
                        //6.后台返回true:刷新数据  / 后台返回false:提示错误信息
                        if(result.success){
                            employeeGrid.datagrid("reload");
                        }else{
                            $.messager.alert('错误',`失败了，打我啊！ 缘由是:${result.msg}`,"error");
                        }
                    })

                }
            });

        },

# 二.添加功能

## 1 准备弹出框
EditDialog -> form （居中,模态,form清空）
## 2 完成验证
- 自带验证(必填,邮件)html

<input class="easyui-validatebox" type="text" name="email"
       data-options="required:true,validType:'email'"></input>

- 扩展的js(数字,数字范围,密码判断)
- 引入验证的代码
```
<%--验证扩展的样式与js引入--%>
java

<link rel="stylesheet" type="text/css" href="/easyui/plugin/validatebox/jeasyui.extensions.validatebox.css">
<script src="/easyui/plugin/validatebox/jeasyui.extensions.validatebox.rules.js"></script>

- 验证完成的代码
```jquery

<input class="easyui-validatebox" type="text" name="age"
data-options="validType:'integerRange[18,80]'"></input>

 <tr data-save="true">
    <td>密码:</td>
    <td><input id="password" class="easyui-validatebox" type="password" name="password" data-options="required:true"></input></td>
</tr>
<tr data-save="true">
    <td>确认密码:</td>
    <td>
        <input class="easyui-validatebox" type="password" name="confirmPassword"
               validType="equals['password','id']"
               data-options="required:true"></input></td>
</tr>

```chrome

- 自定义验证
```
//定义咱们本身的规则(验证重复)数据库

$.extend($.fn.validatebox.defaults.rules, {
    checkName: {
        //验证规则  value:表单中的值  params:规则中传过来的值(数组形式)
        validator: function(value, param){
            //拿到相应的id
            var employeeId = $("#employeeId").val();
            //使用同步的方式进行查询
            var isSuccess = $.util.requestAjaxBoolean('/employee/checkUsername',
                {id:employeeId,username:value});
            //使用同步的方式进行Ajax请求
           return isSuccess;
        },
        //验证失败的提示
        message: '用户名已经被占用!'
    }
});

```数组

# 三.修改功能安全

## 用户名验证传了id
> 后台获取id，根据id拿到对应用户，若是数据库的用户名称和传过来的名称相应，直接返回true,表明这个名字是能够用的app

## 修改的时候没有密码
- 添加时显示密码,而且把它启用

```
//把全部带 data-save属性的元素显示起来
$("*[data-save]").show();
//把对应的元素启用
$("*[data-save] input").validatebox("enable")
```

- 修改时隐藏密码，而且把它禁用
```
//把全部带 data-save属性的元素隐藏起来
$("*[data-save]").hide();
//对应的元素禁用(这个值就不会提交到后台)
$("*[data-save] input").validatebox("disable");
```

- 修改回显
```
// 关连对象回显须要作的操做
if(row.department){
row["department.id"] = row.department.id;
}
//进行数据的回显(在清空后面)
employeeForm.form("load",row);
```

## 数据丢失(动态修改)

> 三种解决方案(隐藏域,SQL不修改,先到数据库查)

方案一：隐藏要传递的值（只隐藏，可是数据仍是须要传递，这和第一个项目是同相同的方案）

这个方案的优势是简单易理解，缺点是若是字段过多，代码量会比较大，另外这种方案的安全性确实是有一些低！

方案二：在JPA的相应字段上加标签：

@Column(updatable = false)

private String password;

这个方案也比较简单，可是若是你须要修改这个字段的时候就比较麻烦！

方案三：先查询数据库，获取持久状态的对象，而后把页面的数据set到对象里面

(这种方案也是用得比较多的一种方案)

Employee tempEmployee = employeeService.get(employee.getId());

//须要修改的值就从页面里面的employee放入tempEmployee

tempEmployee.setUsername(employee.getUsername());

employeeService.save(tempEmployee);

>> @ModelAttribute : 在路径访问这个方法的时候会先执行它
>>> 解决n-to-n的问题
>>>> 添加:/employee/save 修改：/employee/update?cmd=update
```

@ModelAttribute("editEmployee")
    public Employee beforeEdit(Long id,String cmd){
        //修改的时候才查询(只要有id会就进行一次查询,这是不对的)
        if(id!=null && "update".equals(cmd)) {
            Employee dbEmp = employeeService.findOne(id);
            //把要传过来的关联对象都清空，就能够解决n-to-n的问题
            dbEmp.setDepartment(null);
            return dbEmp;
        }
        return null;
    }

    //这里的ModelAttribute和上面的名称是对应上的

@RequestMapping("/update")
    @ResponseBody
    public JsonResult update(@ModelAttribute("editEmployee")Employee employee){
        return saveOrUpdate(employee);
    }

```

扩展功能

右键支持增删改

Employee.jsp

<table id="employeeGrid" class="easyui-datagrid" data-options="fit:true,fixed:true,fitColumns:true,toolbar:'#tb',singleSelect:true,onRowContextMenu:showMenu"
      ...
    >
    <thead>
   ...
</table>
...
<div id="gridMenu" class="easyui-menu" style="width:120px;">
    <div data-options="iconCls:'icon-add'"  data-method="add" >添加</div>
    <div data-options="iconCls:'icon-edit'"  data-method="edit">修改</div>
    <div data-options="iconCls:'icon-remove'" data-method="del">删除</div>
</div>

Employee.js

function showMenu(e, rowIndex, rowData) {
    //选中这个行
    $("#employeeGrid").datagrid("selectRow",rowIndex);
    //第0个位置的面板不支持相应功能
    e.preventDefault();
    $('#gridMenu').menu('show', {
        left: e.pageX,
        top: e.pageY
    });
}

扩展功能2

3d滚动首页

网上搜索;

<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页展现</title>
    <link rel="stylesheet" href="css/style.css">


</head>
<body>
<div id="trans3DDemo1" >
    <div id="trans3DBoxes1" style="align-self: auto">
        <div class="a1">项目管理</div>
        <div class="a2">员工管理</div>
        <div class="a3">采购管理</div>
        <div class="a4">权限管理</div>
        <div class="a5">总经理选项</div>
        <div class="a6">待添加.</div>
    </div>
</div>

<script src="js/jquery-1.11.0.min.js"></script>
<script src='js/TweenMax.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>

</body>
</html>