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配置跨域

1. 首先瀏覽器安全策略限制js ajax跨域訪問服務器
2. 如果服務器返回的頭部信息中有當前域:

// 允許 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登錄接口

1. urls.py 中配置路由

• from django.contrib import admin
  from django.urls import path, include
  from books.views import login
  
  urlpatterns = [
      path('login/', login),
  ]
  
  
  

1. 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},
  ]
})

3.0用戶登錄 測試

http://localhost:8080/#/login

點擊登錄按鈕，出發請求，成功登錄，並返回django后端信息

---

以上代碼只是個人筆記整理,如有錯誤請指正,

ヾ(●´□｀●)ノ【゜+。・ｏ謝謝ｏ・。+゜】ヾ(○´□｀○)ノ各位大佬!