各大招聘网站信息实时查询浏览【二】

前面写了《各大招聘网站信息实时查询浏览》，关注的朋友还真不少。各种意见的提，我也觉得意见挺好的，也就一一采纳了。

有朋友说，希望能在手机端访问。好，采纳。有朋友说，选择区域太少了。好，我加上。有朋友说，希望能在本页面查看详情。ok，我同意。

额，差不多就这些改动了。

效果图

不想往下看的可以直接：演示地址源码下载

pc:效果图移动端：效果图

各大招聘网站信息实时查询浏览【二】

使用webapi提供数据

为什么要用webapi提供数据？

数据部分和显示部分分离
可以各终端调用数据展示

因为我这里请求的时候，是实时访问的招聘网站，所以请求过程要耗费一定的时间。但是，信息的更新并不频繁。我们可以在webapi中使用缓存。

在guget命令行执行 Install-Package Strathweb.CacheOutput.WebApi2OutputCache 。

示例代码：

[CacheOutput(ClientTimeSpan = 60, ServerTimeSpan = 60)]
public IEnumerable<string> Get()
{
     return new string[] { "str1", "str2" };
}

WebAPI 测试链接：http://hi.haojima.net/SwaggerUI/

响应式

什么是响应式? 请戳。

在做响应式布局的时候，还是遇到了点小问题的。

如：

pc端的搜索条件所在的div 显示效果：

各大招聘网站信息实时查询浏览【二】

在移动端的显示效果：

各大招聘网站信息实时查询浏览【二】

要求：pc端一行显示，移动端两行显示。且左右居中显示。

问题就出在左右居中。首先，pc端的显示。两个div一行显示，我们一般都是用样式 float: left; 。可是，我发现float了以后不好居中了啊。考虑这用个东西包起来，再居中。具有包裹性的：无非就是： float: left; display:table; position:absolute 。float排除，然后table的显示方式好使。就像我们平时让table居中那样。 margin:0 auto;

测试代码：

<style type="text/css">
        .clearfix {
            overflow: auto;
            _height: 1%;
        }
</style>
<div class="clearfix" style="display:table;margin:0 auto; border: 1px dashed #ff0000">
    <div style="float: left; border: 1px solid #ff0000">div1</div>
    <div style="float: left; border: 1px solid #ff0000; ">div2</div>
</div>

注意：clearfix 用来防止使用了 float 而引起的”坍塌“效果。

pc端搞定了，那移动端直接去掉 float 再显示就ok了。

(前端的东西，我也是知其然不知其所以然。什么居中、”坍塌“、clearfix等也不知道为什么要这么用。所以博文记录下，方便下次自己翻阅。)

详细信息显示

虽然列表中超链接到详情页面。但是，如果我们可以直接在本页面查看到详情岂不是更加的方便。我们做的本来就是为了更加方便的浏览招聘信息。

说做就做。首先，我们的列表已经有了超链接。我们在点击行的时候，发送请求到后台。取得详细信息，然后在页面显示。就这么简单。

后台获取详细信息：

#region 根据url请求，返回详细信息
/// <summary>
/// 根据url请求，返回详细信息
/// </summary>
/// <param name="url"></param>
/// <param name="type"></param>
/// <returns></returns>
public string GetUrlInfo(string url, DataType type)
        {
            var ulS = string.Empty;
            switch (type)
            {
                case DataType.智联招聘:
                    #region 问题：“gzip”不是受支持的编码名 的处理方法  http://www.cnblogs.com/soundcode/p/3785152.html
                    HtmlAgilityPack.HtmlWeb.PreRequestHandler handler = delegate(HttpWebRequest request)
                               {
                                   request.Headers[HttpRequestHeader.AcceptEncoding] = "gzip, deflate";
                                   request.AutomaticDecompression = DecompressionMethods.Deflate | DecompressionMethods.GZip;
                                   request.CookieContainer = new System.Net.CookieContainer();
                                   return true;
                               };
                    htmlWeb.PreRequest += handler;
                    #endregion
                    htmlWeb.OverrideEncoding = Encoding.GetEncoding("UTF-8");
                    HtmlAgilityPack.HtmlDocument response = htmlWeb.Load(url);

                    var fuli = response.DocumentNode.SelectNodes("/html/body/div[3]/div[1]/div[1]/div");
                    var jiben = response.DocumentNode.SelectNodes("/html/body/div[4]/div[1]/ul");
                    var miaoshu = response.DocumentNode.SelectNodes("/html/body/div[4]/div[1]/div[1]/div/div[1]");

                    if (fuli != null && fuli.Count >= 1 && !string.IsNullOrEmpty(fuli[0].InnerText.Trim()))
                        ulS += "<h3>福利诱惑:</h3>" + fuli[0].InnerText;
                    if (jiben != null && jiben.Count >= 1 && !string.IsNullOrEmpty(jiben[0].InnerText.Trim()))
                        ulS += "<h3>基本信息:</h3>" + jiben[0].InnerText;
                    if (miaoshu != null && miaoshu.Count >= 1 && !string.IsNullOrEmpty(miaoshu[0].InnerText.Trim()))
                        ulS += "<h3>职位描述:</h3>" + miaoshu[0].InnerText;
                    break;
                case DataType.猎聘网:
                    htmlWeb.OverrideEncoding = Encoding.GetEncoding("UTF-8");
                    response = htmlWeb.Load(url);
                    //--基本信息
                    var jbinfo = response.DocumentNode.SelectNodes("//*[@id='job-view-enterprise']/div[1]/div[1]/div[1]/div[3]/div") ??
                          response.DocumentNode.SelectNodes("//*[@id='job-hunter']/div[1]/div[1]/div[1]/div[3]/div");
                    //职位描述
                    var selectNodes = response.DocumentNode.SelectNodes("//*[@id='job-hunter']/div[1]/div[1]/div[1]/div[4]")
                        ?? response.DocumentNode.SelectNodes("//*[@id='job-view-enterprise']/div[1]/div[1]/div[1]/div[4]");
                    //岗位要求                    
                    var ganwei = response.DocumentNode.SelectNodes("//*[@id='job-hunter']/div[1]/div[1]/div[1]/div[5]/div")
                      ?? response.DocumentNode.SelectNodes("//*[@id='job-view-enterprise']/div[1]/div[1]/div[1]/div[5]/div");
                    ulS = "<h3>基本信息:</h3>" + jbinfo[0].InnerText +
                          "<h3>职位描述:</h3>" + selectNodes[0].InnerText +
                          "<h3>岗位要求:</h3>" + ganwei[0].InnerText;
                    break;
                case DataType.前程无忧:
                    htmlWeb.OverrideEncoding = Encoding.GetEncoding("GBK");
                    response = htmlWeb.Load(url);
                    //--
                    ulS = "<h3>基本信息:</h3>" + response.DocumentNode.SelectNodes("/html/body/div[3]/div/div[2]/table[1]/tr[3]/td[1]")[0].InnerText +
                          "<h3>职位描述:</h3>" + response.DocumentNode.SelectNodes("/html/body/div[3]/div/div[2]/div[1]/div[2]/div/table")[0].InnerText;

                    break;
                case DataType.拉勾网:
                    htmlWeb.OverrideEncoding = Encoding.GetEncoding("UTF-8");
                    response = htmlWeb.Load(url);
                    ulS = "<h3>基本信息:</h3>" + response.DocumentNode.SelectNodes("//*[@id='container']/div[1]/div[1]/dl/dd[1]")[0].InnerText +
                          "<h3>职位描述:</h3>" + response.DocumentNode.SelectNodes("//*[@id='container']/div[1]/div[1]/dl/dd[2]")[0].InnerText;
                    break;
            }

            return ulS.ToJson();
        }
#endregion

View Code