当抄完MusicStore时,你应该对MVC有一个比较清晰的认识了.接下来就需要做个网站来继续增加自己的知识了.那么,该做个什么网站呢.做个图片浏览网站吧,简单而实用.

简单设计

1.首先,页面中间是个图片列表.将所有图片列出来是不太科学的,所以要做个分页浏览的功能.

2.页面右边,有个图片排行榜,列出点击量前10名的图片名称.而且,同一时间段同一客户端的重复点击只能计算一次才合理的.

3.有图片浏览就肯定有图片上传功能啦,还必须要是登录后才能上传.

数据层

采用EF的Code First方式构建数据库,先定义一个ImageModle,放到DbContext数据上下文中,再定义一个DropCreateDatabaseIfModelChanges迁移类,在seed方法中初始化数据,如下

    public class ImageModle
{
[Display(Name="编号")]
public int Id { get; set; }
[Display(Name="图片名")]
public string ImageName { get; set; }
[Display(Name = "图片相对路径")]
public string ImageUrl { get; set; }
[Display(Name = "上传者")]
public string Uploader { get; set; }
[Display(Name = "点击数")]
public int HitCount { get; set; }
[Display(Name = "上传时间")]
public DateTime UploadDateTime { get; set; }
} public class ImageMangeEntities:DbContext
{
public ImageMangeEntities()
: base("DefaultConnection")
{
}
public DbSet<ImageModle> Images { get; set; }
} public class ImageData : DropCreateDatabaseIfModelChanges<ImageMangeEntities>
{
protected override void Seed(ImageMangeEntities context)
{
context.Images.Add(new ImageModle() { ImageUrl = "~/Images/9662C9V1UU02.jpg", ImageName = "图片1", HitCount = 1, UploadDateTime = DateTime.Now });
context.Images.Add(new ImageModle() { ImageUrl = "~/Images/1343698710MJjSR8.jpg", ImageName = "图片2", HitCount = 1, UploadDateTime = DateTime.Now });
context.Images.Add(new ImageModle() { ImageUrl = "~/Images/1343698710MJjSR8.jpg", ImageName = "图片3", HitCount = 1, UploadDateTime = DateTime.Now });
context.Images.Add(new ImageModle() { ImageUrl = "~/Images/9662C9V1UU02.jpg", ImageName = "图片4", HitCount = 1, UploadDateTime = DateTime.Now });
context.Images.Add(new ImageModle() { ImageUrl = "~/Images/1343698710MJjSR8.jpg", ImageName = "图片5", HitCount = 1, UploadDateTime = DateTime.Now });
context.Images.Add(new ImageModle() { ImageUrl = "~/Images/9662C9V1UU02.jpg", ImageName = "图片6", HitCount = 1, UploadDateTime = DateTime.Now });
context.Images.Add(new ImageModle() { ImageUrl = "~/Images/1343698710MJjSR8.jpg", ImageName = "图片7", HitCount = 1, UploadDateTime = DateTime.Now });
context.Images.Add(new ImageModle() { ImageUrl = "~/Images/1343698710MJjSR8.jpg", ImageName = "图片8", HitCount = 1, UploadDateTime = DateTime.Now });
context.Images.Add(new ImageModle() { ImageUrl = "~/Images/9662C9V1UU02.jpg", ImageName = "图片9", HitCount = 1, UploadDateTime = DateTime.Now });
context.Images.Add(new ImageModle() { ImageUrl = "~/Images/1343698713w8Epfw.jpg", ImageName = "图片10", HitCount = 1, UploadDateTime = DateTime.Now });
context.Images.Add(new ImageModle() { ImageUrl = "~/Images/1343698710MJjSR8.jpg", ImageName = "图片11", HitCount = 1, UploadDateTime = DateTime.Now });
context.Images.Add(new ImageModle() { ImageUrl = "~/Images/9662C9V1UU02.jpg", ImageName = "图片12", HitCount = 1, UploadDateTime = DateTime.Now });
context.Images.Add(new ImageModle() { ImageUrl = "~/Images/9662C9V1UU02.jpg", ImageName = "图片13", HitCount = 1, UploadDateTime = DateTime.Now });
context.Images.Add(new ImageModle() { ImageUrl = "~/Images/1343698713w8Epfw.jpg", ImageName = "图片14", HitCount = 1, UploadDateTime = DateTime.Now });
context.Images.Add(new ImageModle() { ImageUrl = "~/Images/1343698713w8Epfw.jpg", ImageName = "图片15", HitCount = 1, UploadDateTime = DateTime.Now });
context.SaveChanges();
}
}

主页

主页的构成很简单,中间是个ul列表,右边是点击排行榜,分页主要是利用PagedListPager扩展方法,View和Control如下

ImageMangeEntities ImageDB = new ImageMangeEntities();

        public ActionResult Index(int? page)
{
List<ImageModle> model = new List<ImageModle>();
model = ImageDB.Images.ToList();
int pagenumber = page ?? 1;
var retmodel = model.ToPagedList(pagenumber, 12);
return View(retmodel);
}
@model IPagedList<MusicStoreTest.Models.ImageModle>
@{
ViewBag.Title = "主页";
}
@using PagedList;
@using PagedList.Mvc;
<h2>图片浏览</h2> <div style="float: left;">
<ul id="album-list">
@foreach (var item in Model)
{
<li><a href="@Url.Action("Details", "Image",
new {id = item.Id})"> <img style="width: 100px; height: 100px" alt="@item.ImageName" src="@Url.Content(@item.ImageUrl)"/>
<span >@item.ImageName</span> </a>
</li>
}
</ul>
</div>
<div style="float:left;">
@{Html.RenderAction("ImageHitList");}
</div>
<div style="vertical-align: middle; clear: both;margin-left: 50px">
@Html.PagedListPager((IPagedList) Model, page => Url.Action("Index", new {page = page}))
</div>

点击量计算实现
    要实现同一时间段内不算点击量累计,可以用HttpContext.Session实现,就定30分钟期限吧,30分钟内无操作就可以继续计算点击量,如下

         <sessionState timeout="30"/>
        public ActionResult Details(int id)
{
List<ImageModle> model = new List<ImageModle>();
var item = ImageDB.Images.Find(id);
var session = HttpContext.Session[id.ToString()];
if (session == null)
{
HttpContext.Session[id.ToString()] = "browseId";
item.HitCount = item.HitCount + 1;
ImageDB.Entry(item).State = EntityState.Modified;
ImageDB.SaveChanges();
} ViewBag.ImageName = item.ImageName;
ViewBag.ImageUrl = item.ImageUrl;return View();
}

上传图片
     还有上传图片功能,要加上[Authorize]特性实现登录后才能上传图片,如下

        [HttpPost]
[Authorize]
public JsonResult UploadImage(HttpPostedFileBase image)
{
if (image != null)
{
string guid = Guid.NewGuid().ToString();
string fileName = Path.GetFileName(image.FileName);
string filePath = Path.Combine(Server.MapPath("~/Files"), guid + "-" + fileName);
string clientPath = "/Files/" + guid + "-" + fileName;
image.SaveAs(filePath);
ImageModle imageModle = new ImageModle();
imageModle.ImageName = fileName;
imageModle.ImageUrl = clientPath;
imageModle.HitCount = 0;
imageModle.Uploader = User.Identity.Name;
imageModle.UploadDateTime=DateTime.Now;
ImageDB.Images.Add(imageModle);
ImageDB.SaveChanges();
return Json(new { success = true, result = clientPath });
}
else
{
return Json(new { success = false, msg = "上传失败!" });
}
}
@{
ViewBag.Title = "UploadImage";
}
<h2 id="ssss">上传图片</h2>
@using (Html.BeginForm("UploadImage", "Image", FormMethod.Post, new { enctype = "multipart/form-data", id = "ImageForm" }))
{
<img alt="请上传图片" id="img" width="800" height="500"/>
<input type="file" id="imageInput" name="image" accept="image/gif,image/jpeg,image/png,gif|jpg|png"/>
<input type="button" id="btn" value="提交"/>
<span class="img-msg"></span>
}
@section Scripts {
<script> $('#imageInput').change(function () {
if ($(this).val().length > 0) {
var file = this.files[0];
var reader = new FileReader();
reader.onload=function (e)
{
$("#img").attr("src", e.target.result);
}
reader.readAsDataURL(file);
}
}); $('#btn').click(function () {
if ($("#imageInput").val().length > 0) {
alert($("#imageInput").val());
$('#ImageForm').ajaxSubmit({
dataType: 'json',
success: function (data) {
$('.img-msg').text("");
if (data.success) {
$("#img").attr("src", data.result);
} else {
alert(data.msg);
}
},
error: function () {
alert("上传失败");
},
beforeSend: function () {
$('.img-msg').text("正在上传,请稍后...");
}
});
}
});
</script>
}

小结

做这么一个网站很简单,熟练的人大概半个小时就可以完成了,但这是入门的必修课.另外,当完成第一个网站时,你就会发现MVC之路才是刚刚开始.

 
 
标签: MVC

【MVC】快速构建一个图片浏览网站的更多相关文章

  1. 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)

    [jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局 时间:2011年03月21日作者:愚人码头查看次数:29,744 views评论次数:25条评论 前段时间领导 ...

  2. springboot:快速构建一个springboot项目

    前言: springboot作为springcloud的基础,springboot的热度一直很高,所以就有了这个springboot系列,花些时间来了解和学习为自己做技术储备,以备不时之需[手动滑稽] ...

  3. 快速构建一个简单的单页vue应用

    技术栈 vue-cli webpack vux,vux-loader less,less-loader vue-jsonp vue-scroller ES6 vue-cli:一个vue脚手架工具,利用 ...

  4. 快速构建一个 Springboot

    快速构建一个 Springboot 官网:http://projects.spring.io/spring-boot/ Spring Boot可以轻松创建可以“运行”的独立的,生产级的基于Spring ...

  5. 利用angular4和nodejs-express构建一个简单的网站(五)—用户的注册和登录-HttpClient

    上一节简单介绍了一下利用angular构建的主路由模块,根据上一节的介绍,主页面加载时直接跳转到用户管理界面,下面就来介绍一下用户管理模块.启动应用后,初始界面应该是这样的: 用户管理模块(users ...

  6. 快速构建一个vue项目

    首先介绍一下命令行构建一个vue项目步骤: 1.下载安装node.js(直接运行安装包根据步骤安装完),打开命令行输入:node -v ,出现版本号即安装成功. 2.命令行界面输入:cnpm inst ...

  7. 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章  ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...

  8. 利用angular4和nodejs-express构建一个简单的网站(一)——构建前后端开发环境

    学习了一段时间的angular4知识,结合以前自学的nodejs-express后端框架知识,做了一个利用angular4作为前端,node-express作为后端服务器的网站.这个网站的功能很简单, ...

  9. 快速构建一个使用axios的vue应用程序(转)

    英文原文:https://www.sitepoint.com/fetching-data-third-party-api-vue-axios/ 译文:https://segmentfault.com/ ...

随机推荐

  1. ZOJ 4053 Couleur

    4053 思路: 主席树 先分别求前缀和后缀的逆序数 然后要求某一段的逆序数,就可以根据前缀或着后缀根据容斥求出答案, 这样需要枚举这一段中的数,求之前或者之后有多少个比他大或比他小的数, 这个可以通 ...

  2. Python + Selenium WebDriver Api 知识回顾

    一直再用 Selenium WebDriver 但是用的都比较零散,也没有做过总结,今天借此机会,整理一下,方便大家使用时查阅 webDriver  的属性 ['CONTEXT_CHROME', 'C ...

  3. 第 6 章 存储 - 040 - docker managed volume

    docker managed volume 与 bind mount 在最大区别是不需要指定 mount 源,指明 mount point 就行了 通过 -v 告诉 docker 需要一个 data ...

  4. 雷林鹏分享:C# 数组(Array)

    C# 数组(Array) 数组是一个存储相同类型元素的固定大小的顺序集合.数组是用来存储数据的集合,通常认为数组是一个同一类型变量的集合. 声明数组变量并不是声明 number0.number1... ...

  5. English trip V1 - B 5.Is It Cold Outside? 外面很冷? Teacher:Corrine Key: weather

    In this lesson you will learn to talk about the weather. 本节课将学习到关于天气 课上内容(Lesson) 词汇(Key Word ) # 关于 ...

  6. Lua常用封装方法

    Lua 获取随机值 --获取随机值,指定上限和下限 function getRandom(min,max) -- 接收一个整数n作为随即序列的种子 math.randomseed(os.time()) ...

  7. 架构探险笔记4-使框架具备AOP特性(上)

    对方法进行性能监控,在方法调用时统计出方法执行时间. 原始做法:在内个方法的开头获取系统时间,然后在方法的结尾获取时间,最后把前后台两次分别获取的系统时间做一个减法,即可获取方法执行所消耗的总时间. ...

  8. git 基础知识

    git 分布式版本控制系统 git三棵树: 工作目录 红色 等待添加到暂存区域 需执行git add filename 命令添加到暂存区 暂存区域 绿色 文件等待被提交 需执行 git commit ...

  9. MySQL的自动补全和语法高亮工具MyCli

    官方地址: RHEL, Centos: We don't have packages for RHEL or Centos, yet. Instead, use pip to install mycl ...

  10. 【洛谷p1313】计算系数

    (%%%hmr) 计算系数[传送门] 算法呀那个标签: (越来越懒得写辽)(所以今天打算好好写一写) 首先(ax+by)k的计算需要用到二项式定理: 对于(x+y)k,有第r+1项的系数为:Tr+1= ...