參考項目:https://github.com/PanJiaChen/vue-admin-template
1.復制項目登錄頁面,和utils文件。下載依賴數據。用cnmp install XX --save安裝 node-sass ,sass,fibers,sass-loader
2.添加登錄圖標,圖標網站:https://element.eleme.cn/#/zh-CN/component/icon
參考代碼:
<i class="el-icon-s-custom"></i>
3.重新 axios方法。
4.解決跨域問題:不同的域名之間進行請求通信,會觸發跨域問題。
在當前頁面下請求其他域名的接口,同來更新當前域名的數據,然后頁面還是當前域名。跟超鏈接跳轉不是一回事。
所以vue和django會存在跨域問題,
如何解決:
安裝 django-cors-headers,在setting的 INSTALLED_APPS中添加'MIDDLEWARE_CLASSES中添加2個中間件
最后 添加上一些跨域的設置
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
'*'
)
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
)