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

最终效果：

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：

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'

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

最后编辑于：2018.05.04 00:28:55

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,560评论 4赞 361
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,104评论 1赞 291
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,297评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,869评论 0赞 204
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,275评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,563评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,833评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,543评论 0赞 197
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,245评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,512评论 2赞 244
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,011评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,359评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,006评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,062评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,825评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,590评论 2赞 273
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,501评论 2赞 268

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

背景

步骤：

解析

推荐阅读更多精彩内容