各大招聘網(wǎng)站信息實(shí)時(shí)查詢?yōu)g覽【二】

2019-11-14 15:44:29

字體：大中小

供稿：網(wǎng)友

前言

前面寫了《各大招聘網(wǎng)站信息實(shí)時(shí)查詢?yōu)g覽》，關(guān)注的朋友還真不少。各種意見的提，我也覺得意見挺好的，也就一一采納了。
有朋友說，希望能在手機(jī)端訪問。好，采納。有朋友說，選擇區(qū)域太少了。好，我加上。有朋友說，希望能在本頁面查看詳情。ok，我同意。
額，差不多就這些改動(dòng)了。

效果圖

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

pc:效果圖移動(dòng)端：效果圖

使用webapi提供數(shù)據(jù)

為什么要用webapi提供數(shù)據(jù)？

數(shù)據(jù)部分和顯示部分分離
可以各終端調(diào)用數(shù)據(jù)展示

因?yàn)槲疫@里請(qǐng)求的時(shí)候，是實(shí)時(shí)訪問的招聘網(wǎng)站，所以請(qǐng)求過程要耗費(fèi)一定的時(shí)間。但是，信息的更新并不頻繁。我們可以在webapi中使用緩存。

在guget命令行執(zhí)行 Install-Package Strathweb.CacheOutput.WebApi2OutputCache 。

示例代碼：

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

WebAPI 測(cè)試鏈接：http://hi.haojima.net/SwaggerUI/

響應(yīng)式

什么是響應(yīng)式? 請(qǐng)戳。

在做響應(yīng)式布局的時(shí)候，還是遇到了點(diǎn)小問題的。

如：

pc端的搜索條件所在的div 顯示效果：

在移動(dòng)端的顯示效果：

要求：pc端一行顯示，移動(dòng)端兩行顯示。且左右居中顯示。

問題就出在左右居中。首先，pc端的顯示。兩個(gè)div一行顯示，我們一般都是用樣式 float: left; ?？墒?，我發(fā)現(xiàn)float了以后不好居中了啊?？紤]這用個(gè)東西包起來，再居中。具有包裹性的：無非就是： float: left; display:table; position:absolute 。float排除，然后table的顯示方式好使。就像我們平時(shí)讓table居中那樣。 margin:0 auto;

測(cè)試代碼：

<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端搞定了，那移動(dòng)端直接去掉 float 再顯示就ok了。

(前端的東西，我也是知其然不知其所以然。什么居中、”坍塌“、clearfix等也不知道為什么要這么用。所以博文記錄下，方便下次自己翻閱。)

詳細(xì)信息顯示

雖然列表中超鏈接到詳情頁面。但是，如果我們可以直接在本頁面查看到詳情豈不是更加的方便。我們做的本來就是為了更加方便的瀏覽招聘信息。

說做就做。首先，我們的列表已經(jīng)有了超鏈接。我們?cè)邳c(diǎn)擊行的時(shí)候，發(fā)送請(qǐng)求到后臺(tái)。取得詳細(xì)信息，然后在頁面顯示。就這么簡(jiǎn)單。

后臺(tái)獲取詳細(xì)信息：

#region 根據(jù)url請(qǐng)求，返回詳細(xì)信息/// <summary>/// 根據(jù)url請(qǐng)求，返回詳細(xì)信息/// </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.智聯(lián)招聘:                    #region 問題：“gzip”不是受支持的編碼名 的處理方法  http://www.survivalescaperooms.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.獵聘網(wǎng):                    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.拉勾網(wǎng):                    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

前臺(tái)信息加載:

if ($(obj).next().hasClass("dataInfo"))    $(obj).next().toggle();//如果已有詳細(xì)信息，則只做顯示隱藏的切換else    $(obj).after("<div class='dataInfo'>正在加載...</div>");//否則提示“正在加載”$.Ajax({//發(fā)起請(qǐng)求    url: apiHref + "/api/HiJob?url=" + url,    data: null,    beforeSend: function (XHR) {    },    success: function (data) {        $(obj).next(".dataInfo").html(eval(data.data));//用內(nèi)容替換提示信息    },    dateType: "json"});

新增拉勾網(wǎng)的數(shù)據(jù)

我后期又加了“拉勾”網(wǎng)的招聘信息。其他的網(wǎng)站都是直接鏈接，取信息。而偏偏拉勾就是不同。它是，請(qǐng)求->頁面加載->ajax異步請(qǐng)求詳情->追加到頁面。然而，就因?yàn)檫@個(gè)異步，好幾個(gè)同學(xué)就搞不定了。問我，拉勾的數(shù)據(jù)為什么取不到。在這里就統(tǒng)一分析下吧。

請(qǐng)求如：http://www.lagou.com/jobs/list_.net?city=上海在瀏覽器F12監(jiān)控。

我們可以看到信息列表數(shù)據(jù)是從http://www.lagou.com/jobs/positionAjax.json?city=上海地址，通過ajax的post請(qǐng)求取得的。

所以，我們后臺(tái)模擬一個(gè)post請(qǐng)求就完事了。

StringContent fromurlcontent = new StringContent("first=true&pn=" + pn + "&kd=" + kd);fromurlcontent.Headers.ContentType = new MediaTypeHeaderValue("application/x-www-form-urlencoded");       fromurlcontent.Headers.Add("X-Requested-With", "xmlHttpRequest");                    HttpClient httpclient = new HttpClient();HttpResponseMessage responseMsg = httpclient.PostAsync(new Uri(url), fromurlcontent).Result;//發(fā)起post請(qǐng)求var result = responseMsg.Content.ReadAsStringAsync().Result;javaScriptSerializer _jsSerializer = new JavascriptSerializer();LagouInfo JPostData = _jsSerializer.Deserialize<LagouInfo>(result);

注意了，我們得到數(shù)據(jù)之后。還進(jìn)行的反序列化。因?yàn)閿?shù)據(jù)是json格式的。但，不是所有數(shù)據(jù)都是我們想要的。所以進(jìn)行序列化，然后只取我們想要的數(shù)據(jù)。（當(dāng)然，序列化類，是我對(duì)著json數(shù)據(jù)一個(gè)個(gè)摳出來，寫的類屬性）

序列化類：

public class LagouInfo    {        public string code;        public Ccontent content;        public string msg;        public string requestId;        public string resubmitToken;        public string success;    }public class Ccontent    {        public string currentPageNo;        public string hasNextPage;        public string haspreviousPage;        public string pageNo;        public string pageSize;        public List<Cresult> result;        public string start;        public string totalCount;        public string totalPageCount;    }public class Cresult    {        public string adWord;        public string adjustScore;        public string city;        public string companyId;        public List<string> companyLabelList;        public string companyLogo;        public string companyName;        public string companyShortName;        public string companySize;        public string countAdjusted;        public string createTime;        public string createTimeSort;        public string education;        public string financeStage;        public string formatCreateTime;        public string haveDeliver;        public string industryField;        public string jobNature;        public string leaderName;        public string orderBy;        public string positionAdvantage;        public string positionFirstType;        public string positionId;        public string positionName;        public string positionType;        public string positonTypesMap;        public string randomScore;        public string relScore;        public string salary;        public string score;        public string searchScore;        public string showOrder;        public string totalCount;        public string workYear;    }

View Code

然后，接著組裝自己想要的數(shù)據(jù)。

if (JPostData == null || JPostData.content == null || JPostData.content.result == null)    return;for (int i = 0; i < JPostData.content.result.Count; i++){    var item = JPostData.content.result[i];    string titleName, infourl, company, city, date, salary, salary_em, source;    titleName = item.positionName;    infourl = "http://www.lagou.com/jobs/" + item.positionId + ".html";    company = item.companyShortName;    city = item.city;    date = DateTime.Parse(item.createTime).ToString("yyyy-MM-dd");    salary = "月薪"; //item.SelectSingleNode(xpath + "/td[@class='gsmc']/a").InnerText;    salary_em = item.salary;    source = "拉勾網(wǎng)";    listJobInfo.Add(        new JobInfo(){                          city = city,                          company = company,                          date = date,                          info_url = infourl,                          salary = salary,                          salary_em = salary_em,                          titleName = titleName,                          source = source                      });}

增加選擇區(qū)域

剛開始的時(shí)候，只添加了幾個(gè)熱門的城市（也是因?yàn)橥祽?/span>）。然后，很多同學(xué)就開始不依了，為什么沒有“**”。大哥，能不能加上“**”。

既然大家有興趣，那我一次性都加上吧。

點(diǎn)擊更多：

說實(shí)在的，這個(gè)增加選擇區(qū)域沒有任何技術(shù)含量。純粹的一個(gè)體力活。

因?yàn)槊總€(gè)網(wǎng)站的地區(qū)對(duì)于的地區(qū)編碼都是不一樣的。所以，我就需要到各個(gè)網(wǎng)站一個(gè)個(gè)的摳。

如：

摳完后：（string[0]:智聯(lián)/拉勾 string[1]:前程 string[2]:獵聘）

dic_hi.Add("北京", new string[] { "北京", "010000", "010" });dic_hi.Add("上海", new string[] { "上海", "020000", "020" });dic_hi.Add("深圳", new string[] { "深圳", "040000", "050090" });dic_hi.Add("廣州", new string[] { "廣州", "030200", "050020" });dic_hi.Add("杭州", new string[] { "杭州", "080200", "070020" });dic_hi.Add("成都", new string[] { "成都", "090200", "280020" });dic_hi.Add("南京", new string[] { "南京", "070200", "060020" });dic_hi.Add("武漢", new string[] { "武漢", "180200", "170020" });dic_hi.Add("西安", new string[] { "西安", "200200", "270020" });dic_hi.Add("廈門", new string[] { "廈門", "110300", "090040" });dic_hi.Add("長(zhǎng)沙", new string[] { "長(zhǎng)沙", "190200", "180020" });dic_hi.Add("蘇州", new string[] { "蘇州", "070300", "060080" });dic_hi.Add("天津", new string[] { "天津", "050000", "030" });              dic_hi.Add("重慶", new string[] { "重慶", "060000", "040" });dic_hi.Add("鄭州", new string[] { "鄭州", "170200", "150020" });dic_hi.Add("青島", new string[] { "青島", "120300", "250070" });dic_hi.Add("合肥", new string[] { "合肥", "150200", "080020" });dic_hi.Add("福州", new string[] { "福州", "110200", "090020" });dic_hi.Add("濟(jì)南", new string[] { "濟(jì)南", "120200", "250020" });dic_hi.Add("大連", new string[] { "大連", "230300", "210040" });dic_hi.Add("珠海", new string[] { "珠海", "030500", "050140" });dic_hi.Add("無錫", new string[] { "無錫", "070400", "060100" });dic_hi.Add("佛山", new string[] { "佛山", "030600", "050050" });dic_hi.Add("東莞", new string[] { "東莞", "030800", "050040" });dic_hi.Add("寧波", new string[] { "寧波", "080300", "070030" });dic_hi.Add("常州", new string[] { "常州", "070500", "060040" });dic_hi.Add("沈陽", new string[] { "沈陽", "230200", "210020" });dic_hi.Add("石家莊", new string[] { "石家莊", "160200", "140020" });dic_hi.Add("昆明", new string[] { "昆明", "250200", "310020" });dic_hi.Add("南昌", new string[] { "南昌", "130200", "200020" });dic_hi.Add("南寧", new string[] { "南寧", "140200", "110020" });dic_hi.Add("哈爾濱", new string[] { "哈爾濱", "220200", "160020" });dic_hi.Add("海口", new string[] { "?？?/span>", "100200", "130020" });dic_hi.Add("中山", new string[] { "中山", "030700", "050130" });dic_hi.Add("惠州", new string[] { "惠州", "030300", "050060" });dic_hi.Add("貴陽", new string[] { "貴陽", "260200", "120020" });dic_hi.Add("長(zhǎng)春", new string[] { "長(zhǎng)春", "240200", "190020" });dic_hi.Add("太原", new string[] { "太原", "210200", "260020" });dic_hi.Add("嘉興", new string[] { "嘉興", "080700", "070090" });dic_hi.Add("泰安", new string[] { "泰安", "121100", "250090" });dic_hi.Add("昆山", new string[] { "昆山", "070600", "060050" });dic_hi.Add("煙臺(tái)", new string[] { "煙臺(tái)", "120400", "250120" });dic_hi.Add("蘭州", new string[] { "蘭州", "270200", "100020" });dic_hi.Add("泉州", new string[] { "泉州", "110400", "090030" });

View Code

總結(jié)

和之前那個(gè)版本顯示效果區(qū)別不大（頁面還是一樣的丑，代碼也還是一樣的丑），不過實(shí)現(xiàn)方式完全不一樣了。這陣子學(xué)習(xí)了MVC和WebAPI的點(diǎn)皮毛知識(shí)，也就再次折騰下。
演示地址源碼下載 ,如果您覺得有用，那就留給腳印吧。演示地址后期可能會(huì)變，這篇博文會(huì)維護(hù)最新鏈接。
轉(zhuǎn)眼一年又悄悄的過去了，我猜想大家又開始蠢蠢欲動(dòng)起來了。不過年后跳得應(yīng)該比較多。不過，個(gè)人覺得年后的競(jìng)爭(zhēng)壓力大得多。
哪位同仁如果有好的工作機(jī)會(huì)可以私聊我或使勁戳詳情。
工作地點(diǎn)：浦東新區(qū) 經(jīng)驗(yàn)：五年.net web開發(fā)經(jīng)驗(yàn)

如果您有更好的處理方式，希望不要吝嗇賜教。
本文鏈接：http://www.survivalescaperooms.com/zhaopei/p/4931518.html
歡迎上海“程序猿/媛”、"攻城獅"入群：【滬猿】229082941 入群須知