一、目录结构
二、获取数据,模板语言渲染
webviews.py
import json from django.shortcuts import render,HttpResponse from django.http import JsonResponse from repository import models def server(request): return render(request,'server.html') def server_json(request): server_list = models.Server.objects.values('hostname','sn','os_platform') response = { 'status':True, 'data_list': list(server_list), } return JsonResponse(response)
server.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css" /> </head> <body> <h1>服务器列表</h1> <script src="/static/js/jquery-3.2.1.js"></script> <script> $(function () { init(); }); /* 像后台获取数据 */ function init() { $.ajax({ url:'/server_json.html', type: 'GET', data: {}, dataType: 'JSON', success:function (response) { console.log(response.data); } }) } </script> </body> </html>
三、js获取数据,js动态创建table标签
订制表头:table_config
解决了什么问题?
- 以前我们都是写死的多少行多少咧
- 我这个表有几列?就写三列,这三列叫什么就得订好了
- 如果是这样,前端也要按照这种方式去写,
- 用户管理的页面的时候,又得把这个写一遍
- 前端以后我不写了,到底显示几列?我也不知道,到底多少列,根据我后台的配置文件决定
具体代码如下:
import json from django.shortcuts import render,HttpResponse from django.http import JsonResponse from repository import models def server(request): return render(request,'server.html') def server_json(request): table_config = [ { 'q': 'hostname', 'title': '主机名', }, { 'q': 'sn', 'title': '序列号', }, { 'q': 'os_platform', 'title': '系统', }, ] values = [] for item in table_config: values.append(item['q']) server_list = models.Server.objects.values(*values) response = { 'data_list': list(server_list), 'table_config': table_config } return JsonResponse(response)
订制显示内容: table_config,data_list
解决了什么问题?
1、前后端分离
- 我在页面生成一个表格 ,在表格里面全都列出来你说行不
- 以后我通过配置文件控制多少列,分别是什么
2、data里面再写个列表,
- 我可以把所有的数据放到我的页面上
- 内容是去数据库里拿
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css" /> </head> <body> <div class="container"> <h1>服务器列表</h1> <table class="table table-bordered"> <thead id="tHead"> <tr> </tr> </thead> <tbody id="tBody"> </tbody> </table> </div> <script src="/static/js/jquery-3.2.1.js"></script> <script> $(function () { init(); }); /* 像后台获取数据 */ function init() { $.ajax({ url:'/server_json.html', type: 'GET', data: {}, dataType: 'JSON', success:function (response) { /* 处理表头 */ initTableHead(response.table_config); console.log(response.table_config); console.log(response.data_list); } }) } function initTableHead(table_config) { /* table_config = [ { 'q': 'hostname', 'title': '主机名', }, { 'q': 'sn', 'title': '序列号', }, { 'q': 'os_platform', 'title': '系统', }, ] */ $('#tHead tr').empty(); $.each(table_config,function (k,conf) { var th = document.createElement('th'); th.innerHTML = conf.title; $('#tHead tr').append(th); }); } </script> </body> </html>
四、运行截图
五、在工作中如何开发一个你没有学过的项目
学习流程:
- - 搜现成模块
- - 基本使用,找文档
- - 看源码
- - stackoverflow
整体和单独那个先行
先整体后单独