接下来做的是对页面的增删改查与页面与页面按钮之间的联系。先上代码和页面效果
using AuthorDesign.Web.App_Start.Common;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace AuthorDesign.Web.Areas.Admin.Controllers {
public class PageMenuController : Controller {
//
// GET: /Admin/PageMenu/ public ActionResult PageMenuList() {
ViewBag.Title = "页面菜单列表";
return View();
}
/// <summary>
/// 获取菜单列表
/// </summary>
/// <param name="listPage"></param>
/// <param name="pid"></param>
/// <param name="layer"></param>
/// <returns></returns>
[ChildActionOnly]
public ActionResult ShowMenuList(List<Model.PageMenu> listPage, int pid = , int layer = ) {
ViewBag.Pid = pid;
ViewBag.Layer = layer;
return View(listPage);
}
[ChildActionOnly]
public ActionResult ShowMenuSelectList(List<Model.PageMenu> listPage, int pid = , int layer = ) {
ViewBag.Pid = pid;
ViewBag.Layer = layer;
return View(listPage);
}
/// <summary>
/// 获取页面信息
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
[HttpPost]
public JsonResult GetPageMenuInfo(int id = ) {
var result = EnterRepository.GetRepositoryEnter().GetPageMenuRepository.LoadEntities(m => m.Id == id).FirstOrDefault();
if (result == null) {
return Json(new { state = "error", message = "页面不存在" });
}
else {
return Json(new { state = "success", result });
}
} /// <summary>
/// 添加页面
/// </summary>
/// <param name="model"></param>
/// <returns></returns>
[HttpPost]
public JsonResult AddPageMenu(Models.PageMenuModel model) {
if (ModelState.IsValid) {
IDAL.IPageMenuRepository pageMenuRepository = EnterRepository.GetRepositoryEnter().GetPageMenuRepository;
//判断权限名称是否已存在
var result = pageMenuRepository.LoadEntities(m => m.Name == model.Name.Trim()).FirstOrDefault();
if (result == null) {
pageMenuRepository.AddEntity(new Model.PageMenu() {
Ico = model.Ico,
IsShow = model.IsShow,
Name = model.Name,
OrderNum = model.OrderNum,
PageUrl = model.PageUrl,
PId = model.PId
});
//添加下操作记录
PublicFunction.AddOperation(, string.Format("添加页面"), string.Format("添加页面=={0}==成功", model.Name));
if (EnterRepository.GetRepositoryEnter().SaveChange() > ) {
return Json(new {
state = "success",
message = "添加页面成功"
});
}
else {
PublicFunction.AddOperation(, string.Format("添加页面"), string.Format("添加页面=={0}==失败", model.Name));
EnterRepository.GetRepositoryEnter().SaveChange();
return Json(new {
state = "error",
message = "添加页面失败"
});
}
}
else {
return Json(new {
state = "error",
message = "页面名称已经存在了"
});
}
}
else {
return Json(new {
state = "error",
message = "信息不完整"
});
}
}
/// <summary>
/// 修改页面
/// </summary>
/// <param name="model"></param>
/// <returns></returns>
[HttpPost]
public JsonResult UpdatePageMenu(Models.PageMenuModel model) {
if (ModelState.IsValid && model.Id > ) {
if (model.Id == model.PId) {
return Json(new { state = "error", message = "不能讲自己作为自己的父类" });
}
IDAL.IPageMenuRepository pageMenuRepository = EnterRepository.GetRepositoryEnter().GetPageMenuRepository;
var result = pageMenuRepository.LoadEntities(m => m.Name == model.Name.Trim()).FirstOrDefault();
if (result != null && result.Id != model.Id) {
return Json(new {
state = "error",
message = "页面名称已经存在了"
});
}
else {
Model.PageMenu pageMenu = new Model.PageMenu() {
Ico = model.Ico,
IsShow = model.IsShow,
Name = model.Name,
OrderNum = model.OrderNum,
PageUrl = model.PageUrl,
PId = model.PId,
Id = model.Id
};
pageMenuRepository.Get(m => m.Id == model.Id);
pageMenuRepository.EditEntity(pageMenu, new string[] { "Ico", "IsShow", "Name", "OrderNum", "PageUrl", "PId" });
PublicFunction.AddOperation(, string.Format("修改页面"), string.Format("修改页面=={0}==成功", model.Name));
if (EnterRepository.GetRepositoryEnter().SaveChange() > ) {
return Json(new {
state = "success",
message = "修改页面成功"
});
}
else {
PublicFunction.AddOperation(, string.Format("修改页面"), string.Format("修改页面=={0}==失败", model.Name));
EnterRepository.GetRepositoryEnter().SaveChange();
return Json(new {
state = "error",
message = "修改页面失败"
});
}
}
}
else {
return Json(new {
state = "error",
message = "信息不完整"
});
}
}
/// <summary>
/// 删除页面
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
[HttpPost]
public JsonResult DeletePageMenu(int id = ) {
EnterRepository.GetRepositoryEnter().GetPageMenuRepository.DeleteEntity(new Model.PageMenu() { Id = id });
PublicFunction.AddOperation(, string.Format("删除页面"), string.Format("删除页面成功"));
//删除页面与按钮之间的关系表
EnterRepository.GetRepositoryEnter().GetActionToPageRepository.DeleteByPageId(id);
if (EnterRepository.GetRepositoryEnter().SaveChange() > ) {
return Json(new { state = "success", message = "删除页面成功" });
}
else {
PublicFunction.AddOperation(, string.Format("删除页面"), string.Format("删除页面失败"));
EnterRepository.GetRepositoryEnter().SaveChange();
return Json(new { state = "error", message = "服务器泡妞去了" });
}
}
/// <summary>
/// 获取页面按钮
/// </summary>
/// <param name="id">页面Id</param>
/// <returns></returns>
[HttpPost]
public JsonResult GetAction(int id = ) {
IDAL.IActionToPageRepository actionPageRepository = EnterRepository.GetRepositoryEnter().GetActionToPageRepository;
var result = actionPageRepository.LoadEntities(m => m.PageId == id).FirstOrDefault();
return Json(new { state="success",actionList=result==null?"":result.ActionList});
} /// <summary>
/// 修改页面按钮
/// </summary>
/// <param name="ActionListId">按钮Id，多个用逗号隔开</param>
/// <param name="id">页面Id</param>
/// <returns></returns>
[HttpPost]
public JsonResult UpdateAction(string ActionListId, int id = ) {
IDAL.IActionToPageRepository actionPageRepository= EnterRepository.GetRepositoryEnter().GetActionToPageRepository;
var result = actionPageRepository.LoadEntities(m => m.PageId == id).FirstOrDefault();
if (result == null) {
Model.ActionToPage actionPage = new Model.ActionToPage() { ActionList = ActionListId, PageId = id, IsDelete = string.IsNullOrEmpty(ActionListId) ? (byte) : (byte) };
actionPageRepository.AddEntity(actionPage);
PublicFunction.AddOperation(, string.Format("编辑页面与页面按钮"), string.Format("编辑页面与页面按钮成功"));
if (EnterRepository.GetRepositoryEnter().SaveChange() > ) {
return Json(new { state = "success", message = "添加页面按钮成功" });
}
else {
PublicFunction.AddOperation(, string.Format("编辑页面与页面按钮"), string.Format("编辑页面与页面按钮失败"));
EnterRepository.GetRepositoryEnter().SaveChange();
return Json(new { state = "error", message = "服务器泡妞去了" });
}
}
else {
result.ActionList = ActionListId;
result.IsDelete = string.IsNullOrEmpty(ActionListId) ? (byte) : (byte);
PublicFunction.AddOperation(, string.Format("编辑页面与页面按钮"), string.Format("编辑页面与页面按钮成功"));
if (EnterRepository.GetRepositoryEnter().SaveChange() > ) {
return Json(new { state = "success", message = "修改页面按钮成功" });
}
else {
PublicFunction.AddOperation(, string.Format("编辑页面与页面按钮"), string.Format("编辑页面与页面按钮失败"));
EnterRepository.GetRepositoryEnter().SaveChange();
return Json(new { state = "error", message = "服务器泡妞去了" });
}
}
}
}
}
@section Header{
<link href="/Content/assets/css/chosen.css" rel="stylesheet" />
<style type="text/css">
.chosen-container {
width: 180px;
}
/*分类树*/
#categoryTree {
padding-left: 15px;
margin-top: 15px;
text-align: left;
}
#categoryTree thead th {
background: #dbeffa;
font-weight: normal;
cursor: pointer;
padding: 4px ;
padding-left: 10px;
}
#categoryTree table tbody th {
text-align: left;
font-weight: normal;
}
#categoryTree table tbody th span {
display: inline-block;
width: 16px;
height: 16px;
cursor: pointer;
float: left;
}
#categoryTree table tbody th span.open {
background: url(/Content/Images/tree_open.gif) no-repeat center center;
}
#categoryTree table tbody th span.close {
background: url(/Content/Images/tree_close.gif) no-repeat center center;
}
#categoryTree tbody td, #categoryTree tbody th {
border-bottom: 1px solid #ececec;
padding: 4px ;
padding-left: 10px;
}
#categoryTree table tbody tr {
display: table-row;
}
#categoryTree table tbody tr.tree1 {
display: table-row;
}
</style>
}
@{
//加载页面列表
var result = AuthorDesign.Web.App_Start.Common.EnterRepository.GetRepositoryEnter().GetPageMenuRepository.LoadEntities().OrderBy(m => m.OrderNum).ToList();
//加载按钮列表
var actionList = AuthorDesign.Web.App_Start.Common.EnterRepository.GetRepositoryEnter().GetPageActionRepository.LoadEntities().OrderBy(m => m.ActionLevel).ToList();
}
<div class="main-content">
<div class="breadcrumbs" id="breadcrumbs">
<script type="text/javascript">
try { ace.settings.check('breadcrumbs', 'fixed') } catch (e) { }
</script>
<ul class="breadcrumb">
<li>
<i class="icon-home home-icon"></i>
<a href="/Admin/Home">首页</a>
</li>
<li>
<a href="/Admin/PageMenu/PageMenuList">页面列表</a>
</li>
<li class="active">页面列表</li>
</ul><!-- .breadcrumb -->
<!-- #nav-search -->
</div>
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<div class="col-sm-12">
<div class="widget-header header-color-blue2">
<h4 class="lighter smaller">页面列表</h4>
</div>
<div class="widget-body">
<div class="widget-main">
<label class="AddRole">
<a id="AddNewRole" class="btn btn-xs btn-primary" data-toggle="modal" href="" onclick="showAddNewAdmin()" title="添加新页面">
<i class="icon-plus-sign bigger-130"></i>
添加新页面
</a>
</label>
<div class="table-responsive">
<div class="table_top"></div>
<div id="categoryTree">
<table width="100%">
<thead>
<tr>
<th align="left">页面名称</th>
<th width="" align="center">图标</th>
<th width="" align="center">是否显示</th>
<th width="" align="center">排序</th>
<th width="" align="center">管理操作</th>
</tr>
</thead>
<tbody>
@Html.Action("ShowMenuList", "PageMenu", new { listPage = result, pid = , layer = })
</tbody>
</table>
</div>
<div class="table_bottom"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ShowAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
@RenderPage("/Areas/Admin/Views/PageMenu/DisplayTemplates/PageMenuTemp.cshtml", new { ItemList = result })
</div>
<div class="modal fade" id="ShowAction" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="main-content col-xs-8" style="margin-top: 70px; margin-left: 15%;">
<div class="page-content">
<div class="row">
<section>
<div class="page-header">
<h1>
页面管理
<small>
<i class="icon-double-angle-right"></i>
<span id="ShowText">页面按钮编辑</span>
</small>
</h1>
</div>
<div class="col-lg-10 col-lg-offset-2">
<form id="AddRole111Form" class="form-horizontal">
<input type="hidden" value="" id="UpdateActionId" />
<fieldset>
<div class="form-group">
<label class="col-lg-3 control-label">请选择页面按钮:</label>
<div class="col-lg-7" id="ActionListIdSelect">
<select multiple="" class="chosen-select tag-input-style" id="ActionListId" name="ActionListId" data-placeholder="请选择所页面按钮">
@foreach (var item in actionList) {
<option value=@item.Id>@item.Name</option>
}
</select>
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button class="btn btn-primary UpdateRole" type="button" onclick="UpdateActionSubmit()">
<i class="icon-ok bigger-110"></i>
确定
</button>
<button class="btn" type="reset" data-dismiss="modal">
<i class="icon-undo bigger-110"></i>
取消
</button>
</div>
</div>
</form>
</div>
</section>
<!-- /.row -->
</div>
</div>
<!-- /.page-content -->
</div>
</div>
@section Script{
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="/Content/assets/js/bootbox.min.js"></script>
<script src="~/Content/assets/js/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#PId").chosen();
$("#ActionListId").chosen();
$(".chosen-container").css("width", "180px");
});
function showAddNewAdmin() {
$("#Id").val();
$('#ShowAdd').modal();
}
//分类树展开/关闭
function categoryTree(obj, layer) {
var state = $(obj).attr("class");
if (state == "open") {
$(obj).parent().parent().nextAll().each(function (index) {
var flag = parseInt($(this).attr("layer")) - layer;
if (flag == ) {
$(this).show();
}
else if (flag == ) {
return false;
}
})
if ($(obj).hasClass("open")) {
$(obj).removeClass("open").addClass("close");
}
}
else if (state == "close") {
$(obj).parent().parent().nextAll().each(function (index) {
if (parseInt($(this).attr("layer")) > layer) {
$(this).hide();
$(this).find("th span").each(function (i) {
if ($(this).attr("class") != "" && $(this).attr("class") != undefined) {
$(this).removeClass("close").addClass("open");
}
})
}
else {
return false;
}
})
if ($(obj).hasClass("close")) {
$(obj).removeClass("close").addClass("open");
}
}
}
$("#categoryTree tbody tr").each(function () {
var layer = parseInt($(this).attr("layer")) + ;
if ($(this).next("tr[layer='" + layer + "']") == undefined || $(this).next("tr[layer='" + layer + "']").length < ) {
if ($(this).find(".close") != undefined && $(this).find(".close").length > ) {
$(this).find(".close").attr("class", $(this).find(".close").attr("class").replace("close", ""));
}
}
});
$("#AddRoleForm").submit(function () {
if ($("#AddRoleForm").valid()) {
var url = "/Admin/PageMenu/AddPageMenu";
if ($("#Id").val() > ) {
url = "/Admin/PageMenu/UpdatePageMenu";
}
$.ajax({
type: "post",
data: $("#AddRoleForm").serialize(),
url: url,
success: function (result) {
if (result.state == "success") {
$('#ShowAdd').modal('hide');//关闭模态框
document.getElementById("AddRoleForm").reset();//清空表单
bootbox.alert({
buttons: {
ok: {
label: '我知道了',
className: 'btn btn-primary'
}
}, callback: function () {
location.href = location.href;
},
message: result.message
});
} else {
bootbox.alert({
buttons: {
ok: {
label: '我知道了',
className: 'btn btn-primary'
}
}, callback: function () {
},
message: result.message
});
}
}
})
return false;
}
else {
return false;
}
})
function UpdateObj(id) {
$.ajax({
type: "post",
data: { id: id },
url: "/Admin/PageMenu/GetPageMenuInfo",
success: function (result) {
if (result.state == "success") {
$("#Id").val(id);
$("#Name").val(result.result.Name);
$("#PageUrl").val(result.result.PageUrl);
$("#OrderNum").val(result.result.OrderNum);
$("#Ico").val(result.result.Ico);
if (result.result.IsShow == ) {
$("input[name='IsShow']").eq().removeAttr("checked");
$("input[name='IsShow']").eq().attr("checked", "checked");
}
else {
$("input[name='IsShow']").eq().attr("checked", "checked");
$("input[name='IsShow']").eq().removeAttr("checked");
}
$("#PId option[value='" + result.result.PId + "']").attr("selected", "selected");
$("#PidSelect").html($("#PId"));
$("#PId").chosen();;
$(".chosen-container").css("width", "180px");
$('#ShowAdd').modal();
} else {
bootbox.alert({
buttons: {
ok: {
label: '我知道了',
className: 'btn btn-primary'
}
}, callback: function () {
},
message: result.message
});
}
}
})
}
function DeleteObj(id) {
bootbox.confirm({
buttons: {
confirm: {
label: '确定',
className: 'btn-primary'
},
cancel: {
label: '取消',
className: 'btn-default'
}
},
message: "确定要彻底删除页面吗？",
callback: function (result) {
if (result) {
$.ajax({
type: "post",
data: { id: id },
url: "/Admin/PageMenu/DeletePageMenu",
success: function (result) {
if (result.state == "success") {
bootbox.alert({
buttons: {
ok: {
label: '我知道了',
className: 'btn btn-primary'
}
}, callback: function () {
location.href = location.href;
},
message: result.message
});
} else {
bootbox.alert({
buttons: {
ok: {
label: '我知道了',
className: 'btn btn-primary'
}
}, callback: function () {
},
message: result.message
});
}
}
})
}
}
});
}
function UpdateAction(id) {
$("#UpdateActionId").val(id);
$.ajax({
url: "/Admin/PageMenu/GetAction",
type: "post",
data: {id:id},
success: function (result) {
if (result.state == "success") {
$("#ActionListId option[selected='selected']").each(function () {
$(this).attr("selected", false);
})
if (result.actionList != null&& result.actionList != "") {
var stringId = result.actionList.split(',');
for (var i = ; i < stringId.length; i++) {
$("#ActionListId option[value='" + stringId[i] + "']").attr("selected", "selected");
}
}
$("#ActionListIdSelect").html($("#ActionListId"));
$("#ActionListId").chosen();;
$(".chosen-container").css("width", "180px");
$('#ShowAction').modal();
}
}
})
}
function UpdateActionSubmit() {
var listId = $("#ActionListId").val();
var ActionListId = "";
if (listId != null) {
for (var i = ; i < listId.length; i++) {
if (ActionListId == "") {
ActionListId += listId[i];
} else {
ActionListId +=","+ listId[i];
}
}
}
$.ajax({
type: "post",
url: "/Admin/PageMenu/UpdateAction",
data: { id: $("#UpdateActionId").val(), ActionListId: ActionListId },
success: function (result) {
$('#ShowAction').modal('hide');//关闭模态框
if (result.state == "success") {
bootbox.alert({
buttons: {
ok: {
label: '我知道了',
className: 'btn btn-primary'
}
}, callback: function () {
},
message: result.message
});
} else {
bootbox.alert({
buttons: {
ok: {
label: '我知道了',
className: 'btn btn-primary'
}
}, callback: function () {
},
message: result.message
});
}
}
})
}
</script>
}
@{
Layout = null;
}
@model List<AuthorDesign.Model.PageMenu>
@foreach (var item in Model.Where(m => m.PId == ViewBag.Pid)) {
int layer = ViewBag.Layer;
<tr layer="@layer">
<th>
@Html.Raw(AuthorDesign.Web.App_Start.Common.PublicFunction.GetHtmlSpan(layer))
<span class="close" attr-id="close" onclick="categoryTree(this,@layer)"></span>
@item.Name
</th>
<td><i class="@item.Ico bigger-120"></td>
<td>@if(item.IsShow == ){
<i class="icon-ok green bigger-120"></i>
}else{
<i class="icon-remove red bigger-120"></i>
}</td>
<td>@item.OrderNum</td>
<td>
<a href="javascript:UpdateObj('@item.Id')" class="editOperate LookRole" title="编辑"><i class="icon-pencil green bigger-120"></i></a>
<a href="javascript:UpdateAction('@item.Id')" class="editOperate LookRole" title="动作编辑"><i class="icon-user green bigger-120"></i></a>
<a href="javascript:DeleteObj('@item.Id')" class="deleteOperate DeleteRole" title="删除"><i class="icon-trash red bigger-120"></i></a>
</td>
</tr>
var childMenu = Model.Where(m => m.PId == item.Id);
layer=layer+;
if (childMenu.Count() > ) {
@Html.Action("ShowMenuList", "PageMenu", new { listPage = Model, pid = item.Id, layer = layer })
}
layer = layer - ;
}
@{
Layout = null;
}
@model List<AuthorDesign.Model.PageMenu>
@foreach (var item in Model.Where(m => m.PId == ViewBag.Pid)) {
int layer = ViewBag.Layer;
<option value="@item.Id">@Html.Raw(AuthorDesign.Web.App_Start.Common.PublicFunction.GetHtmlBS(layer)) @item.Name</option>
var childMenu = Model.Where(m => m.PId == item.Id);
layer = layer + ;
if (childMenu.Count() > ) {
@Html.Action("ShowMenuSelectList", "PageMenu", new { listPage = Model, pid = item.Id, layer = layer })
}
layer = layer - ;
}
@model AuthorDesign.Web.Areas.Admin.Models.PageMenuModel <div class="main-content col-xs-8" style="margin-top: 70px; margin-left: 15%;">
<div class="page-content">
<div class="row">
<section>
<div class="page-header">
<h1>
页面管理
<small>
<i class="icon-double-angle-right"></i>
<span id="ShowText">页面编辑</span>
</small>
</h1>
</div>
<div class="col-lg-10 col-lg-offset-2">
<form id="AddRoleForm" class="form-horizontal">
<fieldset>
@Html.HiddenFor(m => m.Id)
<div class="form-group">
<label class="col-lg-3 control-label">页面名称<span style="color:red;">*</span>:</label>
<div class="col-lg-7" style="float:left;">
@Html.TextBoxFor(m => m.Name, new { @class = "col-sm-8" })
@Html.ValidationMessageFor(m => m.Name)
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">所属页面:</label>
<div class="col-lg-7" id="PidSelect">
<select class="chosen-select tag-input-style" id="PId" name="PId" data-placeholder="请选择所属页面">
<option value="">最*页面</option>
@Html.Action("ShowMenuSelectList", "PageMenu", new { listPage = PageData["ItemList"], pid = , layer = })
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">页面路径:</label>
<div class="col-lg-7">
@Html.TextBoxFor(m => m.PageUrl, new { @class = "col-sm-8" })
@Html.ValidationMessageFor(m => m.PageUrl)
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">排序:</label>
<div class="col-lg-7">
@Html.TextBoxFor(m => m.OrderNum, new { @class = "col-sm-8" })
@Html.ValidationMessageFor(m => m.OrderNum)
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">页面图标:</label>
<div class="col-lg-7">
@Html.TextBoxFor(m => m.Ico, new { @class = "col-sm-8" })
@Html.ValidationMessageFor(m => m.Ico)
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">是否显示</label>
<div class="col-lg-7">
<label>
<input name="IsShow" type="radio" class="ace" value="" checked="checked" />
<span class="lbl">不显示</span>
</label>
<label>
<input name="IsShow" type="radio" class="ace" value="" />
<span class="lbl">显示</span>
</label>
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button class="btn btn-primary UpdateRole" type="submit">
<i class="icon-ok bigger-110"></i>
保存
</button>
<button class="btn" type="reset" data-dismiss="modal">
<i class="icon-undo bigger-110"></i>
取消
</button>
</div>
</div>
</form>
</div>
</section>
<!-- /.row -->
</div>
</div>
<!-- /.page-content -->
</div>
原来打算在页面与页面按钮之间的关系表存json格式的，现在想想还是用多个Id之间用逗号隔开这种了，因为感觉页面与页面按钮之间的关系只有在给角色分配页面权限和给管理员分配页面权限的时候用到，所以就用了简单的多个id之间逗号隔开的这种了。那么页面这块就简单的完成了