nuxt+axios解决前后端分离SSR的示例代码


Posted in Javascript onOctober 24, 2017

​背景:由于后端程序猿通常对CSS 、JS掌握不是特别好,通常的开发模式,UI把静态html做好交给程序猿,程序猿开发,把静态html变成动态的时候经常会有各种样式错乱的问题,并且要迎合上级一天三遍样式需求,因此决定用前后端分离。考虑到网站的推广,又必须做SEO。前端框架选择VUE,解决SSR顺便选择了nuxt.js,此为背景。

一、准备工作

1、安装nodejs
2、安装vuejs
3、安装vue-cli
4、安装nuxt

二、创建nuxt项目并配置

找一个自己喜欢的目录,作为你的workspace,使用命令创建nuxt项目

1、创建项目

在该目录下,摁下shift的同时鼠标右键,进入命令行

执行创建命令:vue init nuxt/starter [firstVue] firstVue为项目名

下面会让确认项目名,项目描述等信息,因为项目名不支持大写,因此我又在创建过程中修改了一下,最终如下图

nuxt+axios解决前后端分离SSR的示例代码

2、执行install

创建完成后进入该目录下,执行npm install ,下载所有依赖的东西,此过程根据网络环境,可能需要几分钟,可以喝杯茶上个厕所。如下图所示

nuxt+axios解决前后端分离SSR的示例代码

3、执行后用IDE(个人因为同时需要做java开发,喜欢用idea,插件用着更方便)打开,工程目录如图

nuxt+axios解决前后端分离SSR的示例代码

4、运行

用idea自带的终端命令行,执行npm run dev,等待启动成功,如果不报错,访问http://localhost:3000,出现下图,则项目创建完成

nuxt+axios解决前后端分离SSR的示例代码

三、配合Axios解决SEO

1、打开index.vue,为了更清洗,保留模板内容如下

nuxt+axios解决前后端分离SSR的示例代码

注意:此处的section标签和container一定要留着不然有的内容会渲染不出来。

可能大家已经注意到此处有个api.js,我的所有接口以及Axios的配置都在这里面,提供api的统一配置,重点就在这两个文件。
1️⃣、index.vue的脚本中的asyncData,该配置为页面渲染之前调用,渲染页面时候可以用返回的数据进行渲染
2️⃣、api.js,多说无益,show code

import axios from 'axios'
import qs from 'qs'
// axios 配置
axios.defaults.timeout = 5000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
axios.defaults.baseURL = 'https://api.nashi8.com/'

// POST传参序列化
axios.interceptors.request.use((config) => {
 if (config.method === 'post') {
  config.data = qs.stringify(config.data)
 }
 return config
}, (error) => {
 return Promise.reject(error)
})
// 返回状态判断
axios.interceptors.response.use((res) => {
 if (res.status === 200) {
  return res
 } else {
  return Promise.reject(res)
 }
}, (error) => {
 return Promise.reject(error)
})

export function fetch (url, params) {
 return new Promise((resolve, reject) => {
  axios.post(url, params)
   .then(res => {
    resolve(res.data)
   })
   .catch((error) => {
    reject(error)
   })
 })
}
export default {
 /**
  * 获取广告信息
  */
 getAds (params) {
  return fetch('/api/ad/queryADs', params)
 },
 getAreas (params) {
  return fetch('/api/area/getAll', params)
 }
}

3、在index中调用getAreas可以在控制台输出返回结果。页面渲染如下

可能这个看着乱糟糟的,看源码

nuxt+axios解决前后端分离SSR的示例代码

此时页面源码已可以查看到服务端返回的数据,至此,SSR问题已OK

源码下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery操作select的实例代码
Jun 14 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
javascript中数组方法汇总
Jul 07 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
Vue实现动态显示textarea剩余字数
May 22 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
使用js获取伪元素的content实例
Oct 24 #Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 #Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 #Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 #Javascript
基于js中this和event 的区别(详解)
Oct 24 #Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 #Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 #jQuery
You might like
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
PHP面向对象精要总结
2014/11/07 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
js操作select控件的几种方法
2010/06/02 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
从0开始的Python学习016异常
2019/04/08 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
python如何操作mysql
2020/08/17 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
护理专业应届毕业生推荐信
2013/11/15 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
Vue3中的Refs和Ref详情
2021/11/11 Vue.js