关于优化
01 - SPA
在 vue 这个阶段中我们所学的: 黑马面面项目 & 黑马头条项目。其实都是单页应用
全称:Single Page Application (单页面应用)
概念:
- 网站的效果都是显示在一个静态页面中的
- 在页面切换时,其实并没有从一个页面中跳转到另一个页面中,只是通过 js 动态的将内容进行了修改
- 在网站的源代码中是看不到任何数据(关键字)的
特点:
- 优点:
- 用户体验好、快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染;
- 基于上面一点,SPA 相对对服务器压力小;
- 前后端职责分离,架构清晰,前端进行交互逻辑,后端负责数据处理;
- 缺点:
- 初次加载耗时多:为实现单页 Web 应用功能及显示效果,需要在加载页面的时候将 JavaScript、CSS 统一加载,部分页面按需加载;
- 前进后退路由管理:由于单页应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理;(vue-router 已经解决了这个问题)
- SEO 难度较大:由于所有的内容都在一个页面中动态替换显示,所以在 SEO 上其有着天然的弱势。
- 因为单页应用的所有内容都在 index.html 中,页面的切换是通过 js 动态切换的
- 由于所有的内容切换都是通过 js 动态切换的,所以在页面的源代码中是看不到任何的数据的
- 由于源代码中看不到任何数据,这是非常不利于 SEO 的,所以我们说 SPA 在 SEO 上有其天然的弱势。
- vue 中的 SSR 就可以用来解决这个问题。
02 - SEO
总结: 用户在搜索关键字时,让我们的网站排名更加的靠前,这个过程叫做 SEO 优化
全称: Search Engine Optimization (搜索引擎优化)
作用:
- 提高网站关键字的排名
- 当我们在搜索引擎上搜索一些关键字,SEO 可以让我们的网站排名尽可能的靠前
具体的实现:
- 1.0 花钱买排名(与程序员无关)
- 2.0 可以广发外链(与程序员无关)
- 3.0 结构语义化(与程序员相关)
- 搜索引擎在搜索关键字时,会有自己的一套算法(网络爬虫):
- 网络爬虫会去目标网站上去抓取与关键字有联系的信息
- 网络爬虫抓取的方式是:浏览网站的源代码,寻找与关键字相匹配的信息,最终将与关键字匹配度最高的网站进行显示。
- 总结:如果要提高网站的排名,必须在源代码中有关键字信息。
- 搜索引擎在搜索关键字时,会有自己的一套算法(网络爬虫):
渲染方式
SPA 的渲染特点:页面上的数据,是通过 js 动态渲染的,所以在源代码是看不到数据的(像这种渲染方式,叫做:客户端渲染:CSR)
01 - CSR
全称:Client Sider Render(客户端渲染)=> 前后端分离
特点:
- 1.0 完成实现了前后端分离
- 后端:提供数据接口
- 前端:调用接口,渲染数据
- 2.0 由于数据的渲染是在前端完成了,并且是通过 js 动态完成的:所以在操作过程中网站的源代码中看不到任何数据。
案例:
- 步骤:
- 1.0 创建一个服务器
- 2.0 响应一个客户端
- 3.0 在服务器中提供一个数据响应的接口
- 4.0 在客户端中通过异步请求去请求这个接口
- 5.0 通过 js 将数据动态渲染到页面上
02- SSR
全称:Server Sider Render(服务端渲染)=> 混合式开发
特点:
- 1.0 没有前后端的分离:
- 只有后端
- 得到静态页面
- 得到动态数据
- 将页面与数据进行结合,形成一个完整的 html 结构,最终将 html 结构响应回浏览器
- 没有前端
- 只有后端
- 2.0 由于数据是在服务端直接渲染完成的,所以在源代码中可以看到数据的 。
- 3.0 相对 CSR,它对于 SEO 更加友好
案例:
- 步骤:
- 1.0 创建一个服务器
- 2.0 设置一个接口:用来返回一个完整的 html 页面(数据+结构)
- 3.0 在浏览器中请求这个接口就可以了
03-vue 中的 SSR
vue 自身提供了 SSR 的第三方包,我们可以直接使用这些第三方包来开启 SSR
传送门: 点这里.
注意点:
- 由于 vue 中自带的 SSR 对于其它的知识点要求过高,学习成本太大
- vue 的官方建议,可以直接学习 nuxt.js
// 以 SSR 的方式来渲染实例
const server = require('express')()
// 1.0 创建一个 vue 实例
const Vue = require('vue')
// 创建一个服务器渲染的对象
const renderer = require('vue-server-renderer').createRenderer()
// 设置路由
server.get('*', (req, res) => {
// 创建的 vue 实例
const app = new Vue({
data: {
url: req.url,
myname: 'xjj'
},
template: `
<div>
<div>访问的 URL 为: {{ url }}</div>
<div>{{ myname }}</div>
</div>
`
})
// 将 vue 实例渲染为 html
renderer.renderToString(app, (err, html) => {
if (err) return
res.setHeader('Content-Type', 'text/html;charset=utf-8')
res.end(`
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hellow</title>
</head>
<body>
${html}
</body>
</html>
`)
})
})
// 开启服务器
server.listen(3000, () => {
console.log('running')
})
Nuxt.js
官网: https://zh.nuxtjs.org/
说明:nuxt.js 是 vue 中的一个服务端渲染框架
总结:
- 它是一个基于 vue2.x 的一个服务端渲染框架
01 - 安装
从头开始新建项目
-
步骤:
-
1.0 创建一个文件夹 & 进入这个文件夹
$mkdir <项目名>
$cd <项目名>
-
2.0 初始化这个项目
npm init -y
出现package.json文件 -
3.0 设置启动指令:
// package.json { "scripts": { "dev": "nuxt" } }
-
4.0 安装 nuxt
npm i --save nuxt
-
5.0 创建 pages 目录 $
mkdir pages
-
6.0 在 pages 目录下新建一个 index.vue 项目
-
7.0 启动项目
npm run dev
-
02 - 路由
-
基础路由
<!-- pages 下面的结构 --> pages/ --| user/ -----| index.vue -----| one.vue --| index.vue <!-- 生成路由,直接在浏览器照着路径打就可以出来相应路由出来的页面不用自己配置响应的路由 --> router: { routes: [ { name: 'index', path: '/', component: 'pages/index.vue' }, { name: 'user', path: '/user', component: 'pages/user/index.vue' }, { name: 'user-one', path: '/user/one', component: 'pages/user/one.vue' } ] }
-
动态路由
// 结构 pages/ --| _slug/ -----| comments.vue -----| index.vue --| users/ -----| _id.vue --| index.vue // 生成的路由 router: { routes: [ { name: 'index', path: '/', component: 'pages/index.vue' }, { name: 'users-id', path: '/users/:id?', component: 'pages/users/_id.vue' }, { name: 'slug', path: '/:slug', component: 'pages/_slug/index.vue' }, { name: 'slug-comments', path: '/:slug/comments', component: 'pages/_slug/comments.vue' } ] }
03 - 视图
nuxt.js 允许我们定义一些类似于模板之间的结构,供所有的页面来使用
- 模板
- 作用:可以给页面提供默认的结构
- 用法: 根目录下创建一个
app.html
的文件 - 注意点:创建之后,需要重启服务器
- 布局:
- 作用:与模板基本一致,但是布局中可以使用逻辑代码
- 用法:根据目录下创建一个 layouts 文件夹,在文件夹下创建一个 default 文件
04 - 异步数据
使用 SSR 的方式为渲染数据
- asyncData 函数:
- 作用:asyncData中的代码就相当于我们在中台服务器中执行的,可以让渲染数据变为 SSR 的方式
- 注意点:
- 1.0 asyncData 中无法使用 this
- 2.0 如果需要将 asyncData 中的数据返回给外界使用,需要通过 return
- 3.0 asyncData 中返回的数据用法与 data 中的数据一样
Nuxt - nuxt 生命周期钩子函数
- nuxt 中生命周期钩子函数的执行时机
- 有一套自己的周期:
- asyncData
- beforeCreate
- created
- 再是 vue 的生命周期
- 有一套自己的周期:
Vuex
基本介绍:
- 是 vue 的状态管理模式
运行流程:
keep-alive
基本介绍:
- vue 中提供的一个组件,可以用来将动态组件 & 路由页面中的内容进行缓存,防止页面重复渲染
补充:
- activated:被缓存的组件显示时执行
- deactivated:被缓存的组件切换时执行