DDR爱好者之家

nuxt+axios解决前后端分离SSR的示例代码
站长资源 2025/1/12 佚名
58 1538
DDR爱好者之家 Design By 杰米

"color: #ff0000">一、准备工作

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"htmlcode"> 

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

源码下载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米