整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
了讓初學(xué)者更容易理解，本文寫(xiě)的比較詳細(xì)，所以如果你已是技術(shù)大拿，請(qǐng)直接繞過(guò)，以免浪費(fèi)你的寶貴時(shí)間，謝謝。
相信現(xiàn)在很多網(wǎng)站都有文章功能，有文章就基本上少不了要有個(gè)列表頁(yè)，網(wǎng)頁(yè)設(shè)計(jì)師們對(duì)文章列表頁(yè)的設(shè)計(jì)也是五花八門(mén)，各有各的創(chuàng)意，那我們就拿ThinkPHP旗下的極思維平臺(tái)的列表頁(yè)來(lái)說(shuō)，極思維的目前的列表頁(yè)是這樣的：
大家可以看到，它的布局是塊形式展現(xiàn)，每篇文章都是固定的布局，圖片，標(biāo)題，簡(jiǎn)介，如果說(shuō)每篇文章在發(fā)布的時(shí)候都要單獨(dú)的寫(xiě)個(gè)簡(jiǎn)介，單獨(dú)上傳個(gè)封面圖，對(duì)編輯者來(lái)說(shuō)就有些麻煩了，那我們就可以通過(guò)程序讓它自動(dòng)去抓取封面和簡(jiǎn)介，自動(dòng)抓取縮略圖我在之前的文章有講過(guò)，大家可以去找下我之前的《ThinkPHP之自動(dòng)獲取文章內(nèi)容中的第一張圖片做為縮略圖》這篇文章，今天我們主要講如何自動(dòng)抓取文章的部分內(nèi)容作為文章的簡(jiǎn)介。
我們先來(lái)分析一下功能的實(shí)現(xiàn)原理，所謂簡(jiǎn)介，就是簡(jiǎn)單的說(shuō)明一下這篇文章的主要內(nèi)容，不涉及到排版，所以我們只需要純文字，那么問(wèn)題來(lái)了，之前我們?cè)谧ト】s略圖的文章中我們也有說(shuō)到，文章內(nèi)容是由編輯器進(jìn)行排版的，既然有排版樣式，就必定要有HTML樣式，只要保留文字就得把所有的HTML標(biāo)簽都去掉，那怎么去掉呢？
不用急，PHP有個(gè)專(zhuān)門(mén)去掉HTML的函數(shù)，這個(gè)函數(shù)就是 strip_tags ，我們先來(lái)看一下這個(gè)函數(shù)是什么樣的：
在以上代碼中可以看到，內(nèi)容中有個(gè) <b> 標(biāo)簽，<b> 標(biāo)簽的作用就是字體加粗，我們運(yùn)行一下實(shí)例看下：
可以很明顯的看到使用了 strip_tags 函數(shù)和沒(méi)使用 strip_tags 函數(shù)的區(qū)別，那是不是直接在ThinkPHP中用這個(gè)函數(shù)就夠了呢，寫(xiě)過(guò)文章的人都知道，文章會(huì)涉及到換行、空格等格式，strip_tags 函數(shù)只能去掉HTML標(biāo)簽，并不能去掉換行、空格等格式，那么怎么樣才能去掉換行和空格呢，別擔(dān)心，強(qiáng)大的PHP也有函數(shù)來(lái)處理這些東西的，PHP中有個(gè)正則替換函數(shù)叫做 ereg_replace ，這個(gè)函數(shù)可以把指定的字符換成我們想要的字符，那么我們的邏輯代碼就可以這樣寫(xiě)：
從上面的邏輯代碼中，我們可以看到替換換行符中處理了三次替換，這是為什么呢，因?yàn)楝F(xiàn)在服務(wù)器系統(tǒng)有很多種，最常用的就有windows、linux兩種系統(tǒng)，這兩種系統(tǒng)的換行符是不同的，所以為了兼容不同的服務(wù)器，我們就多替換幾次，其中 \r\n 是替換 linux 和 unix 系統(tǒng)的換行符，\n 是替換 windows 系統(tǒng)的換行符，\r 是替換蘋(píng)果系統(tǒng)的換行符的。
處理好了HTML之后，接下來(lái)我們就要截取內(nèi)容了，因?yàn)槲恼伦謹(jǐn)?shù)有多有少，既然是簡(jiǎn)介，那我們肯定就只要截取一小段文字了，比如只要50個(gè)字或者100個(gè)字這樣，因?yàn)榫幊袒径际怯糜⑽木帉?xiě)的，對(duì)中文的識(shí)別較差，所以在編程計(jì)算長(zhǎng)度時(shí)，一個(gè)中文漢字是算兩個(gè)字符的，所以如果我們要截取50個(gè)中文的話(huà)，截取長(zhǎng)度就是乘以二，那就是100了，其實(shí)這都不算什么問(wèn)題，但是在實(shí)際過(guò)程中，按這樣的方式去截取的話(huà)，遇到文章包含中英文的時(shí)候就可能會(huì)出現(xiàn)亂碼的情況，為了避免出現(xiàn)亂碼，我們可以用一個(gè)非PHP核心函數(shù) mb_strlen 來(lái)解決，為什么說(shuō) mb_strlen 是非PHP核心函數(shù)呢，因?yàn)樵谑褂?mb_strlen 函數(shù)前需要確保在 php.ini 中有加載 php_mbstring.dll，要不然就會(huì)出現(xiàn) 未定義函數(shù) 的問(wèn)題，那我們就來(lái)把上面的代碼改進(jìn)一下，加上截取字?jǐn)?shù)的功能，得到代碼如下：
然后，我們以ThinkPHP3.2為例，把上面的自定義函數(shù)方法添加到ThinkPHP框架中核心公共函數(shù)目錄（Common）里的 functions.php 文件的最后面即可。
調(diào)用方法為：{$vo.content|cutstr_html=###,100}
上面調(diào)用方法中的 ### 是表示文章內(nèi)容，100為要截取的字?jǐn)?shù)長(zhǎng)度。
謝謝你的閱讀，如果你有更好的方法或在應(yīng)用過(guò)程中遇到問(wèn)題可以在評(píng)論區(qū)提問(wèn)或者直接私信我，我會(huì)定期回復(fù)，碼農(nóng)劉小橋與你一起學(xué)習(xí)，共同進(jìn)步。
今 Vue 的熱度不斷攀升，使用者越來(lái)越多，Vue.js 工具也隨處可見(jiàn)。這種現(xiàn)象不是憑空產(chǎn)生的：Vue 的學(xué)習(xí)曲線(xiàn)友好，功能驅(qū)動(dòng)的結(jié)構(gòu)清晰易懂，文檔出色易學(xué)，所以新人入門(mén)很容易，經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員也可以快速?gòu)钠渌蚣埽ㄈ?React 或 Angular）切換過(guò)來(lái)。
只要你認(rèn)真對(duì)待 Vue 的開(kāi)發(fā)工作，逐漸就會(huì)發(fā)現(xiàn)很多優(yōu)秀的基礎(chǔ)工具和庫(kù)。這些工具將點(diǎn)亮你的 Vue 開(kāi)發(fā)職業(yè)生涯，讓你渾身上下散發(fā)專(zhuān)業(yè)氣息。
本文總結(jié)了一些最值得關(guān)注的工具和庫(kù)，相信你遲早會(huì)用在自己的 Vue.js 項(xiàng)目中。同類(lèi)文章經(jīng)常只會(huì)列舉一些 UI 組件庫(kù)，而本文涉及的范圍更廣，探討了 Vue 生態(tài)系統(tǒng)中的一系列工具、庫(kù)和插件。
我的選擇是基于實(shí)用性、有效性和獨(dú)特性等原則——而不是它們的 GitHub 受歡迎程度或星級(jí)評(píng)分。
閑話(huà)不提，我們先來(lái)看 Top10。
似乎現(xiàn)在每款 JavaScript 應(yīng)用程序框架都必須使用某種 CLI 工具，Vue 也不例外。Vue CLI 是針對(duì)快節(jié)奏 Vue 開(kāi)發(fā)打造的一套功能齊全的工具。除了常見(jiàn)的項(xiàng)目骨架之外，它還有方便的即時(shí)原型制作功能，你無(wú)需創(chuàng)建完整項(xiàng)目就可以嘗試新的創(chuàng)意。
Vue CLI 直接支持各種主流 Web 開(kāi)發(fā)工具和技術(shù)，如 Ba??bel、TypeScript、ESLint、PostCSS、PWA、Jest、Mocha、Cypress 和 Nightwatch 等。這主要?dú)w功于它的可擴(kuò)展插件系統(tǒng)。這意味著社區(qū)可以構(gòu)建和共享可復(fù)用的插件以滿(mǎn)足常見(jiàn)需求。
Vue CLI 強(qiáng)大的 GUI（Vue UI，它隨 CLI 一起提供）則為其錦上添花。在其幫助下你可以輕松創(chuàng)建并直接配置和管理項(xiàng)目。
?VueCLI（ https://cli.vuejs.org/ ）
VuePress 是 Vue 生態(tài)系統(tǒng)中的另一大重頭戲。它是一個(gè)基于 Vue 的靜態(tài)站點(diǎn)生成器，最初是用來(lái)編寫(xiě)技術(shù)文檔的工具，現(xiàn)在則發(fā)展成為一個(gè)小巧、緊湊、功能強(qiáng)大的無(wú)頭 CMS。從版本 1.x 開(kāi)始，它提供了出色的博客功能和強(qiáng)大的插件系統(tǒng)。它有一個(gè)默認(rèn)主題（適用于技術(shù)文檔），但你也可以構(gòu)建自定義主題或使用社區(qū)中的預(yù)制主題。
在 VuePress 中，你使用 Markdown 編寫(xiě)內(nèi)容，然后將其轉(zhuǎn)換為預(yù)渲染的靜態(tài) HTML 文件。這些文件加載完畢后，你的站點(diǎn)就成為了由 Vue、Vue Router 和 Webpack 支持的單頁(yè)應(yīng)用程序。
VuePress 的一大好處就是你可以在 Markdown 文件中包含 Vue 代碼或組件，帶來(lái)了強(qiáng)大的功能和靈活性。你可以像開(kāi)發(fā)普通的 Vue 應(yīng)用程序一樣開(kāi)發(fā)你的網(wǎng)站，并充分利用 Vue 應(yīng)用的種種優(yōu)勢(shì)。
?VuePress（ https://v1.vuepress.vuejs.org/ ）
Gridsome 與 VuePress 有許多相似之處，但前者在處理數(shù)據(jù)源時(shí)采用了另一種非常強(qiáng)大的方法。你可以用它在應(yīng)用程序中連接和使用許多不同類(lèi)型的數(shù)據(jù)，然后將這些數(shù)據(jù)統(tǒng)一到一個(gè) GraphQL 層中。基本上來(lái)說(shuō)，Gridsome 用 Vue 提供前端功能，并使用 GraphQL 管理數(shù)據(jù)。其工作機(jī)制可總結(jié)為以下三個(gè)步驟：
Gridsome 提供了一些開(kāi)箱即用的最佳實(shí)踐，如代碼分割、資產(chǎn)優(yōu)化、漸進(jìn)式圖像和鏈接預(yù)取等。所以 Gridsome 用起來(lái)很快，而且對(duì) PWA 支持完善，對(duì) SEO 也很友好。
?Gridsome（ https://gridsome.org/ ）
開(kāi)發(fā)人員構(gòu)建 Web 應(yīng)用程序時(shí)面對(duì)的一大問(wèn)題就是狀態(tài)管理。為了解決這個(gè)問(wèn)題，Vue 提供了一個(gè)狀態(tài)管理系統(tǒng)——Vuex。它負(fù)責(zé)集中存儲(chǔ)應(yīng)用程序中的所有組件，確保狀態(tài)只能以可預(yù)測(cè)的方式變化。一個(gè)存儲(chǔ)區(qū)是一個(gè)特殊的對(duì)象，分為四個(gè)部分：
存儲(chǔ)區(qū)也可以分割為多個(gè)模塊以提高可維護(hù)性。
?Vuex（ https://vuex.vuejs.org/ ）
Nuxt 是常用的服務(wù)端渲染（SSR）方法。這個(gè)框架簡(jiǎn)潔而直觀，可用來(lái)構(gòu)建各種應(yīng)用程序。它也是模塊化的，因此你可以只使用應(yīng)用程序所需的那些模塊。
你可以使用 Nuxt 創(chuàng)建服務(wù)端渲染的應(yīng)用程序（SSR）、單頁(yè)面應(yīng)用程序（SPA）、漸進(jìn)式 Web 應(yīng)用（PWA），或者只用作作靜態(tài)站點(diǎn)生成器。
簡(jiǎn)而言之，Nuxt 簡(jiǎn)化了構(gòu)建和優(yōu)化應(yīng)用程序的流程，為你提供簡(jiǎn)潔而愉快的開(kāi)發(fā)體驗(yàn)。
?Nuxt（ https://nuxtjs.org/ ）
Vuetify 是最好用的 UI 組件庫(kù)之一。它提供了大量基于 Material Design 規(guī)范精心制作的組件（80+），足以滿(mǎn)足任何應(yīng)用程序的需求。
你可以用它來(lái)構(gòu)建 SSR 應(yīng)用程序、SPA、PWA 和移動(dòng)應(yīng)用。你可以創(chuàng)建新應(yīng)用或?qū)⑺鼈兲砑拥浆F(xiàn)有應(yīng)用中。它有免費(fèi)和付費(fèi)版主題可選，你也可以構(gòu)建自己的主題。它還提供了一個(gè)系統(tǒng)，讓你可以只選出要用的組件，從而大大減少應(yīng)用程序的最終大小。
所有 Vuetify 組件都附帶完善的文檔，并提供了清楚的示例。
?Vuetify（ https://vuetifyjs.com/en/ ）
Quasar 是 Java“一次編寫(xiě)，隨處運(yùn)行”哲學(xué)的 JavaScript 版本。它是一個(gè)通用的，基于 Vue 的框架，讓你可以使用相同的代碼庫(kù)為不同的平臺(tái)編寫(xiě)應(yīng)用程序。SPA、PWA、SSR 應(yīng)用、混合移動(dòng)應(yīng)用或多平臺(tái)桌面應(yīng)用，任君選擇！
它帶有出色的文檔和大批兼顧性能和響應(yīng)性的組件。Quasar 自帶許多最佳實(shí)踐（HTML/CSS/JS 壓縮、緩存清除、tree-shaking、源映射、代碼分割與懶加載、ES6 轉(zhuǎn)換、代碼 linting、可訪問(wèn)性等），因此你可以專(zhuān)注于應(yīng)用程序的功能實(shí)現(xiàn)。它還提供了一個(gè)用來(lái)輕松搭建新項(xiàng)目的 CLI 工具。
?Quasar（ https://quasar.dev/ ）
Vue 是一個(gè)主要基于組件的框架，因此編寫(xiě)優(yōu)秀、高效的組件對(duì)所有開(kāi)發(fā)人員來(lái)說(shuō)都很重要，而 Storybook 可能就是非常趁手的工具。你可以用它在易用并隔離的環(huán)境中開(kāi)發(fā)、管理和測(cè)試 UI 組件。它使開(kāi)發(fā)人員能夠獨(dú)立于主應(yīng)用程序創(chuàng)建組件，并在隔離的開(kāi)發(fā)環(huán)境中以交互方式展示它們，而無(wú)需擔(dān)心特定于應(yīng)用程序的依賴(lài)關(guān)系和需求。
Storybook 提供了大量的附加組件和靈活的 API，可根據(jù)需要自定義你的 storybook。你還可以導(dǎo)出為靜態(tài) Web 應(yīng)用程序，并將項(xiàng)目部署到 HTTP 服務(wù)器上。
?Storybook（ https://storybook.js.org/ ）
最近有很多關(guān)于 GraphQL 的討論。如果你很熟悉它，希望將其集成到 Vue 中，那么可以試試 Vue Apollo。這個(gè)庫(kù)是連接 Vue 和 GraphQL/Apollo 的一座橋梁，用起來(lái)順暢愉快。
?VueApollo（ https://vue-apollo.netlify.com/ ）
Eagle.js 是一個(gè)使用 Vue 構(gòu)建的功能強(qiáng)大、靈活且獨(dú)特的幻燈片系統(tǒng)。你可以在演示中創(chuàng)建易復(fù)用的組件、幻燈片和樣式。它還支持動(dòng)畫(huà)、主題和交互式小部件，非常適合制作網(wǎng)絡(luò)演示內(nèi)容。Eagle.js 有一個(gè)簡(jiǎn)單且可調(diào)整的 API，因此你可以自由地制作所需的幻燈片。
這個(gè)庫(kù)最方便的一項(xiàng)功能之一是將一張幻燈片放在單獨(dú)的一個(gè)文件中，然后就能在其他幻燈片中重復(fù)使用了。你還可以將特定演示文檔中的幻燈片導(dǎo)入另一個(gè)文檔里。在這樣強(qiáng)大的工具幫助下，你就可以制作復(fù)雜、可交互且吸引人的演示文稿。
?Eagle.js（ https://github.com/zulko/eagle.js/ ）
另外 5 款值得關(guān)注的 Vue 工具和庫(kù)
現(xiàn)在有了這么多工具，你就可以構(gòu)建一些精彩的項(xiàng)目了：網(wǎng)站、應(yīng)用程序、庫(kù)、插件……能做的事情還不止這些。去做出一些優(yōu)秀的作品吧！
我個(gè)人的知識(shí)見(jiàn)聞自然是有限的，我可能會(huì)漏掉一些優(yōu)秀的工具和庫(kù)，所以還有哪些出色的產(chǎn)品就請(qǐng)?jiān)谠u(píng)論里推薦吧。
英文原文： https://www.sitepoint.com/vue-js-tools-libraries/
過(guò)上一章的內(nèi)容，現(xiàn)在網(wǎng)頁(yè)文件中，我們還須要去除的就是html代碼了。
下面我們要研究一下html代碼的主要特點(diǎn)，不管什么樣的HTML代碼，他們均被左右尖括號(hào)所包圍，就像這個(gè)樣子<代碼>，因此，我們就有了去除的方法，把括號(hào)中的內(nèi)容和聯(lián)通括號(hào)一起去除掉，就可以了。
下面開(kāi)始，根據(jù)我們的想法，可以寫(xiě)出，下面這樣的主程序
看上圖，再上一張定義的函數(shù)，我們把它移動(dòng)到了通用函數(shù)庫(kù)中
第21行，這是我們新增的代碼，執(zhí)行完這個(gè)代碼，就去除掉了HTML標(biāo)記，剩下的就應(yīng)該是純文字內(nèi)容了。在這里，我們定義了一個(gè)函數(shù)，名字叫做去除html代碼。
下面我們研究一下，這個(gè)函數(shù)的內(nèi)容，如下圖
因?yàn)槭褂昧苏齽t表達(dá)式，因此，在程序運(yùn)行前，必須導(dǎo)入模塊re
第3行，導(dǎo)入我們所需要的re模塊，我們想用到正則表達(dá)式
第5行，定義函數(shù)
第6行，用右尖括號(hào)分格隔成列表
第8行，對(duì)列表元素進(jìn)行遍歷
第9行，使用正則挑出有效的內(nèi)容，其實(shí)就是去除以前孤立的右尖括號(hào)的內(nèi)容。
第10行，對(duì)有效的內(nèi)容進(jìn)行左尖括號(hào)分隔
第11行，左尖括號(hào)前面的內(nèi)容就是有效的文字內(nèi)容
完整的程序如下
下面我們對(duì)程序進(jìn)行下測(cè)試，在上一章中，程序運(yùn)行后得到如下的內(nèi)容（內(nèi)容太長(zhǎng)，只截取一小部分）
本次程序改造后，運(yùn)行得到下面的內(nèi)容
從上面兩個(gè)圖片可以看出，我們確實(shí)把文字內(nèi)容提取出來(lái)了。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
