基于用django，mysql 以及echarts设计一个图书网页（内含js,css，img路径设置，数据库的一些常见问题）

本文链接：https://blog.csdn.net/yq5201314520/article/details/104563869

（1）设计步骤：网页——————>url路径端——————>view数据传输 (1,1) 网页设计： (1,1,1)登录界面：<!doctype html><html><head><meta charset="utf-8"><title>login</title><style ty...

摘要由CSDN通过智能技术生成

（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>