python web（bottle框架）知行合一之-简单知识付费平台-”全栈“实践(20)----前端请求后端的axios简单封装

PS：笔记只是为了更好表达我怎么语言表述，有些时候可能难免废话一推！
因知识有限, 如有错误, 欢迎指正！

背景

在前几节中我们已经把前端课程列表页面给展示出来，但是展示的数据是写死的在前端内的，没有经过我们的后端进行获取，这一节我们就需要实现就是要从外面的后端接口API中获取到我们的课程列表数据进行展示出来！

步骤：

1：前端封装axios请求
2：前端请求相关API接口
3：相关数据的渲染绑定处理

解析

1：关于axios的简单封装：
我们在src/lib下新建一个http.js的文件

image.png

http.js内容为：

import axios from 'axios'
let userAgentInfo = navigator.userAgent
let isiOS = !!userAgentInfo.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端

let HOST = 'http://127.0.0.1:8188' //默认是写在了index.html中，不过一般不会写在那

let http = axios.create({
  baseURL: HOST + '/api/',
  timeout: 10000,
  headers: {
    'Accept': 'application/json',
    // 'Authorization': 'Bearer ' + TOKEN,
    // 'InUrl': INURL,
    'IsIos': isiOS
  }
})
export default {
  get (url) {
    return new Promise((resolve, reject) => {
      http.get(url).then(res => {
        resolve(res.data)
      }).catch(error => {
        if (error.response) {
          resolve(error.response.data)
        } else {
          reject(error)
        }
      })
    })
  },
  post (url, params) {
    return new Promise((resolve, reject) => {
      http.post(url, params).then(res => {
        resolve(res.data)
      }).catch(error => {
        if (error.response) {
          resolve(error.response.data)
        } else {
          reject(error)
        }
      })
    })
  }
}

注意事项：
HOST：修改为我们后端接口，因为我们现在还没有正式在正式环境上进行部署，都是基于本地的调试，所以需要写本地调试的HOST！

let HOST = 'http://127.0.0.1:8188' //默认是写在了index.html中，不过一般不会写在那

关于'Authorization': 'Bearer ' + TOKEN,
因为我们这里暂时还没有用到相关JWT进行认证处理，所以暂时不需要，后续如果增加了相关JWT认证机制则可以考虑加上这个头部信息。

2：在main.js中引入，并注册为全局对象

image.png

3：在外面的课程列表组件里面进行调用接口使用

image.png

对应上postman接口：

image.png

4：查看前端效果：
出现了错误：

xhr.js?ec6c:178 OPTIONS http://127.0.0.1:8188/api/v1/course/get/?page_num=1 405 (Method Not Allowed)
dispatchXhrRequest @ xhr.js?ec6c:178
xhrAdapter @ xhr.js?ec6c:12
dispatchRequest @ dispatchRequest.js?c4bb:59
Promise.then (async)
request @ Axios.js?5e65:51
Axios.(anonymous function) @ Axios.js?5e65:61
wrap @ bind.js?24ff:9
(anonymous) @ http.js?3d88:20
F @ _export.js?90cd:36
get @ http.js?3d88:19
getData @ course.vue?8c89:114
mounted @ course.vue?8c89:75
callHook @ vue.esm.js?efeb:2921
insert @ vue.esm.js?efeb:4158
invokeInsertHook @ vue.esm.js?efeb:5960
patch @ vue.esm.js?efeb:6179
Vue._update @ vue.esm.js?efeb:2670
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
run @ vue.esm.js?efeb:3219
flushSchedulerQueue @ vue.esm.js?efeb:2981
(anonymous) @ vue.esm.js?efeb:1837
flushCallbacks @ vue.esm.js?efeb:1758
Promise.then (async)
microTimerFunc @ vue.esm.js?efeb:1806
nextTick @ vue.esm.js?efeb:1850
queueWatcher @ vue.esm.js?efeb:3068
update @ vue.esm.js?efeb:3209
notify @ vue.esm.js?efeb:697
reactiveSetter @ vue.esm.js?efeb:1014
(anonymous) @ vue-router.esm.js?fe87:2508
(anonymous) @ vue-router.esm.js?fe87:2507
updateRoute @ vue-router.esm.js?fe87:1997
(anonymous) @ vue-router.esm.js?fe87:1875
(anonymous) @ vue-router.esm.js?fe87:1984
step @ vue-router.esm.js?fe87:1714
step @ vue-router.esm.js?fe87:1721
step @ vue-router.esm.js?fe87:1721
runQueue @ vue-router.esm.js?fe87:1725
(anonymous) @ vue-router.esm.js?fe87:1979
step @ vue-router.esm.js?fe87:1714
(anonymous) @ vue-router.esm.js?fe87:1718
(anonymous) @ vue-router.esm.js?fe87:1964
(anonymous) @ vue-router.esm.js?fe87:1757
(anonymous) @ vue-router.esm.js?fe87:1833
(anonymous) @ index.js?3672:28
Promise.then (async)
Course @ index.js?3672:28
(anonymous) @ vue-router.esm.js?fe87:1774
(anonymous) @ vue-router.esm.js?fe87:1801
(anonymous) @ vue-router.esm.js?fe87:1801
flatMapComponents @ vue-router.esm.js?fe87:1800
(anonymous) @ vue-router.esm.js?fe87:1736
iterator @ vue-router.esm.js?fe87:1943
step @ vue-router.esm.js?fe87:1717
step @ vue-router.esm.js?fe87:1721
step @ vue-router.esm.js?fe87:1721
(anonymous) @ vue-router.esm.js?fe87:1718
(anonymous) @ vue-router.esm.js?fe87:1964
(anonymous) @ vue-navigation.esm.js?0d18:282
iterator @ vue-router.esm.js?fe87:1943
step @ vue-router.esm.js?fe87:1717
(anonymous) @ vue-router.esm.js?fe87:1718
(anonymous) @ vue-router.esm.js?fe87:1964
(anonymous) @ main.js?1c90:83
iterator @ vue-router.esm.js?fe87:1943
step @ vue-router.esm.js?fe87:1717
runQueue @ vue-router.esm.js?fe87:1725
confirmTransition @ vue-router.esm.js?fe87:1972
transitionTo @ vue-router.esm.js?fe87:1874
init @ vue-router.esm.js?fe87:2494
beforeCreate @ vue-router.esm.js?fe87:540
callHook @ vue.esm.js?efeb:2921
Vue._init @ vue.esm.js?efeb:4626
Vue @ vue.esm.js?efeb:4729
(anonymous) @ main.js?1c90:111
./src/main.js @ app.js:2403
__webpack_require__ @ app.js:708
fn @ app.js:113
0 @ app.js:2444
__webpack_require__ @ app.js:708
(anonymous) @ app.js:806
(anonymous) @ app.js:809
home?VNK=7604b808:1 Failed to load http://127.0.0.1:8188/api/v1/course/get/?page_num=1: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access. The response had HTTP status code 405.

image.png

5：关于跨域问题的解决
可以查看看：https://www.jianshu.com/p/a490a890eff9

按之前调试之后发现还是不行，跨域问题依然存在！

6：然后在跨域支持函数中调整了一下：

def allow_cross_domain(fn):
    def _enable_cors(*args, **kwargs):
        # set cross headers
        response.headers['Access-Control-Allow-Origin'] = '*'
        response.headers['Access-Control-Allow-Methods'] = 'GET,POST,PUT,OPTIONS'
        allow_headers = 'Referer, Accept, Origin, User-Agent,X-Requested-With, Content-Type, X-File-Name'
        response.headers['Access-Control-Allow-Headers'] = allow_headers
        print('打印！！request.method！', request.method)
        if request.method == 'OPTIONS':
            # actual request; reply with the actual response
            res = response.copy(cls=HTTPResponse)
            res.status = 200
            res.body = ''
            raise res
            response.close()
            return fn(*args, **kwargs)

    return _enable_cors

出现先的错误，这个错误提示说是我自定义了一个头部文件不允许？

image.png

尝试注释：

image.png

好报错问题解决了：
可惜，没有数据返回了！！！

image.png

不过看了一下 好像请求是正确的！

image.png image.png

经过日志打印查看前端其实是已经获取成功了！

xu

可能问题点就是前段页面组件渲染绑定错误！

修改相关的课程组件后：

主要修改的地方：

image.png

最终效果：

GIF.gif

---

不过上面的是使用get方式提交的请求的时候获取的参数信息的？

当我们修改到了使用POST来获取数据的时候，就又提示跨域出现问题了？
非常的奇怪！

--------------------------2018年5月4日 00:21:12-----------------

后来尝试前端请求修改：

 getData () {

        var params = new URLSearchParams();
        params.append('page_num', '4');
//        this.$http.get('v1/course/get/?page_num=3').then(
        this.$http.post('v1/course/get/',params).then(
          res => {
            this.$vux.loading.hide()


            if (res.return_code == '0000') {

              console.log('请求本地结果')
              console.log(res)

              if (this.page == 1) {
                this.kecheng_lists = res.return_data.data
                console.log(this.kecheng_lists)
                this.setState({
                  page_show: true,
                  init: true,
//                  swiper_list: res.data.swiper_list,
//                  rec_hot: res.data.rec_hot,
//                  share: res.data.share
                })
//                this.$wechat.config(res.data.wx_config)
//                this.$wechat.ready(() => {
//                  this.set_share()
//                })
              } else {

              }
            } else {
              this.setState({
                loading: false,
                load_err: true,
                load_more_tip: '加载失败，点击重试'
              })
            }
          },
          fail => {
            this.$vux.loading.hide()
          }
        )

前端关键点：

    var params = new URLSearchParams();
        params.append('page_num', '4');

且后端只需要：

@hook('before_request')
def validate():
    """
    钩子函数，处理请求路由之前需要做什么的事情
    :return:
    """

    # # 让bottle框架支持jquery ajax的RESTful风格的PUT和DELETE等请求
    # REQUEST_METHOD = request.environ.get('REQUEST_METHOD')
    # HTTP_ACCESS_CONTROL_REQUEST_METHOD = request.environ.get('HTTP_ACCESS_CONTROL_REQUEST_METHOD')
    # if REQUEST_METHOD == 'OPTIONS' and HTTP_ACCESS_CONTROL_REQUEST_METHOD:
    #     request.environ['REQUEST_METHOD'] = HTTP_ACCESS_CONTROL_REQUEST_METHOD

    # 获取当前访问的Url路径
    path_info = request.environ.get("PATH_INFO")
    # 过滤不用做任何操作的路由
    if path_info in ['/favicon.ico', '/check_err/', '/log/']:
        return ''
    # 记录客户端提交参数信息----实测是成功
    # web_helper.write_request_log(path_info)
    # response.headers['Access-Control-Allow-Origin'] = '*'
    # response.headers['Access-Control-Allow-Credentials'] = 'true'


@hook('after_request')
# @allow_cross_domain
def enable_cors():
    """
    钩子函数，处理请求路由之后需要做什么的事情
    :return:
    """
    response.headers['Access-Control-Allow-Origin'] = '*'
    response.headers['Access-Control-Allow-Credentials'] = 'true'

PS：

1. response.headers['Access-Control-Allow-Credentials'] = 'true' 可以不添加
   2.另外钩子中的

   # # 让bottle框架支持jquery ajax的RESTful风格的PUT和DELETE等请求
    # REQUEST_METHOD = request.environ.get('REQUEST_METHOD')
    # HTTP_ACCESS_CONTROL_REQUEST_METHOD = request.environ.get('HTTP_ACCESS_CONTROL_REQUEST_METHOD')
    # if REQUEST_METHOD == 'OPTIONS' and HTTP_ACCESS_CONTROL_REQUEST_METHOD:
    #     request.environ['REQUEST_METHOD'] = HTTP_ACCESS_CONTROL_REQUEST_METHOD

以上这些可以注释

——————————————————————————————
——————————————————————————————
关于之前说的get跨域提交问题：
后来发现即时我注销了上面的

def allow_cross_domain(fn):
    def _enable_cors(*args, **kwargs):
        # set cross headers
        response.headers['Access-Control-Allow-Origin'] = '*'
        response.headers['Access-Control-Allow-Methods'] = 'GET,POST,PUT,OPTIONS'
        allow_headers = 'Referer, Accept, Origin, User-Agent,X-Requested-With, Content-Type, X-File-Name'
        response.headers['Access-Control-Allow-Headers'] = allow_headers

        print('打印！！request.method！', request.method)
        if request.method == 'OPTIONS':
            # actual request; reply with the actual response
            res = response.copy(cls=HTTPResponse)
            res.status = 200
            res.body = ''
            raise res
            response.close()
            return fn(*args, **kwargs)

    return _enable_cors

也可以正常的返回。

但是和POST一样，如果我注销了：

    # response.headers['Access-Control-Allow-Origin'] = '*'
    # response.headers['Access-Control-Allow-Credentials'] = 'true'

上面这两个的话，虽然请求是成功，但是实际上数据无法正常返回！