结合前端，django，MySQL，pymysql模块实现数据库数据动态展示到前端-练习

一. 前景提要

项目名mysite 应用名app01

二. urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'book_manage/', views.book_manage),
    url(r'user_table/', views.user_table),
]

三. views.py

import pymysql
from django.shortcuts import HttpResponse, render, redirect


# Create your views here.

def book_manage(request):
    return render(request, 'book_manage.html')


def _open_mysql():
    """
    去数据库中获取数据 传递给html页面 借助于模版语法 发送给浏览器. 以下为数据库准备数据:
    drop database db10;  # 注意: 操作危险, 酌情使用
    create database db10 charset utf8;
    use db10;
    create table user(
        id int primary key auto_increment,
        username varchar(25) not null,
        sex enum('男', '女'),
        password varchar(255) not null,
        hobbies set('吃生蚝', '喝泔水', '吃虾米', '遛狗')
        );
    insert into user(username, sex, password, hobbies) values
        ('egon', '男', 'egon3714', '吃虾米'),
        ('jason', '女', 'jason3714', '喝泔水,遛狗'),
        ('egon', '男', 'egon3714', '吃生蚝,喝泔水'),
        ('alex', '男', 'alex3714', '遛狗'),
        ('lxx', '男', 'lxx3714', '遛狗');
    :return:
    """
    conn = pymysql.connect(
        host='127.0.0.1',
        port=3306,
        user='root',
        password='1234',
        database='db10',
        charset='utf8',
    )
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    affected_rows = cursor.execute('select * from user')
    if affected_rows:
        data = cursor.fetchall()
        return data


def user_table(request):
    data = _open_mysql()
    print('data:', data)
    if data:
        return render(request, 'user_table.html', {'user': data})
    return HttpResponse('404 NOT Find!')

四. templates

1. book_manage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"><link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></head><body><nav class="navbar navbar-inverse"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">图书管理系统</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">图书<span class="sr-only">(current)</span></a></li><li><a href="#">作者</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"                       aria-expanded="false">更多<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="找找看吧~"></div><button type="submit" class="btn btn-default">提 交</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">yangyang</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"                       aria-expanded="false">更多操作<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div></div></nav><div class="container-fluid"><div class="row"><div class="col-md-3"><div class="list-group"><a href="#" class="list-group-item active">                    图书列表</a><a href="#" class="list-group-item">作者</a><a href="#" class="list-group-item">版权</a><a href="#" class="list-group-item">出版社</a><a href="#" class="list-group-item">杂志社</a></div></div><div class="col-md-9"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">图书管理系统<small>香喷喷的哦~</small><span class="glyphicon glyphicon-book pull-right"></span></h3></div><div class="panel-body"><div class="row"><div class="col-lg-5"><div class="input-group"><input type="text" class="form-control" placeholder="输入你要找的书名~"><span class="input-group-btn"><button class="btn btn-default" type="button">找 书</button></span></div></div><div class="col-lg-7"><button class="btn btn-success pull-right">添 加</button></div></div><hr><div><table class="table table-hover table-striped table-bordered"><thead><tr><th>ID</th><th>author</th><th>bookName</th><th>booKPrice</th><th>action</th></tr></thead><tbody><tr><td>1</td><td>egon</td><td>论打不过人放狗的重要性</td><td class="item">666</td><td><button class="btn btn-success">添加</button><button class="btn btn-danger">删除</button></td></tr><tr><td>2</td><td>tank</td><td>吃生蚝的秘密</td><td class="item">423</td><td><button class="btn btn-success">添加</button><button class="btn btn-danger">删除</button></td></tr><tr><td>3</td><td>jason</td><td>论被称之为跑王的重要性</td><td class="item">222</td><td><button class="btn btn-success">添加</button><button class="btn btn-danger">删除</button></td></tr><tr><td>4</td><td>抠脚少年</td><td>唱歌难听怎么才不会挨打</td><td class="item">444</td><td><button class="btn btn-success">添加</button><button class="btn btn-danger">删除</button></td></tr><tr><td>5</td><td>派大星</td><td>吓人以后怎么才不会挨打</td><td class="item">999</td><td><button class="btn btn-success">添加</button><button class="btn btn-danger">删除</button></td></tr><tr><td>6</td><td>大婶</td><td>叫你骚起来</td><td class="item">777</td><td><button class="btn btn-success">添加</button><button class="btn btn-danger">删除</button></td></tr></tbody></table></div><div class="row"><nav aria-label="Page navigation" class="text-center"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li></ul></nav></div></div></div></div></div></div></div><script>    $('tr,th').addClass("text-center");    $('td .btn').addClass('btn-xs');    $('tr .item').prepend($('<span>').html('&yen; '));    // 响应式布局实现    let reg = /col-.*?/;    let regNum = /[0-9]$/;    $('.row').children().each(function (index, tagObj) {        // console.log(tagObj);        $.each(tagObj.classList, function (index, classObj) {            // console.log(classObj);            // console.log(reg.test(classObj));            if (reg.test(classObj)) {                // console.log(classObj.match(regNum)[0]);                let getNum = classObj.match(regNum)[0];                tagObj.classList.add(`col-md-${getNum}`);                tagObj.classList.add(`col-xs-${getNum}`);                tagObj.classList.add(`col-md-${getNum}`);                tagObj.classList.add(`col-lg-${getNum}`);                // tagObj.classList.add(`col-md-${getNum} col-xs-${getNum} col-sm-${getNum} col-lg-${getNum}`);            }            // console.log(reg.test(classObj));        })    })</script></body></html></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awscome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

</body>
</html>

2. user_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awscome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <h2 class="text-center">用户个人信息 <small>哦吼~</small></h2>
        <table class="table table-striped table-hover table-bordered">
            <thead>
            <tr>
                <th>ID</th>
                <th>username</th>
                <th>sex</th>
                <th>password</th>
                <th>hobbies</th>
            </tr>
            </thead>
            <tbody>
            {% for user_dict in user %}
                <tr>
                    <td>{{ user_dict.id }}</td>
                    <td>{{ user_dict.username }}</td>
                    <td>{{ user_dict.sex }}</td>
                    <td>{{ user_dict.password }}</td>
                    <td>{{ user_dict.hobbies }}</td>

                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script>
    $("td,th").addClass('text-center lead');
</script>
</body>
</html>
posted @ 2020-05-24 22:26  给你加马桶唱疏通  阅读(260)  评论(0)  编辑  收藏  举报