使用.Net core3.0 開發鬥圖小程序後端+鬥圖小程序 .Net Core下使用HtmlAgilityPack解析採集互聯網數據

爲啥要寫這麼一個小程序？

作爲互聯網的原住民。

90後程序員的我，從高中開始發QQ小表情。

 

到之後的熊貓頭，蘑菇頭。

 

 

可以說表情包陪伴我從學校到社會，從青少年到中年。。

多年來，混跡於各個qq羣，收集表情包多達三千多個，終於，在去年的某個工地跑路的時候，忘了帶走我的表情包。。。然後就再也找不到之前的經典表情了。。

雖然QQ裏面提成了鬥圖的功能，但是微信沒有提成QQ那種懟圖的功能。而且對我來說，QQ提供的表情都太高清了。。不如模糊的小標籤有靈魂。。。

於是決定自己做一個這樣的鬥圖小程序。自用，也給其他的朋友們提供方便。

---

 

 需要用到的技術棧

服務器端:

• 阿里雲ubuntu1804最低配的的ECS一臺
• MySQL8.0社區版數據庫
• .Net Core 3.0 
• Dapper
• HtmlAgilityPack
• Lucene+jieba.net
• 阿里雲對象存儲+阿里雲CDN

小程序端：

• 直接使用微信官方的那一套就行，客戶端沒啥複雜的，我使用的是uniapp開發的小程序。

 

選好技術類型後，就開始我們的鬥圖小程序開發過程

 

---

 

1.爬取圖片數據

百度搜搜表情包，會出現N個專門做表情包的網站。

我們使用HtmlAgilityPack來抓取圖片地址和alt描述文字。

具體可以參考我的另一篇博文 【.Net Core下使用HtmlAgilityPack解析採集互聯網數據】

爬取拿到圖片地址後，使用HttpClient來下載圖片，並上傳到對象存儲空間去，這裏可以自己選擇阿里雲或者七牛雲【不是廣告，因爲我最熟悉的就是阿里雲和七牛雲】

下載圖片代碼

var result = await new HttpClient().GetStreamAsync(imgUrl);

拿到流就可以直接下載了，然後上傳了。

上傳成功後，保存圖片地址和圖片的描述文字。

2.開發web服務器接口

在抓取完圖片存到數據庫後，我們手上已經有N多圖片了。

然後就開發搜索圖片的api。

第一步的時候，我們存儲了圖片地址和圖片描述文字。我們搜索的就是這個描述文字。把搜索結果對應的圖片列響應出去就好了。

假如你圖片採集到幾十萬張。你單純用like來搜索。一是慢的要死。二是搜索結果不盡人意。

有大佬估計會說直接上ElasticSearch或者Solr啊。。。

我的內心：服務器費用你給我出啊。我阿里雲1h1g的機器，跑得起那玩意兒就怪了。。

這裏我使用的是Lucene.Net 4.8+jieba.Net分詞插件。

使用方式非常簡單。把數據直接導入到Lucene就行了。【用Lucene的專業詞語說叫添加到索引】

 var AppLuceneVersion = LuceneVersion.LUCENE_48;
            var indexLocation = Path.Combine(System.IO.Directory.GetCurrentDirectory(), "Indexs");
 if (!System.IO.Directory.Exists(indexLocation))
            {
                System.IO.Directory.CreateDirectory(indexLocation);
            }
            var dir = FSDirectory.Open(indexLocation);
            //create an analyzer to process the text
            var analyzer = new JieBaAnalyzer(TokenizerMode.Search); //new StandardAnalyzer(AppLuceneVersion);
            //create an index writer
            var indexConfig = new IndexWriterConfig(AppLuceneVersion, analyzer);
using (var writer = new IndexWriter(dir, indexConfig))
            {
               //todo 加載數據過來var list = mysql.Query<BiaoQingSearchModel>(sql, new { time, now = nowTime }).ToList();
                for (int i = 0; i < list.Count(); i++)
                {
                    var item = list[i];
                    var doc = new Document();
                    doc.Add(new StringField("url", item.Url, Field.Store.YES));
                    doc.Add(new TextField("Imgexplain", item.Imgexplain, Field.Store.YES));
                    writer.AddDocument(doc);
                }
                writer.Flush(triggerMerge: false, applyAllDeletes: false);
                writer.Commit();
　　　　　　　}

然後創建好索引之後，就可以在Indexs下看到一堆文件了。

 

 

 大概就是如上圖所示的樣子。

然後就是搜索表情包的數據，數據搜索的時候，我們只搜索Lucene裏面的圖片描述列。

  var AppLuceneVersion = LuceneVersion.LUCENE_48;
            var indexLocation = Path.Combine(System.IO.Directory.GetCurrentDirectory(), "Indexs");
            if (!System.IO.Directory.Exists(indexLocation))
            {
                System.IO.Directory.CreateDirectory(indexLocation);
            }
            var dir = FSDirectory.Open(indexLocation);
            var analyzer = new JieBaAnalyzer(TokenizerMode.Search);

            QueryParser qp = new QueryParser(AppLuceneVersion, "Imgexplain", analyzer);
            Query query = qp.Parse(key);
            BooleanQuery b = new BooleanQuery();
            b.Add(query, Occur.MUST);

            using (IndexReader reader = DirectoryReader.Open(dir))
            {
                var searcher = new IndexSearcher(reader);
                TopDocs hits = searcher.Search(query, Size);
                Console.WriteLine("一共:" + hits.TotalHits);
                Count = hits.TotalHits;
                var list = new List<BiaoQingSearchModel>();
                foreach (var hit in hits.ScoreDocs)
                {
                    var foundDoc = searcher.Doc(hit.Doc);
                    var model = new BiaoQingSearchModel();
                    model.Url = foundDoc.Get("url");
                    model.Imgexplain = foundDoc.Get("Imgexplain");
                    list.Add(model);
                }
                return list;
            }

 

然後就能正確的搜索出我們需要的表情包了。

做好這一堆事情，基本上我們的服務器端開發工作完成了80%。

然後就是用asp.net core寫一個簡單的api然後調用Lucene的搜索方法，就完成了。

服務器部署工作

我使用的是Ubuntu1804，也推薦大家使用Ubuntu server。ubuntu比centos好用幾條街。。有人說centos穩定，同樣是Linux，爲啥ubuntu server就不穩定了？

1. 在ubuntu服務器上使用apt命令安裝好nginx，mysql，Supervisor三個軟件

遷移本地採集的數據到ubuntu上的數據庫。【遷移數據可以直接使用mysqldump出sql，然後到服務器上執行就行了】

2.申請域名和SSL證書，因爲微信小程序要求必須https。【阿里雲可以一條龍服務】

3.在nginx中綁定域名和https證書

server {
        listen 443 ssl;
        server_name 你的域名
        ssl on;
        ssl_certificate /var/ssl/xxx.pem;
        ssl_certificate_key /var/ssl/xxx.key;
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers on;

        location / {
                proxy_pass http://localhost:5000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection keep-alive;
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
                }
        }

4.使用Supervisor以守護進程的模式啓用.net core開發的webapi站點。

[program:doutuapp]
command=dotnet xxx.dll
directory=/var/www/
user=root
autostart=true
autorestart=true
startsecs=1
stderr_logfile=/usr/log/doutu/err.log
stdout_logfile=/usr/log/doutu/out.log

5.啓動站點服務

　　啓用supervisor，使用supervisorctl reload 然後supervisorctl status查看守護進程狀態

 

　　然後啓動nginx，正常情況下，就可以通過你綁定的域名訪問到你的webapi了。

6.性能優化建議【不是必須】

　　因爲我們窮，買不起高配的服務器。所以只能通過做更多的功課來加速訪問，提高我們的小水管服務器的性能。

　　把圖片上傳到oss去，保證我們的webapi只響應webapi的文本數據，這樣1m的小水管，撐住20個人同時訪問，壓力還是不大的。

　　使用cdn加速訪問。cdn是內容分發網絡的簡稱。簡單的理解就是用戶訪問距離他最近的節點就能獲取到數據。舉個栗子：你服務器在上海，你用戶在新疆，如果你用戶通過網線來找你的服務器上的圖片，

　　如果不是直連的話，需要經過n個路由器和交換雞。中間可能會找不到你的服務器，然後也許你就丟失了一個用戶了！cdn就是幫我們分發圖片到全國各大節點。然後無死角讓你提升用戶體驗。

　　開啓nginx的gzip，壓縮你的數據包。之前10k一個數據包，壓縮後2k，你服務器的併發性能瞬間提高几個檔次【當然壓縮需要消耗cpu，cpu不行就算求了】

---

以上內容雖然只是短短一篇文章，但是實際上消耗了我近兩週的業餘時間【還不算上備案域名的時間】，因爲中間關於全文檢索的知識點我也不太瞭解，踩了很多坑才爬上岸。

如果有大佬需要交流，或者想自己不想這麼麻煩，想用現成的接口，也可以找我要api接口。聯繫方式：QQ羣：545594312，也可以點擊下邊的鏈接進羣。

接下來就是廣告時間了！！！！，歡迎微信掃碼體驗！！！【轉載請不要去掉我的廣告，謝謝大佬們】