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)
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！