axios

在main中导入axios

　　// 安装 axios(ajax)的命令
　　// npm install axios--save
　　// 为项目配置全局axios
　　import Axios from 'axios'
　　Vue.prototype.$ajax = Axios

 

axios的使用

        let _this = this
        this.$ajax({
            method: 'post',
            url: 'http://127.0.0.1:5000/loginAction',
            params: {
                usr: this.usr,
                ps: this.ps
            }
        }).then(function(res) {
            // this代表的是回调then这个方法的调用者(axios插件),也就是发生了this的重指向
            // 要更新页面的title变量,title属于vue实例
            // res为回调的对象,该对象的data属性就是后台返回的数据
            _this.title = res.data
        }).catch(function(err) {
            window.console.log(err)
        })

 

用pycharm启动该文件模拟后台

        from flask import Flask, request, render_template
        from flask_cors import CORS
        app = Flask(__name__)
        CORS(app, supports_credentials=True)

        @app.route('/')
        def index():
            return "<h1>主页</h1>"

        @app.route('/loginAction', methods=['GET', 'POST'])
        def test_action():
            # print(request.args)
            # print(request.form)
            # print(request.values)
            usr = request.args['usr']
            ps = request.args['ps']
            if usr != 'abc' or ps != '123':
                return 'login failed'
            return 'login success'

        if __name__ == '__main__':
            app.run()