vue先後臺交互

時間 2019-12-19

標籤 vue 後臺交互简体版

原文原文鏈接

目錄javascript

先後端使用相同的協議
接口協議

axios

配置axios來完成先後臺ajax請求html

安裝 axios(ajax)的命令
cnpm install axios
// 爲項目配置全局axios，配置環境
import Axios from 'axios'
//Vue.prototype.$ajax = Axios;//命名方式1
Vue.prototype.$axios = Axios;//命名方式2，vue框架常使用

export default {
        name: "Cars",
        components: {
            Car
        },
        data() {
            return {
                cars_data: []
            }
        },
        created() {
            // 組件一加載，就從後臺請求數據

            // 一、jq完成ajax請求,通常不使用
            /*
            $.ajax({
                url: this.$settings.base_url + '/cars/',
                type: 'get',
                success(response) {
                    console.log(response)
                }
            });
            */

           
        }
    }

使用前端

export default {
        name: "Cars",
        components: {
            Car
        },
        data() {
            return {
                cars_data: []
            }
        },
        created() {
// 二、vue有專門用來完成ajax請求的插件：axios
            this.$ajax({
                url: this.$settings.base_url + '/cars/',
                method: 'get',
                params: {
                    // url拼接的數據
                },
                data: {
                    // 請求攜帶的數據報數據
                }
            }).then((response) => {//成功
                console.log(response);
                this.cars_data = response.data;
            }).catch(error => {//失敗
                console.log(error)
            })

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()

django後臺處理跨域（cors）問題

安裝插件

在diango環境下安裝vue

>: pip install django-cors-headers

插件參考地址：https://github.com/ottoyiu/django-cors-headers/

項目配置：settings.py

# 註冊app
INSTALLED_APPS = [
    ...
    'corsheaders'
]

# 添加中間件
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware'
]

# 容許跨域源
CORS_ORIGIN_ALLOW_ALL = True

配置完成後能夠進行交互java

後端返回數據的時候須要注意

通常返回JsonResponse數據類型python

from django.http import JsonResponseios

注意：JsonResponse返回的是字典類型，若是是其餘的可迭代類型，選擇用下面的形式返回git

cars_data = [
        {
            'name': '瑪莎拉蒂',
            'price': 12.5
        },
        {
            'name': '勞斯萊斯',
            'price': 32
        }
    ]
return JsonResponse(data=cars_data, safe=False, json_dumps_params={'ensure_ascii': False})

中間件問題

先後端分離後csrf這個中間件便不會被使用，因此須要進行註釋github

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware',
]

登錄的先後端分離

django後端

def login(request, *args, **kwargs):
    if request.method == 'GET':
        print(request.GET)
        print(request.POST)
        print(request.body)
    elif  request.method == 'POST':
        print(request.GET)
        print(request.POST)
        print(request.body)
        # usr必須是Bob，pwd必須是123
        import json
        dic = json.loads(request.body)
        usr = dic.get('usr')
        pwd = dic.get('pwd')
        if usr == 'Bob' and pwd == '123':
            return JsonResponse({
                'msg': '登陸成功',
                'result': 'bob.123.xyz',
            })
        return JsonResponse({
            'msg': '登陸失敗',
            'result': ''
        })

vue前端

<template>
    <div class="login">
        <el-row>
            <el-col :span="12" :offset="6">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="帳號">
                        <el-input type="text" v-model="form.usr"></el-input>
                    </el-form-item>
                    <el-form-item label="密碼">
                        <el-input type="password" v-model="form.pwd"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">登陸</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                form: {
                    usr: '',
                    pwd: ''
                }
            }
        },
        methods: {
            onSubmit() {
                if (!this.form) {
                    return;
                }

                this.$ajax({
                    url: this.$settings.base_url + '/login/',
                    method: 'post',
                    params: {  // url拼接參數
                        p1: '123'
                    },
                    // data: {  // 數據包參數
                    //     d1: 'xyz'
                    // }
                    data: this.form
                }).then(response => {
                    this.$message({
                        message: response.data.msg,
                        type: 'warning'
                    });

                    // 有響應的登陸認證碼，存儲在cookie中
                    // 設置：set(key, val, exp)
                    // 取值：get(key)
                    // 刪除：remove(key)
                    let token =  response.data.result;
                    if (token) {
                        // this.$cookies.set('token', token, '2d');
                        // this.$cookies.set('token', token, 2 * 24 * 3600 * 365);
                        // console.log(this.$cookies.get('token'));
                        // this.$cookies.remove('token');
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .el-form {
        height: 296px;
        border: 2px solid darkcyan;
        border-radius: 10px;
        margin: calc(50vh - 200px) 0;
        padding: 30px;
    }
</style>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。