• 使用 nuxt 开发网站 之 如何将 api 进行分离?


    最近在做一个官网,要求国际化。首先想到的是使用 nuxt vue 来开发。nuxt 文档说明很清楚,支持国际化、支持服务端渲染、支持自定义页面关键词、描述等有利于SEO 的配置。目前项目开发已经进行到一半。关键的和需要注意的地方和代码在这里记录一下,毕竟是第一次使用nuxt,希望以后在使用时看到自己的进步。

    • api 分离。虽然这个网站比较简单,每个页面都有一两个接口,完全可以不使用api分离,但是个人还是用来,可能有某种强迫症趋势着我,也许成熟后才能会学克制。分离主要代码:/api/index.js
       1 const modulesFiles = require.context("./apilist", true, /.js$/);
       2 const modules = modulesFiles.keys().reduce((modules, modulePath) => {
       3   const moduleName = modulePath.replace(/^./(.*).w+$/, "$1");
       4 
       5   const value = modulesFiles(modulePath);
       6 
       7   modules[moduleName] = value.default || value;
       8 
       9   return modules;
      10 }, {});
      11 
      12 export default modules;

      在 /api/apilis/ 文件夹下建立 页面对应的 js 文件,例如:新建首页(index.)对应的api 文件 index.js :

      export default axios => ({
          /**
           * 首页数据
           */
          index(){
              return axios.get(`/api/home`)
          },
          /**
           * 首页 - 环保数据
           */
          getReduceNumber() {
             return axios.get('/api/home_number')
          }
      })  

      就这样就ok啦!调用api时,也要注意哦:

    • 如何调用api?例如在首页index.vue 中调用,当你在 asyncData 中需要调用时: app.$api.index.index()  如果在方法中调用: this.$api.index.getReduceNumber() 

    • 为什么会有 $api ? 当然这里需要注入到 vue 实例中,name在nuxt中如何注入呢?话不多说,直接上代码:
       1 import apis from '~/api/index'
       2 // 这里ctx也可以访问到store
       3 export default (ctx, inject) => {
       4   // 注入上下文
       5   // 挂载到vue实例上面 (组件中使用:this.$api)
       6   const locale = ctx.params.lang || ctx.store.state.locale || ctx.app.i18n.fallbackLocale
       7   ctx.$axios.setBaseURL(`your_domain/${locale}`)
       8   // console.log(process.server,ctx.$axios.defaults.baseURL)
       9   var apiObject = {};
      10   for (var i in apis) {
      11     apiObject[i] = apis[i](ctx.$axios);
      12   }
      13  
      14   //inject:注入到服务端context, vue实例, vuex中
      15   inject("api", apiObject);
      16 }
    作者:胡倩倩0903
    本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。
  • 相关阅读:
    01_垂直居中body中的应用
    C++基础知识易错点总结(2)
    辗转相除求最大公约数
    C++基础知识易错点总结(1)
    类对象的建立方式总结
    LeetCode(131)Palindrome Partitioning
    基本套接字编程(7) -- udp篇
    LeetCode(124) Binary Tree Maximum Path Sum
    LeetCode(115) Distinct Subsequences
    LeetCode(97) Interleaving String
  • 原文地址:https://www.cnblogs.com/kitty-blog/p/14411170.html
Copyright © 2020-2023  润新知