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

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

项目采用 Nanui + LayuI + Echart + JQ   

源码地址： https://pan.baidu.com/s/11OdzGpEbGztMp4f2anwSnA   密码   hxn2 

项目源码已经完善。

代码示例 及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 数据报表