devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

django 前端设计文件（模板语法）_django前端模板

作者：weixin_40725706 | 2024-02-10 09:43:31

赞

踩

django前端模板

前言

我们在上一节中基本介绍了django的配置，下面一节，我们开始使用django的前端模版做一个前端项目。

没学过django模版的点这里：菜鸟教程-django前端模版

一、Django 模版是什么？

模板是一个文本，用于分离文档的表现形式和内容。注意：和jsp模版不一样，jsp可以使用java代码编写程序，但是django模板不可以，他使用固定的语法进行前后端交互

二、使用模板创建文件

1.0 在templates文件夹下创建page文件夹

 

1.1 login.html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         html {
  13.             height: 100%;
  14.         }
  15.         body {
  16.             height: 100%;
  17.         }
  18.         .container {
  19.             height: 100%;
  20.             background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
  21.         }
  22.         .login-wrapper {
  23.             background-color: #fff;
  24.             width: 358px;
  25.             height: 588px;
  26.             border-radius: 15px;
  27.             padding: 0 50px;
  28.             position: relative;
  29.             left: 50%;
  30.             top: 50%;
  31.             transform: translate(-50%, -50%);
  32.         }
  33.         .header {
  34.             font-size: 38px;
  35.             font-weight: bold;
  36.             text-align: center;
  37.             line-height: 200px;
  38.         }
  39.         .input-item {
  40.             display: block;
  41.             width: 100%;
  42.             margin-bottom: 20px;
  43.             border: 0;
  44.             padding: 10px;
  45.             border-bottom: 1px solid rgb(128, 125, 125);
  46.             font-size: 15px;
  47.             outline: none;
  48.         }
  49.         .input-item:placeholder {
  50.             text-transform: uppercase;
  51.         }
  52.         .btn {
  53.             text-align: center;
  54.             padding: 10px;
  55.             width: 100%;
  56.             margin-top: 40px;
  57.             background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
  58.             color: #fff;
  59.  
  60.         }
  61.         .msg {
  62.             text-align: center;
  63.             line-height: 88px;
  64.         }
  65.         a {
  66.             text-decoration-line: none;
  67.             color: #abc1ee;
  68.         }
  69.  
  70.     </style>
  71. </head>
  72. <body>
  73.     <div class="container">
  74.         <div class="login-wrapper">
  75.             <div class="header">Login</div>
  76.             <div class="form-wrapper">
  77.                 <form action="/login_entry" method="get">
  78.                 <input type="text" name="username" placeholder="username" class="input-item">
  79.                 <input type="password" name="password" placeholder="password" class="input-item">
  80.                     <input type="submit" value="搜索" class="btn">
  81.                     </form>
  82.             </div>
  83.             <div class="msg">
  84.                 Don't have account?
  85.                 <a href="#">Sign up</a>
  86.             </div>
  87.         </div>
  88.     </div>
  89. </body>
  90. </html>

1.2 login界面

 

2.main主页（BookBar.html+BookTable.html 注意他们统一路径）

BookBar.html和BookTable.html，使用了模板语法的include，后端没有运行时，不会出现数据

 3.添加数据主页（insertBook.html）

 代码：

  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Insert title here</title>
  5. </head>
  6. <style>
  7. 		.main{
  8. 		margin-top:10px;
  9. 		 margin-left: 300px;
  10. 		 font-size: 15px; /* 字体放大，让页面可滚动 */
  11.          padding: 0px 10px;
  12.          text-align: center;
  13. 		}
  14. 		.nav_v{
  15. 		/* 定义宽度 */
  16. 		margin-top:30px;
  17. 		/*display内嵌，代表文字和div成为一体*/
  18. 		display: inline-block;
  19. 		}
  20.  
  21. 		.divc{
  22. 		width:300px;
  23. 		height:100%;
  24. 		text-align: center;
  25. 		position: fixed;
  26. 		left: 0;
  27. 		background-color: #9fc5e8;
  28. 		}
  29. 		.box{
  30.  
  31. 		height: 100%;
  32. 		overflow: hidden;
  33.  
  34. 		}
  35. 		input[type=text], select {
  36. 		  width: 90%;
  37. 		  padding: 12px 20px;
  38. 		  margin: 8px 0;
  39. 		  display: inline-block;
  40. 		  border: 1px solid #ccc;
  41. 		  border-radius: 4px;
  42. 		  box-sizing: border-box;
  43. 		}
  44.  
  45. 		input[type=submit] {
  46. 		  width: 90%;
  47. 		  background-color: #4CAF50;
  48. 		  color: white;
  49. 		  padding: 14px 20px;
  50. 		  margin: 8px 0;
  51. 		  border: none;
  52. 		  border-radius: 4px;
  53. 		  cursor: pointer;
  54. 		}
  55.  
  56. 		input[type=submit]:hover {
  57. 		  background-color: #45a049;
  58. 		}
  59. 		table {
  60. 		  border-collapse: collapse;
  61. 		  width: 100%;
  62. 		  text-align: center;
  63. 		  margin-top: 5px;
  64. 		}
  65.  
  66. 		td {
  67. 		height:40px;
  68. 		  padding: 8px;
  69. 		  border-bottom: 1px solid #ddd;
  70. 		  text-align: center;
  71. 		}
  72.  
  73. 		.nv:hover {
  74. 		background-color:#f5f5f5;}
  75.  
  76. 		.vt{
  77. 		  color:white;
  78. 		  height:50px;
  79. 			background-color:#6fa8dc;
  80. 		}
  81. 		a {
  82. 		 width: 90%;
  83. 		  padding: 12px 20px;
  84. 		  margin: 8px 0;
  85. 		  display: inline-block;
  86. 		  border: 1px solid #ccc;
  87. 		  border-radius: 4px;
  88. 		  box-sizing: border-box;
  89. 		  color: black;
  90.  
  91. 		}
  92. 		a:link{
  93. 	text-decoration:none;   /* 指正常的未被访问过的链接*/
  94. }
  95. a:visited{
  96. 	text-decoration:none; /*指已经访问过的链接*/
  97. }
  98. a:active{
  99. 	text-decoration:none;/* 指正在点的链接*/
  100. }
  101.  
  102. 		a:hover {
  103. 	      background-color:#f5f5f5;
  104. }
  105. </style>
  106. <body>
  107. <div class="divc">
  108. 	<form action="/insertBook" method="get">
  109. 	    <label >bookno</label>
  110. 	    <input type="text" name="bookno" placeholder="Your bookno...">
  111.  
  112. 	    <label >bookname</label>
  113. 	    <input type="text"  name="bookname" placeholder="Yourbookname...">
  114.  
  115. 	    <label >author</label>
  116. 	    <input type="text"  name="author" placeholder="Your author...">
  117.  
  118. 	    <label >publisher</label>
  119. 	    <input type="text"  name="publisher" placeholder="Your publisher...">
  120.  
  121. 	    <label >publishyear</label>
  122. 	    <input type="text"  name="publishyear" placeholder="Your publishyear...">
  123.  
  124. 	    <label >price</label>
  125. 	    <input type="text"  name="price" placeholder="Your price...">
  126.  
  127. 		<label >state</label>
  128. <!--	    <input type="text" id="fname" name="state" placeholder="Your state...">-->
  129. 		<select name="state" >
  130. 			<option value="借出">借出</option>
  131. 			<option value="未借出">未借出</option>
  132. 		</select>
  133. 		<label >bookstore</label>
  134. 	    <input type="text"  name="bookstore" placeholder="Your bookstore...">
  135.  
  136. 	    <input type="submit" value="Submit">
  137. 	  </form>
  138.  
  139.  
  140. </div>
  141. <div class="box">
  142. <div class="main" id="test">
  143. <div style="text-align: center;">
  144. <table>
  145. <tr class="vt">
  146. 	{% for i in books_keys %}
  147. <td>{{i}}</td>
  148. 	{%endfor%}
  149. </tr>
  150.  
  151. 	{% for i in books_values %}
  152.   <tr>
  153. 	  <td>{{i.0}}</td>
  154. 	  <td>{{i.1}}</td>
  155. 	  <td>{{i.2}}</td>
  156. 	  <td>{{i.3}}</td>
  157. 	  <td>{{i.4}}</td>
  158. 	  <td>{{i.5}}</td>
  159. 	  <td>{{i.6}}</td>
  160. 	  <td>{{i.7}}</td>
  161.   </tr>
  162. 	{%endfor%}
  163.     </table>
  164.     </div>
  165. </div>
  166.  
  167. </div>
  168. </body>
  169. </body>
  170. </html>

总结

以上就是今天要讲的内容，本文仅仅简单介绍了模板的使用。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/73809
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号