Django 12 shopping mall project (1-11 knowledge Summary)

1, Django framework for understanding

1.1, the browser sends a request to reach django's URL.

1.2, URL jump to the address assignment View view.

1.3, and passed through views.py display data.

1.3, understand mtv model

1.4, GET and POST

2, the directory structure explained

3, basic html class, as well as the definition of inheritance

4、home

The view function, mainly to read information from the database and transmitted to the distal end.

Model, defines four main data tables. Have img, name, trackid, so let them inherit from Main class

html

4.1, the top of the carousel achieve

html



js

5、market

View

html

5.1, the front end of a data transfer by a GET request

routing:

注：这里用的 re_path（）是django2的用法，django1直接用url（）即可

view:

5.2, on the left navigation bar to achieve

html

css

/*左边的导航*/
aside {
    width: 2.5rem;
    float: left;
    position: relative;
    background: #fafafa;
    overflow: auto;
    height: 100%;
}

aside ul {
    background: #fafafa;

}

aside ul li {
    list-style: none;
    text-align: center;
    border-bottom: 0.04rem solid #e0e0e0;
    line-height: 1.35rem;
    width: 2.25rem;
    position: relative;
    z-index: +1;

}

aside ul li a {
    display: block;
    font-size: 0.35rem;
    color: grey;
    z-index: +1;
}

.yellowSlide {
    background: yellow;
    width: 0.1rem;
    height: 0.7rem;
    position: absolute;
    left: 0;
    top: 0.3rem;
    display: block;
}

view

5.3 All Categories realization

View



HTML

JS part

a = "0";

// 点击事件的绑定
$(function () {

    // 展示：全部类型，并收起：综合排序
    the_slideDown("#all_types", "#all_cer", "#sort_rule", "#sort_cer");
    // 收起：全部类型
    the_slideUp("#all_types", "#all_cer",);

    // 展示：综合排序，并收起：全部类型
    the_slideDown("#sort_rule", "#sort_cer", "#all_types", "#all_cer");
    // 收起：综合排序
    the_slideUp("#sort_rule", "#sort_cer",);

})


// the_text:当前点击的文字  the_shade:当前阴影

// 展示
function the_slideDown(the_text, the_shade, other_text, other_shade) {
    $(the_text).click(function () {
        var $the_shade = $(the_shade);

        // 先检查如果当前id已经被点击过了，就视为收起执行
        if (a === the_text) {
            $the_shade.slideUp();
            the_chevron(the_text, "glyphicon-chevron-up", "glyphicon-chevron-down");
            a = "0";

        // 否则展示
        } else {
            // 显示阴影
            $the_shade.slideDown();
            the_chevron(the_text, "glyphicon-chevron-down", "glyphicon-chevron-up");
            var $other_shade = $(other_shade);
            $other_shade.slideUp();
            the_chevron(other_text, "glyphicon-chevron-up", "glyphicon-chevron-down");
            // 记录当前id已经被点击
            a = the_text;
        }

    })
}

// 收起
function the_slideUp(the_text, the_shade) {

    $(the_shade).click(function () {
        // 点击阴影，收回阴影
        var $the_shade = $(the_shade);
        $the_shade.slideUp();
        the_chevron(the_text, "glyphicon-chevron-up", "glyphicon-chevron-down");
        // 清除点击记录
        a = "0"
    })
}


// 改变V形符号，向上向下
function the_chevron(the_text, the_rem, the_add) {
    var $the_text = $(the_text);
    var $span = $the_text.find("span").find("span");
    $span.removeClass(the_rem).addClass(the_add);
}

5.4, ​​a comprehensive sort of realization

View: all types of incoming distal

view: in a corresponding sort query to obtain data during query

HTML

(the same JS 5.3)

6、mine

6.1, login login

view:

• GET：直接进入login.html
• POST：提交后，判断用户激活情况、密码正确性、存在情况，并把错误信息传入服务器session，再传回前端

6.1.1、session传递错信息

视图：
通过 error_msg = request.session.get('error_msg') 获取错误信息
通过 request.session['error_msg'] = '错误信息' 存入错误信息

当程序需要为某个客户端的请求创建一个session时，
服务器首先检查这个客户端的请求里是否已包含了一个session标识（称为session id），
如果已包含则说明以前已经为此客户端创建过session，
服务器就按照session id把这个session检索出来使用（检索不到，会新建一个）

6.2、用户登录状态检查

视图–>mine函数：

获取请求过来的session，如果存在user_id返回True到html

6.3、退出用户登录状态

**视图：**清空当前id的session内容

mine.html

6.4、注册register

视图：

• GET：直接进入register.html
• POST：用户名、密码、邮箱等信息传入，之后进入login.html

6.5、密码在前端传入前加密（js/md5），防止在传入服务器前被别人截获看见密码

html：在信息提交前return check()，js执行后为True才会提交

js：把密码进行md5加密后，再传递
（先获取id为password_input的标签的值，再将其改为MD5加密后的数值）

登录时不用解密，直接将用户输入的明文进行MD5加密，然后再传入服务器

6.6、密码在入数据库前加密，防止密码明文储存

视图：

• 加密 password = make_password(password)（写在register函数里）
• 解密check_password(password, user.u_password)如果返回True，密码正确（写在login函数里）

6.7、邮箱激活

6.7.1、激活码的生成、储存（redis缓存）、传递

App / views_heiper.py: connection activation generated by concatenating

View -> register function: by uuid then hashed to generate the unique code, the presence server via redis.cache cache and set valid for one day