Django商城项目笔记No.10用户部分-登录接口
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" xml: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="data: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(){
}
}
});
登录成功之后，会跳转界面，而跳转到哪个界面我们根据一个参数来决定，next：
测试
登录成功：
Django商城项目笔记No.10用户部分-登录接口的更多相关文章
- Django商城项目笔记No.9用户部分-注册接口签发JWTtoken
Django商城项目笔记No.9用户部分-注册接口签发JWTtoken 我们在验证完用户的身份后(检验用户名和密码),需要向用户签发JWT,在需要用到用户身份信息的时候,还需核验用户的JWT. 关于签 ...
- Django商城项目笔记No.8用户部分-注册接口实现
Django商城项目笔记No.8用户部分-注册接口实现 users的view.py中增加如下代码 class RegisterUserView(CreateAPIView): "" ...
- Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在
Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在 判断用户名是否存在 后端视图代码实现,在users/view.py里编写如下代码 class UsernameCount ...
- Django商城项目笔记No.6用户部分-注册接口-短信验证码实现celery异步
Django商城项目笔记No.4用户部分-注册接口-短信验证码实现celery异步 接上一篇,如何解决前后端请求跨域问题? 首先想一下,为什么图片验证码请求的也是后端的api.meiduo.site: ...
- Django商城项目笔记No.5用户部分-注册接口-短信验证码
Django商城项目笔记No.4用户部分-注册接口-短信验证码 短信验证码也保存在redis里(sms_code_15101234567) 在views中新增SMSCodeView类视图,并且写出步骤 ...
- Django商城项目笔记No.4用户部分-注册接口-图片验证码
Django商城项目笔记No.4用户部分-注册接口-图片验证码 1.首先分析注册业务接口 1.1.分析可得,至少这么几个接口 图片验证码 短信验证码 用户名是否存在 手机号是否存在 整体注册接口 图片 ...
- Django商城项目笔记No.12用户部分-QQ登录2获取QQ用户openid
Django商城项目笔记No.12用户部分-QQ登录2获取QQ用户openid 上一步获取QQ登录网址之后,测试登录之后本该跳转到这个界面 但是报错了: 新建oauth_callback.html & ...
- Django商城项目笔记No.3用户部分-用户模型类
Django商城项目笔记No.3用户部分-用户模型类 Django提供了认证系统,文档资料https://yiyibooks.cn/xx/Django_1.11.6/topics/auth/index ...
- Django商城项目笔记No.11用户部分-QQ登录1获取QQ登录网址
Django商城项目笔记No.11用户部分-QQ登录 QQ登录,亦即我们所说的第三方登录,是指用户可以不在本项目中输入密码,而直接通过第三方的验证,成功登录本项目. 若想实现QQ登录,需要成为QQ互联 ...
随机推荐
- Huffman树与编码
带权路径最小的二叉树称为最优二叉树或Huffman(哈夫曼树). Huffman树的构造 将节点的权值存入数组中,由数组开始构造Huffman树.初始化指针数组,指针指向含有权值的孤立节点. b = ...
- StreamReader 的ReadLine，Read，ReadToEnd方法
1.ReadLine() 当遇到\n \r 或者是\r\n的时候 此方法返回这前面的字符串,然后内部的指针往后移一位下次从新的地方开始读,直到遇到数据的结尾处返回null,所以经常这样使用 ...
- office online server部署和简单操作
office online server是Office Web Apps Server的升级版本,安装环境必须为 Windows Server 2012 R2 参考地址:https://technet ...
- [日常] Go语言圣经-匿名函数习题2
练习5.13: 修改crawl,使其能保存发现的页面,必要时,可以创建目录来保存这些页面.只保存来自原始域名下的页面.假设初始页面在golang.org下,就不 要保存vimeo.com下的页面. p ...
- Java-函数式编程（一）初识篇
开发者使用Java8编写复杂的集合处理算法,只需要简单的代码就能在多喝cpu上高效运行,这就是Lambda表达式的初衷. 提示:函数式编程和语言无关,它是一种思想,任何语言都可以实现函数式编程,区别只 ...
- 如何高效的使用-Notepad++
Notepad++功能比 Windows 中的 Notepad(记事本)强大,除了可以用来制作一般的纯文字说明文件,也十分适合编写计算机程序代码.Notepad++ 不仅有语法高亮度显示,也有语法折叠 ...
- 新建hadoop用户以及用户组，给予sudo权限
1.首先新建用户,adduser命令 sudo adduser hadoop passwd hadoop 输入密码之后,一路 y 确定. 2.添加用户组 在创建hadoop用户的同时也创建了hadoo ...
- HDU4289(KB11-I 最小割)
Control Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Sub ...
- Codeforces731C(SummerTrainingDay06-M 并查集)
C. Socks time limit per test:2 seconds memory limit per test:256 megabytes input:standard input outp ...
- Vue知识点（面试常见点）
v-bind和v-model的区别 1.v-bind用来绑定数据和属性以及表达式,缩写为':' 2.v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用 什么是 mvvm? MVV ...