拿Bing搜索的背景图片设置为投机网站的背景,实现背景及新闻的每天更新

效益图如下:澳门新濠天地水舞间 1

料理一下思路,首先我们若抓捕取Bing的每日图片和新型消息,然后保留图片及信息到地头,最后显示图片以及新闻及网站首页。

率先步:抓取图片

  首先打开Bing,然后用开发者工具
F12,点击审查网页元素,分析HTML结构要下图:澳门新濠天地水舞间 2

     

  这里可以看到背景的图样地址,这就算准备从HTML元素中落图片链接了。于是我还下载了Jumony
一个提网页元素的援助类似,来获得background-image的要素(Jumony的运好直接在NuGet管理受到搜索Jumony,然后安装,最后记得引用命名空间,Jumony的详尽使用要动http://www.cnblogs.com/Ivony/p/3447536.html)

  澳门新濠天地水舞间 3

  结果发现 获取的HTML标签里并没有CSS的特性,那也不怕赢得不至
背景图片的URL了,然后怎么收拾吧?

  继续以开发者工具查看Bing网页,发现了一个Ajax请求,返回了一个Json数据,如下图:

  澳门新濠天地水舞间 4

  说明这个要返回的Json就是Bing的每日图片的消息,这就可知获得图片信息的乞求网址了,查看消息头:

  澳门新濠天地水舞间 5

  请求网址:http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&nc=1470798060031&pid=hp&video=1

  然后检测请求被可以大概的参数,最后得URL:http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1

      接下就是待在程序中得到Json数据,使用WebClient 进行网页请求:

  澳门新濠天地水舞间 6

  这时我们不怕假设指向Json进行辨析,获取我们怀念使的数据,也不怕是背景图片的URL:

  对Json的剖析出那么些艺术:Json转换为dataTable,Json反序列化,也产生第三正组件等,

  这里用自己比较善于的计:VS自带的javaScriptSerializer类将wallejson转换为模型,这个模型根据返回的Json数据结构创建

  解析了后便落了图片的URL,根据WebClient的DownLoadFile()方法保存图片及地头;

  附上模型:

 1  //用于解析Bing返回的Json数据
 2 
 3 
 4     public class Walle
 5     {
 6         public  List<images> images { get; set; }
 7         public tooltips tooltips { get; set; }
 8     }
 9 
10     public class images
11     {
12         public string startdate { get; set; }
13         public string fullstartdate { get; set; }
14         public string enddate { get; set; }
15         public string url { get; set; }
16         public string urlbase { get; set; }
17         public string copyright { get; set; }
18         public string copyrightlink { get; set; }
19         public string wp { get; set; }
20         public string hsh { get; set; }
21         public string drk { get; set; }
22         public string top { get; set; }
23         public string bot { get; set; }
24         public List<int> hs { get; set; }
25 
26 
27     }
28 
29     public class tooltips
30     {
31         public string loading { get; set; }
32         public string previous { get; set; }
33         public string next { get; set; }
34         public string walle { get; set; }
35         public string walls { get; set; }
36 
37     }

 

 

亚步:获取每日新闻

  我们只要收获这里的多寡:

澳门新濠天地水舞间 7

  继续行使开发者工具查看数据的位置:

  澳门新濠天地水舞间 8

  这便好下Jumony抓取数据了吧,和正好开头同,

  结果充分烦恼,在HTML页面中摸索不至类名为”hplaCata”的因素内容。

  仔细查阅了网络连接后,发现了一个坏有意思的事体:

  如下图:

     澳门新濠天地水舞间 9

  打开这要后:

  澳门新濠天地水舞间 10

    原来是单独立的页面,怪不得以原本的页面及搜不至,接下去就吓惩治了:

   
保存之页面的请:http://cn.bing.com/cnhp/life?currentDate=20160809&IID=SERP.5045&IG=CC0CACB23C324D99A37ACF3604BF19FE,

  经过简单的测试,currentDate是当天之日期,其他的参数则未待。

  下面直接看代码,根据Jumony抓取数据:

  

 string date = DateTime.Now.ToString("yyyyMMdd");


            //获取文本信息
            string BingUrl = "https://cn.bing.com/cnhp/life?currentDate="+date;

            var Source = new JumonyParser().LoadDocument(BingUrl);
            string Title="";
            string Text="";

            //标题
            foreach (var item in Source.Find(".hplaCata > .hplatt"))
            {
                 Title = item.InnerText();
            }

            //文本
            foreach (var item in Source.Find("#hplaSnippet"))
            {
                Text = item.InnerText();
            }

 

 

老三步:保存数据及地方

    前面两步已赢得到了图片以及新闻,然后应该保留数据了,

    一般的话我们且是保存图片路径 和
资讯数据及数据库,不过需要是替换原来的网站首页背景,偏向于对UI的改进,再动数据库就非绝合适了。

    而且,图片会每天更新,系统虽然自动获取,这些数据才供每天的查询,写操作则同样龙一样浅。

    解决思路:图片为手上日子为文件称,资讯信息为XML形式,文件称也是时日期(如20160810)保存及网站目录下,每次首页加载都见面翻动以当下日子为文件称的Xml文件要JPG文件是否是,不设有即尽顺序抓取Bing图片与每日新闻,存在则获取数据传递给首页显示。

    保存资讯为XML,这里自己所以的凡XmlSerializer,将Model转换并创造XML文件,这个Model主要基于保存之信息来创造,字段有:
标题,副标题,文本信息,图片路径,当前日期。获取数据时倒序列化XML为Model;    

    模型:

    

澳门新濠天地水舞间 11澳门新濠天地水舞间 12

 1  /// <summary>
 2     /// 用于保存和传输Bing背景图片及文本信息
 3     /// </summary>
 4     public  class BgImages
 5     {
 6         /// <summary>
 7         /// 标题
 8         /// </summary>
 9         public string Title { get; set; }
10 
11         /// <summary>
12         /// 副标题
13         /// </summary>
14         public string STitle { get; set; }
15         /// <summary>
16         /// 文本
17         /// </summary>
18         public string Text { get; set; }
19         /// <summary>
20         /// 图片路径
21         /// </summary>
22         public string Url { get; set; }
23         /// <summary>
24         /// 保存日期
25         /// </summary>
26         public string Date { get; set; }
27     }

View Code

 

    

    附上控制器内总体代码:      

澳门新濠天地水舞间 13澳门新濠天地水舞间 14

  1    #region  联网抓取图片
  2 
  3         /// <summary>
  4         /// 读取背景信息
  5         /// </summary>
  6         /// <returns></returns>
  7         public ActionResult ReturnBgInfo()
  8         {
  9             //读取XML文件
 10             string Path = Server.MapPath("/Images/BingInfo/" + DateTime.Now.ToString("yyyyMMdd") + ".xml");
 11 
 12             FileInfo file = new FileInfo(Path);
 13 
 14             if (!file.Exists)
 15             {
 16                 GetNewBing();
 17             }
 18 
 19             FileStream files = new FileStream(Path, FileMode.Open);
 20             XmlSerializer xml = new XmlSerializer(typeof(BgImages));
 21             BgImages BgImage = (BgImages)xml.Deserialize(files);
 22             files.Close();
 23 
 24             return Json(BgImage);
 25 
 26         }
 27 
 28         /// <summary>
 29         /// //联网抓取图片
 30         /// </summary>
 31         public void GetNewBing()
 32         {
 33             string date = DateTime.Now.ToString("yyyyMMdd");
 34 
 35 
 36             //获取文本信息
 37             string BingUrl = "https://cn.bing.com/cnhp/life?currentDate=" + date;
 38 
 39             var Source = new JumonyParser().LoadDocument(BingUrl);
 40             string Title = "";
 41             string Text = "";
 42             string STitle = "";
 43 
 44             //标题
 45             foreach (var item in Source.Find(".hplaCata > .hplatt"))
 46             {
 47                 Title = item.InnerText();
 48             }
 49 
 50             //副标题
 51             foreach (var item in Source.Find(".hplaCata > .hplats"))
 52             {
 53                 STitle = item.InnerText();
 54             }
 55 
 56             //文本
 57             foreach (var item in Source.Find("#hplaSnippet"))
 58             {
 59                 Text = item.InnerText();
 60             }
 61 
 62 
 63             //Bing网址
 64             string url = "http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1";
 65 
 66             //获取Bing的图片 Json数据
 67             WebClient BingClient = new WebClient();
 68             BingClient.Encoding = System.Text.Encoding.UTF8;//定义对象的编码语言,此处或者是gb2312
 69             string wallejson = BingClient.DownloadString(url);
 70 
 71             if (wallejson != "null")
 72             {
 73                 //解析Json数据
 74                 JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
 75                 Walle walleinfo = javaScriptSerializer.Deserialize<Walle>(wallejson);
 76 
 77                 //保存图片到本地
 78                 string ImagePath = DateTime.Now.ToString("yyyyMMdd") + ".JPG";
 79                 BingClient.DownloadFile(walleinfo.images.First().url, Server.MapPath("/Images/BingInfo/") + ImagePath);
 80 
 81                 //保存信息到Model -- BgImages
 82                 BgImages model = new BgImages();
 83                 model.Date = walleinfo.images.First().enddate;
 84                 model.Text = Text;
 85                 model.Title = Title;
 86                 model.STitle = STitle;
 87                 model.Url = "/Images/BingInfo/" + ImagePath;
 88 
 89                 string xmlPath = Server.MapPath("/Images/BingInfo/" + DateTime.Now.ToString("yyyyMMdd") + ".xml");
 90 
 91                 //序列化XML
 92                 CreateXML(model, xmlPath);
 93 
 94             }
 95 
 96         }
 97 
 98 
 99 
100 
101         #region   XML序列化
102         public void CreateXML(BgImages model, string Path)
103         {
104             FileStream fs = new FileStream(Path, FileMode.Create);
105             //执行XML序列化
106             XmlSerializer xml = new XmlSerializer(typeof(BgImages));
107             xml.Serialize(fs, model);
108             fs.Close();
109         }
110         #endregion
111         #endregion

View Code

 

    

季步:数据展示在首页

  因为网站首页的左手背景图是一个母版页,所以图片的示主要通过js来促成。

  在页面加载时,使用Ajax请求于后台获取数据,

  代码如下:

 $(document).ready(function () {



        //加载背景图片及文本信息
        $.post(
           "/Test/ReturnBgInfo",
           function (data) {


               $("#animate-area").css("background-image", "url(" + data.Url + ")");
               $("#Title").html(data.Title);
               $("#STitle").html(data.STitle);
               $("#Text").html(data.Text);

           });
})

  

 

网站地图xml地图