1、密码加密
1.1、第一种:自己封装加密规则
1.2、第二种:使用Django自带的
2、登录,校验密码(密码加密使用Django自带的)
视图:
def login(request):
def mine(request):
访问
下面是数据库里的内容(注册时传入的)
3、个人中心搭建
mine.html
{% extends 'base_main.html' %}
{% load static %}
{% block ext_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'axf/main/css/mine.css' %}">
{% endblock %}
{% block content %}
<div id="mine">
<div class="fixed">
<span>
<span class="glyphicon glyphicon-user"></span>
</span>
<p>未登录</p>
<P>
<span class="glyphicon glyphicon-fire"></span>
<span>等级</span>
</P>
<div id="regis"></div>
<P>
<span class="glyphicon glyphicon-heart"></span>
<span>商品收藏</span>
</P>
</div>
<div class="mine">
<p>
<span>全部订单</span>
<a href="#">全部订单></a>
</p>
<nav id="nav">
<ul>
<li><dl><dt><span class="glyphicon glyphicon-usd"></span></dt>
<dd>待付款</dd></dl></li>
<li><dl><dt><span class="glyphicon glyphicon-envelope"></span></dt>
<dd>待收货</dd></dl></li>
<li><dl><dt><span class="glyphicon glyphicon-pencil"></span></dt>
<dd>待评价</dd></dl></li>
<li><dl><dt><span class="glyphicon glyphicon-retweet"></span></dt>
<dd>退款/售后</dd></dl></li>
</ul>
</nav>
<menu><ul>
<li><dl>
<dt><span class="glyphicon glyphicon-bullhorn"></span></dt>
<dd>积分商城</dd>
</dl></li>
<li><dl>
<dt><span class="glyphicon glyphicon-credit-card"></span></dt>
<dd>优惠劵</dd>
</dl></li>
<li><dl>
<dt><span class="glyphicon glyphicon-import"></span></dt>
<dd>售后地址</dd>
</dl></li>
<li><dl>
<dt><span class="glyphicon glyphicon-phone-alt"></span></dt>
<dd>联系客服</dd>
</dl></li>
<li><dl>
<dt><span class="glyphicon glyphicon-asterisk"></span></dt>
<dd>关于我们</dd>
</dl></li>
</ul>
</menu>
<p><a href="#">退出</a></p>
</div>
</div>
{% endblock %}
mine.css
/*底部图标和文字*/
footer .mine_icon span {
background: url(/static/img/mine_selected.png) no-repeat;
background-size: 0.513889rem;
}
footer .mine_icon dd {
color: orange;
}
/*内容容器*/
#mine {
width: 100%;
height: 100%;
position: absolute;
z-index: +10;
background: whitesmoke;
overflow: hidden;
padding-bottom: 1.5rem;
padding-top: 4rem;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
height: 4rem;
background: pink;
padding-top: 0.5rem;
}
.fixed > span {
display: block;
width: 2rem;
height: 2rem;
float: left;
margin: 0 0.3rem 0;
font-size: 1.5rem;
color: black;
background: white;
text-align: center;
border-radius: 50%;
line-height: 1.8rem;
}
.fixed p {
margin-bottom: 0.5rem;
font-size: 0.5rem;
color: white;
}
.fixed p span:first-child {
color: black;
}
.fixed p span:last-child {
color: red;
display: inline-block;
text-indent: 0.3rem;
}
#regis {
position: absolute;
right: 0.3rem;
top: 1.3rem;
color: white;
font-size: 1rem;
}
.fixed p:last-child {
background: #f0e000;
width: 100%;
position: absolute;
text-align: center;
bottom: 0;
margin-bottom: 0;
font-size: 0.4rem;
line-height: 0.5rem;
/*height: 0.2rem;*/
}
.fixed p:last-child span {
margin: 0.2rem 0;
}
.fixed p:last-child span:first-child {
color: red;
}
.fixed p:last-child span:last-child {
color: white;
}
/*我的中的各种入口*/
.mine {
width: 100%;
height: 100rem;
overflow: auto;
padding-bottom: 1.5rem;
font-size: 0.4rem;
}
.mine p {
line-height: 1.5rem;
padding: 0 0.3rem;
background: white;
border-bottom: 0.04rem solid lightyellow;
}
.mine p a {
color: grey;
float: right;
}
.mine #nav, .mine menu {
padding: 0.5rem 0 0.3rem;
margin-bottom: 0.4rem;
background: white;
}
.mine #nav ul, .mine menu ul {
display: flex;
justify-content: space-around;
}
.mine #nav ul li dl, .mine menu ul li dl {
text-align: center;
}
.mine #nav ul li dl dt, .mine menu ul li dl dt {
width: 100%;
line-height: 1rem;
}
.mine #nav ul li dl dt span, .mine menu ul li dl dt span{
font-size: 0.5rem;
}
.mine menu ul{
flex-wrap:wrap ;
}
.mine menu ul li{
width: 25%;
}
.mine menu ul li:last-child{
width: 100%;
}
.mine menu ul li:last-child dl{
width: 25%;
}
.mine p:last-child > a{
line-height:1.5rem ;
text-align: center;
width: 100%;
display: block ;
float: none;
}
4、检查当前登录状态
App/views.py
templates/main/mine.html
5、登录状态处理
在AXF01的settings里面拼接static/uploads头像路径
从数据库读取并传递到html
App/views.py
templates/main/mine.html
此时mine.html里的完整代码如下:
{% extends 'base_main.html' %}
{% load static %}
{% block ext_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'axf/main/css/mine.css' %}">
{% endblock %}
{% block content %}
<div id="mine">
<div class="fixed">
<span>
{% if is_login %}
<img class="u_icon" src="{{ icon }}" alt="{{ username }}">
{% else %}
<span class="glyphicon glyphicon-user"></span>
{% endif %}
</span>
{% if is_login %}
<p>{{ username }}</p>
{% else %}
<p>未登录</p>
{% endif %}
<P>
<span class="glyphicon glyphicon-fire"></span>
<span>等级</span>
</P>
{% if not is_login %}
<div id="regis">注册</div>
{% endif %}
<P>
<span class="glyphicon glyphicon-heart"></span>
<span>商品收藏</span>
</P>
</div>
<div class="mine">
<p>
<span>全部订单</span>
<a href="#">全部订单></a>
</p>
<nav id="nav">
<ul>
<li>
<dl>
<dt><span class="glyphicon glyphicon-usd"></span></dt>
<dd>待付款</dd>
</dl>
</li>
<li>
<dl>
<dt><span class="glyphicon glyphicon-envelope"></span></dt>
<dd>待收货</dd>
</dl>
</li>
<li>
<dl>
<dt><span class="glyphicon glyphicon-pencil"></span></dt>
<dd>待评价</dd>
</dl>
</li>
<li>
<dl>
<dt><span class="glyphicon glyphicon-retweet"></span></dt>
<dd>退款/售后</dd>
</dl>
</li>
</ul>
</nav>
<menu>
<ul>
<li>
<dl>
<dt><span class="glyphicon glyphicon-bullhorn"></span></dt>
<dd>积分商城</dd>
</dl>
</li>
<li>
<dl>
<dt><span class="glyphicon glyphicon-credit-card"></span></dt>
<dd>优惠劵</dd>
</dl>
</li>
<li>
<dl>
<dt><span class="glyphicon glyphicon-import"></span></dt>
<dd>售后地址</dd>
</dl>
</li>
<li>
<dl>
<dt><span class="glyphicon glyphicon-phone-alt"></span></dt>
<dd>联系客服</dd>
</dl>
</li>
<li>
<dl>
<dt><span class="glyphicon glyphicon-asterisk"></span></dt>
<dd>关于我们</dd>
</dl>
</li>
</ul>
</menu>
{% if is_login %}
<p><a href="#">退出</a></p>
{% endif %}
</div>
</div>
{% endblock %}
6、退出当前登录
路由:
视图:
mine.html
访问:
退出前
退出后
7、登录注册点击事件
mine.html
新建static/axf/main/js/mine.js
$(function () {
$("#not_login").click(function () {
window.open('/axf/login/',target="_self");
})
$("#regis").click(function () {
window.open('/axf/register/', target = "_self");
})
})