nuxt+axios解決前后端分離SSR的示例代碼
背景:由于后端程序猿通常對(duì)CSS 、JS掌握不是特別好,通常的開發(fā)模式,UI把靜態(tài)html做好交給程序猿,程序猿開發(fā),把靜態(tài)html變成動(dòng)態(tài)的時(shí)候經(jīng)常會(huì)有各種樣式錯(cuò)亂的問題,并且要迎合上級(jí)一天三遍樣式需求,因此決定用前后端分離??紤]到網(wǎng)站的推廣,又必須做SEO。前端框架選擇VUE,解決SSR順便選擇了nuxt.js,此為背景。
一、準(zhǔn)備工作
1、安裝nodejs
2、安裝vuejs
3、安裝vue-cli
4、安裝nuxt
二、創(chuàng)建nuxt項(xiàng)目并配置
找一個(gè)自己喜歡的目錄,作為你的workspace,使用命令創(chuàng)建nuxt項(xiàng)目
1、創(chuàng)建項(xiàng)目
在該目錄下,摁下shift的同時(shí)鼠標(biāo)右鍵,進(jìn)入命令行
執(zhí)行創(chuàng)建命令:vue init nuxt/starter [firstVue] firstVue為項(xiàng)目名
下面會(huì)讓確認(rèn)項(xiàng)目名,項(xiàng)目描述等信息,因?yàn)轫?xiàng)目名不支持大寫,因此我又在創(chuàng)建過程中修改了一下,最終如下圖
2、執(zhí)行install
創(chuàng)建完成后進(jìn)入該目錄下,執(zhí)行npm install ,下載所有依賴的東西,此過程根據(jù)網(wǎng)絡(luò)環(huán)境,可能需要幾分鐘,可以喝杯茶上個(gè)廁所。如下圖所示
3、執(zhí)行后用IDE(個(gè)人因?yàn)橥瑫r(shí)需要做java開發(fā),喜歡用idea,插件用著更方便)打開,工程目錄如圖
4、運(yùn)行
用idea自帶的終端命令行,執(zhí)行npm run dev,等待啟動(dòng)成功,如果不報(bào)錯(cuò),訪問http://localhost:3000,出現(xiàn)下圖,則項(xiàng)目創(chuàng)建完成
三、配合Axios解決SEO
1、打開index.vue,為了更清洗,保留模板內(nèi)容如下
注意:此處的section標(biāo)簽和container一定要留著不然有的內(nèi)容會(huì)渲染不出來。
可能大家已經(jīng)注意到此處有個(gè)api.js,我的所有接口以及Axios的配置都在這里面,提供api的統(tǒng)一配置,重點(diǎn)就在這兩個(gè)文件。
1️⃣、index.vue的腳本中的asyncData,該配置為頁面渲染之前調(diào)用,渲染頁面時(shí)候可以用返回的數(shù)據(jù)進(jìn)行渲染
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可以在控制臺(tái)輸出返回結(jié)果。頁面渲染如下
可能這個(gè)看著亂糟糟的,看源碼
此時(shí)頁面源碼已可以查看到服務(wù)端返回的數(shù)據(jù),至此,SSR問題已OK
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vant-list組件觸發(fā)多次onload事件導(dǎo)致數(shù)據(jù)亂序的解決方案
這篇文章主要介紹了vant-list組件觸發(fā)多次onload事件導(dǎo)致數(shù)據(jù)亂序的解決方案2023-01-01vue3?setup語法糖之組件傳參(defineProps、defineEmits、defineExpose)示例詳
defineProps?和?defineEmits?都是只能在?<script?setup>?中使用的編譯器宏,他們不需要導(dǎo)入,且會(huì)隨著?<script?setup>?的處理過程一同被編譯掉,這篇文章主要介紹了vue3?setup語法糖之組件傳參(defineProps、defineEmits、defineExpose)示例詳解,需要的朋友可以參考下2023-01-01el-table-column疊加el-popover使用示例小結(jié)
el-table-column有一列展示多個(gè)tag信息,實(shí)現(xiàn)點(diǎn)擊tag展示tag信息以及tag對(duì)應(yīng)的詳細(xì)信息,本文通過示例代碼介紹el-table-column疊加el-popover使用示例小結(jié),感興趣的朋友跟隨小編一起看看吧2024-04-04vue自定義插件封裝,實(shí)現(xiàn)簡易的elementUi的Message和MessageBox的示例
這篇文章主要介紹了vue自定義插件封裝,實(shí)現(xiàn)簡易的elementUi的Message和MessageBox的示例,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-11-11實(shí)例分析vue循環(huán)列表動(dòng)態(tài)數(shù)據(jù)的處理方法
本篇文章給大家詳細(xì)分享了關(guān)于vue循環(huán)列表動(dòng)態(tài)數(shù)據(jù)的處理方法以及相關(guān)知識(shí)點(diǎn)內(nèi)容,有需要的朋友們參考下。2018-09-09vue3中的elementPlus全局組件中文轉(zhuǎn)換方式
這篇文章主要介紹了vue3中的elementPlus全局組件中文轉(zhuǎn)換方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07vue對(duì)象復(fù)制方式(深拷貝,多層對(duì)象拷貝方式在后面)
這篇文章主要介紹了vue對(duì)象復(fù)制方式(深拷貝,多層對(duì)象拷貝方式在后面),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09