最近接到一个项目 是关于构建一套 电脑端会员管理系统    但考虑到个人比较喜欢写Web    便首选Nanui构建项目。

中间遇到一些坑  但都已解决 ，便提供给大家参考。希望能帮助到大家-_-

项目采用 Nanui + LayuI + Echart + JQ

完整项目源码还在优化中  ，过几天上传。

代码示例 及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;

/// 　　/// 渲染角色对应的菜单 　　/// 　　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 += "

" + res.data[i].Name+""; 　　　　}$("#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 数据报表