今天把主页的样式设计了,有了主页才可以把数据库都出来的数据更美的显示出来。
前端采取bootstrap
----------------------------------------------------------------------------------------------------------------
index的功能是把服务人员的信息展示出来（我前端美化菜的一瞥）
所有index的代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 10 <!--视口的设置，让网页能等比例的缩放到对应设备中--> 11 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 12 <!--告诉ie浏览器用最新内核去渲染网页--> 13 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 14 15 <!-- import CSS --> 16 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 17 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 18 </head> 19 20 <body> 21 22 <div class="bar"> 23 <nav class="navbar navbar-expand-lg navbar-light bg-light"> 24 <div class="collapse navbar-collapse" id="navbarSupportedContent"> 25 <ul class="nav mr-auto"> 26 <li class="nav-item"> 27 <a class="nav-link active" href="1">服务项目1</a> 28 </li> 29 <li class="nav-item"> 30 <a class="nav-link" href="1">服务项目2</a> 31 </li> 32 </ul> 33 <ul class="nav"> 34 <li class="nav-item"> 35 <a class="nav-link " href="../user_management/login.html">登录</a> 36 </li> 37 <li class="nav-item"> 38 <a class="nav-link disabled" href="">|</a> 39 </li> 40 <li class="nav-item"> 41 <a class="nav-link" href="../user_management/register.html">注册</a> 42 </li> 43 </ul> 44 </div> 45 </nav> 46 </div> 47 48 <div class="main"> 49 <div style="background-color:darkgray;"> 50 <ul class="nav nav-pills nav-fill"> 51 {% for item in traffic_list%} 52 <li class="nav-item"> 53 <a class="nav-link " href="{{item.classbrief}}">{{item.classname}}</a> 54 </li> 55 {% endfor %} 56 </ul> 57 </div> 58 59 <div class="text-center center-block"> 60 {% for obj in user_list%} 61 <a href="#"> 62 <div class="card col-md-6 ml-5 mt-5 mr-2 mb-5" style=" 18rem; float:left;"> 63 <img class="card-img-top" src="{{obj.userpic}}" alt="Card image cap"> 64 <div class="card-body"> 65 <h5 class="card-title">用户姓名:{{obj.usertel}}</h5> 66 <p class="card-text">雇员等级:{{obj.userscale}}</p> 67 <p class="card-text">雇员评分{{obj.userevaluate}}</p> 68 </div> 69 </div> 70 </a> 71 {% endfor %} 72 </div> 73 </div> 74 75 <div style="float: left;"> 76 <nav aria-label="Page navigation example"> 77 <ul class="pagination"> 78 {{ page_info.pager|safe }} 79 </ul> 80 </nav> 81 </div> 82 83 </body> 84 85 86 87 </html>
再开始写入view里面的index业务逻辑的时候，我们需要实现一个分页功能：
1 class PageInfo(object): 2 def __init__(self, current_page, all_count, per_page, base_url, show_page=11): 3 ''' 4 :param current_page: 5 :param all_count: 数据库总行数 6 :param per_page: 每页显示行数 7 :param base_url: 跳转页面的前缀 8 :param show_page:分页码范围，默认为11 9 ''' 10 try: 11 self.current_page = int(current_page) 12 except Exception as e: 13 self.current_page = 1 14 self.per_page = per_page 15 a, b = divmod(all_count, per_page) #返回一个包含商和余数的元组 16 if b: # 数据库总数/页面总数后还有多余的数据，所以还需要加1页来显示剩余的数据 17 a = a + 1 18 self.all_pager = a # 总页数 19 self.show_page = show_page 20 self.base_url = base_url 21 22 # 页码数对应的展示数据内容 23 def start(self): 24 return (self.current_page - 1) * self.per_page # 起始数据位置 25 def end(self): 26 return self.current_page * self.per_page 27 28 # 组装分页模块 29 def pager(self): 30 page_list = [] 31 32 # 计算中间页码数显示起始数和结尾数 33 half = int((self.show_page - 1) / 2) # 中间页码数 34 # 如果数据总页数 < 分页码范围11 35 if self.all_pager < self.show_page: 36 begin = 1 37 stop = self.all_pager + 1 38 # 如果数据总页数 > 分页码范围11 39 else: 40 # 如果当前页 <=5,永远显示1,11 41 if self.current_page <= half: 42 begin = 1 43 stop = self.show_page + 1 44 else: 45 if self.current_page + half > self.all_pager: 46 begin = self.all_pager - self.show_page + 1 47 stop = self.all_pager + 1 48 else: 49 begin = self.current_page - half 50 stop = self.current_page + half + 1 51 52 # 组装‘上一页’选项 53 if self.current_page <= 1: 54 prev = "<li class='page-item'><a class='page-link' href='#'>上一页</a></li>" 55 else: 56 prev = "<li class='page-item'><a class='page-link' href='%s?page=%s'>上一页</a></li>"%(self.base_url, self.current_page - 1, ) 57 page_list.append(prev) 58 59 # 组装中间页码数显示 60 for i in range(begin, stop): 61 if i == self.current_page: 62 temp = "<li class='page-item active'><a class='page-link' href='%s?page=%s'>%s</a></li>" % (self.base_url, i, i,) 63 else: 64 temp = "<li class='page-item'><a class='page-link' href='%s?page=%s'>%s</a></li>" % (self.base_url, i, i,) 65 page_list.append(temp) 66 67 # 组装'下一页'选项 68 if self.current_page >= self.all_pager: 69 nex = "<li class='page-item'><a class='page-link' href='#'>下一页</a></li>" 70 else: 71 nex = "<li class='page-item'><a class='page-link' href='%s?page=%s'>下一页</a></li>" % (self.base_url, self.current_page + 1,) 72 page_list.append(nex) 73 74 return ''.join(page_list)
然后开始写index里面的业务逻辑：
1 from django.shortcuts import render 2 from django.views import View 3 from index import models 4 from index.models import Userinfo, Classoftraffic 5 # Create your views here. 6 class index(View): 7 def get(self, request): 8 #读取数据库中userInfo的数据 9 objs = Userinfo.objects.all() 10 #读取数据库中Classoftraffic的数据 11 traffic_list = Classoftraffic.objects.all() 12 13 all_count = objs.count() 14 page_info = PageInfo(request.GET.get('page'), all_count, 10, '/', 11) #10为每页显示10条数据 15 user_list = objs[page_info.start(): page_info.end()] 16 17 18 19 return render(request, 'index.html', {'objs':objs, 'traffic_list': traffic_list, 'user_list': user_list, 'page_info': page_info}) 20 21 def post(self, request): 22 pass
显示效果：
网页样式自己设计就可以了（我是真不行....网站审美感觉有点问题，我主要是完成逻辑设计（（