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
{
<style type="text/css">
.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>
<link href="@url.content("~/content/themes/portal.css")" rel=stylesheet type="text/css" />
}
<div class="mini-layout" style="width: 100%; height: 100%;">
<div title="north" region="north" class="mini-header" bodystyle="overflow:hidden;"
height="77px" showheader="false" showsplit="false">
<div style="width: 100%; height: 100%; background-image: url(@url.content("~/content/themes/images/top2.jpg")); background-repeat: repeat-x;">
<div style="display: block; width: 580px; display: block; float: left">
</div>
<div class="indexnav">
<table width="100%;" style="height: 100%;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="35" align="center"></td>
<td width="115" align="center" class="topz1">
当前登录用户：
</td>
<td class="topz2">
系统管理员
</td>
<td width="8" align="center">
<img src="@url.content("~/content/themes/images/top5.jpg")" width="2" height="27" />
</td>
<td width="25" align="center">
<img src="@url.content("~/content/themes/images/password.gif")" width="25" height="25" />
</td>
<td width="75" align="center" class="topz1">
<a id="btn_pass" href="javascript:void(0)">用户设置</a>
</td>
<td width="25" align="center">
<img src="@url.content("~/content/themes/images/top3.png")" width="25" height="25" />
</td>
<td width="75" align="center" class="topz1">
<a id="btn_role" href="javascript:void(0)">更新权限</a>
</td>
<td width="25" align="center">
<img src="@url.content("~/content/themes/images/top4.png")" width="25" height="25" />
</td>
<td width="75" align="center" class="topz1">
<a id="btn_exit" href="javascript:void(0)">注销登录</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div showheader="false" region="west" width="130" maxwidth="250" minwidth="130" style="border: 0;">
<!--系统菜单-->
<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>
<div title="center" region="center" style="border: 0;">
<div id="maintabs" class="mini-tabs" activeindex="0" style="width: 100%; height: 100%;"
onactivechanged="">
<div title="首页" iconcls='icon-home'>
<div class="mini-fit" id="portal_panels">
</div>
</div>
</div>
</div>
</div>
@section scripts
{
<script src="@url.content("~/scripts/socket.js")" type="text/javascript"></script>
<script src="@url.content("~/scripts/miniui/portal.js")" type="text/javascript" language=javascript></script>
<script language="javascript" type="text/javascript">
$(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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>@viewbag.title</title>
<meta name="viewport" content="width=device-width" />
@styles.render("~/content/css")
<link href="@url.content("~/content/themes/blue/skin.css")" rel="stylesheet" id="skin_l" />
@rendersection("headers", false)
<base target="_self" />
</head>
<body>
<script language="javascript" type="text/javascript" src="@url.content("~/scripts/jquery-1.6.2.js")"></script>
<script language="javascript" type="text/javascript" src="@url.content("~/scripts/jquery.validate.js")"></script>
<script language="javascript" type="text/javascript" src="@url.content("~/scripts/jquery.validate.unobtrusive.js")"></script>
<script language="javascript" type="text/javascript" src="@url.content("~/scripts/miniui/miniui.js")"></script>
<script language="javascript" type="text/javascript" src="@url.content("~/scripts/common.js")"></script>
<script language="javascript" type="text/javascript" src="@url.content("~/scripts/validate.js")"></script>
<script language="javascript" type="text/javascript" src="@url.content("~/scripts/render.js")"></script>
@renderbody()
<script language="javascript" type="text/javascript">
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 id="notice_grid" class="mini-datagrid" style="width:100%; height:240px" url="@url.content("~/content/doc/2.txt")" >
<div property="columns">
<div field="public_date" width="80px" renderer="ondaterender" headeralign="center">
日期
</div>
<div field="title" width="auto" headeralign="center">
标题
</div>
<div width="50px" renderer="onnoticelinkrender">
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
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 代码
<div title="首页" iconcls='icon-home' >
改为
<div title="首页" iconcls='icon-home' url="@url.content("~/home/noticepanel")" >
运行项目，左边数据显示
到此框架的安装，菜单和数据显示都完成，并显示成功了。
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
推荐阅读
-
从零开始搭建前后端分离的NetCore2.2（EF Core CodeFirst+Autofac）+Vue的项目框架之七使用JWT生成Token(个人见解)
-
从零开始搭建前后端分离的NetCore2.2（EF Core CodeFirst+Autofac）+Vue的项目框架之十一Swagger使用一
-
从零开始搭建前后端分离的NetCore2.2（EF Core CodeFirst+Autofac）+Vue的项目框架之六使用过滤器进行全局请求数据验证
-
从零开始搭建前后端分离的NetCore2.2（EF Core CodeFirst+Autofac）+Vue的项目框架之八MemoryCache与redis缓存的使用
-
ruoyi(若依)框架使用说明(前后端分离)
-
java前后端分离项目中使用shiro权限框架遇到的那些坑
-
从零开始搭建前后端分离的NetCore2.2（EF Core CodeFirst+Autofac）+Vue的项目框架之十一Swagger使用一
-
从零开始搭建前后端分离的NetCore2.2（EF Core CodeFirst+Autofac）+Vue的项目框架之七使用JWT生成Token(个人见解)
-
vs2017 + miniUI 后端框架使用
-
ABP开发框架前后端开发系列---（4）Web API调用类的封装和使用