Nancy简单实战之NancyMusicStore(三):完善商品信息与管理
前言
上一篇,我们做了不少准备,并且还把我们NancyFx音乐商城的首页打造好了。这一篇主要是完善我们在首页的商品浏览问题和添加对商品的管理。
下面开始正题:
商品详情
首先是查看单个商品的详情:
先回顾一下我们在Home/Index.cshtml中写的热销商品列表
<ul id="album-list">
@foreach (var album in Model)
{
<li>
<a href="javascript:;">
<img alt="@album.Title" src="@album.AlbumArtUrl" />
<span>@album.Title</span>
</a>
</li>
}
</ul>
我们在上一篇是没有给这个列表项加具体的链接,为了和MVC MusicStore保持一致,我们也用了同样的请求链接
给Home/Index.cshtml列表的a标签加上链接,具体如下:
<li>
<a href="/store/details/@album.AlbumId">
<img alt="@album.Title" src="@album.AlbumArtUrl" />
<span>@album.Title</span>
</a>
</li>
所以我们要访问单个商品的详情,是要通过 http://domain.com/store/details/id 的形式来访问。
下面我们就在StoreModule中,添加这一块相应的内容,在StoreModule的构造函数中添加下面的代码:
Get["details/{id:int}"] = _ =>
{
int id = 0;
if (int.TryParse(_.id, out id))
{
string cmd = "public.get_album_details_by_aid";
var album = DBHelper.QueryFirstOrDefault<AlbumDetailsViewModel>(cmd, new
{
aid = id
}, null, null, CommandType.StoredProcedure);
if (album != null)
{
return View["Details", album];
}
}
return View["Shared/Error"];
};
在路由中details/{id:int},参数id后面加了一个限制,让其只能是整数。
然后通过_.id
来取到这个id的具体值,后面的内容就是根据这个id去拿到第一条数据。
最后就是详情页的页面内容了
@inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<NancyMusicStore.ViewModels.AlbumDetailsViewModel>
@{
ViewBag.Title = "Album - " + Model.Title;
}
<h2>@Model.Title</h2>
<p>
<img alt="@Model.Title" src="@Model.AlbumArtUrl" />
</p>
<div id="album-details">
<p>
<em>Genre:</em>
@Model.GenreName
</p>
<p>
<em>Artist:</em>
@Model.ArtistName
</p>
<p>
<em>Price:</em>
@String.Format("{0:F}", Model.Price)
</p>
<p class="button">
<a href="/ShoppingCart/AddToCart/@Model.AlbumId">Add to cart</a>
</p>
</div>
此时单个商品的详情已经可看到了,效果如下:
商品分类列表
下面要查看的是某个分类的所有商品。
我们在通过ajax填充分类信息时,填充的内容是:
$("#categories").append('<li><a href="javascript:;">' + res[i].name + '</a></li>');
现在把具体的链接地址加上,修改成如下代码:
<li><a href="/store/browse/' + res[i].name + '">' + res[i].name + '</a></li>
可以看到,我们要访问某个分类有那些商品,是要通过 http://domain.com/store/browse/name 的形式来访问。
同样在StoreModule的构造函数添加一个相应的处理:
Get["browse/{genre}"] = _ =>
{
string genre = _.genre;
ViewBag.Genre = genre;
string cmd = "public.get_album_list_by_gname";
var albumList = DBHelper.Query<AlbumListViewModel>(cmd, new
{
gname = genre
}, null, true, null, CommandType.StoredProcedure).ToList();
return View["Browse", albumList];
};
其对应的页面内容是和首页的热销商品一个形式的,只是数量比较多而已。
在这里点击某个商品也是能跳到对应的详情页的,具体如下:
@inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<List<NancyMusicStore.ViewModels.AlbumListViewModel>>
@{
ViewBag.Title = "Browse Albums";
}
<div class="genre">
<h3><em>@ViewBag.Genre</em> Albums</h3>
<ul id="album-list">
@foreach (var album in Model)
{
<li>
<a href="/store/details/@album.AlbumId">
<img alt="@album.Title" src="@album.AlbumArtUrl" />
<span>@album.Title</span>
</a>
</li>
}
</ul>
</div>
示例为Disco分类下面的列表页:
到这里,我们已经完成了商品信息浏览的相关处理。
下面就添加对这些商品的管理,这里的管理实则是对专辑(Albums)信息的CURD操作。
商品管理
这些操作的具体内容就不详细展开了。在Modules文件夹下面新建一个StoreManagerModule.cs
具体内容如下(省略了部分代码,占的篇幅有点多) :
using Nancy;
using Nancy.ModelBinding;
using Nancy.Security;
using NancyMusicStore.Common;
using NancyMusicStore.Models;
using NancyMusicStore.ViewModels;
using System;
using System.Data;
namespace NancyMusicStore.Modules
{
public class StoreManagerModule : NancyModule
{
public StoreManagerModule() : base("/storemanager")
{
Get["/"] = _ =>
{
string cmd = "get_all_albums";
var list = DBHelper.Query<AlbumListViewModel>(cmd, null, null, true, null, CommandType.StoredProcedure);
return View["Index", list];
};
Get["/create"] = _ =>{};
Post["/create"] = _ =>{};
Get["/details/{id:int}"] = _ =>{};
Get["/edit/{id:int}"] = _ =>{};
Post["/edit"] = _ =>{};
Get["/delete/{id:int}"] = _ =>{};
Post["/delete/{id:int}"] = _ =>{};
Get["/getallgenres"] = _ =>{};
Get["/getallartists"] = _ =>{};
}
}
}
视图代码就不放出来了,可以在最后的文章中去下载。
商品管理的效果如下:
我们在_Layout.cshtml中指定了商品管理的入口在导航菜单的【Admin】中
但是现在这种情况下,是任何人都可以对商品信息修改,这显然是不合理的。
在MVC MusicStore中是通过Membership来处理这个问题的。对于这一块我是通过Nancy本身的Forms认证来处理。
Forms认证,有几个重要的地方需要说明一下:
-
在启动器中要添加Forms认证的支持
-
实现一个继承IUserMapper接口的UserMapper类
-
通过IoC去注册这个UserMapper类
-
在要认证的地方添加this.RequiresAuthentication()即可
我们先在web.config的appSettings中添加一个配置项,用来指定没授权用户的登录url
<add key="logonUrl" value="~/account/logon" />
在启动器(CustomerBootstrapper.cs)中,是这样进行处理的
protected override void RequestStartup(TinyIoCContainer container, IPipelines pipelines, NancyContext context)
{
base.RequestStartup(container, pipelines, context);
//form authentication
var formsAuthConfiguration = new FormsAuthenticationConfiguration
{
RedirectUrl = ConfigHelper.GetAppSettingByKey("logonUrl"),
UserMapper = container.Resolve<IUserMapper>(),
};
FormsAuthentication.Enable(pipelines, formsAuthConfiguration);
}
protected override void ConfigureRequestContainer(TinyIoCContainer container, NancyContext context)
{
base.ConfigureRequestContainer(container, context);
container.Register<IUserMapper, UserMapper>();
}
在这里,用的IoC容器也是Nancy本身就支持的TinyIoc,没有用业界流行的AutoFac。
UserMapper的实现如下 :
internal class UserMapper : IUserMapper
{
public IUserIdentity GetUserFromIdentifier(Guid identifier, NancyContext context)
{
string cmd = "public.get_user_by_userid";
var user = DBHelper.QueryFirstOrDefault<SysUser>(cmd, new
{
uid = identifier.ToString()
}, null, null, CommandType.StoredProcedure);
return user == null
? null
: new UserIdentity
{
UserName = user.SysUserName,
Claims = new[] { "SystemUser" }
};
}
}
到这一步,Forms的配置已经OK了。
有关Nancy中Forms认证的内容,可以参考之前的博客 Nancy之Forms authentication的简单使用
下面就只要在StoreManagerModule的构造函数中添加 this.RequiresAuthentication();
这时,我们想直接通过入口来打开管理界面,就会跳转到登录界面,要求我们先进行登录才可以。
效果图如下:
可以看到,我们的效果已经达到了。
下面仔细观察一下url,发现参数中还附带了returnUrl,可以让我们登录后跳转到指定的页面。
登录注册相关的操作放在在AccountModule中
下面来看看这个returnUrl的处理
Get["/logon"] = _ =>
{
var returnUrl = this.Request.Query["returnUrl"];
ViewBag.returnUrl = returnUrl;
return View["LogOn"];
};
Post["/logon"] = _ =>
{
var logonModel = this.Bind<LogOnModel>();
string cmd = "public.get_user_by_name_and_password";
var user = DBHelper.QueryFirstOrDefault<SysUser>(cmd, new
{
uname = logonModel.SysUserName,
upwd = logonModel.SysUserPassword
}, null, null, CommandType.StoredProcedure);
if (user == null)
{
return View["LogOn"];
}
else
{
MigrateShoppingCart(user.SysUserName);
var redirectUrl = string.IsNullOrWhiteSpace(logonModel.ReturnUrl) ? "/" : logonModel.ReturnUrl;
return this.LoginAndRedirect(Guid.Parse(user.SysUserId), fallbackRedirectUrl: redirectUrl);
}
};
returnUrl是以QueryString的形式存在,所以在打开登录界面的时候,用一个viewbag把它存起来
登录的时候再POST到后台。登录的POST操作用到了Nancy的ModelBinding,与MVC的模型绑定是类似的,可以参考 Nancy之ModelBinding(模型绑定)。
所以在LogOnModel中,添加了一个属性用于绑定这个returnUrl。
public class LogOnModel
{
public string SysUserName { get; set; }
public string SysUserPassword { get; set; }
public string ReturnUrl { get; set; }
}
到这里,商品信息和管理已经完成了。实战的第二篇文章也就结束了。
下面一篇的内容就是要完成购物车的内容。
本文也已经同步到 Nancy之大杂烩