vs2017 + miniUI 后端框架使用

vs2017 + miniui 后端框架使用

上miniui官网直接下载框架。此框架使用说明很清楚。

2.1、vs2017创建安装miniui后端框架

创建一个新项目，名称：miniui_dapper 解决方案名称：unititwo

选择mvc，点击确定，等待一下。

创建完成，一个mvc项目就创建成功，然后我们在引入miniui的框架。

安装miniui框架文件，放置对应的目录。

注：当前项目miniui版本不是最新版本，如需要最新版本可于官方下载。

修改 app_start文件夹下bundleconfig.cs 的方法内容

代码：

public static void registerbundles(bundlecollection bundles)

{

bundles.add(new scriptbundle(“~/bundles/js”).include(

“~/scripts/jquery-1.6.2.js”,

“~/scripts/jquery.unobtrusive*”,

“~/scripts/jquery.validate*”,

“~/scripts/miniui/miniui.js”,

“~/scripts/common.js”));

bundles.add(new stylebundle(“~/content/css”).include(“~/content/themes/default/skin.css”, “~/content/themes/login.css”, “~/content/themes/icons.css”));

}

修改文件 view 》 home 》 index.cshtml 文件，双击后修改代码

创建项目时index.cshtml源代码

替换上miniui的代码（直接都复制到页面上即可）：

<!—代码开始–>

viewbag.title = “管理平台”;

layout = “~/views/shared/_layout.cshtml”;

}

@section headers

{

.mini-header div {

padding-left: 0px;

}

.indexnav {

/*width: 460px;*/

float: right;

display: block;

height: 77px;

font-size: 14px;

vertical-align: middle;

margin-right: 10px;

}

.indexnav a {

color: #ffffff;

font-size: 14px;

text-decoration: none;

}

.indexnav td {

color: #ffffff;

font-size: 14px;

text-decoration: none;

}

.indexnav a:hover {

text-decoration: underline;

font-size: 14px;

color: #ffffff;

}

</style>

}

<div title=”north” region=”north” class=”mini-header” bodystyle=”overflow:hidden;”

height=”77px” showheader=”false” showsplit=”false”>

</div>

<tr>

当前登录用户：

</td>

系统管理员

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</tr>

</table>

</div>

<!–系统菜单–>

<div id=”application_tree” class=”mini-outlooktree” idfield=”id” parentfield=”pid” iconfield=”icon” url=”@url.action(“userapplications”, new { id = request[“appid”] })”

textfield=”name”>

</div>

<div id=”maintabs” class=”mini-tabs” activeindex=”0″ style=”width: 100%; height: 100%;”

onactivechanged=””>

</div>

@section scripts

{

$(document).ready(function () {

mini.parse();

mini.get(“application_tree”).on(“nodeclick”, function (e) {

var item = e.node;

lastmenuitem = item;

if (item.url)

addmaintab({ title: item.name, id: item.id, url: item.url, iconcls: item.icon }, true);

});

var portal = new mini.ux.portal();

portal.set({

style: “width: 98%; height:auto;overflow:hidden”,

columns: [‘60%’, ‘40%’]

});

var tab = mini.get(“maintabs”);

window.loadrelationtab = function (id) {

var tree = mini.get(“application_tree”);

var node = tree.getnode(id);

if (node != null)

addmaintab({ title: node.name, id: node.id, url: node.url, iconcls: node.icon }, true);

}

$(“#btn_exit”).bind(“click”, function () {

msgbox(“是否确定注销登录?”, “系统提示”, 2, function (action) {

if (action == “yes”)

window.location.replace(‘@url.action(“exit”, “accounts”)’);

});

$(“#btn_pass”).click(function () {

top.createpopwindow(‘@url.action(“userset”, “accounts”)’, ‘用户设置’, 400, 300, function () {

var iframe = this.getiframeel();

iframe.contentwindow.opencontext = { parent: window, popwin: this };

}, null, null)

});

$(“#btn_role”).click(function () {

$.getjson(‘@url.action(“reloadrole”, “accounts”)’, function (e) {

msgbox(e.message, “系统提示”, 0, function () { window.top.location.replace(‘@url.action(“index”, “home”)’); });

});

portal.render(document.getelementbyid(“portal_panels”)); //tab.getbodyel(tab.tabs[0]).firstchild);

$.getjson(‘@url.action(“portalpanels”)’, function (data) {

$(data).each(function () {

this.height = “auto”;

this.bodystyle = “overflow:hidden”;

this.showclosebutton = false;

this.showcollapsebutton = false;

this.onload = function (e) {

var el = e.sender.getiframeel();

var cb = $(el.contentwindow.document.body);

cb.css(“height”, “auto”);

e.sender.setheight(cb.height() + 40);

if (el.contentwindow.onportalload) {

el.contentwindow.onportalload(e);

}

};

});

portal.setpanels(data);

});

document.title = ‘@viewbag.title’;

var msgs = [];

var count = 0

var _alert = function (i) {

if (i < count && count > 0) {

if (msgs[i] != “”)

msgbox(msgs[i], “系统提示”, 1, function () { _alert(i + 1) });

else _alert(i + 1)

}

_alert(0);

$.getjson(‘@url.action(“getbrokerwarning”, “common”)’, function (a) {

$(a).each(function () { msgs.push(this); });

count = msgs.length;

_alert(0);

});

</script>

}

<!—代码结束–>

修改文件 view 》 shared 》_layout.cshtml，双击后修改代码,直接粘贴一下代码即可

<!—代码开始–>

<!doctype html public “-//w3c//dtd xhtml 1.0 transitional//en” “http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd”>

<head>

<title>@viewbag.title</title>

@styles.render(“~/content/css”)

@rendersection(“headers”, false)

</head>

<body>

@renderbody()

var reloginurl = ‘@url.action(“relogon”, “accounts”, new { r = true })’;

</script>

@rendersection(“scripts”, false)

</body>

</html>

<!—代码结束–>

运行一下项目

看见上图表示代码嵌入成功，运行正常，安装完成。

2.2 、vs2017中相关页面数据配置。

a、配置左侧菜单栏导航

新建文件 1.txt，放置路径为 content 》 doc 》 1.txt

1.txt文件内容是json格式数据：

[{

“id”: “2”,

“orders”: 1,

“pid”: “1”,

“name”: “菜单管理”,

“url”: “/app/home/treedatalist/2”,

“icon”: “icon-node”

{

“id”: “1”,

“orders”: 2,

“name”: “系统管理”,

“url”: “/app/admin/index/1”,

“icon”: “icon-system”

{

“id”: “6”,

“orders”: 2,

“pid”: “1”,

“name”: “部门管理”,

“url”: “/app/home/treedatalist/6”,

“icon”: “icon-depart”

}]

当前项目下 view 》 home 》 index.cshtml 修改页面代码

代码修改为：

url=”@url.content(“~/content/doc/1.txt”)”

运行一下项目，左边菜单栏出来了，成功。

b、配置右边显示栏数据。

新建文件 1.txt，放置路径为 content 》 doc 》 2.txt

2.txt文件内容是json格式数据：

{

“total”: 1,

“data”: [

{

“id”: 242,

“title”: “关于武汉市商品房网上签约和合同备案系统、武汉市房地产经纪服务平台维护的通知”,

“public_date”: “\/date(1548980328000)\/”,

“content_type”: 1,

“readid”: 0

}

]

}

当前项目下创建新文件 views 》 home 》 noticepanel.cshtml（新创建）

noticepanel.cshtml 页面代码为（可直接复制）：

layout = layout = “~/views/shared/_layout.cshtml”; ;

}

日期

</div>

标题

</div>

</div>

var onnoticelinkrender = function (e) {

var click = “”;

if (e.record.content_type == 1) {

click = “mini.open({url:’@url.action(“noticeview”, “home”)/” + e.record.id + “‘,title:'” + e.record.title + “‘, width:800,height:600,onload:notice_load})”;

if(e.record.impotant_level ==1 && e.record.readid ==0 ){

settimeout(function(){

mini.open({url:’@url.action(“noticeview”, “home”)/’+ e.record.id ,title: e.record.title , width:800,height:600, onload:notice_load})

}, 500);

}

else {

click = “mini.open({url:'”+ e.record.url+”‘,title:'” + e.record.title + “‘, width:800,height:600,onload:notice_load})”;

}

return ‘<a href=”javascript:void(0)” onclick=”‘ + click + ‘”>查看</a>’;

};

$(document).ready(function () {

mini.parse();

window.notice_load = function (a, b, c) {

var iframe = this.getiframeel();

iframe.contentwindow.opencontext = { parent: window, popwin: this };

};

var ng = mini.get(“notice_grid”);

ng.load();

});

</script>

控制器 controller 》 homecontroller.cs 添加方法（直接复制到代码里）

[httpget]

public actionresult noticepanel()

{

return view();

}

最后一步，添加 view 》 home 》 index.cshtml 代码

改为

运行项目，左边数据显示

到此框架的安装，菜单和数据显示都完成，并显示成功了。

2.3 连接数据库操作，页面数据显示，查询列表操作。

a、管理nuget程序包安装 dapper ，在安装mysql驱动，前面有介绍。

b、mysql创建表:

create table `company` (

`id` int(11) not null auto_increment,

`companyname` varchar(100) character set utf8 collate utf8_general_ci null default null comment ‘公司名称’,

`address` varchar(100) character set utf8 collate utf8_general_ci null default null comment ‘地址’,

`mobile` varchar(20) character set utf8 collate utf8_general_ci null default null comment ‘电话’,

`link` varchar(20) character set utf8 collate utf8_general_ci null default null comment ‘联系人’,

`intodate` datetime(0) null default null comment ‘注册时间’,

primary key (`id`) using btree

) engine = innodb auto_increment = 1 character set = utf8 collate = utf8_general_ci row_format = compact;

set foreign_key_checks = 1;

c、从数据库取数据，页面显示列表。

修改content 》 doc 》 1.txt 文件内容。

{

“id”: “6”,

“orders”: 2,

“pid”: “1”,

“name”: “部门管理”,

“url”: “/app/home/treedatalist/6”,

“icon”: “icon-depart”

}

修改代码为：

{

“id”: “6”,

“orders”: 2,

“pid”: “1”,

“name”: “部门管理”,

“url”: ” /home/company”,

“icon”: “icon-depart”

}

添加实体类

class company

{

public int id { get; set; }

public string companyname { get; set; } //公司名

public string address { get; set; } //地址

public string mobile { get; set; } //电话

public string link { get; set; } //联系人

public datetime intodate { get; set; } //注册时间

}

在控制器添加方法，controllers 》homecontroller

[httppost]

public actionresult companylist(int? pageindex, int? pagesize)

{

using (var conn = new mysqlconnection(connectionstring))

{

pageindex = pageindex ?? 0;

pagesize = pagesize ?? 10;

var query = “select * from company”;

var result = conn.query<company>(query).tolist();

var total = result.count();

var list = result

.orderbydescending(d => d.id).skip((pageindex * pagesize).value)

.take((pagesize).value).select(d => new

{

d.id,

d.companyname,

d.address,

d.mobile,

d.link,

d.intodate

}).tolist();

return json(new { total = total, data = list }, jsonrequestbehavior.allowget);

}

运行项目，在左侧点击菜单 部门管理

完成从数据库取数据并在页面上显示，点击分页显示下页数据。

可加qq群学习索取源码：qq：547765059

黄山市民网：https://www.huangshanshimin.com/