• 一个实用的链接导航页的站点设计 支持自定义链接

    前台

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     {%include "public_header.html"%}
    5.     <link  href="/static/bootstrap/bootstrap.min.css" rel="stylesheet" />
    6. <script src="/static/bootstrap/jquery.min.js"  type="text/javascript"></script>
    7. <script src="/static/bootstrap/bootstrap.min.js"  type="text/javascript"></script>
    8.  
    9.     <meta charset="UTF-8">
    10.     <meta name="viewport"
    11.           content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    12.     <meta name="apple-mobile-web-app-capable" content="yes"/>
    13.     <title>运维自动化导航页</title>
    14.     <style>
    15.         body {
    16.             background: #f7f7f7;
    17.             margin: 10px;
    18.             background-image:url('/static/images/bg.png');
    19.             background-repeat:no-repeat;
    20.             background-size:100% 100%;
    21.             -moz-background-size:100% 100%;
    22.         }
    23.  
    24.     </style>
    25. </head>
    26. <script>
    27.     $(document).ready(function(){
    28.         $("li").mouseover(function(){
    29.             $(this).css("background-color","#FCF590");
    30.             //$(this).animate({top:"-=10px"},"fast");
    31.         });
    32.         $("li").mouseout(function(){
    33.             $(this).css("background-color","#DBEDFC");
    34.             //$(this).animate({top:"+=10px"},"fast");
    35.         });
    36.     });
    37.     add_link=function(){
    38.         $('#dlg_title').text('添加链接');
    39.         $('#dialog').modal('show');
    40.     };
    41.     do_add_link=function(){
    42.         $.post('/url?action=add',{"class":$("#class").val(),"title":$("#title").val(),"url":$("#url").val()},function(d,s){
    43.             if(s=="success"){
    44.                 $('#dialog').modal('hide');
    45.                 location.reload();
    46.             }
    47.         });
    48.     };
    49.     link_del=function(cls,title){
    50.         $.post('/url?action=del',{"class":cls,"title":title},function(d,s){
    51.             if(s=="success"){
    52.                 $('#dialog').modal('hide');
    53.                 location.reload();
    54.             }
    55.         });
    56.     };
    57. </script>
    58. <body>
    59. <div class="modal fade" id="dialog" tabindex="-1" role="dialog" aria-hidden="true">
    60.     <div class="modal-dialog" style="width:calc(50vw);">
    61.         <div class="modal-content"  >
    62.             <div class="modal-header">
    63.                 <button type="button" class="close"  data-dismiss="modal" aria-hidden="true">&times;</button>
    64.                 <h4 class="modal-title"><span id="dlg_title"></span></h4>
    65.             </div>
    66.             <div class="modal-body">
    67.                 <input type="text" id="class" class="form-control" placeholder="分类名称">
    68.                 <input type="text" id="title" class="form-control"  placeholder="标题">
    69.                 <input type="text" id="url" class="form-control"  placeholder="链接URL">
    70.                 <button onclick="do_add_link()" class="btn btn-primary">添加</button>
    71.             </div>
    72.         </div>
    73.     </div>
    74. </div>
    75. <h1 class="text-center" style="font-weight:bolder">运维导航页</h1>
    76. <div style="width:1200px;position:relative;left:calc(100vw/2);transform:translateX(-50%);">
    77.     <div class="row">
    78.         {% for class in nav %}
    79.             <div style="background-color:rgba(199,212,247,0.2);padding:8px;margin:10px;box-shadow: 1px 1px 10px #888888;">
    80.                 <h4 style="margin:2px;font-weight:bolder;" ><span style="color:blue" class="glyphicon glyphicon-link"></span>{{class.class}}</h4>
    81.                 <ul style="margin:1px;padding:1px;display:flex;flex-wrap:wrap">
    82.                 {% for item in class.items %}
    83.                     <li style="border-radius:6px;position:relative;margin:4px;padding:4px;border:1px solid #E5E5E5;list-style:none;background-color:#DBEDFC;display:inline-block;">
    84.                         <h4 style="margin:0px;padding:2px;">{{item.title}}</h4>
    85.                         <h4 style="margin:0px;padding:2px;"><a href="{{item.url}}" target="_blank" class="btn btn-default">{{item.url}}</a></h4>
    86.                     </li>
    87.                 {% endfor %}
    88.                 </ul>
    89.             </div>
    90.         {% endfor %}
    91.         {% for class in nav2 %}
    92.             <div style="background-color:rgba(199,212,247,0.2);padding:8px;margin:10px;box-shadow: 1px 1px 10px #888888;">
    93.                 <h4 style="margin:2px;font-weight:bolder;" ><span style="color:blue" class="glyphicon glyphicon-link"></span>{{class.class}}</h4>
    94.                 <ul style="margin:1px;padding:1px;display:flex;flex-wrap:wrap">
    95.                 {% for item in class.items %}
    96.                     <li style="border-radius:6px;position:relative;margin:4px;padding:4px;border:1px solid #E5E5E5;list-style:none;background-color:#DBEDFC;display:inline-block;">
    97.                        <button type="button" class="close" data-dismiss="li" aria-hidden="true" onclick="link_del('{{class.class}}','{{item.title}}')">&times;</button>
    98.                         <h4 style="margin:0px;padding:2px;">{{item.title}}</h4>
    99.                         <h4 style="margin:0px;padding:2px;"><a href="{{item.url}}" target="_blank" class="btn btn-default">{{item.url}}</a></h4>
    100.                     </li>
    101.                 {% endfor %}
    102.                 </ul>
    103.             </div>
    104.         {% endfor %}
    105.         <div style="background-color:rgba(199,212,247,0.2);padding:8px;margin:10px;box-shadow: 1px 1px 10px #888888;">
    106.             <input type="button" class="btn btn-md btn-info" value="添加链接" onclick="add_link()">
    107.         </div>
    108.  
    109.     </div>
    110. </div>
    111. </body>
    112. </html>

    python-路由器urls.py

    1. #url
    2. from django.contrib import admin
    3. from django.urls import path, re_path
    4. from . import views
    5. from django.contrib.staticfiles.views import serve
    6.  
    7. urlpatterns = [
    8.     path('admin', admin.site.urls),
    9.     path("",views.index),
    10.     path('index',views.index),
    11.     path('url',views.url),
    12.     path('favicon.ico', serve, {'path': 'images/favicon.ico'}),
    13. ]

    python-控制器views.py

    1. #views
    2. import datetime
    3.  
    4. from django.contrib import auth
    5. from django.contrib.auth.decorators import login_required
    6. from django.shortcuts import render,HttpResponse,HttpResponseRedirect,redirect,reverse
    7. from django.http import HttpRequest,JsonResponse,HttpResponseForbidden
    8. from django.views.decorators.csrf import csrf_exempt
    9. import log.log as log
    10. import json
    11. import re
    12. import base.lib as lib
    13.  
    14. def index(request:HttpRequest):
    15.     context = {"nav":[
    16.         {"class":"测试1","items":[
    17.             {"title":"测试1","url":"http://192.168.1.1/"},
    18.             {"title": "测试1", "url": "http://192.168.1.1/"},
    19.             {"title": "测试1", "url": "http://192.168.1.1/"}]},
    20.         {"class":"测试1","items":[
    21.             {"title":"测试1","url":"http://192.168.1.1/"},
    22.             {"title": "测试1", "url": "http://192.168.1.1/"},
    23.             {"title": "测试1", "url": "http://192.168.1.1/"}]},
    24.         {"class":"测试1","items":[
    25.             {"title":"测试1","url":"http://192.168.1.1/"},
    26.             {"title": "测试1", "url": "http://192.168.1.1/"},
    27.             {"title": "测试1", "url": "http://192.168.1.1/"}]},
    28.         {"class":"测试1","items":[
    29.             {"title":"测试1","url":"http://192.168.1.1/"},
    30.             {"title": "测试1", "url": "http://192.168.1.1/"},
    31.             {"title": "测试1", "url": "http://192.168.1.1/"}]},
    32.     ]}
    33.     js=lib.read()
    34.     if js:
    35.         context["nav2"]=js
    36.     response = render(request, "index.html", context)
    37.     return response
    38. def url(request:HttpRequest):
    39.     if "action" in request.GET.keys() and request.GET["action"]=="add":
    40.         cls,title,url=request.POST["class"],request.POST["title"],request.POST["url"]
    41.         js=lib.read()
    42.         if js and "class" in js[0].keys():
    43.             clss=[item["class"] for item in js]
    44.             i=clss.index(cls)
    45.             if i>=0:
    46.                 js[i]["items"].append({"title":title,"url":url})
    47.                 lib.write(js)
    48.                 return JsonResponse({"code":1})
    49.         else:
    50.             js=[
    51.                 {"class":cls,"items":[
    52.                     {"title":title,"url":url}]
    53.                  }
    54.             ]
    55.             lib.write(js)
    56.             return JsonResponse({"code": 1})
    57.     if "action" in request.GET.keys() and request.GET["action"]=="del":
    58.         cls,title=request.POST["class"],request.POST["title"]
    59.         js=lib.read()
    60.         if js and "class" in js[0].keys():
    61.             clss=[item["class"] for item in js]
    62.             i=clss.index(cls)
    63.             if i>=0:
    64.                 items=js[i]["items"]
    65.                 for item in items[:]:
    66.                     if item["title"]==title:
    67.                         items.remove(item)
    68.                 lib.write(js)
    69.                 return JsonResponse({"code":1})
    70.     return JsonResponse({"code": 0})
    71. def forbid(request:HttpRequest):
    72.     return HttpResponseForbidden()

    python-数据处理函数库lib.py

    1. #lib
    2. from navigate.settings import BASE_DIR
    3. import os
    4. import pickle
    5. import json
    6.  
    7. def read():
    8.     js=os.path.join(BASE_DIR,'js')
    9.     if os.path.exists(js):
    10.         with open(js,'r') as f:
    11.             return json.loads(f.read())
    12.             # return pickle.load(f)
    13.     else:
    14.         return []
    15. def write(obj):
    16.     js = os.path.join(BASE_DIR, 'js')
    17.     with open(js,'w') as f:
    18.         f.write(json.dumps(obj))
    19.         # pickle.dump(obj,f)

  • 相关阅读:
    Debezium同步之Vitess数据到Kafka的同步
    网上期货开户合约签署流程
    vue-rouer 路由
    想让你的工作轻松高效吗？揭秘Java + React导出Excel/PDF的绝妙技巧！
    【爬虫系列】Python 爬虫入门（1）
    docker镜像的导入导出
    浙江大学漏洞报送证书
    Android 系统启动流程解析
    leetcode第80题：删除有序数组中的重复项 II
    jQuery 第三章（语法+选择器+事件）
  • 原文地址：https://blog.csdn.net/chscomfaner/article/details/127879182