Vue+Django 登入測試

阿新 • • 發佈：2020-12-22

Vue+Django 登入測試

1.Dajngo後端搭建

1.1 建立專案和APP

'''1.建立專案和APP'''
django-admin startproject BookManage # 建立專案
python manage.py startapp books # 建立APP

'''2.在settings中註冊books模型'''
INSTALLED_APPS = [
	'books.apps.BooksConfig'
]
# 注：pycharm無法聯想，需要把apps資料夾設定為源根
'''3.urls.py中新增路由'''
urlpatterns = [
	path('books/', include('books.urls')),
]
'''4.books/urls.py中新增子路由'''
from django.urls import path
urlpatterns = [

]

1.2配置跨域

首先瀏覽器安全策略限制js ajax跨域訪問伺服器
如果伺服器返回的頭部資訊中有當前域:

// 允許 http://localhost:8080 這個網站開啟的頁面中的js訪問我
Access-Control-Allow-Origin: http://localhost:8080
// 允許攜帶cookie訪問我
Access-Control-Allow-Credentials: true

那麼, 瀏覽器可以讓js 請求該伺服器

1. 安裝包
pip install django-cors-headers


2. 註冊應用
INSTALLED_APPS = [
...
        # 新增 django-cors-headers 使其可以進行 cors 跨域
        'corsheaders' 
]


3. 新增中介軟體
MIDDLEWARE = [
# 放在中介軟體第一個
		'corsheaders.middleware.CorsMiddleware',
...
]


4. 設定 CORS跨域請求白名單設定
CORS_ORIGIN_WHITELIST = (
'http://127.0.0.1:8080',
'http://localhost:8080',
)
CORS_ALLOW_CREDENTIALS = True # 允許攜帶cookie
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True

1.3登入介面

urls.py 中配置路由

from django.contrib import admin
from django.urls import path, include
from books.views import login

urlpatterns = [
    path('login/', login),
]

app/views.py 中寫一個login檢視函式

from django.http import JsonResponse
import json


def login(request):
    body_json = request.body.decode()
    body_dict = json.loads(body_json)
    username = body_dict.get('username')
    password = body_dict.get('password')
    if not all([username, password]):
        resp = {
            "code": 4005,
            "msg": '引數不全'
        }
        return JsonResponse(resp)
    if username == 'xiaochao' and password == 'zxcvbnm':
        data = {
            "code": 1000,
            "msg": '登入成功',
            "data": {
                "id": 1,
                "name": '小朝',
                "age": 20
            }
        }
        resp = JsonResponse(data)
        return resp
    else:
        data = {
            "code": 999,
            "msg": '使用者名稱密碼不正確'
        }
        resp = JsonResponse(data)
        return resp

3.測試介面

http://127.0.0.1:8000/login/

{
"username":"xiaochao",
"password":"zxcvbnm"

2.建立一個Login.vue頁面

2.1 寫頁面 views/Login.vue

<template>
  <div>
    測試axios-{{title}}{{formdata}}
    <p>
      <label>使用者名稱：</label>
      <input v-model="formdata.name">
    </p>
    <p>
      <label>密碼：</label>
      <input v-model="formdata.pwd">
    </p>
    <p>
      <button @click="requetLogin">登入</button>
    </p>
  </div>
</template>
<script>
    import {login} from '@/http/apis'; // @符號指的是src路徑
    export default {
        // vue頁面中雙向繫結資料
        data() {
            return {
                title: '測試axios',
                formdata: {
                    name: 'xiaochao',
                    pwd: 'zxcvbnm'
                }
            }
        },
        // vue生命週期中掛在的函式
        mounted() {
        },
        methods: {
            requetLogin() {
                // 獲取小節的內容
                let data = this.formdata
                login(data).then((resp) => {
                    // resp: django後端返回的資料
                    console.log(resp);
                }).catch((err) => {
                    console.log(err);
                });
            },
        }
    }
</script>
<style scoped>
</style>

2.2src/router/index.js 中配置vue路由

/* eslint-disable */
// 第一步：例項化axios物件，簡單封裝
const axios = require('axios'); // 生成一個axios例項
axios.defaults.baseURL = 'http://127.0.0.1:8000'; // 設定請求後端的URL地址
// axios.defaults.baseURL = 'http://192.168.56.100:8888'; // 設定請求後端的URL地址
axios.defaults.timeout = 10000; // axios請求超時時間
axios.defaults.withCredentials = true;
axios.defaults.headers['Content-Type'] = 'application/json'; // axios傳送資料時使用json格式
axios.defaults.transformRequest = data => JSON.stringify(data); // 傳送資料前進行json格式化
// 第二：設定攔截器
/**
 * 請求攔截器(當前端傳送請求給後端前進行攔截)
 * 例1：請求攔截器獲取token設定到axios請求頭中，所有請求介面都具有這個功能
 * 例2：到使用者訪問某一個頁面，但是使用者沒有登入，前端頁面自動跳轉 /login/ 頁面
 */
axios.interceptors.request.use(config => {
// 從localStorage中獲取token
// let token = localStorage.getItem('token');
// 如果有token, 就把token設定到請求頭中Authorization欄位中
// token && (config.headers.Authorization = token);
  return config;
}, error => {
  return Promise.reject(error);
});
/**
 * 響應攔截器（當後端返回資料的時候進行攔截）
 * 例1：當後端返回狀態碼是401/403時，跳轉到 /login/ 頁面
 */
axios.interceptors.response.use(response => {
// 當響應碼是 2xx 的情況, 進入這裡
// debugger
  return response.data;
}, error => {
// 當響應碼不是 2xx 的情況, 進入這裡
// debugger
  return error
});

/**
 * get方法，對應get請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的引數]
 */
export function get(url, params, headers) {
  return new Promise((resolve, reject) => {
    // debugger
    axios.get(url, {params, headers}).then(res => {
      resolve(res)
    }).catch(err => {
      reject(err)
    })
  })
}

// 第三：根據上面分裝好的axios物件，封裝 get、post、put、delete請求
/**
 * post方法，對應post請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的引數]
 **/
export function post(url, params, headers) {
  return new Promise((resolve, reject) => {
    axios.post(url, params, headers).then((res) => {
      resolve(res)
    }).catch((err) => {
// debugger
      reject(err)
    })
  })
}
export default axios;

2.3src\http\apis.js 中配置後端介面呼叫請求

// 使用者登入
export const login = (params, headers) => post("/login/", params, headers)

2.4router/index.js 配置路由

import Vue from 'vue'
import Router from 'vue-router'
import Login from "../views/Login";

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/login', name: 'Login', component: Login},
  ]
})