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

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

Talk is cheap, show me the code!

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


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

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

  • -static
  • -index.html

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

  1. [基于阿里的Node全栈之路(三)利用阿里云OSS实现前后端分离
    编辑 删除](https://yq.aliyun.com/articles/216361)
  2. 基于阿里的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,我只是偷懒。

上一篇:【Java面向对象学习】一张图搞定Java面向对象


下一篇:基于阿里的Node全栈之路(六)专有网络VPC的应用