当前位置：首页 > news >正文

如何做网站新手引导/重庆网站搜索引擎seo

news 2025/7/2 2:28:48

如何做网站新手引导,重庆网站搜索引擎seo,做企业英语网站要注意哪些,网站做外链的好处1.一对多跨表查询获取数据的三种形式：对象、字典、元组例：有host与business两张表，host与business的id字段关联，business在host表中的对象名是b， 通过查询host表获取的querySet中的b来查询business表。以下两种方式…

1.一对多跨表查询获取数据的三种形式：对象、字典、元组

　　例：有host与business两张表，host与business的id字段关联，business在host表中的对象名是b，通过查询host表获取的querySet中的b来查询business表。

　　以下两种方式都是操作host表：

　　a.以对象的形式跨表查询，查询business表的数据：row.b.caption，row.b.id

　　b.以字典和元组的形式跨表查询，查询business表的数据，跨表查询的时候要用双下划线 'b__id'，'b__caption'， # 这里caption是关联表business的字段

views.py

def host(request):#三种形式的跨表查询（这里有host与business两张表，host与business的id字段关联，business在host表中的对象名是b，# 通过查询host表获取的querySet来查询business表）v1 = models.Host.objects.filter(nid__gt=0)for row in v1:#v1以对象的形式跨表查询row.b.caption，       ,row.b.idprint(row.nid,row.hostname,row.ip,row.port,row.b.caption,row.b.id)v2 = models.Host.objects.all().values('nid','hostname','b_id','b__caption',)for row2 in v2:# v2以字典的形式跨表查询，跨表查询（即查询另一个关联表的数据）的时候要用双下划线'b__caption'，这里caption是关联表的字段print(row2)  #结果是字典  {'nid': 8, 'hostname': 'ee', 'b_id': 5, 'b__caption': '运维'}print(row2['nid'],row2['hostname'],row2['b_id'],row2['b__caption'])v3 = models.Host.objects.all().values_list('nid','hostname','b_id','b__caption')for row3 in v3:# v3以元组的形式跨表查询，跨表查询（即查询另一个关联表的数据）的时候要用双下划线'b__caption'，这里caption是关联表的字段print(row3)#结果是元组  (7, 'wt', 6, '开发')print(row3[0],row3[1],row3[2],row3[3])if request.method == 'GET':v1 = models.Host.objects.filter(nid__gt=0)v2 = models.Host.objects.all().values('nid', 'hostname', 'b_id', 'b__caption', )v3 = models.Host.objects.all().values_list('nid', 'hostname', 'b_id', 'b__caption')b_list = models.Business.objects.all()return render(request, 'host.html', {'v1':v1, 'v2':v2, 'v3':v3,'b_list':b_list})elif request.method == 'POST':h = request.POST.get('hostname')i = request.POST.get('ip')p = request.POST.get('port')b = request.POST.get('b_id')models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b,)return redirect('/host')

View Code

host.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>对象</h1><table border="1" style="border-collapse: collapse;"><thead><tr><th>主机名</th><th>IP</th><th>端口</th><th>业务线名称</th></tr></thead><tbody>{% for row in v1 %}<tr hid="{{ row.nid }}" bid="{{ row.b_id }}"><td>{{ row.hostname }}</td><td>{{ row.ip }}</td><td>{{ row.port }}</td>
{#                    查关联表的其他字段caption，这里b是关联表的对象名#}<td>{{ row.b.caption }}</td></tr>{% endfor %}</tbody></table><h1>字典</h1><table border="1" style="border-collapse: collapse;"><thead><tr><th>主机名</th><th>业务线名称</th></tr></thead><tbody>{% for row in v2 %}<tr hid="{{ row.nid }}" bid="{{ row.b_id }}"><td>{{ row.hostname }}</td>
{#                    查关联表的其他字段caption，这里b是关联表的对象名#}<td>{{ row.b__caption }}</td></tr>{% endfor %}</tbody></table><h1>元组</h1><table border="1" style="border-collapse: collapse;"><thead><tr><th>主机名</th><th>业务线名称</th></tr></thead><tbody>{% for row in v3 %}<tr hid="{{ row.0 }}" bid="{{ row.2 }}"><td>{{ row.1 }}</td><td>{{ row.3 }}</td>{#                    查关联表的其他字段caption，这里b是关联表的对象名#}<td>{{ row.b.caption }}</td></tr>{% endfor %}</tbody></table>
</body>
</html>

View Code

2.模板语言显示序号用forloop，只有for循环里有。

 1 <tbody>
 2                 {% for row in v1 %}
 3                     <tr hid="{{ row.nid }}" bid="{{ row.b_id }}">
 4                         <td>{{ forloop.counter  }}</td>
 5 　　　　　　　　　　　　　　{#在for循环里才有forloop，forloop.counter自动加序号，从1开始#}
 6 　　　　　　　　　　　　　　{#forloop.counter0自动加序号，从0开始#}
 7 　　　　　　　　　　　　　　{#forloop.revcounter自动加序号，倒数#}
 8                         <td>{{ row.hostname }}</td>
 9                         <td>{{ row.ip }}</td>
10                         <td>{{ row.port }}</td>
11                         <td>{{ row.b.caption }}</td>
12                     </tr>
13                 {% endfor %}
14         </tbody>

3.后端接收前端多选框、Ctrl多选的数据用method.getlist()

views.py

1     elif request.method == "POST":
2         app_name = request.POST.get('app_name')
3         host_list = request.POST.getlist('host_list')#当前端是多选传过来的数据时，用getlist接收，生成列表
4         print(app_name,host_list)
5 
6         obj = models.Application.objects.create(name=app_name)
7         obj.r.add(*host_list)  #多对多跨表添加数据：*列表名
8 
9         return redirect('/app')

html多选

1             <div class="group">
2                 <select id="host_list" name="host_list" multiple>
3                  #multiple是多选的意思
4                     {% for op in host_list %}
5                         <option value="{{ op.nid }}">{{ op.hostname }}</option>
6                     {% endfor %}
7                 </select>
8             </div>

4.编辑框的实现和ajax提交表单数据
d20-host.html

{#    下边是编辑框展示#}<div class="shade hide"></div><div class="add-modal hide"><form id="add_form" method="POST" action="/host"><div class="group"><input id="host" type="text" placeholder="主机名" name="hostname" /></div><div class="group"><input id="ip" type="text" placeholder="IP" name="ip" /></div><div class="group"><input id="port" type="text" placeholder="端口" name="port" /></div><div class="group"><select id="sel" name="b_id">{% for op in b_list %}
{#                        生成下拉框#}<option value="{{ op.id }}">{{ op.caption }}</option>{% endfor %}</select></div><input type="submit" value="提交" /><a id="ajax_submit" >悄悄提交</a><input id="cancel" type="button" value="取消" /><span id="erro_msg" style="color: red"></span>提交失败，错误信息显示</form>$('#ajax_submit').click(function(){$.ajax({url: "/test_ajax",type: 'POST',//data: {'hostname': $('#host').val(), 'ip': $('#ip').val(), 'port': $('#port').val(), 'b_id': $('#sel').val()},data: $('#add_form').serialize(), //serialize()是ajax方法，它能自动找到表单中的name和value数据并提交给后台，跟上边的效果相同
                    success: function(data){var obj = JSON.parse(data);if(obj.status){location.reload();//提交成功自动刷新页面}else{$('#erro_msg').text(obj.error);//提交失败显示错误信息}}})});

views.py
后台数据接收

 1     elif request.method == "POST":
 2 
 3         h = request.POST.get('hostname')
 4         i = request.POST.get('ip')
 5         p = request.POST.get('port')
 6         b = request.POST.get('b_id')
 7         models.Host.objects.create(hostname=h,
 8                                                ip=i,
 9                                                port=p,
10                                                b_id=b,
11                                                )
12         return redirect('/host')

5.初识ajax，ajax发送普通数据与发送列表

重要：在html中写ajax

ajax操作要点：
1. <form id='ajax_text'action='/yy.html' method='post'>  #id='ajax_text'方便ajax获取数据；action='/yy.html'点击取消后
                                                         跳转到的页面；2.    <input  id="ajax_submit" type="button" value="提交" /> #id="ajax_submit" ：方便ajax进行绑定</form>    
3.       <span id="error_msg" style="color: white"></span>  #显示提示信息4.            $('#ajax_submit').click(function(){$.ajax({url: "/test_ajax",type: 'POST',dataType:'JSON',  #自动转换json数据
                    traditional:true,data: $('#add_form').serialize(),//ajax用serialize()提交表单数据，serialize()能自动获取表单中的name和value并提交给后台success: function(data){if(data.status){location.reload();  //自动刷新页面}else{$('#error_msg').text(data.error); //在模态对话框里显示错误信息}}})});

ajax格式：

 1 Ajax格式：在html的script中
        A.发送数据格式为普通数据data: {'k1': 123,'k2': "root"},
 2     
 3         $.ajax({
 4             url: '/host',    //数据提交的url
 5             type: "POST",    //数据提交方式，除了post还有get
 6             data: {'k1': 123,'k2': "root"},  //要给后端发送提交的数据，data只能是字典
               dataType:'JSON',   //写上这句，就不用再在下边做字符串与字典转换了，ajax内部自动转换
 7             success: function(data){    //success里写函数
 8                 // data是服务器端返回的字符串
 9                 var obj = JSON.parse(data); //有了上边的dataType:'JSON',这里就不用做字符串转换成字典了
10             }
11         })
12    B.发送数据格式为列表：data: {'user': 123,'host_list': [1,2,3,4]},

　　　　　　$.ajax({
　　　　　　     url: '/ajax_add_app',  
　　　　　　     data: {'user': 123,'host_list': [1,2,3,4]},或
　　　　　　   data: $('#add_form').serialize(), //这里serialize()会找到id=add_form的表单，（这里id必须为表单<form>的id）并且自动获取form表单中的name和value，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　因此不用再写成data: {'user': 123,'host_list': [1,2,3,4]}这样了
　　　　 type: "POST",
　　　　 dataType: 'JSON',// 内部 自动将字符串转换为字典
　　　　　　 traditional: true, //要发送列表必须要加traditional: true参数，否则发送为空
success: function(obj){ //请求成功，要发送的数据
　　 console.log(obj);
　　　　　　 },
　　　　　　 error: function () { //请求失败，要发送的数据
 }
})

13 14  建议：永远让服务器端返回一个字典 15 16 return HttpResponse(json.dumps(字典))

后端views.py，后端一定要永远给前端返回一个字典，而且return一定要返回HttpResponse

 1 def test_ajax(request):
 2     ret = {'status': True, 'error': None, 'data': None}  #初始化一个字典
 3     try:      #获取ajax请求
 4         h = request.POST.get('hostname')
 5         i = request.POST.get('ip')
 6         p = request.POST.get('port')
 7         b = request.POST.get('b_id')
 8         if h and len(h) > 5:   #判断用户名的长度是否大于5，如果小于5则返回error值
 9             models.Host.objects.create(hostname=h,
10                                            ip=i,
11                                            port=p,
12                                            b_id=b)
13         else:
14             ret['status'] = False
15             ret['error'] = "太短了"
16     except Exception as e:
17         ret['status'] = False
18         ret['error'] = '请求错误'
19     return HttpResponse(json.dumps(ret))  #这里只能用HttpResponse，而且HttpResponse里边只能写字符串，所以往前端传输字典的时候要将字典序列化成字符串

前端html,在js里，通过var obj = JSON.parse(data); 将后端发过来的字符串转换为字典

 1 <div class="add-modal hide">
 2         <form id="add_form" method="POST" action="/host">
 3             <div class="group">
 4                 <input id="host" type="text" placeholder="主机名" name="hostname" />
 5             </div>
 6             <div class="group">
 7                 <input id="ip" type="text" placeholder="IP" name="ip" />
 8             </div>
 9 
10             <div class="group">
11                 <input id="port" type="text" placeholder="端口" name="port" />
12             </div>
13 
14             <div class="group">
15                 <select id="sel" name="b_id">
16                     {% for op in b_list %}
17                     <option value="{{ op.id }}">{{ op.caption }}</option>
18                     {% endfor %}
19                 </select>
20             </div>
21 
22             <input type="submit" value="提交" />
23             <a id="ajax_submit" >悄悄提交</a>
24             <input id="cancel" type="button" value="取消" />
25             <span id="erro_msg" style="color: red"></span>
26             {#  span显示错误信息#}
27         </form>
28 
29  <script>
30 $('#ajax_submit').click(function(){
31                 $.ajax({
32                     url: "/test_ajax",
33                     type: 'POST',
34                     //data: {'hostname': $('#host').val(), 'ip': $('#ip').val(), 'port': $('#port').val(), 'b_id': $('#sel').val()},
35                     data: $('#add_form').serialize(),//ajax用serialize()提交表单数据，serialize()能自动获取表单中的name和value并提交给后台，效果跟上边这句一样
36                     success: function(data){
37                         var obj = JSON.parse(data);   //js将字符串转换为字典
38                         var dd = JSON.stringify(obj) //js将字典转换为字符串
39                         if(obj.status){
40                             location.reload();  //自动刷新页面
41                         }else{
42                             $('#erro_msg').text(obj.error); //在模态对话框里显示错误信息
43                         }
44                     }
45                 })
46             });
47  </script>

View Code

6.多对多创建关系表有2种方式
方式一：自定义关系表。推荐用这种方式创建

            class Host(models.Model):nid = models.AutoField(primary_key=True)hostname = models.CharField(max_length=32,db_index=True)ip = models.GenericIPAddressField(protocol="ipv4",db_index=True)port = models.IntegerField()b = models.ForeignKey(to="Business", to_field='id')# 10class Application(models.Model):name = models.CharField(max_length=32)# 2class HostToApp(models.Model):#生成hosttoapp关联表，该表有三列，分别是id、hobj_nid、aobj_id，还可以自定义增加其他列名hobj = models.ForeignKey(to='Host',to_field='nid')aobj = models.ForeignKey(to='Application',to_field='id')

在往方式一创建的关系表hosttoapp表中插入数据的时候，直接用普通的orm语句即可：

HostToApp.objects.create(hobj_id=1,aobj_id=2)

方式二：自动创建关系表。这种方式通过两个类可以创建三张表

            class Host(models.Model):nid = models.AutoField(primary_key=True)hostname = models.CharField(max_length=32,db_index=True)ip = models.GenericIPAddressField(protocol="ipv4",db_index=True)port = models.IntegerField()b = models.ForeignKey(to="Business", to_field='id')# 10class Application(models.Model):name = models.CharField(max_length=32)r = models.ManyToManyField("Host") #这里用ManyToManyField关键字，可以自动创建第三张表----即host与application表之间的关联表，表名是：app01_application_r;
                                                    其中app01是项目名，该表中含有三列，分别是：id、application_id、host_id，但该表不能自定义增加其他列

通过方式二创建的关系表app01_application_r表，是无法直接向该表插入数据的。要操作数据必须用以下方式：

obj = Application.objects.get(id=1) #获取application表application_id=1所有数据的对象
　　　　　　　　查obj.name  #获取application_id=1对应所有数据的应用名# 第三张表（关系表）操作
　　　　　　　　增
　　　　　　　　添加数据操作，有三种方式：1、obj.r.add(1)  添加数据。这里的1是另一列host_id的数值，即在application表中添加application_id=1，host_id=1obj.r.add(2)2、obj.r.add(2,3,4) 添加数据。这里的2，3,4是另一列host_id的数值，即在application表中添加application_id=1，host_id=2；application_id=1，host_id=3；
                             application_id=1，host_id=4的数值3、obj.r.add(*[1,2,3,4]) 添加数据。这里的1,2，3,4是另一列host_id 的数值，即在application表中添加application_id=1，host_id=1；application_id=1，host_id=2；
application_id=1，host_id=3；application_id=1，host_id=4的数值 
             删    obj.r.remove(1)   删除数据obj.r.remove(2,4)obj.r.remove(*[1,2,3])obj.r.clear()    清除数据。清除application表中application_id=1所对应的所有host_id的值改obj.r.set([3,5,7]) 修改数据。列表不加*，将application_r表中application_id=1所对应的所有host_id的值修改为3，5，7，即表中application_id=1所对应的所有host_id的值只剩下3，5，7# 通过关系表app01_application_r查询host表
　　　　　　　obj = Application.objects.get(id=1)ss = obj.r.all() 这里ss是querySet，这个querySet里存放的是application_id=1包括的所有host_id对应host表的一行行数据对象，也就是说ss就是host表中相应host_id所在行的数据对象集合，
                             要获取每个host行对象的详细信息，要用for循环
                             for h in ss:
　　　　　　　　　　　　　　　　　　  print(h.hostname,h.id,h.port)

7.多对多增加、编辑示例，用ajax,详见d20-12

views.py

from django.shortcuts import render,HttpResponse,redirect
from app01 import models
import json
# Create your views here.def business(request):v1 = models.Business.objects.all()# QuerySet# [obj(id,caption,code),obj(id,caption,code),obj(id,caption,code) ]
v2 = models.Business.objects.all().values('id','caption')# QuerySet# [{'id':1,'caption': '��ά��'},{'id':1,'caption': '��ά��'},...]
v3 = models.Business.objects.all().values_list('id','caption')# QuerySet# [(1����ά��),(2,����)]return render(request, 'business.html', {'v1': v1,'v2': v2, 'v3': v3})# def host(request):
#     v1 = models.Host.objects.filter(nid__gt=0)
#     # QuerySet [hostobj(ip.host,����һ������(..)),]
#     # for row in v1:
#     #     print(row.nid,row.hostname,row.ip,row.port,row.b_id,row.b.caption,row.b.code,row.b.id,sep='\t')
#     #     print(row.b.fk.name)
#     # return HttpResponse("Host")
#     v2 = models.Host.objects.filter(nid__gt=0).values('nid','hostname','b_id','b__caption')
#     # QuerySet: [ {} ]
#     # print(v2)
#     # for row in v2:
#     #     print(row['nid'],row['hostname'],row['b_id'],row['b__caption'])
#
#     v3 = models.Host.objects.filter(nid__gt=0).values_list('nid','hostname','b_id','b__caption')
#     # QuerySet: [ {} ]
#     # print(v2)
#     return render(request, 'host.html', {'v1': v1,'v2': v2,'v3': v3})def host(request):if request.method == "GET":v1 = models.Host.objects.filter(nid__gt=0)v2 = models.Host.objects.filter(nid__gt=0).values('nid','hostname','b_id','b__caption')v3 = models.Host.objects.filter(nid__gt=0).values_list('nid','hostname','b_id','b__caption')b_list = models.Business.objects.all()return render(request, 'host.html', {'v1': v1,'v2': v2,'v3': v3,'b_list':b_list})elif request.method == "POST":h = request.POST.get('hostname')i = request.POST.get('ip')p = request.POST.get('port')b = request.POST.get('b_id')# models.Host.objects.create(hostname=h,#                            ip=i,#                            port=p,#                            b=models.Business.objects.get(id=b)#                            )models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b)return redirect('/host')def test_ajax(request):ret = {'status': True, 'error': None, 'data': None}  #初始化一个字典try:      #获取ajax请求h = request.POST.get('hostname')i = request.POST.get('ip')p = request.POST.get('port')b = request.POST.get('b_id')if h and len(h) > 5:   #判断用户名的长度是否大于5，如果小于5则返回error值models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b)else:ret['status'] = Falseret['error'] = "太短了"except Exception as e:ret['status'] = Falseret['error'] = '请求错误'return HttpResponse(json.dumps(ret))  #HttpResponse里边只能写字符串，所以往前端传输字典的时候要将字典序列化成字符串def app(request):if request.method == "GET":app_list = models.Application.objects.all()# for row in app_list:#     print(row.name,row.r.all())
host_list = models.Host.objects.all()  #从host表取host数据，来生成host列表下拉框return render(request,'app.html',{"app_list": app_list,'host_list': host_list})elif request.method == "POST":app_name = request.POST.get('app_name')host_list = request.POST.getlist('host_list')#  后端获取列表数据用getlistprint(app_name,host_list)obj = models.Application.objects.create(name=app_name)obj.r.add(*host_list)  #往关系表中添加数据，这里的host_list是列表，所以要加*号return redirect('/app')def ajax_add_app(request):ret = {'status':True, 'error':None, 'data': None}app_name = request.POST.get('app_name')host_list = request.POST.getlist('host_list')obj = models.Application.objects.create(name=app_name)obj.r.add(*host_list)return HttpResponse(json.dumps(ret))

View Code

app.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.host-tag{display: inline-block;padding: 3px;border: 1px solid red;background-color: palevioletred;}.hide{display: none;}.shade{position: fixed;top: 0;right: 0;left: 0;bottom: 0;background: black;opacity: 0.6;z-index: 100;}.add-modal,.edit-modal{position: fixed;height: 300px;width: 400px;top:100px;left: 50%;z-index: 101;border: 1px solid red;background: white;margin-left: -200px;}</style>
</head>
<body><h1>应用列表</h1><div><input id="add_app" type="button" value="添加" /></div><table border="1"><thead><tr><td>应用名称</td><td>应用主机列表</td></tr></thead><tbody>{% for app in app_list %}<tr aid="{{ app.id }}"><td>{{ app.name }}</td><td>{% for host in app.r.all %}<span class="host-tag" hid="{{ host.nid }}"> {{ host.hostname }} </span>{% endfor %}</td><td><a class="edit">编辑</a></td></tr>{% endfor %}</tbody></table><div class="shade hide"></div><div class="add-modal hide"><form id="add_form" method="POST" action="/app"><div class="group"><input id="app_name" type="text" placeholder="应用名称" name="app_name" /></div><div class="group"><select id="host_list" name="host_list" multiple>multiple是按住Ctrl多选，这里做一个下拉框，来进行多选选择{% for op in host_list %}<option value="{{ op.nid }}">{{ op.hostname }}</option>这里的op.nid就是每个hostname对应的id，提交的时候，就会将这些选中的op.nid以列表的形式提交给后端{% endfor %}</select></div><input type="submit" value="提交" /><input id="add_submit_ajax" type="button" value="Ajax提交" /></form></div><div class="edit-modal hide"><form id="edit_form" method="POST" action="/host"><input type="text" name="nid" style="display:none" /><input type="text" placeholder="应用名称" name="app" /><select name="host_list" multiple>multiple是按住Ctrl多选，这里做一个下拉框，来进行多选选择{% for op in host_list %}<option value="{{ op.nid }}">{{ op.hostname }}</option>{% endfor %}</select><a id="ajax_submit_edit" >确认编辑</a></form></div><script src="/static/jquery-1.12.4.js"></script><script>$(function(){$('#add_app').click(function(){$('.shade,.add-modal').removeClass('hide');});$('#cancel').click(function(){$('.shade,.add-modal').addClass('hide');});$('#add_submit_ajax').click(function(){$.ajax({url: '/ajax_add_app',// data: {'user': 123,'host_list': [1,2,3,4]},
                    data: $('#add_form').serialize(),type: "POST",dataType: 'JSON', // 内部
                    traditional: true,success: function(obj){console.log(obj);},error: function () {}})});$('.edit').click(function(){$('.edit-modal,.shade').removeClass('hide');var hid_list = [];$(this).parent().prev().children().each(function(){var hid = $(this).attr('hid');hid_list.push(hid)});$('#edit_form').find('select').val(hid_list);// 如果发送到后台//
                /*obj = models.Application.objects.get(id=ai)obj.name = "新Name"obj.save()obj.r.set([1,2,3,4])*/})})</script>
</body>
</html>