一. 前景提要
项目名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" ); $('td .btn').addClass('btn-xs'); $('tr .item').prepend($('<span>').html('¥ ')); // 响应式布局实现 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>