Nanui 教程

彩票自动投注软件定制-联灬系-\加/Q;2943075966 黑/科/技问/世.详情直接添加咨询.信/誉/文本

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