Nanui 教程

最近接到一个项目 是关于构建一套 电脑端会员管理系统    但考虑到个人比较喜欢写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 数据报表

 

posted @ 2018-04-17 01:08 任平 阅读(...) 评论(...) 编辑 收藏