zoukankan html css js c++ java

厨师长(第二部分)NET Core MVC与Fluent NHibernate和AngularJS

下载source - 71.3 KB

在Maser Chef第1部分中，我介绍了如何集成ASP。NET Core MVC与Fluent NHibernate和Angular JS。在这篇文章中，我将讨论如何使用ASP。NET Core MVC, Fluent NHibernate和Angular JS来实现一个CRUD SPA(单页应用)。在存储库中使用泛型创建、读取、更新和删除(CRUD的首字母缩写)是持久性存储的四个基本功能。我们需要首先在我们的repository类的数据库级别上实现CRUD。我希望在查询、添加、更新、删除方法中使用泛型，以避免冗余编码。为什么使用泛型?简短的回答是，类型安全、编译时检查、更快并且适用于具有相同底层行为的许多类型。在以前的数据模型类中，所有成员都具有与数据库字段相同的名称。实际上，数据模型类成员不必与数据库字段相同。例如，Recipe类的Id不必是RecipeId，它可以是任何名称，比如Id。我们需要做的是在映射过程中告诉Fluent NHibernate，如下所示。隐藏,复制Code

Id(x => x.Id, "RecipeId");

通过这种方式，Fluent NHibernate知道它在映射“Id”到“RecipeId”。因为我们不必使用相同的名称作为数据库字段，现在我们有机会改变不同的数据模型类，以拥有一些共同的成员。我们创建了一个基类实体。隐藏,复制Code

    public class Entity
    {
        public virtual Guid Id { get; set; }
        public virtual Guid? ParentId { get; set; }
        public virtual Type ParentType => null;
}

然后将Recipe, RecipeStep和RecipeItem派生Entity，将Recipe的RecipeId替换为Id，将RecipeStep的RecipeStepId替换为Id，将RecipeItem的ItemId替换为Id，将RecipeStep的RecipeId替换为ParentId，将RecipeItem的RecipeStepId替换为ParentId。隐藏,复制Code

 public class Recipe : Entity
    {
        public virtual string Name { get; set; }
        public virtual string Comments { get; set; }
        public virtual DateTime ModifyDate { get; set; }
        public virtual IList<RecipeStep> Steps { get; set; }
}

public class RecipeStep : Entity
    {
        public virtual int StepNo { get; set; }
        public virtual string Instructions { get; set; }
        public virtual IList<RecipeItem> RecipeItems { get; set; }
        public override Type ParentType => typeof(Recipe);
    }
public class RecipeItem : Entity
    {
        public virtual string Name { get; set; }
        public virtual decimal Quantity { get; set; }
        public virtual string MeasurementUnit { get; set; }
        public override Type ParentType => typeof(RecipeStep);
    }

现在我们还需要更改映射类。请注意不同名称的映射。隐藏,收缩,复制Code

public class RecipeMap : ClassMap<Recipe>
    {
        public RecipeMap()
        {
            Id(x => x.Id, "RecipeId");
            Map(x => x.Name);
            Map(x => x.Comments);
            Map(x => x.ModifyDate);
            HasMany(x => x.Steps).KeyColumn("RecipeId").Inverse().Cascade.DeleteOrphan().OrderBy("StepNo Asc");
            Table("Recipes");
        }
}
public class RecipeStepMap : ClassMap<RecipeStep>
    {
        public RecipeStepMap()
        {
            Id(x => x.Id, "RecipeStepId");
            Map(x => x.ParentId, "RecipeId");
            Map(x => x.StepNo);
            Map(x => x.Instructions);
            HasMany(x => x.RecipeItems).KeyColumn("RecipeStepId").Inverse().Cascade.DeleteOrphan();
            Table("RecipeSteps");
        }
    }
public class RecipeItemMap : ClassMap<RecipeItem>
    {
        public RecipeItemMap()
        {
            Id(x => x.Id, "ItemId");
            Map(x => x.Name);
            Map(x => x.Quantity);
            Map(x => x.MeasurementUnit);
            Map(x => x.ParentId, "RecipeStepId");
            Table("RecipeItems");
        }
    }

“Cascade.DeleteOrphan”是什么?此选项在删除父对象时删除子对象。对于我们的示例，删除一个配方将删除该配方的所有配方步骤和配方项，删除一个步骤将删除该步骤的所有项。然后将Repository的方法改为泛型方法，并放入泛型约束，即T必须是Entity的子类。隐藏,收缩,复制Code

public T GetEntity<T>(Guid id) where T : Entity
        {
            try
            {
                return _session.Get<T>(id);
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

        public T AddEntity<T>(T entity) where T : Entity
        {
            T newOne = null;
            using (var transaction = _session.BeginTransaction())
            {
                try
                {
                    _session.SaveOrUpdate(entity);
                    Commit(transaction, entity);
                    RefreshParentObject(entity);
                    newOne = _session.Get<T>(entity.Id) as T;
                }
                catch (Exception ex)
                {
                    throw ex;
                }

                return newOne;
            }
        }

        public void UpdateEntity<T>(T entity) where T : Entity
        {
            using (var transaction = _session.BeginTransaction())
            {
                try
                {
                    _session.Update(entity);
                    Commit(transaction, entity);
                    RefreshParentObject(entity);
                }
                catch (Exception ex)
                {
                    throw ex;
                }

            }
        }

        public void DeleteEntity<T>(Guid id) where T : Entity
        {
            using (var transaction = _session.BeginTransaction())
            {
                var entity = _session.Get<T>(id);
                if (entity != null)
                {
                    try
                    {
                        _session.Delete(entity);
                        Commit(transaction, entity);
                        RefreshParentObject(entity);
                    }
                    catch (Exception ex)
                    {
                        throw ex;
                    }
                }
            }
        }

对于添加、更新和删除方法，所有调用RefreshParentObject()。这是什么意思?当我们改变RecipeStep或RecipeItem时，它的父对象缓存并不知道这个改变。我们需要刷新父对象缓存。隐藏,复制Code

void RefreshParentObject(Entity entity)
    {
        if (!entity.ParentId.HasValue)
            return;
        var parentObj = _session.Get(entity.ParentType, entity.ParentId.Value);
        if (parentObj != null)
            _session.Refresh(parentObj);
    }

现在我们更新web API控制器。隐藏,收缩,复制Code

[HttpGet("{id}")]
public IActionResult Get(Guid id)
{
    var recipe = _repository.GetEntity<Recipe>(id);
    if (recipe != null)
        return new ObjectResult(recipe);
    else
        return new NotFoundResult();

}
[HttpPost]
public IActionResult Post([FromBody]Recipe recipe)
{
    if (recipe.Id == Guid.Empty)
    {
        recipe.ModifyDate = DateTime.Now;
        return new ObjectResult(_repository.AddEntity<Recipe>(recipe));
    }
    else
    {
        var existingOne = _repository.GetEntity<Recipe>(recipe.Id);
        existingOne.Name = recipe.Name;
        existingOne.Comments = recipe.Comments;
        existingOne.ModifyDate = DateTime.Now;
        _repository.UpdateEntity<Recipe>(existingOne);
        return new ObjectResult(existingOne);
    }
}
[HttpPut("{id}")]
public IActionResult Put(Guid id, [FromBody]Recipe recipe)
{
    var existingOne = _repository.GetEntity<Recipe>(recipe.Id);
    existingOne.Name = recipe.Name;
    existingOne.Comments = recipe.Comments;
    _repository.UpdateEntity<Recipe>(recipe);
    return new ObjectResult(existingOne);
}

[HttpDelete("{id}")]
public IActionResult Delete(Guid id)
{
    _repository.DeleteEntity<Recipe>(id);
    return new StatusCodeResult(200);
}

角端路由现在，我们需要在Master Chef应用程序中设置客户机路由，以便根据客户机提供的URL替换动态视图。我们可以从角度路由模块中获取角度路由特征。使用ngRoute模块，您可以在单个页面应用程序中导航到不同的页面，而无需重新加载页面。$route用于将url深链接到控制器和视图(HTML部分)。它监视$location.url()并尝试将该路径映射到现有的路由定义。 $route中有两个依赖项，即$location和$routeParams。 1)注入ngRoute 打开app.js，在masterChefApp模块中注入ngroute。隐藏,复制Code

(function () {
    'use strict';

    angular.module('masterChefApp', [
        // Angular modules 
        'ngRoute',

        // Custom modules 
        'recipesService'
        // 3rd Party Modules
        
    ]);
})();

2)配置Angular路由为我们的Angular app模块定义一个配置函数——masterChefApp。并且，在该配置函数中，使用来自ngRoute模块的路由提供程序服务来定义客户端路由隐藏,复制Code

angular.module('masterChefApp').config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
        $routeProvider
        .when('/', {
            templateUrl: 'partials/recipes.html',
            controller: 'recipesController'
        })
        .when('/recipes/add', {
            templateUrl: 'partials/add.html',
            controller: 'recipesAddController'
        })
        .when('/recipes/edit/:id', {
            templateUrl: 'partials/edit.html',
            controller: 'recipesEditController'
        })
        .when('/recipes/delete/:id', {
            templateUrl: 'partials/delete.html',
            controller: 'recipesDeleteController'
        });

        $locationProvider.html5Mode(true);

}]);

第一个只是一个默认的路由-正斜杠。第二个是/recipes/add。第三个是/recipes/edit/，并传递:id作为路由参数，它允许我们采用一个动态id，我可以匹配其中一个菜谱。最后一个route /recipes/delete/:id也需要采用动态id参数。这个默认路由只会列出所有的菜谱。“添加”路由处理添加，“编辑”路由处理编辑或更新，“删除”路由处理删除或删除。CRUD函数由这四个客户端路由表示。对于每个路由，我们需要定义一个模板URL(它表示一些应该为此路由呈现的HTML)和一个单独的控制器(它将处理此路由)。在最底部，使用$locationProvider，它的html5Mode函数，设置为true，以确保我可以使用友好和自然的url，避免使用hash bangs进行客户端路由。 Angular JS客户端控制器我们已经配置了默认路由、添加路由、编辑路由和删除路由。然后需要相应的控制器，recipesController、recipesAddController、recipesEditController和recipesDeleteController。我们在recipesController.js中定义了所有这些控制器。 1)注入“添加”、“编辑”和“删除”控制器隐藏,复制Code

angular
        .module('masterChefApp')
        .controller('recipesController', recipesController)
        .controller('recipesAddController', recipesAddController)
        .controller('recipesEditController', recipesEditController)
        .controller('recipesDeleteController', recipesDeleteController);

2)实现食谱添加控制器隐藏,复制Code

recipesAddController.$inject = ['$scope', 'Recipe', '$location'];
    function recipesAddController($scope, Recipe, $location) {
        $scope.recipe = new Recipe();
        $scope.addRecipe = function () {
            $scope.recipe.$save(function () {
                $location.path('/');
            });
        }
    }

因此，recipesAddController需要一个$作用域和食谱服务，它还需要$location服务。recipesAddController创建或提供了允许用户向应用程序添加菜谱的功能。为此，使用菜谱服务创建一个新的$scope变量recipe。它还在这里创建了一个$scope函数——addRecipe，该函数将使用recipe services保存方法向服务器提交菜谱。在提交食谱后的回调中，我们将把应用程序重定向到它的主页。 3)实现菜谱编辑控制器隐藏,复制Code

recipesEditController.$inject = ['$scope', 'Recipe', '$location', '$routeParams'];
    function recipesEditController($scope, Recipe, $location, $routeParams) {
        $scope.recipe = Recipe.get({ id: $routeParams.id });
        $scope.editRecipe = function () {
            $scope.recipe.$save(function () {
                $location.path('/');
           });
        }
}

recipesEditController需要一个$作用域和菜谱服务$location服务。它还需要$routeParameter来传递id. recipesEditController创建或提供允许某人向应用程序更新菜谱的功能。我们将使用routeParams服务来更新菜谱。通过从route参数获取菜谱的ID。然后，我们将进入服务器，通过调用菜谱服务get函数获取适当的菜谱——这次是提供ID的get方法。该ID将被提供给前端。用户可以做出任何。最后，我们将更新后的食谱记录提交给服务器。 4)实现菜谱删除控制器隐藏,复制Code

recipesDeleteController.$inject = ['$scope', 'Recipe', '$location', '$routeParams'];
    function recipesDeleteController($scope, Recipe, $location, $routeParams) {
        $scope.recipe = Recipe.get({ id: $routeParams.id });
        $scope.deleteRecipe = function () {
            $scope.recipe.$remove({ id: $scope.recipe.id }, function () {
                $location.path('/');
            });
        };
}

recipesDeleteController使用$routeParams获取ID并检索特定的菜谱。然后提供这个函数deleteRecipe，在这个函数中我们可以使用菜谱服务的$remove方法告诉服务器我们想要删除一个特定的菜谱。局部视图模板 1)修改Index.html使用ng-view 修改index.html以使用部分视图。首先添加一个“base”标签和它的href属性到/。这对于$locationProvider能够正常工作是必要的，因为它需要一个基础。现在转到正文内容。摆脱所有这些，只需使用ng-view指令。隐藏,复制Code

<!DOCTYPEhtml>
<htmlng-app="masterChefApp">
<head>
    <basehref="/">
    <metacharset="utf-8"/>
    <title>Master Chef Recipes</title>
    <scriptsrc="lib/angular/angular.min.js"></script>
    <scriptsrc="lib/angular-resource/angular-resource.min.js"></script>
    <scriptsrc="lib/angular-route/angular-route.min.js"></script>
    <scriptsrc="app.js"></script>
    </head>
<bodyng-cloak>
    <div>
        <ng-view></ng-view>
    </div>
</body>
</html>

基于这个ng-view指令和我们已经设置的路由的使用，ng-view将能够交付正确的部分视图和正确的控制器，以在客户端路由上使用$routeProvider来为视图提供电源。我们在app.js文件中指定了四个控制器。这些控制器给我们CRUD操作。route URL /将从服务器检索所有菜谱。/recipes/add将创建一个新菜谱。使用变量id的recipes/edit将更新现有的菜谱，而/recipes/delete也使用变量id将从服务器删除或删除特定的菜谱。现在我们在wwwroot文件夹下创建“partials”文件夹。然后可以逐个添加模板。 2)检索模板—Recipes.html 右键点击wwwroot下的“partials”文件夹。添加一个新项目。在客户端模板部分，选择HTML Page。我们给它起名叫“recipes.html”。 html，它将检索并显示菜谱列表。隐藏,收缩,复制Code

<div>
    <h2>Master Chief Recipes</h2>
    <ul>
        <ling-repeat="recipe in recipes">
            <div>
               <h5>{{recipe.name}} - {{recipe.comments}}</h5>
            </div>
            <div>
                <ahref="recipes/edit/{{recipe.id}}">edit</a>
            </div>
            <div>
                <ahref="recipes/delete/{{recipe.id}}">delete</a>
            </div>
            <ul>
                <ling-repeat="step in recipe.steps">
                    <p> step {{step.stepNo}} : {{step.instructions}}</p>
                    <ul>
                        <ling-repeat="item in step.recipeItems">
                            <p> {{item.name}}  {{item.quantity}} {{item.measurementUnit}}</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <p><ahref="recipes/add"> Add a new recipe </a></p>
</div>

请注意，这不是完整的html。我们只是定义了一个部分视图它将在AngularJS应用中被替换。现在如果我们运行它，我们应该看到所有的食谱。 3)引导风格虽然它工作，但它是一个完全普通的html。所以我们需要应用一些CSS样式。 Bootstrap是一个非常流行的前端框架，它包括基于HTML和CSS的排版设计模板，表单，按钮，表格，导航，模板，图像旋转木马和许多其他的，以及可选的JavaScript插件。应用bootstrap样式可以使我们的master chef web应用程序更漂亮。我们已经在bower配置中添加了引导包。隐藏,复制Code

 {
	"name": "asp.net",
	"private": true,
  "dependencies": {
    "jquery": "3.1.0",
    "bootstrap": "3.1.0",
    "angular": "1.5.8",
    "angular-route": "1.5.8",
    "angular-resource": "1.5.8"
  }
}

所以bootstrap已经安装在wwwrootlib文件夹中。现在我们将它包含在index.html中。隐藏,复制Code

<link href="lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">

我们将应用下面的引导样式。我们在index.html中应用主div与.container-fluid(全宽度)来进行适当的对齐和填充。我们为ui应用所有的.list-group，为recipes.html中的li应用.list-group-item。我们还为添加链接应用“btn-primary”，为编辑链接应用“btn-default”，为删除链接应用“btn-delete”。我还想把recipe显示为一个徽章，所以也要应用。badge样式。再跑一次大厨，看看现在是什么样子。 Bootstrap包括一个强大的移动优先网格系统，用于构建各种形状和大小的布局。它基于12列布局，有多个层次，每个媒体查询范围一个。有三个主要组件——容器、行和列。容器-。固定宽度的容器或。容器-流体的全宽度-中心你的网站内容，并帮助对齐你的网格内容。行是列的水平分组，确保列被正确地排列。列类表示您希望在每行可能的12列中使用的列数。如果你想要三个等宽的列，你可以用。cole -xs-4。我们使用bootstrap网格系统中的主厨模板。 4)使用Angular JS实现展开/折叠我知道有很多方法可以用jQuery展开/折叠来改变DOM。记住，我们使用的是MVVM模式。所以我热衷于通过改变控制器(视图模型)中的模型来实现展开/折叠。在recipesController中添加expand()函数。在expand()函数中，我们设置了recipe对象的show属性。隐藏,复制Code

recipesController.$inject = ['$scope', 'Recipe'];

    function recipesController($scope, Recipe) {
        $scope.recipes = Recipe.query();
        $scope.expand = function (recipe) {
            recipe.show = !recipe.show;
        }
}

我们在recipesController中添加了一个ng-click来调用expand()函数。隐藏,复制Code

 <divclass="btn-group">
               <buttonclass="btn badge pull-left"ng-click="expand(recipe)"><h5>{{recipe.name}} - {{recipe.comments}}</h5></button>
</div>

然后我们使用ng-show来控制是否显示菜谱的详细信息。隐藏,复制Code

<ul class="list-group" ng-show="recipe.show">
                <li ng-repeat="step in recipe.steps" class="list-group-item">

只需单击recipe badge扩展您想要查看的内容。 5)创建模板- add.html 右键单击wwwroot下的“partials”文件夹。添加一个新项目。在客户端模板部分，选择HTML Page。我们将其命名为“add.html”。在add.html中，使用ng-submit将数据发送到服务器。我们将通过ng-model指令将用户输入到输入字段中的信息绑定到一个范围变量菜谱。当用户按下Save按钮使用表单提交时，我们会调用作用域函数addRecipe它会在控制器中后台将recipe对象提交给服务器。隐藏,复制Code

<h1>Add a new recipe</h1>
<divclass="container-fluid">
    <formng-submit="addRecipe()">
        <divclass="row">
            <divclass="form-group col-xs-4">
                <labelfor="name">Name</label>
                <inputng-model="recipe.name"name="name"type="text"class="form-control"/>
            </div>
        </div>
        <divclass="row">
            <divclass="form-group col-md-4 col-xs-8">
                <labelfor="comments">Comments</label>
                <inputng-model="recipe.comments"name="comments"type="text"class="form-control"/>
            </div>
        </div>
        <divclass="row">
            <buttontype="submit"class="btn btn-primary">Save</button>
            <ahref="/"class="btn btn-default">Cancel</a>
        </div>
    </form>
</div>

编辑模板- Edit .html 右键单击wwwroot下的“partials”文件夹。添加一个新项目。在客户端模板部分，选择HTML Page。我们提供一个名称“edit.html”。现在我们要更新一个食谱。我们将在edit.html部分模板中处理这个问题。edit.html看起来像add.html，因为我们需要为最终用户提供所有必要的字段，以实际更新现有菜谱。我们有recipe.name和recipe.comments的输入。它们通过ng-model指令被绑定到一个范围变量——一个对象配方。此外，在编辑控制器上有一个作用域函数——editRecipe。当用户在编辑中按下Save按钮时。html中，该函数将被调用，而将更新的菜谱信息提交到服务器进行持久存储是该函数的工作。隐藏,复制Code

<h1>Edit recipe</h1>
<divclass="container-fluid">
    <formng-submit="editRecipe()">
        <divclass="row">
            <divclass="form-group col-xs-4">
                <labelfor="name">Name</label>
                <inputng-model="recipe.name"name="name"type="text"class="form-control"/>
            </div>
        </div>
        <divclass="row">
            <divclass="form-group col-md-4 col-xs-8">
                <labelfor="comments">Comments</label>
                <inputng-model="recipe.comments"name="comments"type="text"class="form-control"/>
            </div>
        </div>
        <divclass="row">
            <buttontype="submit"class="btn btn-primary">Save</button>
            <ahref="/"class="btn btn-default">Cancel</a>
        </div>
    </form>
</div>

7)删除模板右键点击wwwroot下的“partials”文件夹。添加一个新项目。在客户端模板部分，选择HTML Page。我们将其命名为“delete.html”。在删除。html，我们会提供一个段落来进行确认。那么你真的想删除这个食谱吗?我们将绑定到有问题的食谱信息也就是要删除的食谱。我们将提供一个按钮，它调用一个作用域函数- deleteRecipe。它将向服务器提交一个请求，以删除特定的菜谱。隐藏,复制Code

<div class="alert alert-warning">
    <p>Do you really want to delete this recipe?</p>
    <p> {{recipe.name}} - {{recipe.comments}}</p>
</div>
<button ng-click="deleteRecipe()" class="btn btn-danger">Yes</button>
<a href="/" class="btn btn-default">No</a>

多个URL映射到同一个Web API控制器那食谱步骤和食谱项呢?一般来说，我们可以创建单独的API控制器来处理菜谱步骤和菜谱项。但是它太重了。我想把所有与菜谱相关的restful服务打包到RecipesController中。但是对于配方步骤操作和配方项操作，它肯定需要不同的url。幸运的是,ASP。NET Core Web API支持不同的路由。路由是Web API将URI匹配到操作的方式。Web API支持一种新的路由类型，称为属性路由。顾名思义，属性路由使用属性来定义路由。属性路由使您可以对web API中的uri进行更多的控制。例如，您可以轻松地创建描述资源层次结构的uri。 web控制器类的route属性是基URI。隐藏,复制Code

[Route("api/[controller]")]
    public class RecipesController : Controller
{
….
}

对于RecipesController，基本URL是/api/recipes。隐藏,复制Code

[HttpGet("{id}")]
        public IActionResult Get(Guid id)
        {
            var recipe = _repository.GetEntity<Recipe>(id);
            if (recipe != null)
                return new ObjectResult(recipe);
            else
                return new NotFoundResult();

        }

上面的方法没有route属性，这意味着这个方法被映射到/api/recipes/:id 但是对于get step方法和get item方法，我们需要不同的URL。我想获得步骤URL是/api/recipes/step/:id和项目URL是/api/recipes/item/:id。因此，我们为get step方法添加[Route("step/{id}")]，为get item方法添加[Route("item/{id}")]。隐藏,复制Code

[HttpGet]
        [Route("step/{id}")]
        public IActionResult GetStep(Guid id)
        {
            var recipeStep = _repository.GetEntity<RecipeStep>(id);
            if (recipeStep != null)
                return new ObjectResult(recipeStep);
            else
                return new NotFoundResult();

        }
[HttpGet]
        [Route("item/{id}")]
        public IActionResult GetItem(Guid id)
        {
            var recipeItem = _repository.GetEntity<RecipeItem>(id);
            if (recipeItem != null)
                return new ObjectResult(recipeItem);
            else
                return new NotFoundResult();

        }

让我们看看API路由是否可以工作。单击IIS Express启动我们的web应用程序。首先我们检查URL, api/recipes/step/AEE9602B-03EF-4A5F-A380-2962134ADB7E。它像预期的那样工作。然后我们检查api/recipes/item/862B91D5-FB60-4004-8179-0415AB900795 它也起作用了。我们还需要为post和delete添加路由属性。隐藏,收缩,复制Code

//GET api/recipes/step/:id
        [HttpGet]
        [Route("step/{id}")]
        public IActionResult GetStep(Guid id)
        {
            var recipeStep = _repository.GetEntity<RecipeStep>(id);
            if (recipeStep != null)
                return new ObjectResult(recipeStep);
            else
                return new NotFoundResult();

        }

        //POST api/recipes/step
        [HttpPost]
        [Route("step")]
        public IActionResult UpdateStep([FromBody]RecipeStep recipeStep)
        {
            if (recipeStep.Id == Guid.Empty)
            {
                return new ObjectResult(_repository.AddEntity<RecipeStep>(recipeStep));
            }
            else
            {
                var existingOne = _repository.GetEntity<RecipeStep>(recipeStep.Id);
                existingOne.StepNo = recipeStep.StepNo;
                existingOne.Instructions = recipeStep.Instructions;
                _repository.UpdateEntity<RecipeStep>(existingOne);
                return new ObjectResult(existingOne);
            }
        }

        //DELETE api/recipes/step/:id
        [HttpDelete]
        [Route("step/{id}")]
        public IActionResult DeleteStep(Guid id)
        {
            _repository.DeleteEntity<RecipeStep>(id);
            return new StatusCodeResult(200);
        }

        // GET api/recipes/item/:id
        [HttpGet]
        [Route("item/{id}")]
        public IActionResult GetItem(Guid id)
        {
            var recipeItem = _repository.GetEntity<RecipeItem>(id);
            if (recipeItem != null)
                return new ObjectResult(recipeItem);
            else
                return new NotFoundResult();

        }

        //POST api/recipes/item
        [HttpPost]
        [Route("item")]
        public IActionResult UpdateItem([FromBody]RecipeItem recipeItem)
        {
            if (recipeItem.Id == Guid.Empty)
            {
                if (recipeItem.MeasurementUnit == null)
                    recipeItem.MeasurementUnit = "";
                return new ObjectResult(_repository.AddEntity<RecipeItem>(recipeItem));
            }
            else
            {
                var existingOne = _repository.GetEntity<RecipeItem>(recipeItem.Id);
                existingOne.Name = recipeItem.Name;
                existingOne.Quantity = recipeItem.Quantity;
                existingOne.MeasurementUnit = recipeItem.MeasurementUnit;
                _repository.UpdateEntity<RecipeItem>(existingOne);
                return new ObjectResult(existingOne);
            }
        }

        //DELETE api/recipes/item/:id
        [HttpDelete]
        [Route("item/{id}")]
        public IActionResult DeleteItem(Guid id)
        {
            _repository.DeleteEntity<RecipeItem>(id);
            return new StatusCodeResult(200);
        }

单个Angular资源服务的多个路由url Angular资源服务也支持多个url。到目前为止，我们只使用默认动作。隐藏,复制Code

{
  get: {method: 'GET'},
  save: {method: 'POST'},
  query: {method: 'GET', isArray: true},
  remove: {method: 'DELETE'},
  delete: {method: 'DELETE'}
}

以上操作都是在ng resource中构建的，所以我们可以直接使用它。隐藏,复制Code

recipesService.factory('Recipe', ['$resource', function ($resource) {
      return $resource('/api/recipes/:id');
  }]);

但是我们现在需要定义自己的自定义操作，并使用默认URL为操作提供不同的URL。隐藏,复制Code

recipesService.factory('Recipe', ['$resource', function ($resource) {
        return $resource('/api/recipes/:id', {}, {
            getRecipeStep: { method: 'GET', url: '/api/recipes/step/:id' },
            saveRecipeStep: { method: 'POST', url: '/api/recipes/step' },
            removeRecipeStep: { method: 'DELETE', url: '/api/recipes/step/:id' },
            getRecipeItem: { method: 'GET', url: '/api/recipes/item/:id' },
            saveRecipeItem: { method: 'POST', url: '/api/recipes/item' },
            removeRecipeItem: { method: 'DELETE', url: '/api/recipes/item/:id' }
        });
}]);

我们仍然使用recipe的默认操作，并添加新的自定义操作getRecipeStep、saveRecipeStep、removeRecipeStep、getRecipeItem、saveRecipeItem和removeRecipeItem。所有url都匹配配方步骤和配方项的web API url。为配方步骤和配方项添加新的角度路径现在我们需要为app.js中的菜谱步骤创建、更新、删除和菜谱项创建、更新、删除模板和控制器添加新的客户端路由。隐藏,收缩,复制Code

$routeProvider
  .when('/', {
      templateUrl: 'partials/recipes.html',
      controller: 'recipesController'
  })
  .when('/recipes/add', {
      templateUrl: 'partials/add.html',
      controller: 'recipesAddController'
  })
  .when('/recipes/edit/:id', {
      templateUrl: 'partials/edit.html',
      controller: 'recipesEditController'
  })
  .when('/recipes/delete/:id', {
      templateUrl: 'partials/delete.html',
      controller: 'recipesDeleteController'
  })
  .when('/recipes/addStep/:id', {
      templateUrl: 'partials/addStep.html',
      controller: 'recipesAddStepController'
  })
  .when('/recipes/editStep/:id', {
      templateUrl: 'partials/editStep.html',
      controller: 'recipesEditStepController'
  })
  .when('/recipes/deleteStep/:id', {
      templateUrl: 'partials/deleteStep.html',
      controller: 'recipesDeleteStepController'
  })
  .when('/recipes/addItem/:id', {
      templateUrl: 'partials/addItem.html',
      controller: 'recipesAddItemController'
  })
  .when('/recipes/editItem/:id', {
      templateUrl: 'partials/editItem.html',
      controller: 'recipesEditItemController'
  })
  .when('/recipes/deleteItem/:id', {
      templateUrl: 'partials/deleteItem.html',
      controller: 'recipesDeleteItemController'
  });

为配方步骤和配方项添加新的Angular控制器在recipesController.js中注入step和item控制器。隐藏,复制Code

angular
   .module('masterChefApp')
   .controller('recipesController', recipesController)
   .controller('recipesAddController', recipesAddController)
   .controller('recipesEditController', recipesEditController)
   .controller('recipesDeleteController', recipesDeleteController)
   .controller('recipesAddStepController', recipesAddStepController)
   .controller('recipesEditStepController', recipesEditStepController)
   .controller('recipesDeleteStepController', recipesDeleteStepController)
   .controller('recipesAddItemController', recipesAddItemController)
   .controller('recipesEditItemController', recipesEditItemController)
   .controller('recipesDeleteItemController', recipesDeleteItemController);

recipesAddStepController创建或提供了允许某人向应用程序添加菜谱步骤的功能。当我们添加配方步骤时，我们需要父配方Id。我们将通过使用routeParams服务获得要创建的配方步骤。通过从route参数获取菜谱的ID。隐藏,复制Code

recipesAddStepController.$inject = ['$scope', 'Recipe', '$location', '$routeParams'];
    function recipesAddStepController($scope, Recipe, $location, $routeParams) {
        $scope.recipeStep = new Recipe();
        $scope.recipeStep.parentId = $routeParams.id;
        $scope.addRecipeStep = function () {
            $scope.recipeStep.$saveRecipeStep(function () {
                $location.path('/');
            });
        };
    }

recipesEditStepController创建或提供了允许某人将配方步骤更新到应用程序的功能。我们将使用routeParams服务来更新菜谱步骤。通过从route参数获取菜谱步骤的ID。隐藏,复制Code

recipesEditStepController.$inject = ['$scope', 'Recipe', '$location', '$routeParams'];
function recipesEditStepController($scope, Recipe, $location, $routeParams) {
    $scope.recipeStep = Recipe.getRecipeStep({ id: $routeParams.id });
    $scope.editRecipeStep = function () {
        $scope.recipeStep.$saveRecipeStep(function () {
            $location.path('/');
        });
    };
}

recipesDeleteStepController使用$routeParams获取ID并检索特定的菜谱步骤。然后将此函数的删除步骤提供给应用程序。隐藏,复制Code

    recipesDeleteStepController.$inject = ['$scope', 'Recipe', '$location', '$routeParams'];
    function recipesDeleteStepController($scope, Recipe, $location, $routeParams) {
        $scope.recipeStep = Recipe.getRecipeStep({ id: $routeParams.id });
        $scope.deleteRecipeStep = function () {
            $scope.recipeStep.$removeRecipeStep({ id: $scope.recipeStep.id }, function () {
                $location.path('/');
            });
        };
}

recipesAddItemController创建或提供了允许用户向应用程序添加菜谱项的功能。当我们添加菜谱项时，我们需要父菜谱步骤Id。我们将通过使用routeParams服务获得要创建的菜谱项。通过从route参数获取菜谱步骤的ID。隐藏,复制Code

recipesAddItemController.$inject = ['$scope', 'Recipe', '$location', '$routeParams'];
    function recipesAddItemController($scope, Recipe, $location, $routeParams) {
        $scope.recipeItem = new Recipe();
        $scope.recipeItem.parentId = $routeParams.id;
        $scope.addRecipeItem = function () {
            $scope.recipeItem.$saveRecipeItem(function () {
                $location.path('/');
            });
        };
}

recipesEditItemController创建或提供了允许用户将菜谱项更新到应用程序的功能。我们将使用routeParams服务来更新菜谱项。通过从route参数获取菜谱项的ID。隐藏,复制Code

recipesEditItemController.$inject = ['$scope', 'Recipe', '$location', '$routeParams'];
function recipesEditItemController($scope, Recipe, $location, $routeParams) {
    $scope.recipeItem = Recipe.getRecipeItem({ id: $routeParams.id });
    $scope.editRecipeItem = function () {
        $scope.recipeItem.$saveRecipeItem(function () {
            $location.path('/');
        });
    };
}

recipesDeleteItemController使用$routeParams获取ID并检索特定的菜谱项。然后提供此函数，将菜谱项删除到应用程序。隐藏,复制Code

    recipesDeleteItemController.$inject = ['$scope', 'Recipe', '$location', '$routeParams'];
    function recipesDeleteItemController($scope, Recipe, $location, $routeParams) {
        $scope.recipeItem = Recipe.getRecipeItem({ id: $routeParams.id });
        $scope.deleteRecipeItem = function () {
            $scope.recipeItem.$removeRecipeItem({ id: $scope.recipeItem.id }, function () {
                $location.path('/');
            });
        };
}

添加配方步骤和配方项的所有模板现在我们需要为配方步骤和配方项创建所有模板。创建“addStep。html”、“editStep。html”、“deleteStep.html”、“addItem。html”、“editItem。html”和“deleteItem。在partials文件夹中。 1)配方步骤模板在addStep。html，使用ng-submit发送数据到服务器。当用户按下Save按钮时，调用一个作用域函数addRecipeStep，该函数在控制器的后台将向服务器提交这个配方步骤对象。隐藏,复制Code

<h1>Add a new recipe step</h1>
<divclass="container-fluid">
    <formng-submit="addRecipeStep()">
        <divclass="row">
            <divclass="form-group col-xs-1">
                <labelfor="stepNo">Step No.</label>
                <inputng-model="recipeStep.stepNo"name="stepNo"type="text"class="form-control"/>
            </div>
        </div>

        <divclass="row">
            <divclass="form-group col-md-4 col-xs-8">
                <labelfor="instructions">Instructions</label>
                <inputng-model="recipeStep.instructions"name="instructions"type="text"class="form-control"/>
            </div>
        </div>
        <divclass="row">
            <buttontype="submit"class="btn btn-primary">Save</button>
            <ahref="/"class="btn btn-default">Cancel</a>
        </div>
    </form>
</div>

html更新现有的配方步骤。使用ng-model指令将输入字段绑定到一个范围变量——一个对象recipeStep。此外，在step编辑控制器上，有一个作用域函数- editRecipeStep。隐藏,复制Code

<h1>Edit Recipe Step</h1>
<divclass="container-fluid">
    <formng-submit="editRecipeStep()">
        <divclass="row">
            <divclass="form-group col-xs-1">
                <labelfor="stepNo">Step No.</label>
                <inputng-model="recipeStep.stepNo"name="stepNo"type="text"class="form-control"/>
            </div>
        </div>

        <divclass="row">
            <divclass="form-group col-md-4 col-xs-8">
                <labelfor="instructions">Instructions</label>
                <inputng-model="recipeStep.instructions"name="instructions"type="text"class="form-control"/>
            </div>
        </div>
        <divclass="row">
            <buttontype="submit"class="btn btn-primary">Save</button>
            <ahref="/"class="btn btn-default">Cancel</a>
        </div>
    </form>
</div>

在deleteStep。html，我们会提供一个段落来进行确认。我们将提供一个按钮，它调用一个作用域函数- deleteRecipeStep。它将向服务器提交一个请求，以删除特定的配方步骤。隐藏,复制Code

<div class="alert alert-warning">
    <p>Do you really want to delete this recipe step?</p>
    <p> {{recipeStep.stepNo}} - {{recipeStep.instructions}}</p>
</div>
<button ng-click="deleteRecipeStep()" class="btn btn-danger">Yes</button>
<a href="/" class="btn btn-default">No</a>

2)配方物品模板在addItem。html，使用ng-submit发送数据到服务器。当用户按下Save按钮时，调用一个作用域函数addRecipeItem，该函数在控制器的后台将向服务器提交这个recipe item对象。隐藏,收缩,复制Code

<h1>Add a new recipe item</h1>
<divclass="container-fluid">
    <formng-submit="addRecipeItem()">
        <divclass="row">
            <divclass="form-group col-xs-4">
                <labelfor="name">Name</label>
                <inputng-model="recipeItem.name"name="name"type="text"class="form-control"/>
            </div>
        </div>
        <divclass="row">
            <divclass="form-group col-md-4 col-xs-4">
                <labelfor="quantity">Quantity</label>
                <inputng-model="recipeItem.quantity"name="quantity"type="text"class="form-control"/>
            </div>
        </div>
        <divclass="row">
            <divclass="form-group col-md-4 col-xs-4">
                <labelfor="measurementUnit">Measurement Unit</label>
                <inputng-model="recipeItem.measurementUnit"name="measurementUnit"type="text"class="form-control"/>
            </div>
        </div>
        <divclass="row">
            <buttontype="submit"class="btn btn-primary">Save</button>
            <ahref="/"class="btn btn-default">Cancel</a>
        </div>
    </form>
</div>

html更新现有的菜谱项。使用ng-model指令将输入字段绑定到一个范围变量——一个对象recipeItem。此外，在项目编辑控制器上，有一个作用域函数- editRecipeItem。隐藏,收缩,复制Code

<h1>Edit Recipe Item</h1>
<divclass="container-fluid">
    <formng-submit="editRecipeItem()">
        <divclass="row">
            <divclass="form-group col-xs-4">
                <labelfor="name">Name</label>
                <inputng-model="recipeItem.name"name="name"type="text"class="form-control"/>
            </div>
        </div>
        <divclass="row">
            <divclass="form-group col-md-4 col-xs-4">
                <labelfor="quantity"></label>
                <inputng-model="recipeItem.quantity"name="quantity"type="text"class="form-control"/>
            </div>
        </div>
        <divclass="row">
            <divclass="form-group col-md-4 col-xs-4">
                <labelfor="measurementUnit"></label>
                <inputng-model="recipeItem.measurementUnit"name="measurementUnit"type="text"class="form-control"/>
            </div>
        </div>
        <divclass="row">
            <buttontype="submit"class="btn btn-primary">Save</button>
            <ahref="/"class="btn btn-default">Cancel</a>
        </div>
    </form>
</div>

在deleteItem。html，我们会提供一个段落来进行确认。我们将提供一个按钮，它调用作用域函数deleteRecipeItem。它将向服务器提交一个请求，以删除特定的菜谱项。隐藏,复制Code

<div class="alert alert-warning">
    <p>Do you really want to delete this recipe item?</p>
    <p> {{recipeItem.name}}  {{recipeItem.quantity}} {{recipeItem.measurementUnit}}</p>
</div>
<button ng-click="deleteRecipeItem()" class="btn btn-danger">Yes</button>
<a href="/" class="btn btn-default">No</a>

一切都完成了。现在您可以创建、更新或删除菜谱了。你会成为一个真正的大厨。不仅仅是一个只遵循别人食谱的厨师。 IE缓存问题最后，我想谈谈发生在IE上的一个缓存问题。如果我们把IIS Express改成IE，在我添加了一个新菜谱“roast Duck”之后，你不能马上看到我刚刚添加的新菜谱。它没有正确地插入吗?去数据库查一下，新食谱就在那里。看起来当返回到list时，AngularJS根本没有发送httpget请求到服务器，只是从缓存中获取结果。这就是为什么新的更新不会弹出。我们可以资源通过httpProvider解决这个问题。在AngularJS应用程序配置函数中注入httpProvider。然后将http默认缓存设置为false，并将http get请求头中的If-Modified-Since设置为0。隐藏,收缩,复制Code

angular.module('masterChefApp').config(['$routeProvider', '$httpProvider', '$locationProvider', function ($routeProvider, $httpProvider, $locationProvider) {
        //disable http cache
        $httpProvider.defaults.cache = false;
        if (!$httpProvider.defaults.headers.get) {
            $httpProvider.defaults.headers.get = {};
        }

        $httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
        //////////////////////////////////////////////////////////////////

        $routeProvider
        .when('/', {
            templateUrl: 'partials/recipes.html',
            controller: 'recipesController'
        })
        .when('/recipes/add', {
            templateUrl: 'partials/add.html',
            controller: 'recipesAddController'
        })
        .when('/recipes/edit/:id', {
            templateUrl: 'partials/edit.html',
            controller: 'recipesEditController'
        })
        .when('/recipes/delete/:id', {
            templateUrl: 'partials/delete.html',
            controller: 'recipesDeleteController'
        })
        .when('/recipes/addStep/:id', {
            templateUrl: 'partials/addStep.html',
            controller: 'recipesAddStepController'
        })
        .when('/recipes/editStep/:id', {
            templateUrl: 'partials/editStep.html',
            controller: 'recipesEditStepController'
        })
        .when('/recipes/deleteStep/:id', {
            templateUrl: 'partials/deleteStep.html',
            controller: 'recipesDeleteStepController'
        })
        .when('/recipes/addItem/:id', {
            templateUrl: 'partials/addItem.html',
            controller: 'recipesAddItemController'
        })
        .when('/recipes/editItem/:id', {
            templateUrl: 'partials/editItem.html',
            controller: 'recipesEditItemController'
        })
        .when('/recipes/deleteItem/:id', {
            templateUrl: 'partials/deleteItem.html',
            controller: 'recipesDeleteItemController'
        });

        $locationProvider.html5Mode(true);

    }]);

然后我们再试一次。它像一个魅力。虽然我没有这个缓存问题在谷歌Chrome，我们仍然需要修复这个问题在IE，因为web应用程序应该工作在所有的浏览器。结论在本文中，我介绍了如何使用angular route创建SPA CRUD应用程序。我们还讨论了如何在单个服务器端Web API控制器中映射多个url。以及相应的，如何在单个客户端angular资源服务中映射不同的路由。从Maser Chef part 3开始，我们将在Angular2和EntityFramework Core上开始一个新的冒险。本文转载于：http://www.diyabc.com/frontweb/news17322.html

查看全文

相关阅读:
令人抓狂的redis和rediscluster Python驱动包的安装
 基于Docker的Consul集群实现服务发现
 应用中引入缓存层后，缓存和持久化层数据一致性的思考
 Redis中几个简单的概念：缓存穿透/击穿/雪崩，别再被吓唬了
 Redis Cluster 自动化安装，扩容和缩容
 mysql 8.0 忘记root密码后重置
 MySQL 8.0部分弃用的参数整理
 MySQL Online DDL与DML并发阻塞关系总结
 MySQL Error Log 文件丢失导致The server quit without updating PID file启动失败的场景
 MySQL删除大表时潜在的问题（drop table，truncate table）

原文地址：https://www.cnblogs.com/Dincat/p/13494085.html