nuxt+axios解決前后端分離SSR的示例代碼

更新時間：2017年10月24日 10:29:53 作者：夢想修補師

這篇文章主要介紹了nuxt+axios解決前后端分離SSR的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

背景：由于后端程序猿通常對CSS 、JS掌握不是特別好，通常的開發(fā)模式，UI把靜態(tài)html做好交給程序猿，程序猿開發(fā)，把靜態(tài)html變成動態(tài)的時候經(jīng)常會有各種樣式錯亂的問題，并且要迎合上級一天三遍樣式需求，因此決定用前后端分離。考慮到網(wǎng)站的推廣，又必須做SEO。前端框架選擇VUE，解決SSR順便選擇了nuxt.js，此為背景。

一、準備工作

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

二、創(chuàng)建nuxt項目并配置

找一個自己喜歡的目錄，作為你的workspace，使用命令創(chuàng)建nuxt項目

1、創(chuàng)建項目

在該目錄下，摁下shift的同時鼠標右鍵，進入命令行

執(zhí)行創(chuàng)建命令：vue init nuxt/starter [firstVue] firstVue為項目名

下面會讓確認項目名，項目描述等信息，因為項目名不支持大寫，因此我又在創(chuàng)建過程中修改了一下，最終如下圖

2、執(zhí)行install

創(chuàng)建完成后進入該目錄下，執(zhí)行npm install ，下載所有依賴的東西，此過程根據(jù)網(wǎng)絡環(huán)境，可能需要幾分鐘，可以喝杯茶上個廁所。如下圖所示

3、執(zhí)行后用IDE（個人因為同時需要做java開發(fā)，喜歡用idea，插件用著更方便）打開，工程目錄如圖

4、運行

用idea自帶的終端命令行，執(zhí)行npm run dev，等待啟動成功，如果不報錯，訪問http://localhost:3000,出現(xiàn)下圖，則項目創(chuàng)建完成

三、配合Axios解決SEO

1、打開index.vue,為了更清洗，保留模板內(nèi)容如下

注意：此處的section標簽和container一定要留著不然有的內(nèi)容會渲染不出來。

可能大家已經(jīng)注意到此處有個api.js，我的所有接口以及Axios的配置都在這里面，提供api的統(tǒng)一配置，重點就在這兩個文件。
1️⃣、index.vue的腳本中的asyncData，該配置為頁面渲染之前調(diào)用，渲染頁面時候可以用返回的數(shù)據(jù)進行渲染
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)
})
// 返回狀態(tài)判斷
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中調(diào)用getAreas可以在控制臺輸出返回結果。頁面渲染如下

可能這個看著亂糟糟的，看源碼