# Nuxt.js
# 什么是服务器端渲染
后端先调用数据库，获取数据之后，将数据和页面元素进行拼装，组合成完整的 html 页面，再直接返回给浏览器，以便用户浏览。
# 什么是客户端渲染
数据由浏览器通过 ajax 动态获取，再通过 js 将数据填充到 dom 元素上最终展示到网页中，这样的过程叫做客户端渲染
# 服务器端渲染 和 客户端渲染
- 服务器渲染需要消耗更多的服务器端资源(CPU,内存等)
- 客户端渲染可以将静态资源部署到 cdn 上,实现高并发
- 服务器端渲染对 SEO 更加友好
# Nuxt 中使用 axios 进行异步请求
# 使用 nuxt 提供的 @nuxtjs/axios
- 配置 nuxt.config.js
export default {
modules: ["@nuxtjs/axios"]
};
- 在提供的 context(上下文对象中)取得$axios
async asyncData({ $axios }) {
let res = await $axios.get("https://cnodejs.org/api/v1/topics");
return {
list: res.data.data
};
},
- 在 nuxt plugin 扩展 Axios
nuxt 会在 vue.js 程序启动前调用 plugins 目录下的脚本，并且以 context(上下文对象)作为参数，可以取到$axios
export default function({ $axios, redirect }) {
// request interceptor
$axios.interceptors.request.use(
config => {
// do something before request is sent
return config;
},
error => {
// do something with request error
return Promise.reject(error);
}
);
$axios.onRequest(config => {
console.log("Making request to " + config.url);
});
// response interceptor
$axios.interceptors.response.use(
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data;
if (res.code === 200) {
return res;
} else {
redirect("/404");
// if the custom code is not 200, it is judged as an error.
}
return Promise.reject(new Error(res.msg || "Error"));
},
error => {
console.log("err" + error); // for debug
return Promise.reject(error);
}
);
$axios.onError(error => {
const code = parseInt(error.response && error.response.status);
if (code === 400) {
redirect("/404");
} else if (code === 500) {
redirect("/500");
}
});
}
- 添加插件到 nuxt.config.js 配置文件
export default {
plugins: ["@/plugins/element-ui", "@/plugins/axios"]
};
# 直接引入axios，并模块化请求，就像vue中那样使用
安装 axios npm i axios -S
创建http.js 封装 axios
在vue组件中使用