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 相关文章推荐
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
原生JS生成指定位数的验证码
Oct 28 Javascript
使用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
php学习之 认清变量的作用范围
2010/01/26 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
php实现算术验证码功能
2018/12/05 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
Vue header组件开发详解
2018/01/26 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
基于Python代码编辑器的选用(详解)
2017/09/13 Python
django允许外部访问的实例讲解
2018/05/14 Python
python对html过滤处理的方法
2018/10/21 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
数据库的约束含义
2012/09/09 面试题
优秀大学生职业生涯规划书
2014/02/27 职场文书
小组口号大全
2014/06/09 职场文书
学校党员对照检查材料
2014/08/28 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书