js初化加载页面时ajax会调用两次的原因_聊聊Nuxt.js
首先我们来了解两个概念——客户端渲染和服务端渲染。
一、客户端渲染 VS 服务端渲染 1. 客户端渲染简单理解就是,在服务端放一个html 页面,客户端发起请求,服务端把页面发送过去。客户端从上到下依次解析,如果发现ajax请求就再发送新的请求,拿到ajax 响应结果以后渲染模板引擎。整个过程至少要发起两次请求。如图:
但是,这种渲染方式存在的弊端也是不容忽视的,比如请求量大时首屏渲染慢,不利于seo等问题。服务端渲染恰好弥补了这些不足。
2. 服务端渲染
也称SSR,即server side render的缩写。在服务端渲染出完整的首屏dom结构,直接发送到浏览器;前端拿到的内容包括首屏及完整spa结构,应用激活后依然按照spa方式运行。整个过程只向服务端发起一次请求。如图:
服务端渲染有两大优点: 一是更利于SEO。因为爬虫只会爬取源码,不会执行脚本。使用了MVVM框架之后,页面的大多数DOM元素是在客户端根据js动态生成的,可供爬虫抓取分析的内容很少。而且浏览器爬虫不会等数据加载完成之后再去抓取。服务端渲染返回已经获取了异步数据并执行js脚本的最终HTML,爬虫就可以抓取完整的页面信息。二是更利于首屏渲染。对服务端渲染而言,首屏渲染是node发送过来的html字符串,不依赖于js文件,这样用户就能更快地看到页面内容。尤其是大型单页应用,资源请求量大,造成首屏渲染加载缓慢,使用服务端渲染就可以在很大程度上解决首页的白屏等待问题。
Nuxt.js作为Vue.js的通用框架,就常被用来作SSR。
二、nuxt.js nuxt是一个专注于ui渲染的应用框架,可以快速搭建项目,还提供了服务端渲染的功能。1. 安装
直接用vue-cli安装vue init nuxt-community/starter-template
2. nuxt推荐的项目结构
assets——资源文件
components——组件
layouts——布局,默认default。所有页面都会加载在布局页面中的标签中。如果要在普通页面中使用下级路由,则要在页面中添加
middleware——中间件:每个页面加载前调用,在页面中调用的方法是middleware: 'middlewareName'。
node_modules——依赖包
nuxt.config.js——个性化配置
package.json——
pages——页面。根页面是index.vue,二级页面只要添加文件夹。动态路由页面的名称格式是:_变量.vue
plugins——插件
static——静态文件(不需要webpack打包的)。
store——状态管理
yarn.lock
3. 生命周期
Nuxt在vue的基础上对生命周期做了扩展:export defualt { middleware(){ }, // 服务端 validate(){ }, // 服务端 asyncData(){ }, // 服务端 fetch(){ }, // store数据加载 beforeCreate(){ }, // 服务端和客户端都会执行 created(){ }, // 服务端和客户端都会执行 beforeMount(){ }, mounted(){ } // 客户端}
4. asyncData
如果需要服务端渲染,首次渲染时一定要使用这个方法。它可以在渲染组件前异步获取数据。asyncData传入context参数,可以获取一些信息,如:
export default { asyncData(ctx){ ctx.app // 根实例 ctx.route // 路由实例 ctx.params // 路由参数 ctx.query // 路由问号后的参数 ctx.error // 错误处理方法 }}
使用这个方法时要注意,如果由于服务器或api错误导致无法渲染,就要做好容错机制,可以使用context.error方法。我们可以这样做:
async asyncData(ctx){ try { throw new Error() } catch { ctx.error( {statusCode: 500, message: '服务器开小差了~'} ) // 这里的statusCode参数必须是http状态码 }}
此时,错误页可以通过/layout/error.vue自定义。
注意:该方法在服务端执行,返回的数据与data()返回的数据合并。该方法在组件初始化前被调用,所以不能通过this引用实例对象。
5. 使用axios请求数据
(1)nuxt项目默认安装axios,所以只要安装proxy即可npm install @nuxtjs/proxy
(2)在nuxt.config.js中加上:export default { modules: [ '@nuxtjs/axios', '@nuxtjs/proxy' ], proxy: { './api': { target: 'http://www.xxx.com', changeOrigin: true, pathRewrite: { '^/api': '' } } }}
(3)页面中使用:
import axios from 'axios'export default { data () { return { page: 0 } }, async asyncData () { let data = await axios.get('http://localhost:3000/api/admin/list') return { page: data.data.page } },}
采用 `import axios from 'axios'` 方式引入axios时,接口参数前须加baseURL。
6. 使用scss
(1)安装sassnpm i node-sass sass-loader scss-loader --save-dev
(2)如果要全局使用某个scss文件,要借助sass-resources-loader,还需要在nuxt.config.js的build配置中调整导出的loader配置:
export default { build: { extend(config, { isDev, isClient }){ const sassResourcesLoader = { loader: 'sass-resources-loader', options: { resources: [ // 填写需要全局注入scss的文件 'assets/styles/mixins.scss' ] } } // 修改 scss sass 引用的 loader。 config.module.rules.forEach((rule) => { if (rule.test.toString() === '/\\.vue$/') { rule.options.loaders.sass.push(sassResourcesLoader) rule.options.loaders.scss.push(sassResourcesLoader) } if (['/\\.sass$/', '/\\.scss$/'].indexOf(rule.test.toString()) !== -1) { rule.use.push(sassResourcesLoader) } }) } }}
7. 编译过程
(1)加载nuxt.config.js;
(2)初始化nuxt,builder,开始执行构建;
(3)准备模板使用的参数,然后根据模板生成真正的webpack编译的js;
(4)分别执行客户端编译和服务端编译,生成最终的js脚本;
(5)编译成功后,就需要启动服务,监听端口,这个是在npm run start中实现的。
8. nuxt和vue的区别Nuxt.js | Vue.js | |
路由 | 按pages 文件夹目录结构自动生成 | 在 src/router/index.js 手动配置 |
入口文件 | layouts/default.vue | src/App.vue |
webpack配置 | 内置webpack,允许根据服务端需求,在 nuxt.config.js 中的build属性自定义构建webpack的配置,覆盖默认配置 | 存放在build文件夹下 |
关于nuxt.js先写这些了,更多内容还是要去看一遍文档哦~