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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 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
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
PHP通用检测函数集合
2011/02/08 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
uploadify 3.0 详细使用说明
2012/06/18 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
Jquery选择子控件"大于号"和" "区别介绍及使用示例
2013/06/25 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
python网络编程学习笔记(四):域名系统
2014/06/09 Python
python实现封装得到virustotal扫描结果
2014/10/05 Python
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
学习十八大报告感言
2014/02/28 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
Python中itertools库的四个函数介绍
2022/04/06 Python
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers
关于MySQL中explain工具的使用
2023/05/08 MySQL