ABP入门系列目录——学习Abp框架之实操演练

这一章节将通过完善Controller、View、ViewModel，来实现展现层的增删改查。最终实现效果如下图：

一、定义Controller

ABP对ASP.NET MVC Controllers进行了集成，通过引入Abp.Web.Mvc命名空间，创建Controller继承自AbpController， 我们即可使用ABP附加给我们的以下强大功能：

  • 本地化
  • 异常处理
  • 对返回的JsonResult进行包装
  • 审计日志
  • 权限认证（[AbpMvcAuthorize]特性）
  • 工作单元（默认未开启，通过添加[UnitOfWork]开启）

1，创建TasksController继承自AbpController

通过构造函数注入对应用服务的依赖。

  1. [AbpMvcAuthorize]
  2.     public class TasksController : AbpController
  3.     {
  4.         private readonly ITaskAppService _taskAppService;
  5.         private readonly IUserAppService _userAppService;
  7.         public TasksController(ITaskAppService taskAppService, IUserAppService userAppService)
  8.         {
  9.             _taskAppService = taskAppService;
  10.             _userAppService = userAppService;
  11.         }
  12. }

二、创建列表展示分部视图（_List.cshtml）

在分部视图中，我们通过循环遍历，输出任务清单。

  1. @model IEnumerable<LearningMpaAbp.Tasks.Dtos.TaskDto>
  2. <div>
  3.     <ul class="list-group">
  4.         @foreach (var task in Model)
  5.         {
  6.             <li class="list-group-item">
  7.                 <div class="btn-group pull-right">
  8.                     <button type="button" class="btn btn-info" onclick="editTask(@task.Id);">Edit</button>
  9.                     <button type="button" class="btn btn-success" onclick="deleteTask(@task.Id);">Delete</button>
  10.                 </div>
  12.                 <div class="media">
  13.                     <a class="media-left" href="#">
  14.                         <i class="fa @task.GetTaskLable() fa-3x"></i>
  15.                     </a>
  16.                     <div class="media-body">
  17.                         <h4 class="media-heading">@task.Title</h4>
  18.                         <p class="text-info">@task.AssignedPersonName</p>
  19.                         <span class="text-muted">@task.CreationTime.ToString("yyyy-MM-dd HH:mm:ss")</span>
  20.                     </div>
  21.                 </div>
  23.             </li>
  24.         }
  25.     </ul>
  26. </div>

三，创建新增分部视图（_CreateTask.cshtml）

为了好的用户体验，我们采用异步加载的方式来实现任务的创建。

1，引入js文件

使用异步提交需要引入jquery.validate.unobtrusive.min.js和jquery.unobtrusive-ajax.min.js，其中jquery.unobtrusive-ajax.min.js，需要通过Nuget安装微软的Microsoft.jQuery.Unobtrusive.Ajax包获取。

然后通过捆绑一同引入到视图中。打开App_Start文件夹下的BundleConfig.cs，添加以下代码：

  1.  bundles.Add(
  2.      new ScriptBundle("~/Bundles/unobtrusive/js")
  3.          .Include(
  4.              "~/Scripts/jquery.validate.unobtrusive.min.js",
  5.              "~/Scripts/jquery.unobtrusive-ajax.min.js"
  6.              )
  7.      );

找到Views/Shared/_Layout.cshtml，添加对捆绑的js引用。

  1. @Scripts.Render("~/Bundles/vendor/js/bottom")
  2. @Scripts.Render("~/Bundles/js")
  3. //在此处添加下面一行代码
  4. @Scripts.Render("~/Bundles/unobtrusive/js")

2，创建分部视图

其中用到了Bootstrap-Modal，Ajax.BeginForm，对此不了解的可以参考

Ajax.BeginForm()知多少

Bootstrap-Modal的用法介绍

该Partial View绑定CreateTaskInput模型。最终_CreateTask.cshtml代码如下：

  1. @model LearningMpaAbp.Tasks.Dtos.CreateTaskInput
  3. @{
  4.     ViewBag.Title = "Create";
  5. }
  6. <div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="createTask" data-backdrop="static">
  7.     <div class="modal-dialog" role="document">
  8.         <div class="modal-content">
  9.             <div class="modal-header">
  10.                 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
  11.                 <h4 class="modal-title" id="myModalLabel">Create Task</h4>
  12.             </div>
  13.             <div class="modal-body" id="modalContent">
  15.                 @using (Ajax.BeginForm("Create", "Tasks", new AjaxOptions()
  16.                 {
  17.                     UpdateTargetId = "taskList",
  18.                     InsertionMode = InsertionMode.Replace,
  19.                     OnBegin = "beginPost('#add')",
  20.                     OnSuccess = "hideForm('#add')",
  21.                     OnFailure = "errorPost(xhr, status, error,'#add')"
  22.                 }))
  23.                 {
  24.                     @Html.AntiForgeryToken()
  25.                     <div class="form-horizontal">
  26.                         <h4>Task</h4>
  27.                         <hr />
  28.                         @Html.ValidationSummary(true, "", new { @class = "text-danger" })
  29.                         <div class="form-group">
  30.                             @Html.LabelFor(model => model.AssignedPersonId, "AssignedPersonId", htmlAttributes: new { @class = "control-label col-md-2" })
  31.                             <div class="col-md-10">
  32.                                 @Html.DropDownList("AssignedPersonId", null, htmlAttributes: new { @class = "form-control" })
  33.                                 @Html.ValidationMessageFor(model => model.AssignedPersonId, "", new { @class = "text-danger" })
  34.                             </div>
  35.                         </div>
  37.                         <div class="form-group">
  38.                             @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
  39.                             <div class="col-md-10">
  40.                                 @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
  41.                                 @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
  42.                             </div>
  43.                         </div>
  45.                         <div class="form-group">
  46.                             @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
  47.                             <div class="col-md-10">
  48.                                 @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
  49.                                 @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
  50.                             </div>
  51.                         </div>
  53.                         <div class="form-group">
  54.                             @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })
  55.                             <div class="col-md-10">
  56.                                 @Html.EnumDropDownListFor(model => model.State, htmlAttributes: new { @class = "form-control" })
  57.                                 @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
  58.                             </div>
  59.                         </div>
  61.                         <div class="form-group">
  62.                             <div class="col-md-offset-2 col-md-10">
  63.                                 <button type="submit" class="btn btn-default">Create</button>
  64.                             </div>
  65.                         </div>
  66.                     </div>
  67.                 }
  68.             </div>
  69.         </div>
  70.     </div>
  71. </div>

对应Controller代码：

  1. [ChildActionOnly]
  2. public PartialViewResult Create()
  3. {
  4.     var userList = _userAppService.GetUsers();
  5.     ViewBag.AssignedPersonId = new SelectList(userList.Items, "Id", "Name");
  6.     return PartialView("_CreateTask");
  7. }
  9. [HttpPost]
  10. [ValidateAntiForgeryToken]
  11. public ActionResult Create(CreateTaskInput task)
  12. {
  13.     var id = _taskAppService.CreateTask(task);
  15.     var input = new GetTasksInput();
  16.     var output = _taskAppService.GetTasks(input);
  18.     return PartialView("_List", output.Tasks);
  19. }

四、创建更新分部视图（_EditTask.cshtml）

同样，该视图也采用异步更新方式，也采用Bootstrap-Modal，Ajax.BeginForm()技术。该Partial View绑定UpdateTaskInput模型。

  1. @model LearningMpaAbp.Tasks.Dtos.UpdateTaskInput
  2. @{
  3.     ViewBag.Title = "Edit";
  4. }
  6. <div class="modal fade" id="editTask" tabindex="-1" role="dialog" aria-labelledby="editTask" data-backdrop="static">
  8.     <div class="modal-dialog" role="document">
  9.         <div class="modal-content">
  10.             <div class="modal-header">
  11.                 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
  12.                 <h4 class="modal-title" id="myModalLabel">Edit Task</h4>
  13.             </div>
  14.             <div class="modal-body" id="modalContent">
  16.                 @using (Ajax.BeginForm("Edit", "Tasks", new AjaxOptions()
  17.                 {
  18.                     UpdateTargetId = "taskList",
  19.                     InsertionMode = InsertionMode.Replace,
  20.                     OnBegin = "beginPost('#editTask')",
  21.                     OnSuccess = "hideForm('#editTask')"
  22.                 }))
  23.                 {
  24.                     @Html.AntiForgeryToken()
  26.                     <div class="form-horizontal">
  27.                         <h4>Task</h4>
  28.                         <hr />
  29.                         @Html.ValidationSummary(true, "", new { @class = "text-danger" })
  30.                         @Html.HiddenFor(model => model.Id)
  32.                         <div class="form-group">
  33.                                 @Html.LabelFor(model => model.AssignedPersonId, "AssignedPersonId", htmlAttributes: new { @class = "control-label col-md-2" })
  34.                                 <div class="col-md-10">
  35.                                     @Html.DropDownList("AssignedPersonId", null, htmlAttributes: new { @class = "form-control" })
  36.                                     @Html.ValidationMessageFor(model => model.AssignedPersonId, "", new { @class = "text-danger" })
  37.                                 </div>
  38.                             </div>
  40.                         <div class="form-group">
  41.                             @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
  42.                             <div class="col-md-10">
  43.                                 @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
  44.                                 @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
  45.                             </div>
  46.                         </div>
  48.                         <div class="form-group">
  49.                             @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
  50.                             <div class="col-md-10">
  51.                                 @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
  52.                                 @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
  53.                             </div>
  54.                         </div>
  56.                         <div class="form-group">
  57.                             @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })
  58.                             <div class="col-md-10">
  59.                                 @Html.EnumDropDownListFor(model => model.State, htmlAttributes: new { @class = "form-control" })
  60.                                 @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
  61.                             </div>
  62.                         </div>
  64.                         <div class="form-group">
  65.                             <div class="col-md-offset-2 col-md-10">
  66.                                 <input type="submit" value="Save" class="btn btn-default" />
  67.                             </div>
  68.                         </div>
  69.                     </div>
  70.                 }
  72.             </div>
  73.         </div>
  74.     </div>
  75. </div>
  76. <script type="text/javascript">
  77.     //该段代码十分重要，确保异步调用后jquery能正确执行验证逻辑
  78.     $(function () {
  79.         //allow validation framework to parse DOM
  80.         $.validator.unobtrusive.parse('form');
  81.     });
  82. </script>

后台代码：

  1. public PartialViewResult Edit(int id)
  2. {
  3.     var task = _taskAppService.GetTaskById(id);
  5.     var updateTaskDto = AutoMapper.Mapper.Map<UpdateTaskInput>(task);
  7.     var userList = _userAppService.GetUsers();
  8.     ViewBag.AssignedPersonId = new SelectList(userList.Items, "Id", "Name", updateTaskDto.AssignedPersonId);
  10.     return PartialView("_EditTask", updateTaskDto);
  11. }
  13. [HttpPost]
  14. [ValidateAntiForgeryToken]
  15. public ActionResult Edit(UpdateTaskInput updateTaskDto)
  16. {
  17.     _taskAppService.UpdateTask(updateTaskDto);
  19.     var input = new GetTasksInput();
  20.     var output = _taskAppService.GetTasks(input);
  22.     return PartialView("_List", output.Tasks);
  23. }

五，创建Index视图

在首页中，我们一般会用来展示列表，并通过弹出模态框的方式来进行新增更新删除。为了使用ASP.NET MVC强视图带给我们的好处（模型绑定、输入校验等等），我们需要创建一个ViewModel来进行模型绑定。因为Abp提倡为每个不同的应用服务提供不同的Dto进行数据交互，新增对应CreateTaskInput，更新对应UpdateTaskInput，展示对应TaskDto。那我们创建的ViewModel就需要包含这几个模型，方可在一个视图中完成多个模型的绑定。

1，创建视图模型（IndexViewModel）

  1. namespace LearningMpaAbp.Web.Models.Tasks
  2. {
  3.     public class IndexViewModel
  4.     {
  5.         /// <summary>
  6.         /// 用来进行绑定列表过滤状态
  7.         /// </summary>
  8.         public TaskState? SelectedTaskState { get; set; }
  10.         /// <summary>
  11.         /// 列表展示
  12.         /// </summary>
  13.         public IReadOnlyList<TaskDto> Tasks { get; }
  15.         /// <summary>
  16.         /// 创建任务模型
  17.         /// </summary>
  18.         public CreateTaskInput CreateTaskInput { get; set; }
  20.         /// <summary>
  21.         /// 更新任务模型
  22.         /// </summary>
  23.         public UpdateTaskInput UpdateTaskInput { get; set; }
  25.         public IndexViewModel(IReadOnlyList<TaskDto> items)
  26.         {
  27.             Tasks = items;
  28.         }
  30.         /// <summary>
  31.         /// 用于过滤下拉框的绑定
  32.         /// </summary>
  33.         /// <returns></returns>
  35.         public List<SelectListItem> GetTaskStateSelectListItems()
  36.         {
  37.             var list=new List<SelectListItem>()
  38.             {
  39.                 new SelectListItem()
  40.                 {
  41.                     Text = "AllTasks",
  42.                     Value = "",
  43.                     Selected = SelectedTaskState==null
  44.                 }
  45.             };
  47.             list.AddRange(Enum.GetValues(typeof(TaskState))
  48.                 .Cast<TaskState>()
  49.                 .Select(state=>new SelectListItem()
  50.                 {
  51.                     Text = $"TaskState_{state}",
  52.                     Value = state.ToString(),
  53.                     Selected = state==SelectedTaskState
  54.                 })
  55.             );
  56.             return list;
  57.         }
  58.     }
  59. }

2，创建视图

Index视图，通过加载Partial View的形式，将列表、新增视图一次性加载进来。

  1. @using Abp.Web.Mvc.Extensions
  2. @model LearningMpaAbp.Web.Models.Tasks.IndexViewModel
  4. @{
  5.     ViewBag.Title = L("TaskList");
  6.     ViewBag.ActiveMenu = "TaskList"; //Matches with the menu name in SimpleTaskAppNavigationProvider to highlight the menu item
  7. }
  8. @section scripts{
  9.     @Html.IncludeScript("~/Views/Tasks/index.js");
  10. }
  11. <h2>
  12.     @L("TaskList")
  14.     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add">Create Task</button>
  16.     <a class="btn btn-primary" data-toggle="modal" href="@Url.Action("RemoteCreate")" data-target="#modal" role="button">（Create Task）使用Remote方式调用Modal进行展现</a>
  18.     <!--任务清单按照状态过滤的下拉框-->
  19.     <span class="pull-right">
  20.         @Html.DropDownListFor(
  21.             model => model.SelectedTaskState,
  22.             Model.GetTaskStateSelectListItems(),
  23.             new
  24.             {
  25.                 @class = "form-control select2",
  26.                 id = "TaskStateCombobox"
  27.             })
  28.     </span>
  29. </h2>
  31. <!--任务清单展示-->
  32. <div class="row" id="taskList">
  33.     @{ Html.RenderPartial("_List", Model.Tasks); }
  34. </div>
  36. <!--通过初始加载页面的时候提前将创建任务模态框加载进来-->
  37. @Html.Action("Create")
  39. <!--编辑任务模态框通过ajax动态填充到此div中-->
  40. <div id="edit">
  42. </div>
  44. <!--Remote方式弹出创建任务模态框-->
  45. <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="createTask" data-backdrop="static">
  46.     <div class="modal-dialog" role="document">
  47.         <div class="modal-content">
  49.         </div>
  50.     </div>
  51. </div>

3，Remote方式创建任务讲解

Remote方式就是，点击按钮的时候去加载创建任务的PartialView到指定的div中。而我们代码中另一种方式是通过@Html.Action("Create")的方式，在加载Index的视图的作为子视图同步加载了进来。

感兴趣的同学自行查看源码，不再讲解。

  1. <a class="btn btn-primary" data-toggle="modal" href="@Url.Action("RemoteCreate")" data-target="#modal" role="button">（Create Task）使用Remote方式调用Modal进行展现</a>
  3. <!--Remote方式弹出创建任务模态框-->
  4. <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="createTask" data-backdrop="static">
  5.     <div class="modal-dialog" role="document">
  6.         <div class="modal-content">
  8.         </div>
  9.     </div>
  10. </div>

4，后台代码

  1.         public ActionResult Index(GetTasksInput input)
  2.         {
  3.             var output = _taskAppService.GetTasks(input);
  5.             var model = new IndexViewModel(output.Tasks)
  6.             {
  7.                 SelectedTaskState = input.State
  9.             };
  10.             return View(model);
  11.         }

5，js代码（index.js）

  1. var taskService = abp.services.app.task;
  3. (function ($) {
  5.     $(function () {
  7.         var $taskStateCombobox = $('#TaskStateCombobox');
  9.         $taskStateCombobox.change(function () {
  10.             getTaskList();
  11.         });
  13.         var $modal = $(".modal");
  14.         //显示modal时，光标显示在第一个输入框
  15.         $modal.on('shown.bs.modal',
  16.             function () {
  17.                 $modal.find('input:not([type=hidden]):first').focus();
  18.             });
  20.     });
  21. })(jQuery);
  23. //异步开始提交时，显示遮罩层
  24. function beginPost(modalId) {
  25.     var $modal = $(modalId);
  27.     abp.ui.setBusy($modal);
  28. }
  30. //异步开始提交结束后，隐藏遮罩层并清空Form
  31. function hideForm(modalId) {
  32.     var $modal = $(modalId);
  34.     var $form = $modal.find("form");
  35.     abp.ui.clearBusy($modal);
  36.     $modal.modal("hide");
  37.     //创建成功后，要清空form表单
  38.     $form[0].reset();
  39. }
  41. //处理异步提交异常
  42. function errorPost(xhr, status, error, modalId) {
  43.     if (error.length>0) {
  44.         abp.notify.error('Something is going wrong, please retry again later!');
  45.         var $modal = $(modalId);
  46.         abp.ui.clearBusy($modal);
  47.     }
  48. }
  50. function editTask(id) {
  51.     abp.ajax({
  52.         url: "/tasks/edit",
  53.         data: { "id": id },
  54.         type: "GET",
  55.         dataType: "html"
  56.     })
  57.         .done(function (data) {
  58.             $("#edit").html(data);
  59.             $("#editTask").modal("show");
  60.         })
  61.         .fail(function (data) {
  62.             abp.notify.error('Something is wrong!');
  63.         });
  64. }
  66. function deleteTask(id) {
  67.     abp.message.confirm(
  68.         "是否删除Id为" + id + "的任务信息",
  69.         function (isConfirmed) {
  70.             if (isConfirmed) {
  71.                 taskService.deleteTask(id)
  72.                     .done(function () {
  73.                         abp.notify.info("删除任务成功！");
  74.                         getTaskList();
  75.                     });
  76.             }
  77.         }
  78.     );
  80. }
  82. function getTaskList() {
  83.     var $taskStateCombobox = $('#TaskStateCombobox');
  84.     var url = '/Tasks/GetList?state=' + $taskStateCombobox.val();
  85.     abp.ajax({
  86.         url: url,
  87.         type: "GET",
  88.         dataType: "html"
  89.     })
  90.         .done(function (data) {
  91.             $("#taskList").html(data);
  92.         });
  93. }

js代码中处理了Ajax回调函数，以及任务状态过滤下拉框更新事件，编辑、删除任务代码。其中getTaskList()函数是用来异步属性列表，对应调用的GetList()Action的后台代码如下：

  1. public PartialViewResult GetList(GetTasksInput input)
  2. {
  3.     var output = _taskAppService.GetTasks(input);
  4.     return PartialView("_List", output.Tasks);
  5. }

六、总结

至此，完成了任务的增删改查。展现层主要用到了Asp.net mvc的强类型视图、Bootstrap-Modal、Ajax异步提交技术。

其中需要注意的是，在异步加载表单时，需要添加以下js代码，jquery方能进行前端验证。

  1. <script type="text/javascript">
  2.     $(function () {
  3.         //allow validation framework to parse DOM
  4.         $.validator.unobtrusive.parse('form');
  5.     });
  6. </script>

源码已上传至Github-LearningMpaAbp，可自行参考。

ABP入门系列（6）——展现层实现增删改查的更多相关文章

  1. ABP入门教程9 - 展示层实现增删改查-视图模型

    点这里进入ABP入门教程目录 创建视图模型 在展示层(即JD.CRS.Web.Mvc)的Models下新建文件夹Course //用以存放Course相关视图模型 在JD.CRS.Web.Mvc/Mo ...

  2. ABP入门教程10 - 展示层实现增删改查-控制器

    点这里进入ABP入门教程目录 创建控制器 在展示层(即JD.CRS.Web.Mvc)的Controllers下新建一个控制器CourseController.cs using Abp.Applicat ...

  3. ABP入门教程11 - 展示层实现增删改查-视图

    点这里进入ABP入门教程目录 创建目录 在展示层(即JD.CRS.Web.Mvc)的Views下新建文件夹Course //用以存放Course相关视图 创建视图 在JD.CRS.Web.Mvc/Vi ...

  4. ABP入门教程12 - 展示层实现增删改查-脚本

    点这里进入ABP入门教程目录 创建目录 在展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\下新建文件夹Course //用以存放Course相关脚 ...

  5. ABP入门系列（5）——展现层实现增删改查

    ABP入门系列目录--学习Abp框架之实操演练 这一章节将通过完善Controller.View.ViewModel,来实现展现层的增删改查.最终实现效果如下图: 一.定义Controller ABP ...

  6. abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图（七）

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  7. abp(net core)+easyui+efcore仓储系统——展现层实现增删改查之控制器（六）

    abp(net core)+easyui+efcore仓储系统目录 abp(net core)+easyui+efcore仓储系统——ABP总体介绍(一) abp(net core)+easyui+e ...

  8. 数据库Dao层编增删改查写，数据库事务，数据库升级

    数据库事务 有两个特点 1.安全性 情景:正常的转账行为,这个时候如果出现停电等异常,已经扣钱但是没有加钱:这个时候就可用数据库事务解决问题 2.高效性: 使用数据库事务添加享受同数量的数据,对比耗时 ...

  9. 基于renren-fast的快速入门项目实战（实现报表增删改查）

    基于renren-fast的快速入门项目实战(实现报表增删改查) 说明:renren-fast是一个开源的基于springboot的前后端分离手脚架,当前版本是3.0 官方开发文档需付费,对于新手而言 ...

随机推荐

  1. c++中string的常用函数说明

    string可以说是是字符数组的升级版,使用更加啊方便,不容易出错.本文对string的常用函数进行简单介绍,做到会用即可. string中的常用函数分为四类,即赋值,添加,比较和删除. 一.赋值 1 ...

  2. Vue自定义过滤器

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...

  3. Spark GraphX学习资料

    <Spark GraphX 大规模图计算和图挖掘> http://book.51cto.com/art/201408/450049.htm http://www.csdn.net/arti ...

  4. SQL学习笔记：选取第N条记录

    Northwind数据库,选取价格第二高的产品. 有两种方法,一个是用Row_Number()函数: SELECT productname FROM ( productname, Row_Number ...

  5. Android实战--电话拨号器

    今天跟着黑马视频建立一个android app--电话拨号器 首先新建一个android项目 activity_main_xml中的代码如下: <RelativeLayout xmlns:and ...

  6. 【转】IOS设备旋转的内部处理流程以及一些【优化建议】

    加速计是整个IOS屏幕旋转的基础,依赖加速计,设备才可以判断出当前的设备方向,IOS系统共定义了以下七种设备方向: typedef NS_ENUM(NSInteger, UIDeviceOrienta ...

  7. 快速排序（java版）

    public class QuickSortTest{ //比较与交换 private static int partition(int[] source, int low, int hight) { ...

  8. Animated progress view with CAGradientLayer(带翻译)<待更新>

    原文网址:使用CAGradientLayer的动画精度条View Modern software design is getting flatter and thinner all the time. ...

  9. Dell PowerVault TL4000 磁带机卡带问题

    最近一段时间Dell PowerVault TL4000 磁带机故障频繁,昨天我在管理系统里面看到Library Status告警:HE: sled blocked, error during sle ...

  10. 读书笔记——网络编程与开发技术（3）基于TCP/IP协议的网络编程相关知识

    TCP/IP协议:数据链路层,网络层,传输层,应用层. IP地址分为5类:A类.B类.C类.D类.E类. (A类.B类.C类是基本类,D类多用于多播传送,E类为保留类.) "*"表 ...