1、功能一
1.1、功能名称
系统登录功能
1.2、客户端界面及描述
登陆界面如图1所示。
图1登陆界面
登录按钮功能描述：
- 判断用户名密码是否输入 是：继续，否：return；
- 获取用户名密码，使用ajax提交服务器端C#进行验证，并返回验证结果；
- 客户端通过ajax回调函数获取服务端的验证结果，成功：页面跳转Main.aspx； 否则提示登录失败信息。
1.3、客户端主要核心脚本
<script>
$(function () {
$(‘#btnOK’).click(function () {
var usercode = $(‘#usercode’).val();
var pwd = $(‘#pwd’).val();
$.ajax({
type: ‘post’,
url: “Login.aspx?action=login”,
data: { usercode: usercode, pwd: pwd },
//contentType: ‘application/json’,
dataType: ‘json’,
success: function (data) {
if (data.isSuccessed) {
location.href = “Main.aspx”;
}
else
alert(data.Message);
},
error: function (xmlReq, err, c) {
alert(“error:” + err);
}
});
})
})
script>
1.4、服务器端代码
private void CheckLogin()
{
string usercode = Request[“usercode”];
string pwd = Request[“pwd”];
SYSTEM.BLL.sysuser bll = new SYSTEM.BLL.sysuser();
var user = bll.GetModel(usercode);
if (user != null)
{
if (user.pwd == pwd)
{
Session[“username”] =user.username.ToString(); //记录当前用户在session 里面
WriteMessage(true, “登陆成功”);
}
else
{
WriteMessage(false, “登陆失败”);
}
}
else
{
WriteMessage(false, “登陆失败”);
}
}
2、功能二
2.1、功能名称
用户管理功能
2.2、客户端界面及描述
用户管理主界面如图2所示，增加用户如图3所示，修改用户如图4所示，用户角色分配如图5所示。
图2用户管理主界面
用户管理主界面描述：点击左边系统设置的用户管理按钮，进入主界面，查看所有用户信息。
图3新增用户
新增用户功能描述：点击右边界面的新增按钮，弹出新增数据界面，对用户进行增加操作。点击弹出窗口中的确定，即可增加成功；如果点击关闭，即可取消添加。
图4修改用户
修改用户功能描述：点击右边界面的修改按钮，弹出修改数据界面，对用户进行修改操作。点击弹出窗口中的确定，即可修改成功；如果点击关闭，即可取消修改。
图5用户角色分配
用户角色分配功能描述：点击右边界面的用户角色按钮，弹出角色数据界面，对用户进行角色分配操作。点击弹出窗口中的确定，即可完成角色分配；如果点击关闭，即可取消分配。
2.3、客户端主要核心脚本
2.3.1用户管理主界面
function loaddata() {
$(“#dg”).datagrid({
url: “userlist.aspx?action=select”,//加载的URL
isField: “usercode”,
pagination: true,//显示分页
pageSize: 5,//分页大小
pageList: [5, 10, 15, 20],//每页的个数
fit: true,//自动补全
fitColumns: true,
toolbar: ‘#tb’,
sortName: ‘usercode’,
queryParams: {},//condition(),
singleSelect: true,
//iconCls: “icon-save”,//图标
//title: “用户管理”,
columns: [[ //每个列具体内容
{ field: ‘usercode’, title: ‘用户名’, width: 100, sortable: true },
{ field: ‘username’, title: ‘姓名’, width: 100, sortable: true },
{
field: ‘pwd’, title: ‘密码’, width: 100,
formatter: function (value, row, index) {
return ”;
}
},
{ field: ‘cmt’, title: ‘备注’ }
]]
})
}
2.3.1增加用户
$(‘#btnAdd’).click(function () {
$(‘#w’).dialog({
title: ‘新增数据’,
width: 400,
height: 200,
closed: false,
cache: false,
href: ‘useredit.aspx’,
modal: true,
buttons: [{
text: ‘确定’,
iconCls: ‘icon-ok’,
handler: function () {
//数据保存代码
$(‘#ff’).form(‘submit’, {
url: “useredit.aspx?action=addrecord”, //表单提交地址 并带参数
onSubmit: function () {
return $(this).form(‘validate’); //验证表单是否通过验证规则
},
success: function (returndata) {
var obj = eval(“(“ + returndata + “)”)
if (obj.isSuccessed) {
$(‘#dg’).datagrid(‘reload’); //刷新数据表格datagrid
$(‘#w’).dialog(‘close’); //关闭弹出新增窗口
$.messager.show({
title: ‘提示’,
msg: obj.Message,
timeout: 2000,
showType: ‘show’
});
}
else {
alert(‘保存失败！’);
}
}
});
}
}, {
text: ‘关闭’,
iconCls: ‘icon-delete’,
handler: function () {
$(‘#w’).dialog(‘close’); //关闭弹出新增窗口
}
}]
});
});
2.3.1修改用户
$(‘#btnEdit’).click(function () {
var row = $(‘#dg’).datagrid(‘getSelected’);
if (row == null) {
$.messager.show({
title: ‘提示’,
msg: ‘请选择您要编辑的数据.’,
timeout: 2000,
showType: ‘slide’
});
return;
}
$(‘#w’).dialog({
title: ‘修改数据’,
width: 400,
height: 200,
closed: false,
cache: false,
href: ‘useredit.aspx?action=update&id=’ + row.usercode,
modal: true,
buttons: [{
text: ‘确定’,
iconCls: ‘icon-ok’,
handler: function () {
//数据保存代码
$(‘#ff’).form(‘submit’, {
url: “useredit.aspx?action=updaterecord&id=” + row.usercode, //表单提交地址 并带参数
onSubmit: function () {
return $(this).form(‘validate’); //验证表单是否通过验证规则
},
success: function (returndata) {
var obj = eval(“(“ + returndata + “)”)
if (obj.isSuccessed) {
$(‘#dg’).datagrid(‘reload’); //刷新数据表格datagrid
$(‘#w’).dialog(‘close’); //关闭弹出新增窗口
$.messager.show({
title: ‘提示’,
msg: obj.Message,
timeout: 2000,
showType: ‘show’
});
}
else {
alert(‘保存失败！’);
}
}
});
}
}, {
text: ‘关闭’,
iconCls: ‘icon-delete’,
handler: function () {
$(‘#w’).dialog(‘close’); //关闭弹出新增窗口
}
}]
});
});
2.3.1删除用户
$(‘#btnDel’).click(function () {
var row = $(‘#dg’).datagrid(‘getSelected’);
if (row == null) {
$.messager.show({
title: ‘提示’,
msg: ‘请选择您要删除的数据.’,
timeout: 2000,
showType: ‘slide’
});
return;
}
$.ajax({
url: ‘useredit.aspx?action=delete&id=’ + row.usercode,
success: function (data) {
if (data.isSuccessed) {
$(‘#dg’).datagrid(‘reload’); //刷新数据表格datagrid
$.messager.show({
title: ‘提示’,
msg: data.Message,
timeout: 2000,
showType: ‘show’
});
}
else {
alert(‘删除失败！’);
}
}
})
});
2.3.1用户角色分配
$(‘#btnrole’).click(function () {
var row = $(‘#dg’).datagrid(‘getSelected’);
if (row == null) {
$.messager.show({
title: ‘提示’,
msg: ‘请选择您要分配角色的用户.’,
timeout: 2000,
showType: ‘slide’
});
return;
}
$(‘#w’).dialog({
title: ‘角色数据’,
width: 400,
height: 200,
closed: false,
cache: false,
href: ‘userrolelist.aspx?action=choose&id=’ + row.usercode,
modal: true,
buttons: [{
text: ‘确定’,
iconCls: ‘icon-ok’,
handler: function () {
var rolerow = $(‘#dgrole’).datagrid(‘getSelected’);
$.ajax({
type: “GET”,
url: “userrolelist.aspx?action=save”, data: { usercode: row.usercode, roleid: rolerow.roleid },
success: function (returndata) {
var obj = eval(“(“ + returndata + “)”);
if (obj.isSuccessed) {
$(‘#w’).dialog(‘close’);
}
else { }
}
});
}
}, {
text: ‘关闭’,
iconCls: ‘icon-delete’,
handler: function () {
$(‘#w’).dialog(‘close’); //关闭弹出新增窗口
}
}]
});
});
2.4、服务器端代码
private void GetList()
{
int pageindex = int.Parse(Request.Form[“page”]);
int pagesize = int.Parse(Request.Form[“rows”]);
string sort = Request.Form[“sort”];
string order = Request.Form[“order”];
string value = Request.Form[“value”];
SYSTEM.BLL.sysuser bll = new SYSTEM.BLL.sysuser();
DataTable dt = new DataTable();
ResultData data = new ResultData();
string strOrder = “”;
if(!string.IsNullOrEmpty(sort))
{
strOrder = sort + ” “ + order;
}
string strWhere = “”;
if (!string.IsNullOrEmpty(value))
{
strWhere = string.Format(” usercode like ‘%{0}%’ or username like ‘%{0}%'”, value);
}
data.total = bll.GetRecordCount(strWhere);
data.rows = bll.GetListByPage(strWhere, strOrder, (pageindex – 1) * pagesize + 1, pageindex * pagesize).Tables[0];
WriteData(Newtonsoft.Json.JsonConvert.SerializeObject(data));
}
private void Save()
{
model.usercode = Request.Form[“usercode”];
model.username = Request.Form[“username”];
model.cmt = Request.Form[“cmt”];
model.pwd = Request.Form[“pwd”];
if (blluser.Add(model))
{
WriteMessage(true, “添加成功”);
}
else
{
WriteMessage(false, “添加失败”);
}
}
private void GetOne()
{
SYSTEM.Model.sysuser model = blluser.GetModel(Request[“id”].ToString());
WriteData(Newtonsoft.Json.JsonConvert.SerializeObject(model));
}
private void Update()
{
//新建对象
SYSTEM.Model.sysuser model = blluser.GetModel(Request[“id”].ToString());
model.username = Request.Form[“username”].ToString();
model.cmt = Request.Form[“cmt”].ToString();
if (blluser.Update(model))
{
WriteMessage(true, “修改成功！”); //响应，向前端传送数据
}
else
{
WriteMessage(false, “修改失败！”);
}
}
private void Delete()
{
if (blluser.Delete(Request[“id”].ToString()))
{
WriteMessage(true, “删除成功！”); //响应，向前端传送数据
}
else
{
WriteMessage(false, “删除失败！”);
}
}
3、功能三
3.1、功能名称
角色管理功能
3.2、客户端界面及描述
角色权限查看如图6所示，角色权限保存如图7所示。
图6角色权限查看
角色权限查看功能描述：点击查看，即可查看各个角色的对应权限。
图7角色权限保存
角色权限保存功能描述：先选择一个角色，再在功能中选择功能，点击保存。再点击查看，即可添加角色对应的功能。
3.3、客户端主要核心脚本
function loadtreedata() {
$(‘#tg’).treegrid({
title: ‘系统功能列表’,
fit: true,
animate: true,//是否用动画效果
collapsible: false,//是否可折叠
//pagination: true,//分页控件
rownumbers: true,//行号
//fitColumns: true,
url: ‘rolelist.aspx?action=menuselect’,
method: ‘get’,
toolbar: ‘#menutb’,
idField: ‘id’,//根据那个字段判断树节点关系
treeField: ‘funname’,//根据那个列展现树
showFooter: false,//是否使用页脚
sortName: ‘funid’,//默认排序字段,后台通过参数名“sort”获取
singleSelect: false,
//sortOrder: ‘desc’,//默认排序规则，后台通过参数名“order”获取
columns: [[
{ title: ”, field: ‘funid’, hidden: true },
{ title: ‘功能’, field: ‘funname’, width: 220, sortable: true },
{ title: ‘地址’, field: ‘url’, width: 150, sortable: true },
{ title: ‘图标’, field: ‘icno’, width: 80 },
{ title: ‘备注’, field: ‘cmt’, width: 100, sortable: true }
]],
onBeforeExpand: function (node) {
},
onLoadSuccess: function () {
},
onClickRow: function (node) {
//点击行触发
},
onClickCell: function (rowIndex, field, value) {
//点击表格触发
}
});
}
function loaddata() {
$(“#dg”).datagrid({
url: “rolelist.aspx?action=select”,//加载的URL
isField: “roleid”,
pagination: true,//显示分页
pageSize: 5,//分页大小
pageList: [5, 10, 15, 20],//每页的个数
fit: true,//自动补全
fitColumns: true,
toolbar: ‘#tb’,
sortName: ‘roleid’,
queryParams: {},//condition(),
singleSelect: true,
//iconCls: “icon-save”,//图标
//title: “用户管理”,
columns: [[ //每个列具体内容
{ field: ‘roleid’, title: ”, hidden: true },
{ field: ‘rolename’, title: ‘角色名称’, width: 200, sortable: true },
{ field: ‘cmt’, title: ‘备注’, width: 500 },
{
field: ‘right’, title: ‘权限’,
formatter: function (value, row, index) {
return ‘ + row.roleid + ‘)”>查看‘;
}
},
]]
})
}
$(‘#btnSaveMenu’).on(‘click’, function () {
var row = $(‘#dg’).datagrid(‘getSelected’);
if (row == null) {
$.messager.show({
title: ‘提示’,
msg: ‘请选择你要分配功能的角色.’,
timeout: 2000,
showType: ‘slide’
});
return;
}
var newfunids = [];
var rows = $(‘#tg’).treegrid(‘getSelections’);
for (i = 0 ; i < rows.length; i++) {
newfunids.push(rows[i].id);
}
$.ajax({
url: ‘rolelist.aspx?action=savemenu&id=’ + row.roleid,
type: ‘post’,
data: JSON.stringify(newfunids),
success: function (data) {
var obj = eval(“(“ + data + “)”)
if (obj.isSuccessed) {
$(‘#tg’).datagrid(‘reload’); //刷新数据表格datagrid
$.messager.show({
title: ‘提示’,
msg: obj.Message,
timeout: 2000,
showType: ‘show’
});
}
else {
alert(‘保存失败！’);
}
}
})
});
3.4、服务器端代码
private void SaveMenu()
{
SYSTEM.BLL.sysrolefun bll = new SYSTEM.BLL.sysrolefun();
string id = Request[“id”].ToString();
foreach(var m in bll.GetModelList(string.Format(” roleid = {0}”, id)))
{
bll.Delete(m.id);
}
string[] strarr = HttpUtility.UrlDecode(Request.Form.ToString()).Replace(“]”, “”).Replace(“[“, “”).Split(‘,’);
foreach(var funid in strarr)
{
var mm = new SYSTEM.Model.sysrolefun();
mm.funid = decimal.Parse(funid);
mm.roleid = decimal.Parse(id);
bll.Add(mm);
}
WriteMessage(true, “OK！”);
}
4、功能四
4.1、功能名称
菜单管理功能
4.2、客户端界面及描述
菜单管理主界面如图8所示，新增菜单如图9所示，修改菜单如图10所示。
图8菜单管理主界面
菜单管理主界面描述：点击左边的菜单管理按钮，打开如上图所示的界面。对菜单的相关信息进行管理。
图9增加菜单
增加菜单功能描述：点击页面的新增按钮，弹出新增数据界面，对需要的菜单进行添加。点击确定，即可完成添加；点击关闭，添加取消。
图10修改菜单
修改菜单功能描述：点击页面的修改按钮，弹出修改数据界面，对需要的菜单进行修改。点击确定，即可完成修改；点击关闭，修改取消。
4.3、客户端主要核心脚本
function loaddata() {
$(‘#tg’).treegrid({
title: ”,
fit: true,
animate: true,//是否用动画效果
collapsible: false,//是否可折叠
//pagination: true,//分页控件
rownumbers: true,//行号
//fitColumns: true,
url: ‘menulist.aspx?action=select’,
method: ‘get’,
toolbar: ‘#tb’,
idField: ‘id’,//根据那个字段判断树节点关系
treeField: ‘funname’,//根据那个列展现树
showFooter: false,//是否使用页脚
sortName: ‘funid’,//默认排序字段,后台通过参数名“sort”获取
//sortOrder: ‘desc’,//默认排序规则，后台通过参数名“order”获取
columns: [[
{ title: ‘功能’, field: ‘funname’, width: 220, sortable: true },
{ title: ‘地址’, field: ‘url’, width: 150, sortable: true },
{ title: ‘图标’, field: ‘icno’, width: 80 },
{ title: ‘备注’, field: ‘cmt’, width: 100, sortable: true }
]],
onBeforeExpand: function (node) {
},
onLoadSuccess: function () {
},
onClickRow: function (node) {
//点击行触发
},
onClickCell: function (rowIndex, field, value) {
//点击表格触发
}
});
}
<script>
//获取当前窗口的操作类型
var action = ‘<% =action%>‘;
var id = ‘<% =id%>‘;
$(function () {
loadform(); //如果是编辑进入，需要加载编辑数据
$(‘#pid’).combobox({
url:‘menuedit.aspx?action=combobox’,
valueField:‘funid’,
textField:‘funname’
});
//$(‘#cc’).combotree({
// url: ‘get_data.php’,
// required: true
//});
})
function loadform() {
if (action == ‘update’) {
$.ajax({
url: ‘menuedit.aspx?action=getrecord&id=’ + id,
success: function (data) {
data = eval(‘(‘ + data + ‘)’);
$(‘#ff’).form(‘load’, data);
}
})
}
}
script>
4.4、服务器端代码
private void GetTreeList()
{
SYSTEM.BLL.sysfunction bll = new SYSTEM.BLL.sysfunction();
DataTable dt = new DataTable();
ResultData data = new ResultData();
data.total = bll.GetRecordCount(“”);
data.rows = bll.GetTreeList(“”).Tables[0];
WriteData(Newtonsoft.Json.JsonConvert.SerializeObject(data));
}
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/200302.html原文链接：https://javaforall.net
