最近接到一個項目 是關(guān)于構(gòu)建一套 電腦端會員管理系統(tǒng)? ??但考慮到個人比較喜歡寫Web? ? 便首選Nanui構(gòu)建項目。

中間遇到一些坑? 但都已解決 ，便提供給大家參考。希望能幫助到大家-_-

項目采用 Nanui + LayuI + Echart + JQ

完整項目源碼還在優(yōu)化中? ，過幾天上傳。

代碼示例 及Ui 截圖如下

開啟調(diào)試-代碼：

base.LoadHandler.OnLoadStart += (sender, e) =>{　　base.Chromium.ShowDevTools();};

登錄對應(yīng)前臺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后端調(diào)用前端 代碼如下

2.1//調(diào)用前端js 實現(xiàn)菜單欄權(quán)限渲染 　　LoadHandler.OnLoadEnd += LoadMenu;

/// 　　/// 渲染角色對應(yīng)的菜單 　　/// 　　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即可調(diào)用 　　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); //調(diào)用數(shù)據(jù)庫方法? 　　　　var resultStr = CfrV8Value.CreateString(JsonConvert.SerializeObject(new { data = user.Item1, count = user.Item2 })); 　　　　args.SetReturnValue(resultStr);　　 　　　　} 　　};

用戶管理

4 數(shù)據(jù)報表

總結(jié)

以上是生活随笔為你收集整理的NANUI能否运行在linux,Nanui 项目示例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。