项目架构开发：展现层（上）

上次我们创建了项目的服务层，服务层在业务逻辑简单，或项目运行初期不是很容易体现出他的价值；传送门：项目架构开发：服务层（上）

服务层专门处理非业务逻辑的一些功能，比如缓存、异常处理、组织多个应用逻辑等；这次我们搭建最上层的展现层，用到的知识面包括以下：

asp.net mvc5 + bootstrap + autofac + AutoMapper

这次我们没有用服务层，而是直接调用应用逻辑层接口方法，其实对小项目来说，这样已经足够了；服务层我们下次再讲吧

现在开始吧!

1、创建MVC + UnitTest

先搭建个框架，网上找的后台模板

 2、ViewModel

 UI的数据载体最好新建一个viewmodel，这样就不用依赖DTO或PO，因为页面上显示的数据实体一般比较大，会封装比DTO多的多的属性

LoginUserViewModel.cs

using Infrastructure.Common;
using System;
using System.Collections.Generic;

namespace Presentation.MVC.Models
{
    public class LoginUserViewModel
    {
        public int RowNumber { get; set; }

        public Guid Id { get; set; }
        public string LoginName { get; set; }
        public short? IsEnabled { get; set; }
        public DateTime? CreateTime { get; set; }
    }

    public class LoginUserListViewModel
    {
        public List<LoginUserViewModel> Items { get; set; }
    }

    public class LoginUserPageViewModel : PageViewModelBase
    {
        public List<LoginUserViewModel> Items { get; set; }
    }
}

PageViewModelBase.cs （这个是分页时候用的，如上边标红实体）

using Infrastructure.Common;

namespace Presentation.MVC.Models
{
    public class PageViewModelBase
    {
        public bool IsFirst { get; set; }
        public bool IsLast { get; set; }

        public Page Page { get; set; }
        public int Total { get; set; }
        public int TotalPage
        {
            get
            {
                return (Total % Page.PageSize) == 0 ? Total / Page.PageSize : (Total / Page.PageSize) + 1;
            }
        }

        public int PrePage
        {
            get
            {
                if (Page.PageIndex == 1)
                {
                    IsFirst = true;
                    return 1;
                }
                else
                {
                    IsFirst = false;
                    return Page.PageIndex - 1;
                }
            }
        }
        public int NextPage
        {
            get
            {
                if (Page.PageIndex == TotalPage)
                {
                    IsLast = true;
                    return TotalPage;
                }
                else
                {
                    IsLast = false;
                    return Page.PageIndex + 1;
                }
            }
        }
    }
}

 3、映射

 主要是DTO映射成ViewModel，这里我们用的是AutoMapper

AutoMapperConfiguration.cs，AutoMapper用法很简单，引用他，然后像下边代码那样写，然后再应用启动的时候加载

using AutoMapper;
using Business.ReverseDDD.Model;
using Presentation.MVC.Models;

namespace Presentation.MVC.Mappings
{
    public class AutoMapperConfiguration
    {
        public static void Configure()
        {
            Mapper.CreateMap<LoginUser, LoginUserViewModel>();

        }
    }
}

Global.asax.cs

protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);

            AutoMapperConfiguration.Configure();
        }

4、视图

为了方便，CURD都在一个页面实现了

@model Presentation.MVC.Models.LoginUserPageViewModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Bootstrap.cshtml";
}

<div class="container">
    <h2></h2>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion"
                   href="#collapseOne" id="actionType">
                    新增用户
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">

                @using (Html.BeginForm("Add", "LoginUser", null, FormMethod.Post, new { @id = "formLoginUser", @class = "form-horizontal", role = "form" }))
                {
                    @Html.AntiForgeryToken()

                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">登录名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="LoginName" id="LoginName"
                                   placeholder="请输入登录账户名" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="lastname" class="col-sm-2 control-label">登录密码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="Password" id="Password"
                                   placeholder="请输入登录密码" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="IsEnabled" id="IsEnabled" value="1" /> 是否有效
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input type="hidden" name="Id" id="Id" />
                            <button type="submit" class="btn btn-default">提交</button>
                        </div>
                    </div>
                }

            </div>
        </div>
    </div>


    <h4>用户列表</h4>
    <table id="list" class="table table-striped table-bordered table-hover table-condensed">
        <thead>
            <tr>
                <th>序号</th>
                <th>登录名</th>
                <th>是否有效</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Items)
            {
                <tr>
                    <td>@item.RowNumber</td>
                    <td>@item.LoginName</td>
                    <td>@item.IsEnabled</td>
                    <td>@item.CreateTime</td>
                    <td>
                        <button type="button" class="btn btn-link btn-xs" key="@item.Id" action="edit">修改</button>
                        <button type="button" class="btn btn-link btn-xs" key="@item.Id" action="delete">删除</button>
                    </td>
                </tr>
            }
        </tbody>
    </table>

    <ul class="pagination">
        <li><a href="/LoginUsers/@Model.PrePage">&laquo;</a></li>
        @for (int index = 1; index <= Model.TotalPage; index++)
        {
            if (Model.Page.PageIndex == index)
            {
                <li class="active"><a href="/LoginUsers/@index">@index</a></li>
            }
            else
            {
                <li><a href="/LoginUsers/@index">@index</a></li>
            }
        }
        <li><a href="/LoginUsers/@Model.NextPage">&raquo;</a></li>
    </ul>

    <script type="text/javascript">
        $(function () {
            $(".btn-link").click(function () {
                var obj = $(this);
                var key = obj.attr("key");
                if (key == undefined || key == null || key == "") return;

                var action = obj.attr("action");

                if (action == "delete") {
                    CreateDeleteWindow(function () {
                        location.href = "/LoginUser/Delete/" + key;
                    });
                }

                if (action == "edit") {
                    $.ajax({
                        url: "/LoginUser/Edit/" + key,
                        type: "GET",
                        dataType: 'json',
                        success: function (result) {
                            $("#Id").val(result.Id);
                            $("#LoginName").val(result.LoginName);
                            if (result.IsEnabled == 1) $("#IsEnabled").attr("checked", "true");
                            else $("#IsEnabled").removeAttr("checked");

                            $('#collapseOne').collapse('show');
                            $("#formLoginUser").attr("action", "/LoginUser/Edit");
                            $("#actionType").html("修改用户");
                        },
                        error: function (e) {
                            alert(e);
                        }
                    });
                }
            });

        });
    </script>

</div>

其实也没什么特别的就是用了Bootstrap美化页面样式，对Bootstrap不懂的请点击这里

5、控制器

LoginUserController.cs

using AutoMapper;
using Business.DTO.Request;
using Business.ReverseDDD.IApplication;
using Infrastructure.Common;
using LingExtensions;
using Presentation.MVC.Models;
using System;
using System.Collections.Generic;
using System.Web.Mvc;

namespace Presentation.MVC.Controllers
{
    public class LoginUserController : Controller
    {
        private ILoginUserApplication loginUserApplication;

        public LoginUserController(ILoginUserApplication loginUserApplication)
        {
            this.loginUserApplication = loginUserApplication;
        }

        [Route("LoginUsers/{PageIndex=1}")]
        public ActionResult Index(string PageIndex)
        {
            Page page = new Page();
            page.PageIndex = PageIndex.ToInt(1);

            var model = new LoginUserPageViewModel();
            var soure = this.loginUserApplication.GetPage(page, w => w.OrderByDescending(t => t.CreateTime));

            model.Items = Mapper.Map<List<LoginUserViewModel>>(soure.Item2);
            model.Total = soure.Item1;
            model.Page = page;

            return View(model);
        }

        [HttpPost]
        [ValidateAntiForgeryToken] 
        public ActionResult Add(LoginUserCURequest entity)
        {
            this.loginUserApplication.Add(new LoginUserCURequest()
            {
                Id = Guid.NewGuid(),
                LoginName = entity.LoginName,
                Password = entity.Password,
                IsEnabled = entity.IsEnabled
            });

            return RedirectToAction("Index");
        }

        [HttpGet]
        public ActionResult Delete(string id)
        {
            this.loginUserApplication.Delete(Guid.Parse(id));

            return RedirectToAction("Index");
        }

        [HttpGet]
        public ActionResult Edit(Guid id)
        {
            var soure = this.loginUserApplication.Get(id);

            return Json(soure, JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit(LoginUserCURequest entity)
        {
            this.loginUserApplication.Update(new LoginUserCURequest()
            {
                Id = entity.Id,
                LoginName = entity.LoginName,
                Password = entity.Password,
                IsEnabled = entity.IsEnabled
            });

            return RedirectToAction("Index");
        }
    }
}

都是演示CURD的功能，大家不要在意这些细节。。

看标红的地方，意思是将soure.Item2（是Tuple<int, IEnumerable<LoginUser>>类型）转换成List<LoginUserViewModel>

这就是AutoMapper的用法

还有是这里没有依赖具体应用逻辑组件的，只依赖了业务逻辑接口using Business.ReverseDDD.IApplication;

这个是为了解耦，而且对分层并行开发很有用，项目前端后端开发都不用依赖谁开发完才能往下继续；

控制器我们用的是依赖注入Autofac组件：

 6、UnitTest

LoginUserControllerTest.cs， 记得也要Mapping哦

测试通过了

7、UI，我们来看看界面功能

 7.1 新增用户

用户新增成功，列表正常显示数据

7.2 修改数据

修改成功

7.3 分页正常

至此，展现层完成了

8、完整项目架构如下