Nanui For WinForm
最近接到一个项目 是关于构建一套 电脑端会员管理系统 但考虑到个人比较喜欢写Web 便首选Nanui构建项目。
中间遇到一些坑 但都已解决 ,便提供给大家参考。希望能帮助到大家-_-
项目采用 Nanui + LayuI + Echart + JQ
Demo版: https://pan.baidu.com/s/1vAlagCswNu8PloKb9d5GzQ 密码 jbnb
完整项目源码还在优化中 ,过几天上传。
代码示例 及Ui 截图如下
开启调试-代码:
base.LoadHandler.OnLoadStart += (sender, e) =>
{
base.Chromium.ShowDevTools();
};
登录对应前台js
form.on('submit(login)', function (d) {
var str = my.Func_login("{\"Name\":\"" + d.field.account + "\",\"Pass\":\""+ d.field.pwd +"\"}");
var result = eval('(' + str + ')');
if (result.isSuccess == true) {
layer.msg('登陆成功');
setTimeout(function (){
viewMain();
},1000);
} else {
layer.msg('登陆失败,密码错误');
}
后端代码
var FuncLogin = myObject.AddFunction("Func_login");
FuncLogin.Execute += (func, args) =>
{
var stringArgument = args.Arguments.FirstOrDefault(p => p.IsString);
if (stringArgument != null)
{
var str = stringArgument.StringValue;
JObject model = JObject.Parse(str);
var name = model["Name"].ToString();
var pass = model["Pass"].ToString();
object result = null;
var encry_pass = C_MD5.MD5Encrypt(pass);
var user = adminUserBLL.CheckAdminUser(name,encry_pass);
if (user!=null) {
CurrentAdminUser.Id = user.Id;
CurrentAdminUser.RoleId = user.RoleId.Value;
result = new { isSuccess = true, msg = "登录成功" };
}
else {
result = new { isSuccess = false, msg = "帐户名或密码错误" };
}
var resultStr = CfrV8Value.CreateString(Newtonsoft.Json.JsonConvert.SerializeObject(result));
args.SetReturnValue(resultStr);
}
};
主窗体 LayUi+Iframe
2后端调用前端 代码如下
2.1//调用前端js 实现菜单栏权限渲染
LoadHandler.OnLoadEnd += LoadMenu;
/// <summary>
/// 渲染角色对应的菜单
/// </summary>
private void LoadMenu(object sender, Chromium.Event.CfxOnLoadEndEventArgs e)
{
if (e.Frame.IsMain) {
var menus = menuBLL.QueryMenusList();
var res = JsonConvert.SerializeObject(new {data = menus });
ExecuteJavascript("SetMenu(" + res+ ")");
}
}
2.2 js代码
function SetMenu(res) {
console.log(res.data);
var html = "";
for (var i = 0; i < res.data.length; i++) {
html += "<li class=\"layui-nav-item\" url=" + res.data[i].Url + "><a>" + res.data[i].Name+"</a></li>";
}
$("#MenuBox").html(html);
}
3前端与后端通信 代码如下
3.1js代码
var user = {
page: 1,
pageSize: 10,
phone: $("#phone").val(),
name: $("#name").val(),
state: $(".layui-tab .layui-this").attr("lay-id")
};
var par = JSON.stringify(user);
var list = parent.userbll.QueryList(par);
var res = eval('(' + list + ')');
3.2后端代码
var userObject = GlobalObject.AddObject("userbll"); //新增用户BLL层 前端直接userbll.QueryList即可调用
var userProp = userObject.AddDynamicProperty("user");
InitProp(userProp);
/*查询会员列表*/
var QuertList = userObject.AddFunction("QueryList");
QuertList.Execute += (func, args) =>
{
var stringArgument = args.Arguments.FirstOrDefault(p => p.IsString);
if (stringArgument != null)
{
var str = stringArgument.StringValue;
var user = userBLL.QuertList(str); //调用数据库方法
var resultStr = CfrV8Value.CreateString(JsonConvert.SerializeObject(new { data = user.Item1, count = user.Item2 }));
args.SetReturnValue(resultStr);
}
};
用户管理
4 数据报表
上一篇: 不懂我为你受的罪