php 抓取网页ajax数据(谷粒学院-Java视频|HTML5视频自学拿1万+月薪的IT在线视频)

　　php 抓取网页ajax数据(谷粒学院-Java视频|HTML5视频自学拿1万+月薪的IT在线视频)

　　一、服务端渲染技术NUXT 1、什么是服务端渲染

　　服务器端渲染，也称为SSR（Server Side Render），是在服务器端完成页面内容，而不是在客户端通过AJAX获取数据。

　　服务端渲染（SSR）的优点主要是：更好的SEO，因为搜索引擎爬虫爬虫可以直接查看完全渲染的页面。

　　如果您的应用程序最初显示加载菊花图，然后通过 Ajax 获取内容，则爬虫将不会等待异步完成，然后再爬取页面内容。也就是说，如果 SEO 对您的网站至关重要并且您的页面正在异步获取内容，那么您可能需要服务器端渲染 (SSR) 来解决这个问题。

　　此外，通过服务器端渲染，我们可以获得更快的内容时间，而无需等待所有 JavaScript 完成下载和执行，从而获得更好的用户体验，因为那些“时间到内容”的内容）是与转换直接相关”，服务器端渲染 (SSR) 至关重要。

　　2、什么是NUXT

　　Nuxt.js 是一个基于 Vue.js 的轻量级应用框架，可用于创建服务器端渲染（SSR）应用，也可以作为静态站点引擎生成静态站点应用。它具有优雅的代码结构分层和热加载的特点。.

　　官网网站：

　　二、NUXT环境初始化1、下载压缩包

　　2、解压

　　将模板中的内容复制到guli

　　3、安装 ESLint

　　将guli-admin项目下的.eslintrc.js配置文件复制到当前项目

　　4、修改package.json

　　名称、描述、作者（此处必须修改，否则无法安装项目）

　　 "name": "guli",

"version": "1.0.0",

"description": "谷粒学院前台网站",

"author": "Helen ",

　　5、修改nuxt.config.js

　　修改标题：'{{ name }}'，内容：'{{escape description }}'

　　这里的设置最终会显示在页面标题栏和元数据中

　　头： {

　　标题：'Grain Academy - Java 视频 | HTML5 视频 | 前端视频 | Python 视频 | 大数据视频-自学月薪10000+月薪IT在线视频课程，粮粉支持，老同学推荐，

　　元：[

　　{ 字符集：'utf-8' }，

　　{ 名称：'viewport'，内容：'width=device-width，initial-scale=1'}，

　　{ hid: 'keywords', name: 'keywords', content: '粮学院, IT在线视频教程, Java视频, HTML5视频, 前端视频, Python视频, 大数据视频' },

　　{ hid: 'description', name: 'description', content: '粮学院是国内领先的IT在线视频学习平台和职业教育平台。截至目前，粮食学院线上线下学生人数已达10000人！与数百家知名开发团队联合开发的Java、HTML5前端、大数据、Python等视频课程，被广大学习者和IT工程师赞誉为：业界最适合自学、量最大代码，最多案例，最实用，最前沿的IT系列视频课程！' }

　　],

　　关联： [

　　{ rel: 'icon', 类型: 'image/x-icon', href: '/favicon.ico' }

　　]

　　},

　　6、在命令行终端进入项目目录7、安装依赖

　　npm 安装

　　8、试运行

　　npm 运行开发

　　9、NUXT目录结构

　　(1） 资源目录资产

　　用于组织未编译的静态资源，例如 LESS、SASS 或 JavaScript。

　　(2）components 目录组件

　　用于组织应用程序的 Vue.js 组件。Nuxt.js 不会扩展和增强该目录下的 Vue.js 组件，即这些组件不会像页面组件那样具有 asyncData 方法的特性。

　　(3）Layouts 目录布局

　　用于组织应用程序的布局组件。

　　(4）页面目录页面

　　用于组织应用程序的路由和视图。Nuxt.js 框架会读取该目录下的所有 .vue 文件，并自动生成相应的路由配置。

　　(5）插件目录插件

　　用于组织需要在根 vue.js 应用程序实例化之前运行的 Javascript 插件。

　　(6）nuxt.config.js 文件

　　nuxt.config.js 文件用于组织 Nuxt.js 应用程序的个性化配置，以覆盖默认配置。

　　三、幻灯片插件

　　1、安装插件

　　npm install vue-awesome-swiper

　　2、配置插件

　　在plugins文件夹下新建一个文件nuxt-swiper-plugin.js，内容为

　　import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'

Vue.use(VueAwesomeSwiper)

　　在 nuxt.config.js 文件中配置插件

　　将 plugins 和 css 节点复制到 module.exports 节点

　　module.exports = {

// some nuxt config...

plugins: [

{ src: '~/plugins/nuxt-swiper-plugin.js', ssr: false }

],

css: [

'swiper/dist/css/swiper.css'

]

}

　　注意插件版本问题，会报错，需要解决兼容性问题。

　　NUXT 的功能与之前的 vue 模板大致相同。整合过程不用多说。

　　三、 实现banner、热门教师、热门课程等信息

　　

　　轻微地