关于搜索引擎优化你必须知道的一些事儿！！

　　关于搜索引擎优化你必须知道的一些事儿！！

　　一、搜索引擎优化1、什么是SEO

　　

　　摘要：seo是网站，目的是提高其网站排名并获得更多流量，调整并优化网站的结构和内容，以便搜索引擎（百度，谷歌等）可以更好地掌握获取高质量的网站内容。

　　2、搜索引擎工作流程

　　

　　常见的SEO方法，例如：

　　注意：Spider不能很好地支持JavaScript，Spider不能抓取ajax获取的JSON数据

　　使用哪些技术使SEO受益？要回答这个问题，您需要了解服务器端渲染和客户端渲染。

　　二、服务器端渲染和客户端渲染1、什么是服务器端渲染

　　服务器端渲染，也称为SSR（服务器端渲染），是在服务器端完成页面内容的渲染，而不是在客户端完成页面内容的渲染。

　　SSR不是独特的前端技术。我们了解到的JSP技术和Thymeleaf技术是典型的SSR

　　

　　服务器端呈现的特征：

　　2、什么是客户端渲染

　　客户端（浏览器）使用AJAX向服务器发起http请求，获取所需数据，开始呈现html网页，生成dom元素，最后将网页内容显示给用户。

　　

　　客户端呈现的特征：

　　3、这两种方法的优缺点是什么？

　　客户端渲染：

　　缺点：网站不利于SEO，因为网站广泛使用javascript技术，不利于搜索引擎抓取网页。

　　优点：客户端负责渲染，并且用户体验良好。服务器只提供数据，不关心用户界面的内容，有利于提高服务器的开发效率。

　　3）适用场景：不需要SEO的系统，例如电子商务后台管理，用户管理等后台管理系统。

　　服务器渲染：

　　优点：有利于SEO，网站通过href URL将搜索引擎直接定向到服务器，并且服务器向搜索引擎提供了高质量的Web内容。

　　缺点：服务器完成了客户端工作的一部分。通常，要完成一个需求就需要修改客户端和服务器的代码，开发效率低，不利于系统的稳定性。

　　3）适用场景：需要SEO的系统，例如门户网站主页，产品详细信息页面等。

　　三、 Nuxt.js 1、 Nuxt.js简介

　　移动互联网的兴起推动了Web前端和后端分离开发模型的发展。服务器仅关注业务，而前端仅关注用户体验。例如，流行的vue.js实现了强大的前端渲染。但是，使用前端渲染技术来开发具有SEO要求的网页不利于SEO。是否存在使用vue.js前端技术来实现服务器端渲染的技术？

　　Nuxt.js是基于Vue.js的轻量级应用程序框架，可用于创建服务器端呈现（SSR）应用程序，还可以充当静态站点引擎，以优雅的代码生成静态站点应用程序结构分层和热负荷等特征。

　　官方网站网站：

　　摘要：

　　2、 Nuxt.js服务器端呈现

　　下图显示了从客户端请求到服务器端渲染的Nuxt.js的总体工作流程：

　　

　　1）用户打开浏览器并输入URL，以请求Node.js中的前端View组件。

　　2）部署在Node.js上的应用程序Nuxt.js接收浏览器请求，并请求服务器获取数据

　　3） Nuxt.js在获取数据后执行服务器端渲染

　　4） Nuxt.js将html网页响应到浏览器

　　四、安装并运行

　　在线安装方法：参考：

　　我们可以直接在数据中解压缩nuxt-app.zip

　　五、页，导航和路由1、页

　　“新页面”文件夹

　　创建index.vue

　　

Hello world!

　　启动项目

　　npm run dev

　　访问：: 3000 /

　　创建另一个about.vue页面以供以后测试

　　

关于我们

　　访问：3000（约）

　　2、导航

　　使用标签在程序中的不同页面之间导航，这等效于标签的作用。通常情况下，我们在连接程序中使用不同的路由地址，并使用标签连接到站外的地址。

　　pages / index.vue

　　

关于我们

我要投资

用户中心

尚硅谷

Home page

　　3、自动路由

　　在vue项目中，我们需要创建页面并为每个页面配置路由，Nuxt将根据页面路径中的页面自动生成路由配置。

　　基本路由1

　　在页面下创建user.vue

　　访问权限：3000个/用户

　　

用户中心

　　基本路由2

　　在pages / lend /

　　下创建index.vue

　　访问：3000 / lend

　　

投资产品列表

产品1

产品2

　　动态路由

　　在pages / lend /

　　下创建_id.vue

　　：3000 / lend / 1

　　：3000 / lend / 2

　　文件名的格式：_写出字段名。请在此处

　　您只需要创建一个页面即可动态获取路线后面的值，但是请确保后缀之前的文件名与脚本中引用的字段一致

　　

投资产品 {{ id }}

export default {

data() {

return {

id: null,

}

},

created() {

// 获取动态路径的值

this.id = this.$route.params.id

},

}

　　嵌套路由

　　如果pages / user.vue和pages / user / index.vue同时存在，则可以使用嵌套路由

　　用户目录中的页面将显示为user.vue的子页面

　　pages / user.vue

　　

用户中心

我的账户

我的投资

我的个人信息

　　pages / user / index.vue

　　

用户中心

　　页面/用户/用户1.视频

　　

我的投资

　　页面/用户/用户2.视频

　　

我的个人信息

　　：3000 /用户

　　：3000 / user1

　　：3000 / user2

　　

　　

　　

　　六、布局1、默认布局

　　如果要具有统一的页面样式，例如：一致的页面页眉和页脚，则可以使用布局。布局文件的默认名称为default.vue，并将其放置在布局目录中。

　　注意：重新启动前端服务器后，将应用新创建的布局

　　布局/default.vue

　　

这是网站的公共头部

这是网站的公共底部

　　

　　

　　2、自定义布局

　　在layouts /目录下创建my.vue

　　

自定义头部

自定义底部

　　使用layout属性在pages / user.vue中指定布局文件

　　

　　

export default {

layout: 'my',

}

　　

　　

　　七、*敏*感*词*1、元标记和SEO

　　我们可以在根目录中创建nuxt.config.js

　　配置以下内容，Nuxt将自动生成网站标签，这也是搜索引擎优化的必要手段。

　　module.exports = {

head: {

title: '尚融宝',

meta: [

{ charset: 'utf-8' },

{ name: 'viewport', content: 'width=device-width, initial-scale=1' },

{

hid: 'meta-key-words',

name: 'keywords',

content:

'尚融宝官网_纽交所上市企业，网络借贷平台，解决个人小额借款，短期借款问题， 资金银行存管，安全保障，',

},

{

hid: 'description',

name: 'description',

content:

'尚融宝官网_纽交所上市企业，网络借贷平台，解决个人小额借款，短期借款问题， 资金银行存管，安全保障，',

},

],

// link如果不写的话，favicon.ico默认是直接放在static下，改也只能改到static目录下的其它目录

link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],

},

}

　　2、样式

　　第一步：创建资产/css/main.css

　　body {

background-color: pink;

}

　　第二步：在nuxt.config.js中配置样式

　　 css: [

// CSS file in the project

'~/assets/css/main.css',

],

　　

　　3、端口号

　　在nuxt.config.js中配置

　　 server: {

port: 3001, // 默认: 3000

},

　　八、集成axios

　　我们可以介绍封装在Nuxt中的axios组件，它具有更多的功能和更容易的编程

　　参考：

　　1、配置

　　nuxt.config.js

　　module.exports = {

modules: [

'@nuxtjs/axios', //引入axios模块

]

}

　　2、客户端渲染

　　在pages / index.vue中添加以下代码

　　

　　浏览器向服务器发送请求

　　

export default {

data() {

return {

id: null,

}

},

created() {

// 客户端渲染

// this.$axios

// .get('http://localhost:8110/admin/core/integralGrade/list')

// .then((response) => {

// console.log(response.data.data.list[0].id)

// this.id = response.data.data.list[0].id

// }),

// 这种方式能省去中间一个data

this.$axios

.$get('http://localhost:80/admin/core/integralGrade/list')

.then((response) => {

console.log(response)

this.id = response.data.list[0].id

})

},

}

　　3、服务器端呈现

　　让前端服务器向服务器发送请求，服务器返回的数据将由前端服务器呈现。这样的数据就是SEO喜欢的数据。

　　

export default {

// 服务器渲染

// asyncData是在服务器端渲染数据，会在前端服务器先执行，

// 比data()、created()执行的更早

// 可以想象成Java中的静态方法

// 如果只需要使用axios的话，可以用解构赋值的方式：{ $axios }

// 它是被封装在page里面的，这里面不能this

async asyncData({ $axios }) {

// 既然是在前端服务器发请求的话，那么就不需要异步了，所以改成同步

let response = await $axios.$get(

'http://localhost:80/admin/core/integralGrade/list'

)

return {

// 这个变量名不能与data()里面的相同

id1: response.data.list[0].id,

}

},

}

　　4、 axios全局选项

　　在nuxt.config.js中添加以下配置

　　 axios: {

// Axios options here

baseURL: 'http://localhost:80',

},

　　您可以直接在pages / index.vue中的asyncData（）中写入相对路径

　　 let response = await $axios.$get(

'/admin/core/integralGrade/list'

)

　　5、*敏*感*词*

　　创建*敏*感*词*插件plugins / axios.js

　　export default function({ $axios, redirect }) {

$axios.onRequest((config) => {

console.log('执行请求*敏*感*词*' + config.url)

})

$axios.onResponse((response) => {

console.log('执行响应*敏*感*词*')

return response

})

$axios.onError((error) => {

console.log(error) // for debug

})

}

　　在nuxt.config.js中配置插件

　　 plugins: ['~/plugins/axios'],

　　6、 $ axios。$ get和$ axios.get

　　请注意$ axios的快捷方式访问数据的问题：

　　参考地址