基于阿里的Node全栈之路（五）前后端分离进阶-接口篇

2022-06-25 04:42:44

上一篇文章我就简单的贴了下代码，放出来不到一天就破千了，这让我非常的意外，也很开心;) 我会好好的把上一篇的代码注释补一下的。然后决定再放一些我的代码和理解，俗话说：

Talk is cheap, show me the code！

还记得我的架构中，只有前端静态代码，同时所有的请求是经过跨域发到api上的，那么这次，我们就来好好的分析下request接口的实现和我自己尝试的一种的开发流程——api文档（新接口文档）

先贴上我之前的前后端分离的方式，再简单的介绍下，看过前面文章的同学直接跳过哈！
看这个图，我现在对web端的开发，因为是用vue写的，vue本身会把代码打包成静态文件：

-static
-index.html

这样意味着，用了vue或者类似框架的时候，我们会抛弃了以前的一个东西叫动态web语言，具体点就是说像asp、jsp等，在客户访问前会根据一些条件渲染出对应的网页出来，而这正是vue这类型的框架要实现的功能，嗯，可以说是冲突了。我当时还会习惯性的部署docker容器来存放这些静态资源，然后启动一个node express来监听接口，但后来仔细想想，这不是像OSS这些要做的事情吗！？所以，就有了前面的两篇文章：

[基于阿里的Node全栈之路（三）利用阿里云OSS实现前后端分离
编辑删除](https://yq.aliyun.com/articles/216361)
基于阿里的Node全栈之路（四）前后端分离进阶-自动上传前端代码到OSS

嗯嗯，这也是我前后端分离的第一步。

好，上面都是重新温故下我之前的文章，因为我发现看我前面几篇文章好像并没有想象中的那么容易阅读，所以再次重温一遍。

敲黑板！敲黑板！

这次，我分享的是我对api请求接口的封装，可能很多同学会说，这有什么难的，要用请求的时候，调用一下ajax什么的就可以了。emmm...，是可以的，不过那样的代码对于非常追求代码美感的我来说，是灰常难忍受的！

既然我们是前后端分离，那么我们应该规对接的接口的结构，对吧？我在项目中，强制规定所有的api都应该长这样

const api_host = `https://api.${你的域名}\${你的项目名\${api_version}`;//https://api.xxxxx.com/blog/v1
//api遵循restful设计，这里规定api返回结构
const response = {
  code:Number,
  /*
   * 小于0是错误，这里前端不需要关心错误是什么，
   * 等于0是没有权限
   * 大于0表示成功
   * 我这么设计是由原因的，欢迎大家来一起探讨
   */
  msg:String,//当然，你也可以叫errMsg，message什么的，随便你啦
  /*
   * 在我这里，默认只有错误的时候，才会出现
   */
  data:Object,
  /* 
   * 后端返回对象，我们一直说前后端语言一样，有很多好处，呐，这里就是!
   * 这样写，基本能保证后端传给前端是什么，前端收到的就是什么
   */
};

下面放上我的代码，然后我再详细解析下：

/* eslint-disable */
import axios from 'axios';

const MyPlugin = {};
axios.defaults.withCredentials = true;//唯有加上这句话，才能够支持跨域请求，如果实在不明白的可以留言

MyPlugin.install = function install(Vue, api_host) {
  //构建axios请求基础
  const request = axios.create({
    baseURL: api_host,//api host：顾名思义就是api的请求基础地质
    timeout: 30000// 超时时间
  });
  //请求方法的构建,type为：get、post、delete等等
  const createRequestFuc = (type) => {
    return function (resource, params, showError = true) {
      //返回请求的Promise的对象
      return new Promise((resolve, reject) => {
        this.$Loading.start();//请求发起时，show loading，一般的框架都会有全局调用的loading方法。
        params = type === 'get' ? { params } : params;//axios里get方法和其它方法接收参数的方式不一致,这里做个统一
        request[type](resource, params)//调用request
          .then(res => {
            if (res && res.data && res.data.code > 0) {//判断请求返回结果，code为判断值，这里可以替换成你自己的框架定义
              resolve(res.data.data);//返回结果
            } else {
              showError && this.$Message.error(res.data.msg);//判断是否调用自带全局waring或error
              reject(res.data.msg);//无论上面是否执行，都应该reject，阻止代码继续执行
            }
            this.$Loading.finish();//结束loading
          })
          .catch((err) => {
            this.$Message.error('请求失败！');//这种情况一般是请求失败，报错方式可以自己更改
            this.$Loading.finish();//结束loading
            reject(err);//无论上面是否执行，都应该reject，阻止代码继续执行
          });
          //特别注意：vue install方式安装的插件，this就是vue component对象。
      });
    }
  }
  //构建请求
  Vue.prototype.$get = createRequestFuc('get');
  Vue.prototype.$put = createRequestFuc('put');
  Vue.prototype.$post = createRequestFuc('post');
  Vue.prototype.$patch = createRequestFuc('patch');
  Vue.prototype.$delete = createRequestFuc('delete');
};
export default MyPlugin;
/* eslint-enable */

这是一个我写的插件，上篇文章讲到vue项目用webpack模板构建对吧，那么你现在写前端项目应该都是以".vue"结尾的文件，那么你只需要在main.js里面把它引用进来就可以了：

import Vue from 'vue';
import Request from '@/plugins/request';


Vue.use(Vuex);
Vue.use(Request,'https://api.xxxxx.com/v1');//这里

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App },
});
/* eslint-enable no-new */

好，到这里估计写过vue的老鸟都已经明白了，没搞懂的童鞋嘞，那就继续看下去吧!
接下来，你只需要在vue文件里面直接使用就行了，这里再贴一份简单登录代码给大家参考：

<template>
  <div class="login">
    <Input type="text" v-model="user_form.username" placeholder="phone">
    <Input type="password" v-model="user_form.password" placeholder="phone">
    <Button type="primary" @click="login">Log in</Button>
  </div>
</template>
<script>

export default {
  async created() {
    const session = await this.$get('session', {}, false);
    this.setSession(session);
  },
  data() {
    return {
      user_form: {
        phone: '',
        password: '',
      },
    };
  },
  methods: {
    async login() {
      const session = await this.$post('session', this.user_form);
      this.setSession(session);
    },
    setSession(session) {
      //这里放置像vuex这些，存放session的fangfa，当然！你也可以用vuex的mapMutations,我就是这么做的^.^
    },
  },
};
</script>

嘿嘿，上面的代码简单不。当然，你要喜欢promise回调或者yield都一样的，随便你，我这里只是想分享一种思想，因为这种方式，是可以在node里面得到广泛应用的，为了证明这点，我再贴一份我的react-native版本的request接口:

/* eslint-disable */
import axios from 'axios';
import { ShowWarnMsg } from './toast';
const api_host = 'https://api.xxxxxx.com/project_name/v1';

//构建axios请求基础
const request = axios.create({
  baseURL: api_host,//api host：顾名思义就是api的请求基础地质
  timeout: 30000// 超时时间
});
//请求方法的构建,type为：get、post、delete等等
const createRequestFuc = (type) => {
  return function (resource, params, showError = true) {
    //返回请求的Promise的对象
    return new Promise((resolve, reject) => {
      params = type === 'get' ? { params } : params;//axios里get方法和其它方法接收参数的方式不一致,这里做个统一
      request[type](resource, params)//调用request
        .then(res => {
          if (res && res.data && res.data.code > 0) {//判断请求返回结果，code为判断值，这里可以替换成你自己的框架定义
            resolve(res.data.data);//返回结果
          } else {
            showError && ShowWarnMsg(res.data.msg);//判断是否调用自带全局waring或error
            reject(res.data.msg);//无论上面是否执行，都应该reject，阻止代码继续执行
          }
        })
        .catch((err) => {
          ShowWarnMsg('请求失败！');//这种情况一般是请求失败，报错方式可以自己更改
          reject(err);//无论上面是否执行，都应该reject，阻止代码继续执行
        });
      //特别注意：vue install方式安装的插件，this就是vue component对象。
    });
  }
};
export const $get = createRequestFuc('get');
export const $put = createRequestFuc('put');
export const $post = createRequestFuc('post');
export const $patch = createRequestFuc('patch');
export const $delete = createRequestFuc('delete');

global.HTTP = {
  $get,
  $put,
  $post,
  $patch,
  $delete,
};

export default global.HTTP;
/* eslint-enable */

区别不大吧，别学我用global，我只是偷懒。

码农公寓

相关文章