基于用django，mysql 以及echarts设计一个图书网页（内含js,css，img路径设置，数据库的一些常见问题）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了基于用django，mysql 以及echarts设计一个图书网页（内含js,css，img路径设置，数据库的一些常见问题），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含19187字，纯文字阅读大概需要28分钟。
内容图文
（1）设计步骤：网页——————>url路径端——————>view数据传输
(1,1) 网页设计：
(1,1,1)登录界面：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap {
height: 719px;
width: 100;
background-image: url(4.jpg);
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
#head {
height: 120px;
width: 100;
background-color: #66CCCC;
text-align: center;
position: relative;
}
#foot {
width: 100;
height: 126px;
background-color: #CC9933;
position: relative;
}
button {
width: 320px;
padding:8px;
background-color: #428bca;
border-color: #357ebd;
color: #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
text-align: center;
vertical-align: middle;
border: 1px solid transparent;
font-weight: 900;
font-size:125%
}
#wrap .logGet {
height: 408px;
width: 368px;
position: absolute;
background-color: #FFFFFF;
top: 20%;
right: 15%;
}
.logC a button {
width: 100%;
height: 45px;
background-color: #ee7700;
border: none;
color: white;
font-size: 18px;
}
.logGet .logD.logDtip .p1 {
display: inline-block;
font-size: 28px;
margin-top: 30px;
width: 86%;
}
#wrap .logGet .logD.logDtip {
width: 86%;
border-bottom: 1px solid #ee7700;
margin-bottom: 60px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
}
.logGet .lgD img {
position: absolute;
top: 12px;
left: 8px;
}
.logGet .lgD input {
width: 100%;
height: 42px;
text-indent: 2.5rem;
}
#wrap .logGet .lgD {
width: 86%;
position: relative;
margin-bottom: 30px;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
}
#wrap .logGet .logC {
width: 86%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.title {
font-family: "宋体";
color: #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使用css3的transform来实现 */
font-size: 36px;
height: 40px;
width: 30%;
}
.copyright {
font-family: "宋体";
color: #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使用css3的transform来实现 */
height: 60px;
width: 40%;
text-align:center;
}
#foot .copyright .img {
width: 100%;
height: 24px;
position: relative;
}
#foot .copyright p {
height: 24px;
width: 100%;
}
</style>
</head>
<body>
<div class="header" id="head">
<div class="title">四川师范大学</div>
</div>
<form action ="{% url 'user_login' %}" method ="POST">
{% csrf_token %}
<div class="wrap" id="wrap">
<div class="logGet">
<!-- 头部提示信息 -->
<div class="logD logDtip">
<p class="p1">登录</p>
</div>
<!-- 输入框 -->
<div class="lgD">
<img src="img/logName.png" width="20" height="20" alt=""/>
<input type="text"
name = 'username' placeholder="输入用户名" />
</div>
<div class="lgD">
<img src="img/logPwd.png" width="20" height="20" alt=""/>
<input type="password"
name = 'password' placeholder="输入用户密码" />
</div>
<div class="logC">
<input type="submit" name="提交">
</div>
</div>
</div>
</form>
<div class="footer" id="foot">
<div class="copyright">
<p>Copyright ? 2020 Qunar.com Inc. All Rights Reserved.</p>
<div class="img">
<i class="icon2"></i><span>联系地址：四川师范大学</span>
</div>
</div>
</div>
</body>
</html>
（1.1.2）主页面（index）：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
<style type="text/css">
.divcss5{ width:1000px;padding:10px;border:1px solid #F00}
.divcss5_left{ float:left;width:150px;border:1px solid #00F;height:50px}
.divcss5_right{ position: absolute;float:right;width:800px;border:1px solid #000;height:300px}
.clear{ clear:both}
</style>
</head>
<body>
<iframe src = "/face/" width = "2000" height="560" title = "face"></iframe>
<br>
<br>
<iframe src="/find/" width="600" height="660" title="find"></iframe>
<iframe src="/book_dis/" width="650" height="660" title="dis"></iframe>
<iframe src="/user/" width="600" height="660" title="dis"></iframe>
<form action ="{% url 'user_index' %}" method ="POST">
{% csrf_token %}
<input type="text"
width="200" name = 'value' placeholder="输入要查询的书籍" />
<input type="submit" name="搜索">{{ alert }}
</form>
<br>
</body>
</html>
（1,1,3）图书科目数目页面：
<!DOCTYPE html>
<html>
{% load static %}
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="{% static 'js/echarts.common.min.js' %}" ></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript" >
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '图书科目'
},
tooltip: {},
legend: {
data:['数目']
},
xAxis: {
data: {{ name_one|safe}}
},
yAxis: {},
series: [{
name: '数目',
type: 'bar',
data: {{ name_two|safe }}
}]
};
myChart.setOption(option);
</script>
</body>
</html>
（1,1,4）图书介绍（滚动图）页面：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图书介绍</title>
{% load static %}
<link rel="stylesheet" href="../static/css/style.css" />
<script type="text/javascript" src={% static 'js/jquery.min.js' %}></script>
<script type="text/javascript" src={% static 'js/script.js' %}></script>
</head>
<body>
<div class="wrap">
<div class="pic1 pic">
<div class="pic_num1 pic_num"></div>
</div>
<div class="pic2 pic">
<div class="pic_num2 pic_num"></div>
</div>
<div class="pic3 pic">
<div class="pic_num3 pic_num"></div>
</div>
<div class="pic4 pic">
<div class="pic_num4 pic_num"></div>
</div>
<div class="pic5 pic">
<div class="pic_num5 pic_num"></div>
</div>
<div class="pic6 pic">
<div class="pic_num6 pic_num"></div>
</div>
</div>
</body>
</html>
（1,1,5）图书浏览次数排行页面：
<!DOCTYPE html>
<html>
{% load static %}
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="{% static 'js/echarts.common.min.js' %}" ></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '图书馆浏览记录排行'
},
tooltip: {},
legend: {
data:['浏览量']
},
xAxis: {
data: {{ paixu.0|safe }}
},
yAxis: {},
series: [{
name: '浏览量',
type: 'bar',
data: {{ paixu.1|safe }}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
（1,1,6）查询界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查询结果</title>
</head>
<body>
<table>
<tr>
<th>科目</th>
<th>网址</th>
</tr>
{% for x in name %}
<tr>
<td>{{ x.0 }}</td>
<td><a href="/{{ x.1}}" >{{ x.0 }}</td>
</tr>
{% endfor %}
</table>
</body>
</html>
（1,1,7）图书介绍页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>math_one</title>
</head>
<body>
<form action ="{% url 'user_math_one' %}" method ="POST">
{% csrf_token %}
</form>
<img src="../static/img/B1.jpg">
<table>
<tr>
<th>姓名</th>
<th>学科</th>
<th>上市时间</th>
<th>语言</th>
<th>浏览量</th>
</tr>
<tr>
<td>{{ name.0.0}}</td>
<td>{{ name.0.1}}</td>
<td>{{ name.0.2}}</td>
<td>{{ name.0.4}}</td>
<td>{{ name.0.5}}</td>
</tr>
</table>
<br>
<br>
<h>介绍: </h>
<br>
<p1>
指相对于初等数学而言，数学的对象及方法较为繁杂的一部分。
广义地说，初等数学之外的数学都是高等数学，也有将中学较深入的代数、几何以及简单的集合论初步、逻辑初步称为中等数学的，将其作为中小学阶段的初等数学与大学阶段的高等数学的过渡。
通常认为，高等数学是由微积分学，较深入的代数学、几何学以及它们之间的交叉内容所形成的一门基础学科。
主要内容包括：数列、极限、微积分、空间解析几何与线性代数、级数、常微分方程。
工科、理科、财经类研究生考试的基础科目。
</p1>
<br>
<p2>
在中国理工科各类专业的学生（数学专业除外，数学专业学数学分析），学的数学较难，课本常称“高等数学”；文史科各类专业的学生，学的数学稍微浅一些，课本常称“微积分”。理工科的不同专业，文史科的不同专业，深浅程度又各不相同。研究变量的是高等数学，可高等数学并不只研究变量。至于与“高等数学”相伴的课程通常有：线性代数（数学专业学高等代数），概率论与数理统计（有些数学专业分开学）。
初等数学研究的是常量与匀变量，高等数学研究的是非匀变量。高等数学（它是几门课程的总称）是理、工科院校一门重要的基础学科，也是非数学专业理工科专业学生的必修数学课,也是其它某些专业的必修课。
</p2>
</body>
</html>
（1,1,8）用户个人信息界面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户个人信息</title>
</head>
<body>
<table>
<tr>
<th>时间: </th>
<th>网页: </th>
<th>用户： </th>
</tr>
{% for x in name %}
<tr>
<td>{{ x.0 }}</td>
<td>{{ x.1 }}</td>
<td>{{ x.2 }}</td>
</tr>
{% endfor %}
</table>
</body>
</html>
（1,2）图书数据（excel）导入数据库：
import xlrd
import pymysql
conn = pymysql.connect(host='localhost',user = 'root',password='123',charset='utf8mb4')
cursor = conn.cursor()
sql = 'use user_management;'
cursor.execute(sql)
conn.commit()
data = xlrd.open_workbook(r'C:\Users\zhang quan xin\PycharmProjects\book\book.xlsx')
table = data.sheets()[0]
nrows = table.nrows
ncols = table.ncols
data_title = [table.cell_value(0,0),table.cell_value(0,1),table.cell_value(0,2),table.cell_value(0,3),table.cell_value(0,4),table.cell_value(0,5)]
print(data_title)
print(ncols)
print(nrows)
for y in range(1,nrows):
print(table.cell_value(y,0))
sql = 'insert into book (name,discipline,launch_date,language,traffic,url) values (%s,%s,%s,%s,%s,%s);'
cursor.execute(sql, (table.cell_value(y,0),table.cell_value(y,1),table.cell_value(y,2),table.cell_value(y,3),table.cell_value(y,4),table.cell_value(y,5)))
conn.commit()
（1,3）查询功能设计：
def find(value,method):
import pymysql
conn = pymysql.connect(host='localhost',user = 'root',password = '123',charset = 'utf8mb4')
cursor = conn.cursor()
sql = 'use user_management;'
cursor.execute(sql)
conn.commit()
sql = 'select name from book;'
cursor.execute(sql)
conn.commit()
find_name = []
for x in cursor.fetchall():
find_name.extend(list(x))
if "pinyin"==method:
from xpinyin import Pinyin
ac = []
for x in find_name:
if list(Pinyin().get_pinyin(x))[0]==Pinyin().get_pinyin(value):
ac.append(x)
return ac
elif "discipline" == method:
sql = 'select discipline from book;'
cursor.execute(sql)
conn.commit()
find_dis = []
ac = []
for x in cursor.fetchall():
find_dis.extend(list(x))
for x in range(len(find_dis)):
if value == find_dis[x]:
ac.append(find_name[x])
return ac
elif "name" == method:
ac = []
for x in find_name:
if value in x:
ac.append(x)
return ac
print(find('computer',"discipline"))
（1,4）图书浏览排序功能：
def paixu():
import pymysql
conn = pymysql.connect(host='localhost',user = 'root',password='123',charset='utf8mb4')
cursor = conn.cursor()
sql = 'use user_management;'
cursor.execute(sql)
conn.commit()
sql = 'select name from book;'
cursor.execute(sql)
conn.commit()
find_one = []
for x in cursor.fetchall():
find_one.extend(list(x))
print(find_one)
sql = 'select traffic from book;'
cursor.execute(sql)
conn.commit()
find_two = []
for x in cursor.fetchall():
find_two.extend(list(x))
print(find_two)
ac = {}
for x in range(len(find_one)):
ac.update({find_two[x]:find_one[x]})
find_two.sort()
find_two.reverse()
ac_one = []
for x in find_two[:10]:
ac_one.append(ac.get(x))
print(ac_one)
return ac_one,find_two[:10]
（2）view（主功能设计）：
"""
this is for managing
"""
from django.views.decorators.csrf import csrf_exempt
from django.shortcuts import render
from .book_find import *
from .book_recommended import *
import pymysql
import time
conn = pymysql.connect(host='localhost',user = 'root',password='123',charset='utf8')
cursor = conn.cursor()
sqlq = 'use user_management;'
cursor.execute(sqlq)
conn.commit()
sqlw = 'select * from user;'
cursor.execute(sqlw)
user_find = cursor.fetchall()
user_find = list(user_find)
data_base = []
for x in user_find:
x = list(x)
data_base.append(x)
#print(data_base)
conn.commit()
@csrf_exempt
def login(request):
if request.method == "POST":
name = request.POST.get("username")
password = request.POST.get("password")
# print(name)
# print(password)
book_paixu = paixu()
ac_one = {'paixu': list(book_paixu), 'time': time.asctime(time.localtime(time.time()))}
#print(ac_one.get('paixu'))
#print(ac_one.get('time'))
ac_two = {}
paixu_len = len(ac_one.get('paixu')[0])
for y in range(paixu_len):
# print(111,end='\n')
#print(ac_one.get('paixu')[0][y],ac_one.get('paixu')[1][y])
# print(111, end='\n')
ac_two.update({ac_one.get('paixu')[0][y]:ac_one.get('paixu')[1][y]})
if name and password:
for x in data_base:
if name in x and password in x:
# print(name)
# print(password)
sqle = 'insert into user_time (username,time,html) value (%s,%s,%s);'
cursor.execute(sqle,(name,time.asctime( time.localtime(time.time()) ),'on the login.html'))
conn.commit()
ac_one.update({'alert':'welcome'})
return render(request,'index.html',ac_one)
return render(request, 'login.html', {'alert': '404'})
else:
return render(request,'login.html',{'alert':'40'})
def index(request):
if request.method =="POST":
value = request.POST.get('value')
sqlr = 'select name from book;'
cursor.execute(sqlr)
conn.commit()
ac = cursor.fetchall()
ab = []
ac_one = []#最终要找的科目
ac_three = []#科目的网址
ac_final = []
username = request.COOKIES.get('username', '')
if request.META.get('HTTP_X_FORWARDED_FOR'):
ip = request.META.get("HTTP_X_FORWARDED_FOR")
else:
ip = request.META.get("REMOTE_ADDR")
print(1)
print(ip)
print(3)
for x in ac:
ab.append(x[0])
if value:
for x in ab:
if value in x:
ac_one.append(x)
if ac_one:
for x in ac_one:
sqlt = 'select url from book where name = %s'
cursor.execute(sqlt,(x))
conn.commit()
two = cursor.fetchall()
ac_three.append(two[0])
for x in range(len(ac_one)):
ac_final.append([ac_one[x],ac_three[x][0].replace('.html','')])
print()
sqly = 'insert into user_time (username,time,html) value (%s,%s,%s);'
cursor.execute(sqly, (ip,time.asctime(time.localtime(time.time())), 'on the login.html'))
conn.commit()
return render(request,'find_name.html',{'name':ac_final})
return render(request,'index.html',{'alert':'没有可查找的对象，请重新输入！！'})
def book_find(request):
if request.method == "GET":
book_paixu = paixu()
ac_one = {'paixu': list(book_paixu),
'time': time.asctime(time.localtime(time.time()))}
# print(1111111)
return render(request, 'find.html', ac_one)
else:
book_paixu = paixu()
ac_one = {'paixu': list(book_paixu),
'time': time.asctime(time.localtime(time.time()))}
return render(request, 'find.html', ac_one)
def book_face(request):
if request.method == "GET":
return render(request,'face.html')
else:
return render(request,'face.html')
def math_one(request):
if request.method =="GET":
if request.META.get('HTTP_X_FORWARDED_FOR'):
ip = request.META.get("HTTP_X_FORWARDED_FOR")
else:
ip = request.META.get("REMOTE_ADDR")
sqlu = 'select * from book where name ="高等数学上";'
cursor.execute(sqlu)
conn.commit()
ac = {'name':list(cursor.fetchall())}
sqli = 'insert into user_time (username,time,html) value (%s,%s,%s);'
cursor.execute(sqli, (ip, time.asctime(time.localtime(time.time())), 'on the math_one.html'))
conn.commit()
sqlo = 'update book set traffic = traffic + 1 where name = "高等数学上";'
cursor.execute(sqlo)
conn.commit()
return render(request,'math_one.html',ac)
def math_two(request):
if request.method =="GET":
if request.META.get('HTTP_X_FORWARDED_FOR'):
ip = request.META.get("HTTP_X_FORWARDED_FOR")
else:
ip = request.META.get("REMOTE_ADDR")
sqla = 'select * from book where name ="大学语文";'
cursor.execute(sqla)
conn.commit()
ac = {'name':list(cursor.fetchall())}
sqls = 'insert into user_time (username,time,html) value (%s,%s,%s);'
cursor.execute(sqls, (ip, time.asctime(time.localtime(time.time())), 'on the math_two.html'))
conn.commit()
sql_d = 'update book set traffic = traffic + 1 where name = "大学语文";'
cursor.execute(sql_d)
conn.commit()
return render(request,'math_two.html',ac)
def math_three(request):
if request.method =="GET":
if request.META.get('HTTP_X_FORWARDED_FOR'):
ip = request.META.get("HTTP_X_FORWARDED_FOR")
else:
ip = request.META.get("REMOTE_ADDR")
sql_one = 'select * from book where name ="电路分析";'
cursor.execute(sql_one)
conn.commit()
ac = {'name':list(cursor.fetchall())}
sql_two = 'insert into user_time (username,time,html) value (%s,%s,%s);'
cursor.execute(sql_two, (ip, time.asctime(time.localtime(time.time())), 'on the math_three.html'))
conn.commit()
sqlz = 'update book set traffic = traffic + 1 where name = "电路分析";'
cursor.execute(sqlz)
conn.commit()
return render(request,'math_three.html',ac)
def book_dis(request):
if request.method=="GET":
sql_one1 = 'select discipline from book;'
cursor.execute(sql_one1)
conn.commit()
ac = cursor.fetchall()
ac1 = []
for x in ac:
ac1.append(x)
ac2 = []
for x in ac1:
ac2.append(list(x)[0])
ab = list(set(ac2))
ac_num = []
#print(ac2)
#print(111)
#print(ab)
for x in ab:
ac_num.append(ac2.count(x))
ac_final = {'name_one':ab,'name_two':ac_num}
#print(ac_final)
return render(request,'book_dis.html',ac_final)
else:
return render(request,'book_dis.html')
def user(request):
if request.method=="GET":
username = request.COOKIES.get('username', '')
sqlc = 'select * from user_time;'
cursor.execute(sqlc)
conn.commit()
ac =cursor.fetchall()
ac_one = []
for x in ac:
ac_one.append(list(x))
return render(request,'user_message.html',{"name":ac_one})
（2,1）网页设计的功能统计：
（2,1,1）登录界面的判断
（2,1,2）图书馆浏览记录排行（通过浏览不同的页面，页面浏览次数的数据库数据加1）
（2,1,3）图书馆科目的统计
（2,1,4）记录登录不同网页的地址，时间，以及用户
（2,1,5）查询书籍的功能（对应相应网址登录功能）
（3）urls请求地址：
"""book URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/3.0/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
Class-based views
2. Add a URL to urlpatterns: path('', views.home, name='home')
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')from django.contrib import admin
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.urls import path
from . import view
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [
path('',view.login ,name = 'user_login'),
path('user/',view.user,name='user'),
path('index/',view.index,name = 'user_index'),
path('find/',view.book_find,name = 'user_book_find'),
path('math_two/',view.math_two,name = 'user_math_two'),
path('book_dis/',view.book_dis,name='user_book_dis'),
path('face/',view.book_face,name = 'user_book_face'),
path('math_one/',view.math_one,name = 'user_math_one'),
path('math_three/',view.math_three,name = 'user_math_three'),
]
urlpatterns += staticfiles_urlpatterns()
（4）js,css,img路径的设置（settings.py）：
"""
css,img,js路径设置
"""
STATIC_URL = '/static/'#当前这些文件所属的文件夹名字，注意要和templates文件同等级
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
('css', os.path.join(STATIC_ROOT, 'css').replace('\\', '/')),
('js', os.path.join(STATIC_ROOT, 'js').replace('\\', '/')),
('img', os.path.join(STATIC_ROOT, 'img').replace('\\', '/'))
)
ALLOWED_HOSTS = ['*']
X_FRAME_OPTIONS = 'ALLOWALL'#响应头配置
（4.1）路径在网页中的体现（举例）：
<!DOCTYPE html>
<html>
{% load static %}
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="{% static 'js/echarts.common.min.js' %}" ></script>
</head>
（5）设计主要遇见的问题：
（5,1）echarts中文件的配置问题
（5,2）mysql多线程转为单线程
（6）最终页面：
（6,1）搜索功能（输入数学）：
艾伦·麦席森·图灵 发布了3 篇原创文章 · 获赞 6 · 访问量 641 私信 关注
内容总结
以上是互联网集市为您收集整理的基于用django，mysql 以及echarts设计一个图书网页（内含js,css，img路径设置，数据库的一些常见问题）全部内容，希望文章能够帮你解决基于用django，mysql 以及echarts设计一个图书网页（内含js,css，img路径设置，数据库的一些常见问题）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】