整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

ThinkPHP之去掉文章中的所有HTML标签并截取部分内容作为简介

了让初学者更容易理解,本文写的比较详细,所以如果你已是技术大拿,请直接绕过,以免浪费你的宝贵时间,谢谢。

相信现在很多网站都有文章功能,有文章就基本上少不了要有个列表页,网页设计师们对文章列表页的设计也是五花八门,各有各的创意,那我们就拿ThinkPHP旗下的极思维平台的列表页来说,极思维的目前的列表页是这样的:

大家可以看到,它的布局是块形式展现,每篇文章都是固定的布局,图片,标题,简介,如果说每篇文章在发布的时候都要单独的写个简介,单独上传个封面图,对编辑者来说就有些麻烦了,那我们就可以通过程序让它自动去抓取封面和简介,自动抓取缩略图我在之前的文章有讲过,大家可以去找下我之前的《ThinkPHP之自动获取文章内容中的第一张图片做为缩略图》这篇文章,今天我们主要讲如何自动抓取文章的部分内容作为文章的简介。

我们先来分析一下功能的实现原理,所谓简介,就是简单的说明一下这篇文章的主要内容,不涉及到排版,所以我们只需要纯文字,那么问题来了,之前我们在抓取缩略图的文章中我们也有说到,文章内容是由编辑器进行排版的,既然有排版样式,就必定要有HTML样式,只要保留文字就得把所有的HTML标签都去掉,那怎么去掉呢?

不用急,PHP有个专门去掉HTML的函数,这个函数就是 strip_tags ,我们先来看一下这个函数是什么样的:

在以上代码中可以看到,内容中有个 <b> 标签,<b> 标签的作用就是字体加粗,我们运行一下实例看下:

可以很明显的看到使用了 strip_tags 函数和没使用 strip_tags 函数的区别,那是不是直接在ThinkPHP中用这个函数就够了呢,写过文章的人都知道,文章会涉及到换行、空格等格式,strip_tags 函数只能去掉HTML标签,并不能去掉换行、空格等格式,那么怎么样才能去掉换行和空格呢,别担心,强大的PHP也有函数来处理这些东西的,PHP中有个正则替换函数叫做 ereg_replace ,这个函数可以把指定的字符换成我们想要的字符,那么我们的逻辑代码就可以这样写:

从上面的逻辑代码中,我们可以看到替换换行符中处理了三次替换,这是为什么呢,因为现在服务器系统有很多种,最常用的就有windows、linux两种系统,这两种系统的换行符是不同的,所以为了兼容不同的服务器,我们就多替换几次,其中 \r\n 是替换 linux 和 unix 系统的换行符,\n 是替换 windows 系统的换行符,\r 是替换苹果系统的换行符的。

处理好了HTML之后,接下来我们就要截取内容了,因为文章字数有多有少,既然是简介,那我们肯定就只要截取一小段文字了,比如只要50个字或者100个字这样,因为编程基本都是用英文编写的,对中文的识别较差,所以在编程计算长度时,一个中文汉字是算两个字符的,所以如果我们要截取50个中文的话,截取长度就是乘以二,那就是100了,其实这都不算什么问题,但是在实际过程中,按这样的方式去截取的话,遇到文章包含中英文的时候就可能会出现乱码的情况,为了避免出现乱码,我们可以用一个非PHP核心函数 mb_strlen 来解决,为什么说 mb_strlen 是非PHP核心函数呢,因为在使用 mb_strlen 函数前需要确保在 php.ini 中有加载 php_mbstring.dll,要不然就会出现 未定义函数 的问题,那我们就来把上面的代码改进一下,加上截取字数的功能,得到代码如下:

然后,我们以ThinkPHP3.2为例,把上面的自定义函数方法添加到ThinkPHP框架中核心公共函数目录(Common)里的 functions.php 文件的最后面即可。

调用方法为:{$vo.content|cutstr_html=###,100}

上面调用方法中的 ### 是表示文章内容,100为要截取的字数长度。

谢谢你的阅读,如果你有更好的方法或在应用过程中遇到问题可以在评论区提问或者直接私信我,我会定期回复,码农刘小桥与你一起学习,共同进步。

今 Vue 的热度不断攀升,使用者越来越多,Vue.js 工具也随处可见。这种现象不是凭空产生的:Vue 的学习曲线友好,功能驱动的结构清晰易懂,文档出色易学,所以新人入门很容易,经验丰富的开发人员也可以快速从其他框架(如 React 或 Angular)切换过来。

只要你认真对待 Vue 的开发工作,逐渐就会发现很多优秀的基础工具和库。这些工具将点亮你的 Vue 开发职业生涯,让你浑身上下散发专业气息。

本文总结了一些最值得关注的工具和库,相信你迟早会用在自己的 Vue.js 项目中。同类文章经常只会列举一些 UI 组件库,而本文涉及的范围更广,探讨了 Vue 生态系统中的一系列工具、库和插件。

我的选择是基于实用性、有效性和独特性等原则——而不是它们的 GitHub 受欢迎程度或星级评分。

闲话不提,我们先来看 Top10。

1、Vue CLI


似乎现在每款 JavaScript 应用程序框架都必须使用某种 CLI 工具,Vue 也不例外。Vue CLI 是针对快节奏 Vue 开发打造的一套功能齐全的工具。除了常见的项目骨架之外,它还有方便的即时原型制作功能,你无需创建完整项目就可以尝试新的创意。

Vue CLI 直接支持各种主流 Web 开发工具和技术,如 Ba​​bel、TypeScript、ESLint、PostCSS、PWA、Jest、Mocha、Cypress 和 Nightwatch 等。这主要归功于它的可扩展插件系统。这意味着社区可以构建和共享可复用的插件以满足常见需求。

Vue CLI 强大的 GUI(Vue UI,它随 CLI 一起提供)则为其锦上添花。在其帮助下你可以轻松创建并直接配置和管理项目。

➤VueCLI( https://cli.vuejs.org/ )

2、VuePress


VuePress 是 Vue 生态系统中的另一大重头戏。它是一个基于 Vue 的静态站点生成器,最初是用来编写技术文档的工具,现在则发展成为一个小巧、紧凑、功能强大的无头 CMS。从版本 1.x 开始,它提供了出色的博客功能和强大的插件系统。它有一个默认主题(适用于技术文档),但你也可以构建自定义主题或使用社区中的预制主题。

在 VuePress 中,你使用 Markdown 编写内容,然后将其转换为预渲染的静态 HTML 文件。这些文件加载完毕后,你的站点就成为了由 Vue、Vue Router 和 Webpack 支持的单页应用程序。

VuePress 的一大好处就是你可以在 Markdown 文件中包含 Vue 代码或组件,带来了强大的功能和灵活性。你可以像开发普通的 Vue 应用程序一样开发你的网站,并充分利用 Vue 应用的种种优势。

➤VuePress( https://v1.vuepress.vuejs.org/ )

3、Gridsome


Gridsome 与 VuePress 有许多相似之处,但前者在处理数据源时采用了另一种非常强大的方法。你可以用它在应用程序中连接和使用许多不同类型的数据,然后将这些数据统一到一个 GraphQL 层中。基本上来说,Gridsome 用 Vue 提供前端功能,并使用 GraphQL 管理数据。其工作机制可总结为以下三个步骤:

  1. 你负责提供 Markdown、JSON、YAML 或 CVS 数据格式的内容,或从 WordPress 或 Drupal 等 CMS 导入内容。
  2. 内容会被转换为 GraphQL 层,该层负责中心化数据管理。然后你基于这些数据用 Vue 构建应用程序。
  3. 你将预渲染的 HTML 文件部署到静态 Web 主机或 CDN 上,如 Netlify、Amazon S3、 Now.sh 、Surge.sh 等。

Gridsome 提供了一些开箱即用的最佳实践,如代码分割、资产优化、渐进式图像和链接预取等。所以 Gridsome 用起来很快,而且对 PWA 支持完善,对 SEO 也很友好。

➤Gridsome( https://gridsome.org/ )

4、Vuex


开发人员构建 Web 应用程序时面对的一大问题就是状态管理。为了解决这个问题,Vue 提供了一个状态管理系统——Vuex。它负责集中存储应用程序中的所有组件,确保状态只能以可预测的方式变化。一个存储区是一个特殊的对象,分为四个部分:

  • state - 存储应用数据的对象。
  • getter - 包含用来抽象状态访问的方法的对象。
  • mutation - 包含直接影响状态的方法的对象。
  • action - 包含用来触发突变和执行异步代码的方法的对象。

存储区也可以分割为多个模块以提高可维护性。

➤Vuex( https://vuex.vuejs.org/ )

5、Nuxt


Nuxt 是常用的服务端渲染(SSR)方法。这个框架简洁而直观,可用来构建各种应用程序。它也是模块化的,因此你可以只使用应用程序所需的那些模块。

你可以使用 Nuxt 创建服务端渲染的应用程序(SSR)、单页面应用程序(SPA)、渐进式 Web 应用(PWA),或者只用作作静态站点生成器。

简而言之,Nuxt 简化了构建和优化应用程序的流程,为你提供简洁而愉快的开发体验。

➤Nuxt( https://nuxtjs.org/ )

6、Vuetify


Vuetify 是最好用的 UI 组件库之一。它提供了大量基于 Material Design 规范精心制作的组件(80+),足以满足任何应用程序的需求。

你可以用它来构建 SSR 应用程序、SPA、PWA 和移动应用。你可以创建新应用或将它们添加到现有应用中。它有免费和付费版主题可选,你也可以构建自己的主题。它还提供了一个系统,让你可以只选出要用的组件,从而大大减少应用程序的最终大小。

所有 Vuetify 组件都附带完善的文档,并提供了清楚的示例。

➤Vuetify( https://vuetifyjs.com/en/ )

7、Quasar


Quasar 是 Java“一次编写,随处运行”哲学的 JavaScript 版本。它是一个通用的,基于 Vue 的框架,让你可以使用相同的代码库为不同的平台编写应用程序。SPA、PWA、SSR 应用、混合移动应用或多平台桌面应用,任君选择!

它带有出色的文档和大批兼顾性能和响应性的组件。Quasar 自带许多最佳实践(HTML/CSS/JS 压缩、缓存清除、tree-shaking、源映射、代码分割与懒加载、ES6 转换、代码 linting、可访问性等),因此你可以专注于应用程序的功能实现。它还提供了一个用来轻松搭建新项目的 CLI 工具。

➤Quasar( https://quasar.dev/ )

8、Storybook


Vue 是一个主要基于组件的框架,因此编写优秀、高效的组件对所有开发人员来说都很重要,而 Storybook 可能就是非常趁手的工具。你可以用它在易用并隔离的环境中开发、管理和测试 UI 组件。它使开发人员能够独立于主应用程序创建组件,并在隔离的开发环境中以交互方式展示它们,而无需担心特定于应用程序的依赖关系和需求。

Storybook 提供了大量的附加组件和灵活的 API,可根据需要自定义你的 storybook。你还可以导出为静态 Web 应用程序,并将项目部署到 HTTP 服务器上。

➤Storybook( https://storybook.js.org/ )

9、Vue Apollo


最近有很多关于 GraphQL 的讨论。如果你很熟悉它,希望将其集成到 Vue 中,那么可以试试 Vue Apollo。这个库是连接 Vue 和 GraphQL/Apollo 的一座桥梁,用起来顺畅愉快。

➤VueApollo( https://vue-apollo.netlify.com/ )

10、Eagle.js


Eagle.js 是一个使用 Vue 构建的功能强大、灵活且独特的幻灯片系统。你可以在演示中创建易复用的组件、幻灯片和样式。它还支持动画、主题和交互式小部件,非常适合制作网络演示内容。Eagle.js 有一个简单且可调整的 API,因此你可以自由地制作所需的幻灯片。

这个库最方便的一项功能之一是将一张幻灯片放在单独的一个文件中,然后就能在其他幻灯片中重复使用了。你还可以将特定演示文档中的幻灯片导入另一个文档里。在这样强大的工具帮助下,你就可以制作复杂、可交互且吸引人的演示文稿。

➤Eagle.js( https://github.com/zulko/eagle.js/ )

另外 5 款值得关注的 Vue 工具和库

  • Vue DevTools 是一个很棒的浏览器扩展,用于调试 Vue 和 Vuex 应用程序。(https://github.com/vuejs/vue-devtools )
  • Vue Test Utils 是一组用于测试 Vue 组件的好用的工具。( https://github.com/vuejs/vue-test-utils )
  • Vue Router 是 Vue 官方出品的路由器。( https://github.com/vuejs/vue-router )
  • Vue Native 是一个用于移动应用程序的 JavaScript 框架,类似于 React Native。( https://vue-native.io/ )
  • Weex 是一个使用现代 Web 技术(包括 Vue 在内)构建移动应用程序的框架。(https://weex.apache.org/ )

小结

现在有了这么多工具,你就可以构建一些精彩的项目了:网站、应用程序、库、插件……能做的事情还不止这些。去做出一些优秀的作品吧!

我个人的知识见闻自然是有限的,我可能会漏掉一些优秀的工具和库,所以还有哪些出色的产品就请在评论里推荐吧。

英文原文: https://www.sitepoint.com/vue-js-tools-libraries/

过上一章的内容,现在网页文件中,我们还须要去除的就是html代码了。

下面我们要研究一下html代码的主要特点,不管什么样的HTML代码,他们均被左右尖括号所包围,就像这个样子<代码>,因此,我们就有了去除的方法,把括号中的内容和联通括号一起去除掉,就可以了。

下面开始,根据我们的想法,可以写出,下面这样的主程序

看上图,再上一张定义的函数,我们把它移动到了通用函数库中

第21行,这是我们新增的代码,执行完这个代码,就去除掉了HTML标记,剩下的就应该是纯文字内容了。在这里,我们定义了一个函数,名字叫做去除html代码

下面我们研究一下,这个函数的内容,如下图

因为使用了正则表达式,因此,在程序运行前,必须导入模块re

第3行,导入我们所需要的re模块,我们想用到正则表达式

第5行,定义函数

第6行,用右尖括号分格隔成列表

第8行,对列表元素进行遍历

第9行,使用正则挑出有效的内容,其实就是去除以前孤立的右尖括号的内容。

第10行,对有效的内容进行左尖括号分隔

第11行,左尖括号前面的内容就是有效的文字内容

完整的程序如下

下面我们对程序进行下测试,在上一章中,程序运行后得到如下的内容(内容太长,只截取一小部分)

本次程序改造后,运行得到下面的内容


从上面两个图片可以看出,我们确实把文字内容提取出来了。