Java全栈开发---Java ERP系统开发:商业ERP(七)登录与密码管理

登录与密码管理

一、登录与退出

(一)页面的创建于修改

1、管理主界面的构建

(1)在网上找一个后台管理的模板(拷贝到webapp的目录下面)

点击这里下载:
在这里插入图片描述
在这里插入图片描述

(2)访问主界面

在这里插入图片描述

2、登录主界面的构建

(1)在网上找一个后台管理的模板(拷贝到webapp的目录下面)

点击这里下载:
在这里插入图片描述

(2)访问登录界面

在这里插入图片描述

3、修改login.html

在这里插入图片描述

(二)DAO层的实现

1、在接口当中创建对应登录的方法

在这里插入图片描述

2、在实现类当中实现接口的方法,查询对应用户名以及返回对应

在这里插入图片描述

/*
* 用户登录
*/
public Emp findByUsernameAndPwd(String username, String pwd) {String hql = "from Emp where username = ? and pwd = ?";List<Emp> list = (List<Emp>) this.getHibernateTemplate().find(hql, username, pwd);//通过向数据库访问的方式查询对应的内容是否符合//能够匹配上,侧返回第一个元素if (list.size() > 0) {return list.get(0);}//如果登录名或密码不正确return null;
}

(三)业务层的实现

1、在IEmpBiz接口当中

在这里插入图片描述

Emp findByUsernameAndPwd(String username, String pwd);

2、EmpBiz实现类当中

在这里插入图片描述

@Override
public Emp findByUsernameAndPwd(String username, String pwd) {return empDao.findByUsernameAndPwd(username, pwd);
}

(四)Action层的实现

1、在erp_web下面创建一个LoginAction :登录的时候单独创建一个Action

package com.itzheng.erp.action;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.alibaba.fastjson.JSON;
import com.itzheng.erp.biz.IEmpBiz;
import com.itzheng.erp.biz.impl.EmpBiz;
import com.itzheng.erp.entity.Emp;
import com.opensymphony.xwork2.ActionContext;
//登录的时候在创建一个Action 
public class LoginAction {private String username;// 登录用户名private String pwd;// 输入的密码private IEmpBiz empBiz;public IEmpBiz getEmpBiz() {return empBiz;}public void setEmpBiz(IEmpBiz empBiz) {this.empBiz = empBiz;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPwd() {return pwd;}public void setPwd(String pwd) {this.pwd = pwd;}public void checkUser() {// 查询是否存在Emp loginUser = empBiz.findByUsernameAndPwd(username, pwd);if (loginUser != null) {//记录当前登录的用户ActionContext.getContext().getSession().put("loginUser", loginUser);ajaxReturn(true, "用户名或密码正确");} else {ajaxReturn(false, "用户名或密码不正确");}}public void ajaxReturn(boolean success, String message) {Map map = new HashMap();map.put("success", success);map.put("message", message);write(JSON.toJSONString(map));}public void write(String jsonString) {HttpServletResponse response = ServletActionContext.getResponse();response.setCharacterEncoding("UTF-8");try {response.getWriter().print(jsonString);} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}
}

2、配置对应的Action

(1)在struts.xml当中配置

在这里插入图片描述

<!-- 登录/退出 -->
<action name="login_*" class="loginAction" method="{1}"></action>

(2)applicationContext_action.xml
在这里插入图片描述

<!-- 登录、退出 -->
<bean id="loginAction" class="com.itzheng.erp.action.LoginAction" scope="prototype"><property name="empBiz" ref="empBiz"></property>
</bean>

3、运行项目在浏览器上面测试

在这里插入图片描述

(五)登录功能前端的实现

1、在login.html当中引入easyUI的依赖

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2、在login.html当中设置对应的属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Zeo·ERP企业资源管理系统</title>
<link rel="stylesheet" type="text/css" href="css/login.css" />
<link rel="stylesheet" type="text/css"href="ui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="ui/themes/icon.css">
<script type="text/javascript" src="ui/jquery.min.js"></script>
<script type="text/javascript" src="ui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="ui/jquery.serializejson.min.js"></script>
<script type="text/javascript">/**提交登录验证*/function login() {//通过JSON方式提交表单验证var formdata = $('#loginform').serializeJSON();//提交登录验证$.ajax({url : 'login_checkUser',//访问对应的Action对应的方法data : formdata,dataType : 'json',type:'post',success : function(rtn) {//登录成功if (rtn.success) {location.href = "index.html";}else{$.messager.alert('提示', rtn.message, 'info');}}});}
</script>
</head>
<body><div class='signup_container'><div class="w-load"><div class="spin"></div></div><h1 class='signup_title'>Zeo·ERP企业资源管理系统</h1><div id="userInfo"><spanstyle="float: left; margin-left: 40px; height: 200px; border: 0px solid red"><imgsrc='images/erp.jpg' id='admin' /></span> <spanstyle="float: left; margin-left: 40px; height: 200px; border: 0px solid red"><div id="signup_forms" class="signup_forms clearfix"><form class="signup_form_form" id="loginform" method="post"><div class="form_row first_row"><label for="signup_email">请输入用户名</label> <input type="text"name="username" placeholder="请输入用户名" id="signup_name"></div><div class="form_row"><label for="signup_password">请输入密码</label> <input type="password"name="pwd" placeholder="请输入密码" id="signup_password"></div></form></div><div id="foo"></div> <br /></span></div><div class="login-btn-set"><div class='rem'>记住我</div><a href='javascript:login()' class='login-btn'></a></div></div>
</body>
</html>

3、在业务层处理异常信息

在这里插入图片描述

4、登录功能的实现以及测试

访问登录页面http://localhost:8080/erp/login.html
在这里插入图片描述
访问成功
在这里插入图片描述

(六)显示用户登录名

1、action的修改

增加showName方法
在这里插入图片描述

/*
* 显示登录用户*/public void showName() {// 获取当前登录的用户Emp emp = (Emp) ActionContext.getContext().getSession().get("loginUser");// 先把用户的信息放到session当中// session是否会超时,用户是否登录过if (null != emp) {ajaxReturn(true, emp.getName());}else {ajaxReturn(false, "");}}

2、前端页面的实现

(1)修改index.html页面当中的内容

在这里插入图片描述

<span style="float:right; padding-right:20px;" class="head">欢迎:<span id="username"></span>   
<a href="#" id="editpass">修改密码</a> <a href="#" id="loginOut">安全退出</a></span>
(2)修改index.jsp页面当中的内容

在这里插入图片描述

$(function(){	//显示登录用户名showName();InitLeftMenu();tabClose();tabCloseEven();
})
/** 显示登录用户名*/
function showName(){$.ajax({url:'login_showName',dataType:'json',type:'post',success:function(rtn){//判断是否存在用户登录用户if(rtn.success){$('#username').html(rtn.name);}else{location.href="login.html";}}});
}

(七)退出登录

1、修改LoginAction:增加loginOut方法

在这里插入图片描述

/*
* 退出登录*/public void loginOut() {ActionContext.getContext().getSession().remove("loginUser");}

2、修改index.jsp

在这里插入图片描述

$(function(){	//显示登陆用户名showName();tabClose();tabCloseEven();//安全退出登录 $('#loginOut').bind('click',function(){$.ajax({url:'login_loginOut',success:function(){location.href="login.html";}});});
})

测试退出登录
在这里插入图片描述
成功返回到了登录页面
在这里插入图片描述

二、主界面(菜单的动态读取)

1、菜单动态读取后端的实现

(1)修改Menu实体类

在这里插入图片描述

private List<Menu> menus;public List<Menu> getMenus() {return menus;}public void setMenus(List<Menu> menus) {this.menus = menus;}
(2)修改Menu实体类

在这里插入图片描述

(3)修改映射文件

在这里插入图片描述

		<!-- 自关联 --><bag name="menus" order-by="menuid"><key column="pid" ></key><one-to-many  class="com.itzheng.erp.entity.Menu" />		</bag>
(4)在IBaseDao当中get方法

在这里插入图片描述

(5)在BaseDao当中重载get方法

在这里插入图片描述

public T get(String id){return getHibernateTemplate().get(entityClass, id);}
(6)在IBaseBiz接口当中

在这里插入图片描述

(7)在BaseBiz类当中

在这里插入图片描述

(8)在MenuAction当中添加一个方法

在这里插入图片描述

/** 获取菜单数据*/
public void getMenuTree() {//通过获取主菜单,资关联就会带出旗下所有的菜单System.out.println("===============");Menu menu = menuBiz.get("0");System.out.println(menu);write(JSON.toJSONString(menu));
}

2、菜单动态前端的实现

(1)修改index.jsp当中的内容
// 获取菜单数据$.ajax({url : 'menu_getMenuTree',type : 'post',dataType : 'json',success : function(rtn) {// 给菜单赋值_menus = rtn;InitLeftMenu();}});

在这里插入图片描述
测试运行运行成功
在这里插入图片描述

三、密码加密

1、添加shiro依赖

修改erp_parent下的POM.xml文件

(1)定义shiro版本常量

在这里插入图片描述

<shiro.ver>1.2.3</shiro.ver>
(2)加入shiro的依赖

在这里插入图片描述

<dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-core</artifactId><version>${shiro.ver}</version></dependency><dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-web</artifactId><version>${shiro.ver}</version></dependency><dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-spring</artifactId><version>${shiro.ver}</version></dependency><dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-aspectj</artifactId><version>${shiro.ver}</version></dependency>
(3)修改EmpDao,创建add方法重写父类的add,通过super的方式调用父类的add

在这里插入图片描述

/** 新增员工*/public void add(Emp emp) {String pwd = emp.getPwd();// source : 原密码// salt;盐-》搅乱码// hashIterations:散列次数,加密次数Md5Hash md5 = new Md5Hash(pwd, emp.getUsername(), 2);// 取出加密后的密码String newPwd = md5.toString();System.out.println(newPwd);//设置为加密后的密码emp.setPwd(newPwd);//保存倒数数据库当中super.add(emp);//将}

2、登录密码的加密

(1)在EmpDao当中,需要单独将加密的方法抽取出来

在这里插入图片描述
在这里插入图片描述
替换add方法当中的加密
在这里插入图片描述

(2)在EmpDao当中,修改findByUsernameAndPwd方法来实现查询登录时加密

在这里插入图片描述
上面的方式虽然实现了功能但是密码的加密应该在业务层进行

抽取加密方法到业务层当中
将empdao当中所有的加密抽取到业务层

package com.itzheng.erp.dao.impl;
import java.util.List;
import org.apache.shiro.crypto.hash.Md5Hash;
import org.hibernate.criterion.DetachedCriteria;
import org.hibernate.criterion.MatchMode;
import org.hibernate.criterion.Restrictions;
import com.itzheng.erp.dao.IEmpDao;
import com.itzheng.erp.entity.Emp;
/*** 员工数据访问类* * @author Administrator**/
public class EmpDao extends BaseDao<Emp> implements IEmpDao {/** 用户登录*/public Emp findByUsernameAndPwd(String username, String pwd) {String hql = "from Emp where username = ? and pwd = ?";System.out.println(pwd);List<Emp> list = (List<Emp>) this.getHibernateTemplate().find(hql, username, pwd);// 通过向数据库访问的方式查询对应的内容是否符合// 能够匹配上,侧返回第一个元素if (list.size() > 0) {return list.get(0);}// 如果登录名或密码不正确return null;}/*** 构建查询条件*/public DetachedCriteria getDetachedCriteria(Emp emp1, Emp emp2, Object param) {DetachedCriteria dc = DetachedCriteria.forClass(Emp.class);if (emp1 != null) {if (emp1.getUsername() != null && emp1.getUsername().trim().length() > 0) {dc.add(Restrictions.like("username", emp1.getUsername(), MatchMode.ANYWHERE));}if (emp1.getPwd() != null && emp1.getPwd().trim().length() > 0) {dc.add(Restrictions.like("pwd", emp1.getPwd(), MatchMode.ANYWHERE));}if (emp1.getName() != null && emp1.getName().trim().length() > 0) {dc.add(Restrictions.like("name", emp1.getName(), MatchMode.ANYWHERE));}if (emp1.getEmail() != null && emp1.getEmail().trim().length() > 0) {dc.add(Restrictions.like("email", emp1.getEmail(), MatchMode.ANYWHERE));}if (emp1.getTele() != null && emp1.getTele().trim().length() > 0) {dc.add(Restrictions.like("tele", emp1.getTele(), MatchMode.ANYWHERE));}if (emp1.getAddress() != null && emp1.getAddress().trim().length() > 0) {dc.add(Restrictions.like("address", emp1.getAddress(), MatchMode.ANYWHERE));}// 根据部门查询if (null != emp1.getDep() && null != emp1.getDep().getUuid()) {dc.add(Restrictions.eq("dep", emp1.getDep()));}// 根据出生年月日查询,其实日期if (null != emp1.getBirthday()) {dc.add(Restrictions.ge("birthday", emp1.getBirthday()));}}if (null != emp2) {// 根据出生年月日查询,结束日期if (null != emp2.getBirthday()) {dc.add(Restrictions.le("birthday", emp2.getBirthday()));}}return dc;}//修改密码@Overridepublic void updatePwd(Long uuid, String newPwd) {String hql = "update Emp set pwd = ? where uuid = ?";this.getHibernateTemplate().bulkUpdate(hql, newPwd,uuid);}
}

四、修改密码

(一)后端的实现

1、修改IEmpDao接口

在这里插入图片描述

void updatePwd(Long uuid, String newPwd);

2、对应的实现类

在这里插入图片描述

//修改密码@Overridepublic void updatePwd(Long uuid, String newPwd) {String hql = "update Emp set pwd = ? where uuid = ?";this.getHibernateTemplate().bulkUpdate(hql, newPwd,uuid);}

3、在IEmpBiz当中设置对应的接口

在这里插入图片描述

public void updatePwd(Long uuid, String oldPwd, String newPwd);

4、在com.itzheng.erp.exception下创建ErpException并继承RuntimeException (自定义异常类型)

在这里插入图片描述

package com.itzheng.erp.exception;
public class ErpException extends RuntimeException {public ErpException(String message) {super(message);}
}

5、在实现类EmpBiz当中

在这里插入图片描述

@Overridepublic void updatePwd(Long uuid, String oldPwd, String newPwd) {// 取出员工信息Emp emp = empDao.get(uuid);// 加密旧密码String encrypted = encrypt(oldPwd, emp.getUsername());if (!encrypted.equals(emp.getPwd())) {// 抛出自定义异常throw new ErpException("旧密码不正确");}newPwd = encrypt(newPwd, emp.getUsername());// 如果相同就更新对应的密码empDao.updatePwd(uuid, newPwd);}

6、修改BaseActopn

在这里插入图片描述

/** 获取登录的用户信息*/public Emp getLoginUser() {Emp emp = (Emp) ActionContext.getContext().getSession().get("loginUser");return emp;}

7、在EmpAction当中

在这里插入图片描述

// 修改密码调用的方法// 修改密码调用的方法public void updatePwd() {Emp loginUser = getLoginUser();System.out.println(loginUser);if (null == loginUser) {write(ajaxReturn(false, "亲!你还没有登录"));return;}try {empBiz.updatePwd(loginUser.getUuid(), oldPwd, newPwd);write(ajaxReturn(true, "修改密码成功"));} catch (Exception e) {e.printStackTrace();write(ajaxReturn(false, "修改密码失败"));}}

(二)前端的实现

1、修改index.html

在这里插入图片描述

<!--修改密码窗口--><div id="w" class="easyui-dialog"><div class="easyui-layout" fit="true"><div region="center" border="false"style="padding: 10px; background: #fff;"><table cellpadding=3><tr><td>旧密码:</td><td><input id="txtOldPass" type="password" class="txt01" /></td></tr><tr><td>新密码:</td><td><input id="txtNewPass" type="password" class="txt01" /></td></tr><tr><td>确认密码:</td><td><input id="txtRePass" type="password" class="txt01" /></td></tr></table></div></div></div>

2、修改index.js当中的内容

$.ajax({url : 'emp_updatePwd',data : {'oldPwd' : oldPwd,'newPwd' : newPwd},dataType : 'json',type : 'post',success : function(rtn) {$.messager.alert('提示', rtn.message, 'info', function() {if (rtn.success) {$('#w').dialog('close');//清空内容$('#txtOldPass').val('');$('#txtNewPass').val('');$('#txtRePass').val('');}});}
});

在这里插入图片描述

3、测试修改密码

在这里插入图片描述
在这里插入图片描述

五、管理员重置密码

(一)后端的实现

1、在业务层的接口当中创建对应的接口

在这里插入图片描述

2、在对应的实现类当中实现

在这里插入图片描述

3、在EmpAction当中

在这里插入图片描述

(二)前端的实现

1、创建pwd.html

<!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>
<link rel="stylesheet" type="text/css" href="ui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="ui/themes/icon.css">
<script type="text/javascript" src="ui/jquery.min.js"></script>
<script type="text/javascript" src="ui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="ui/jquery.serializejson.min.js"></script>
<script type="text/javascript" src="js/crud.js"></script>
<script type="text/javascript" src="ui/date.js"></script>
<script type="text/javascript">var name="emp";var height = 300;var width = 300;var columns=[[{field:'uuid',title:'编号',width:100},{field:'username',title:'登陆名',width:100},{field:'name',title:'真实姓名',width:100},{field:'gender',title:'性别',width:100,formatter:function(value,row,index){  	if(1 == value * 1 ){return '男';}if(0 == value * 1){return '女';}} },{field:'email',title:'邮件地址',width:100},{field:'tele',title:'联系电话',width:100},{field:'address',title:'联系地址',width:100},{field:'birthday',title:'出生年月日',width:100,formatter:function(value){return new Date(value).Format("yyyy-MM-dd");} },{field:'dep',title:'部门编号',width:100,formatter:function(value){return value.name;} },{field:'-',title:'操作',width:200,formatter:function(value,row,index){return "修改 删除";}}		    ]];</script>
</head>
<body>
<div class="easyui-panel">
<form id="searchForm">登陆名:<input name="t1.username" >登陆密码:<input name="t1.pwd" >真实姓名:<input name="t1.name" >性别:<input name="t1.gender" type="radio" value="" >全部<input name="t1.gender" type="radio" value="0" ><input name="t1.gender" type="radio" value="1" ><br>邮件地址:<input name="t1.email" >联系电话:<input name="t1.tele" >联系地址:<input name="t1.address" >出生年月日:<input name="t1.birthday" class="easyui-datebox" editable="false" > -> <input name="t2.birthday" class="easyui-datebox" editable="false" >部门:<input name="t1.dep.uuid" class="easyui-combobox" data-options="url:'dep_list',textField:'name',valueField:'uuid'" ><button type="button" id="btnSearch">查询</button>
</form>
</div>
<table id="grid"></table>
<div id="editWindow" class="easyui-window" title="员工编辑"  data-options="closed:true"><form id="editForm"><input name="t.uuid" type="hidden"> <table><tr><td>登陆名</td><td><input name="t.username" class="easyui-validatebox" data-options="required:true,missingMessage:'登录名不能为空!'"> </td></tr><tr><td>登陆密码</td><td><input name="t.pwd"> </td></tr><tr><td>真实姓名</td><td><input name="t.name"> </td></tr><tr><td>性别</td><td><input name="t.gender" type="radio" value="0" ><input name="t.gender" type="radio" value="1" ></td></tr><tr><td>邮件地址</td><td><input name="t.email"  class="easyui-validatebox" data-options="required:true,validType:'email',invalidMessage:'Email格式不正确'"> </td></tr><tr><td>联系电话</td><td><input name="t.tele"> </td></tr><tr><td>联系地址</td><td><input name="t.address"> </td></tr><tr><td>出生年月日</td><td><input name="t.birthday" class="easyui-datebox" editable="false" > </td></tr><tr><td>部门</td><td><input name="t.dep.uuid" class="easyui-combobox" data-options="url:'dep_list',textField:'name',valueField:'uuid',required:'true'" > </td></tr></table>	<button id="btnSave" type="button">保存</button></form>
</div></body>
</html>

2、创建pwd.js

$(function(){//加载表格数据$('#grid').datagrid({url:'emp_listByPage',columns:[[{field:'uuid',title:'编号',width:100},{field:'username',title:'登陆名',width:100},{field:'name',title:'真实姓名',width:100},{field:'gender',title:'性别',width:100,formatter:function(value, row, index){value = row.gender;if(1 == value * 1){return '男';}if(0 == value * 1){return '女';}}},{field:'email',title:'邮件地址',width:100},{field:'tele',title:'联系电话',width:100},{field:'address',title:'联系地址',width:100},{field:'birthday',title:'出生年月日',width:100,formatter:function(value){return new Date(value).Format("yyyy-MM-dd");}},{field:'dep',title:'部门编号',width:100,formatter:function(value){return value.name;}},{field:'-',title:'操作',width:200,formatter: function(value,row,index){var oper = " + row.uuid + ')">重置密码';return oper;}}]],singleSelect: true,pagination: true});//重置密码的窗口$('#editDlg').dialog({title: '重置密码',//窗口标题width: 260,//窗口宽度height: 120,//窗口高度closed: true,//窗口是是否为关闭状态, true:表示关闭modal: true,//模式窗口iconCls: 'icon-save',buttons: [{text: '保存',iconCls: 'icon-save',handler:function(){var formdata = $('#editForm').serializeJSON();$.ajax({url: 'emp_updatePwd_reset',data : formdata,dataType: 'json',type: 'post',success:function(rtn){$.messager.alert('提示',rtn.message,'info',function(){if(rtn.success){$('#editDlg').dialog('close');}});}});}}       ]});
});//打开重置密码窗口
function updatePwd_reset(uuid){$('#editDlg').dialog('open');//清空表单$('#editForm').form('clear');//加载数据$('#editForm').form('load',{id: uuid, newPwd:""});
}

(三)访问前端页面

在这里插入图片描述
访问pwd.html点击重置密码
在这里插入图片描述
重新登录设置成功

(四)设置初始密码

1、修改biz层的add方法

在这里插入图片描述

String newPwd = encrypt(emp.getUsername(), emp.getUsername());

2、修改emp.html当中的内容

六、解决更新员工信息,密码丢失

修改用户信息后密码丢失
在这里插入图片描述
数据库当中密码丢失
在这里插入图片描述
使用session的持久化不更新pwd字段,Hbm.xml里面加入update=false属性,不更新pwd字段

上面在更新密码订单时候是使用的SQL语句来更新的密码,设置该属性的时候在映射文件当中设置update=false属性后是不会影响SQL语句更新密码的方法的,所以在更新用户信息的时候设置该属性后就不会更新密码

在这里插入图片描述

七、静态页面传参数

1、在emp_web下的ui当中创建request.js

var url=location.search;//获取?号后面的字符串
var Request = new Object();//创建Object对象
if(url.indexOf("?")!=-1)//判断是否后?号 有?号的时候
{var str = url.substr(1);//截取字符串当中第2个后的字符串(不包括? 的字符串)strs = str.split("&");//按照&号分隔字符串,赋值给一个数组for(var i=0;i<strs.length;i++)//遍历循环{	//Request类型的数组,的第分隔前面字符串部分按照=号分隔,Request[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);}
}

2、在supplier.html当中引入crud.js

在这里插入图片描述

3、在supplier.html当中添加一些数据

在这里插入图片描述

4、修改crud.js

在这里插入图片描述

5、修改supplier.html

<!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>
<link rel="stylesheet" type="text/css" href="ui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="ui/themes/icon.css">
<script type="text/javascript" src="ui/jquery.min.js"></script>
<script type="text/javascript" src="ui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="ui/jquery.serializejson.min.js"></script>
<script type="text/javascript" src="ui/request.js"></script>
<script type="text/javascript" src="js/crud.js"></script>
<script type="text/javascript">if(Request['type'] == 1){document.title = "供应商管理";listParam = "?t1.type=1";}if(Request['type'] == 2){document.title = "客户管理";listParam = "?t1.type=2";}var name="supplier";var columns=[[{field:'uuid',title:'编号',width:100},{field:'name',title:'名称',width:100},{field:'address',title:'联系地址',width:100},{field:'contact',title:'联系人',width:100},{field:'tele',title:'联系电话',width:100},{field:'email',title:'邮件地址',width:100},{return "修改 删除";}}		    ]];
</script>
</head>
<body>
<div class="easyui-panel">
<form id="searchForm">名称:<input name="t1.name" >联系地址:<input name="t1.address" >联系人:<input name="t1.contact" >联系电话:<input name="t1.tele" >邮件地址:<input name="t1.email" ><button type="button" id="btnSearch">查询</button>
</form>
</div>
<table id="grid"></table>
<div id="editWindow" class="easyui-window" title="供应商编辑" style="width: 320px;height: 250px" data-options="closed:true"><form id="editForm"><input name="t.uuid" type="hidden"> <table><tr><td>名称</td><td><input name="t.name"> </td></tr><tr><td>联系地址</td><td><input name="t.address"> </td></tr><tr><td>联系人</td><td><input name="t.contact"> </td></tr><tr><td>联系电话</td><td><input name="t.tele"> </td></tr><tr><td>邮件地址</td><td><input name="t.email"> </td></tr></table>	<button id="btnSave" type="button">保存</button></form>
</div>
</body>
</html>

6、修改SupplierDao

在这里插入图片描述

7、实现在列表当中的类型选择,修改supplier.html

在这里插入图片描述

8、修改crud.js

在这里插入图片描述

9、在MENU插入数据

insert into menu values('103','供应商管理','icon-sys','supplier.html?type=1','100');
insert into menu values('104','客户管理','icon-sys','supplier.html?type=2','100');

在这里插入图片描述
在这里插入图片描述


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部