Django商城項目筆記No.10用戶部分-登錄接口
阿新 • • 發佈：2018-10-06
.post users response rev del utils 存儲 ror 代碼 
Django商城項目筆記No.10用戶部分-登錄接口
添加url路由
接下來第二步，增加返回內容：
增加結果如下：
配置：上邊的方法定義了返回的內容都有哪些，那這個方法jwt還不知道，需要配置：
修改認證後端實現多帳號登錄
在users/utils.py中編寫
前端login.html代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"View Codexml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>美多商城-登錄</title> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/main.css"> <script type="text/javascript" src="js/host.js"></script> <script type="text/javascript" src="js/vue-2.5.16.js"></script> <script type="text/javascript" src="js/axios-0.18.0.min.js"></script> </head> <body> <div class="login_top clearfix"> <a href="index.html"class="login_logo"><img src="images/logo02.png"></a> </div> <div class="login_form_bg" id=‘app‘> <div class="login_form_wrap clearfix"> <div class="login_banner fl"></div> <div class="slogan fl">商品美 · 種類多 · 歡迎光臨</div> <div class="login_form fr"> <div class="login_title clearfix"> <a href="javascript:;" class="cur">賬戶登錄</a> </div> <div class="form_con"> <div class="form_input cur"> <form id="login-form" @submit.prevent="on_submit"> <input type="text" v-model="username" @blur="check_username" name="" class="name_input" placeholder="請輸入用戶名或手機號"> <div v-show="error_username" class="user_error" v-cloak>請填寫用戶名或手機號</div> <input type="password" v-model="password" @blur="check_pwd" name="pwd" class="pass_input" placeholder="請輸入密碼"> <div v-show="error_pwd" class="pwd_error" v-cloak>{{ error_pwd_message }}</div> <div class="more_input clearfix"> <input type="checkbox" v-model="remember"> <label>記住登錄</label> <a href="/find_password.html">忘記密碼</a> </div> <input type="submit" name="" value="登 錄" class="input_submit"> </form> </div> </div> <div class="third_party"> <a @click="qq_login" class="qq_login">QQ</a> <a href="#" class="weixin_login">微信</a> <a href="/register.html" class="register_btn">立即註冊</a> </div> </div> </div> </div> <div class="footer no-mp"> <div class="foot_link"> <a href="#">關於我們</a> <span>|</span> <a href="#">聯系我們</a> <span>|</span> <a href="#">招聘人才</a> <span>|</span> <a href="#">友情鏈接</a> </div> <p>CopyRight ? 2016 北京美多商業股份有限公司 All Rights Reserved</p> <p>電話：010-****888 京ICP備*******8號</p> </div> <script type="text/javascript" src="js/login.js"></script> </body> </html>
在js目錄中新建login.js
var vm = new Vue({ el: ‘#app‘, data: { host: host, error_username: false, error_pwd: false, error_pwd_message: ‘請填寫密碼‘, username: ‘‘, password: ‘‘, remember: false }, methods: { // 獲取url路徑參數 get_query_string: function(name){ var reg = new RegExp(‘(^|&)‘ + name + ‘=([^&]*)(&|$)‘, ‘i‘); var r = window.location.search.substr(1).match(reg); if (r != null) { return decodeURI(r[2]); } return null; }, // 檢查數據 check_username: function(){ if (!this.username) { this.error_username = true; } else { this.error_username = false; } }, check_pwd: function(){ if (!this.password) { this.error_pwd_message = ‘請填寫密碼‘; this.error_pwd = true; } else { this.error_pwd = false; } }, // 表單提交 on_submit: function(){ this.check_username(); this.check_pwd(); if (this.error_username == false && this.error_pwd == false) { axios.post(this.host+‘/authorizations/‘, { username: this.username, password: this.password }, { responseType: ‘json‘, withCredentials: true }) .then(response => { // 使用瀏覽器本地存儲保存token if (this.remember) { // 記住登錄 sessionStorage.clear(); localStorage.token = response.data.token; localStorage.user_id = response.data.user_id; localStorage.username = response.data.username; } else { // 未記住登錄 localStorage.clear(); sessionStorage.token = response.data.token; sessionStorage.user_id = response.data.user_id; sessionStorage.username = response.data.username; } // 跳轉頁面 var return_url = this.get_query_string(‘next‘); if (!return_url) { return_url = ‘/index.html‘; } location.href = return_url; }) .catch(error => { if (error.response.status == 400) { this.error_pwd_message = ‘用戶名或密碼錯誤‘; } else { this.error_pwd_message = ‘服務器錯誤‘; } this.error_pwd = true; }) } }, // qq登錄 qq_login: function(){ } } });View Code
登錄成功之後，會跳轉界面，而跳轉到哪個界面我們根據一個參數來決定，next：
測試
登錄成功：
Django商城項目筆記No.10用戶部分-登錄接口