【MVC】快速构建一个图片浏览网站

news/2024/5/20 14:51:52/文章来源:https://blog.csdn.net/weixin_34198797/article/details/86130599

  当抄完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.οnlοad=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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_788976.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗？

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗？

2019独角兽企业重金招聘Python工程师标准>>> 最近两年&#xff0c;著名的自媒体网站今日头条可以说是火得一塌糊涂&#xff0c;虽然从目前来看也遇到了一点瓶颈&#xff0c;毕竟发展到了一定的规模&#xff0c;继续增长就更加难了&#xff0c;但如今的今日头条规模和…
阅读更多...
php页面劫持网站,网站被劫持了怎么修复

php页面劫持网站,网站被劫持了怎么修复

网站被劫持了的解决方法&#xff1a;首先用户可以对网站进行https改造&#xff0c;把空间的主机目录设置成禁止写入&#xff1b;然后对网站上的第三方软件进行检查&#xff0c;保证第三方软件不存在作弊的情况&#xff1b;最后关闭域名解析&#xff0c;在解析之后及时把域名删除…
阅读更多...
建站利器 | 阿里巴巴上线静态开源站点搭建工具 Docsite

建站利器 | 阿里巴巴上线静态开源站点搭建工具 Docsite

近日&#xff0c;阿里巴巴在Github上线了静态开源站点搭建工具Docsite&#xff0c;这是一款集官网、文档、博客和社区为一体的静态开源站点的解决方案&#xff0c;具有简单易上手、上手不撒手的特质&#xff0c;同时支持react和静态渲染、PC端和移动端、支持中英文国际化、SEO、…
阅读更多...
【Web】（适合新手）阿里云利用wdcp快速创建web网站服务器

【Web】（适合新手）阿里云利用wdcp快速创建web网站服务器

0、引言 对于新手搭建web环境&#xff0c;比如说手动安装nginx、mysql、php等的确不容易。所以我们可以借助于第三方集成环境&#xff0c;比如说我这里使用了WDCP。 1、购买阿里云服务器 关于阿里云服务器的购买我就不介绍了。本人购买的是轻量应用服务器,使用的是CentOS7.3…
阅读更多...
网址服务器不稳定,关于网站被360搜索提示服务器不稳定可能无法正常访问的解决方法...

网址服务器不稳定,关于网站被360搜索提示服务器不稳定可能无法正常访问的解决方法...

相信很多做网站的站长们都有过类似的经历吧&#xff0c;有时候因为服务器节点问题或者其他问题导致服务器或vps暂时性无法运行导致网站暂时无法打开。这些都是属于正常的现象&#xff0c;但是运气不好的时候辛辛苦苦优化的网站可能就会被搜素引擎标记为:该页面因服务器不稳定可…
阅读更多...
优化IPOL网站中基于DCT（离散余弦变换）的图像去噪算法（附源代码）。

优化IPOL网站中基于DCT（离散余弦变换）的图像去噪算法（附源代码）。

在您阅读本文前&#xff0c;先需要告诉你的是&#xff1a;即使是本文优化过的算法&#xff0c;DCT去噪的计算量依旧很大&#xff0c;请不要向这个算法提出实时运行的苛刻要求。 言归正传&#xff0c;在IPOL网站中有一篇基于DCT的图像去噪文章&#xff0c;具体的链接地址是&am…
阅读更多...
共享收集的图像处理方面的一些资源和网站。

共享收集的图像处理方面的一些资源和网站。

首先&#xff0c;共享在软件编写过程访问和收集到的一些与图像或优化有关的网站和博客。 http://blog.csdn.net/housisong/category/325273.aspx 图像处理的相关技术博客 http://www.cnblogs.com/xiaotie/category/145078.html 图像处理的相关技术…
阅读更多...
全球银行网站成黑客主攻目标 阿里云提供安全防御应急方案

全球银行网站成黑客主攻目标 阿里云提供安全防御应急方案

2019独角兽企业重金招聘Python工程师标准>>> 近日&#xff0c;阿里云监控发现&#xff0c;匿名者&#xff08;Anonymous&#xff09;组织成员正在发起针对全球中央银行网站的攻击行动&#xff0c;截止目前&#xff0c;国内有超过2家以上的重要网站被攻击&#xff0c…
阅读更多...
《Django开发教程》1.3 我们的第一个网站

《Django开发教程》1.3 我们的第一个网站

1、启动项目可以访问 上节课&#xff0c;我们创建了一个HelloWorld项目&#xff0c;目录结果如下&#xff1a; $ cd HelloWorld/ $ tree . |-- HelloWorld | |-- __init__.py | |-- asgi.py | |-- settings.py | |-- urls.py | -- wsgi.py -- manage.py启动项目&am…
阅读更多...
如何实现网站白名单控制，只允许访问指定站点？

如何实现网站白名单控制，只允许访问指定站点？

对于一些安全性要求比较高的局域网来说&#xff0c;有时候只允许客户机访问指定的网站&#xff0c;其他网络行为一律禁止。这时候我们就需要用到“网站白名单”功能&#xff08;只允许访问下列网站&#xff09;。具体的配置如下图&#xff1a;1. 在网页过滤中开启“只允许访问下…
阅读更多...
基于django的个人博客网站建立（四）

基于django的个人博客网站建立（四）

基于django的个人博客网站建立&#xff08;四&#xff09; 前言 网站效果可点击这里访问 今天主要添加了留言与评论在后台的管理和主页文章的分页显示&#xff0c;文章类别的具体展示以及之前预留链接的补充 主要内容 其实今天的内容和前几天的基本相似&#xff0c;就是个体力活…
阅读更多...
ffmpeg技术 - 一个不错的网站_拔剑-浆糊的传说_新浪博客

ffmpeg技术 - 一个不错的网站_拔剑-浆糊的传说_新浪博客

http://www.ffmpeg.com.cn 首页 [编辑]ffmpeg技术 http://www.ffmpeg.com.cn ffmpeg快速入门 ffmpeg简介 ffmpeg入门基础知识 ffmpeg快速安装 ffmpeg快速命令使用 ffmpeg快速应用开发 ffmpeg编译详解 ffmpeg编译FAQ集 ffmpeg命令使用 ffmpeg使用事例 ffplay使用事例 ffserver使…
阅读更多...
web应用程序和web网站_使用推荐引擎个性化您的Web应用程序

web应用程序和web网站_使用推荐引擎个性化您的Web应用程序

web应用程序和web网站为了在快速发展的全球行业中保持相关性&#xff0c;技术专业人员必须跟踪IT的重大趋势&#xff0c;并找到方法将重要的趋势纳入其公司的技术产品组合中。 这样的趋势之一就是使用推荐引擎来驱动用户探索您的网站或企业的其他产品。 这些引擎根据各种模式向…
阅读更多...
互动3D网站已触手可及

互动3D网站已触手可及

XML3D仅仅需要适当的3D模型、互联网连接和一个浏览器&#xff0c;就可以让顾客看到网上商店里的互动3D物品。当顾客访问一家在线商店时&#xff0c;他们往往希望能看到商品的整个全貌。比如&#xff0c;想放大了看&#xff0c;或者通过调整角度让物品形象化。直到现在&#xff…
阅读更多...
web应用程序和web网站_改善Web应用程序的性能

web应用程序和web网站_改善Web应用程序的性能

web应用程序和web网站总览 富Internet应用程序&#xff08;RIA&#xff09;在Web 2.0域中非常流行。 为了提供新颖新颖的用户体验&#xff0c;许多网站都使用JavaScript或Flash将其复杂的内容从后端服务器移至客户端。 如果数据大小相当小&#xff0c;这将提供方便&#xff0c…
阅读更多...
自学html5的网站有什么区别,在微信上HTML5 网页和普通的网页开发有何不同

自学html5的网站有什么区别,在微信上HTML5 网页和普通的网页开发有何不同

原标题&#xff1a;在微信上HTML5 网页和普通的网页开发有何不同html5网页开发自问世以来受到的关注应该超过了开发者们的预期&#xff0c;在微信开发上html5网页技术的特性同样被高度运用。本文华清创客学院讲师和大家分享一下在微信上HTML5 网页和普通的网页开发有何不同?在…
阅读更多...
爬取网站视频命令行工具you-get的安装及使用方法

爬取网站视频命令行工具you-get的安装及使用方法

爬取网站视频命令行工具you-get安装及使用方法软件简介下载方法Step.01Step.02使用方法报错提示软件简介 you-get 是一个跨平台命令行视频、音频与图像下载工具&#xff0c;支持国内外常用的各种多媒体网站。 下载方法 Step.01 下载Python&#xff0c;可以在python官网下载…
阅读更多...
html5和css3_使用HTML5和CSS3创建现代网站

html5和css3_使用HTML5和CSS3创建现代网站

html5和css3在你开始前 本教程假定您具有HTML&#xff0c;CSS和JavaScript的一些基本经验。 它假定您了解HTML元素或标记是什么&#xff0c;属性的含义&#xff0c;HTML标记的基本语法&#xff0c;网页的一般结构&#xff0c;等等。 就CSS而言&#xff0c;您应该熟悉基于元素&…
阅读更多...
【已解决】Nginx部署网站后外网访问不了

【已解决】Nginx部署网站后外网访问不了

解决方案&#xff1a; 加入nginx.exe的路径
阅读更多...
Github/Gitlab/Gitee徽章生成网站shields.io的使用方法

Github/Gitlab/Gitee徽章生成网站shields.io的使用方法

网站地址&#xff1a;https://shields.io/ 【静态徽标】 label&#xff1a;左边标签 message&#xff1a;右边具体信息 color&#xff1a;颜色&#xff0c;常用颜色如下 网址1&#xff1a;https://img.shields.io/static/v1?label<LABEL>&message<MESSAGE>…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业