SSR（服务端与客户端渲染）、NUXT.js（介绍安装、配置、路由、视图、异步数据与反向代理解决跨域、vuex状态树）（九）

nuxt

一. SSR

什么是服务端渲染？ 核心在于方便seo优化

后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完整的html页面，再直接返回给浏览器，以便用户浏览。 例如：http://www.cnblogs.com/cate/design

什么是客户端渲染？ 分担到客户端

数据由浏览器通过ajax动态获得，再通过js将数据填充到dom元素上最终展示到网页中，这样的过程就叫做客户端渲染。 例如：https://m.maizuo.com/v5/#/films/nowPlaying

服务端渲染与客户端渲染区别？

客户端渲染不利于SEO搜索引擎优化
服务端渲染是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到的
服务端渲染对SEO友好，经过服务端渲染的页面，在网络传输的时候，传输的是一个真实的页面，所以爬虫就会对这个页面中的关键数据进行分析、收录。
服务端渲染缺点就是 对服务器压力比较大
客户端渲染减轻了服务器端的渲染压力，能够实现前后端分离开发
客户端渲染缺点就是 对SEO相当的不友好

二. Nuxt.js

1. Nuxt.js介绍与安装(一个基于 Vue.js 的服务端渲染应用框架 )

https://zh.nuxtjs.org/guide

npx create-nuxt-app <项目名>

服务端渲染，解决首屏加载速度，和 seo问题

2. Nuxt.js的配置

https://zh.nuxtjs.org/guide/configuration

3. 路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

（1）要在页面之间使用路由，使用 支持activeClass、tag
（2）嵌套路由

创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
路径如下：

1 pages/
2 ‐‐| film/
3 ‐‐‐‐‐| nowplaying.vue
4 ‐‐‐‐‐| comingsoon.vue
5 --| film.vue

（3）动态路由

必须加下划线 (文件夹也可以加下划线(多级嵌套)， 文件也可以加下划线)

1 pages/
2 ‐‐| detail/
3 ‐‐‐‐‐| _id.vue

（4）获取动态路由参数

1 asyncData({params}){
2 console.log(params.id);
3 }

（5）路由的重定向 (nuxt.config.js)

router: {
	extendRoutes(routes, resolve) {
		routes.push({
			path: "/",
			redirect: "/film"
		})
	
 	  varindex = routes.findIndex(item=>item.path === "/film")
      routes[index].children.push({
	      path:"/film",
	      redirect:"/film/nowplaying"
      })
	}
}

还可以通过中间件的方式进行配置（middleware/redirect.js）

export default function ({ route,redirect}){
	if(route.fullPath === "/film"){
		return redirect("/film/nowplaying")
	}
}

router: {
	extendRoutes(routes, resolve) {
		routes.push({
			path: "/",
			redirect: "/film"
		})
	},
	middleware:["redirect"]
}

4.视图

在layout 里面写好default.vue 可以认为这是根组件的模板了，
所有的组件都加在里面，但是有些页面可能不一样，就可以使用个性化定制页面。

export default {
	layout:"detailTpl"
}

5. 异步数据与反向代理解决跨域

(1) 如果组件的数据不需要异步获取或处理，可以直接返回指定的字面对象作为组件的数据。
(2) 通过asyncData来异步请求数据

因为在created里面实现异步的话，对于搜索引擎来说是不知道的。

第一次刷新的时候是后端自己触发asyncData,异步获取到数据，然后进行组装，组装完毕后再将数据回传给前端进行显示，有利于seo搜索引擎优化。
后续的都是前端去调用asyncData这个方法，属于单页应用了，有利于用户体验

asyncData(){
	return axios({
		url:"https://m.maizuo.com/gateway?cityId=440100&pageNum=1&pageSize=10&type=1&k=3273067",
		headers:{
			"X-Host": "mall.film-ticket.film.list"
		}
	}).then(res=>({
		datalist:res.data.data.films
	}))
}

跨域的解决方案： cnpm i @nuxtjs/proxy

modules: [
	'@nuxtjs/axios',
	'@nuxtjs/proxy',
],
axios: {
	proxy:true
},
proxy:{
	"/ajax":{
		target:"http://m.maoyan.com",
		changeOrigin:true
	}
}

asyncData ({ params }) {
	const url = process.server?"http://m.maoyan.com":""
	return axios({
		method:"get",
		url:url+"/ajax/mostExpected?ci=60&limit=10&offset=0&token=&optimus_uuid=A3531DF0B63711E8940A97B13D035BD69C7A62A9A316420284E6E4A55D748820&optimus_risk_level=71&optimus_code=10",
	}).then((res) => {
		return { datalist: res.data.coming }
	})
},

6. vuex状态树

export const state = () => ({
	counter: 0
})
export const mutations = {
	increment(state) {
	state.counter++
},
changeCounter(state, count) {
	state.counter = count
}

...mapState('todo',['counter'])
...mapMutations('todo',['increment'])

（2）fetch 方法用于在渲染页面前填充应用的状态树（store）数据，与 asyncData 方法类似，不同的是它不会设置组件的数据。

如果页面组件设置了 fetch 方法，它会在组件每次加载前被调用（在服务端或切换至目标路由之前）。

async fetch({store}){
	let { data } = await axios.get(process.server?"http://m.maoyan.com/ajax/movieOnInfoList?token=":'/ajax/movieOnInfoList?token=')
	store.commit('todo/changeCounter', data.movieList[0].showst)
}